Hydrogen SSO using an IDP for Shopify New Customer Accounts

Overview

miniOrange offers a robust solution for implementing Hydrogen SSO using an Identity Provider (IdP) for Shopify new customer accounts. By integrating Shopify SSO with an Identity Provider (IdP), miniOrange enables customers to use a single set of credentials across multiple applications, significantly enhancing user convenience and streamlining the login process. This solution not only simplifies account creation and access but also bolsters security by leveraging the advanced authentication protocols of the IdP. Moreover, it provides a centralized account management system, allowing administrators to efficiently manage user access and permissions. With miniOrange's expertise, businesses can ensure a seamless, secure, and user-friendly experience for their customers.

Install Application Pricing Plans

Pre-requisites: Application Installation

• Log in to your Shopify Admin.
• Go to Apps → Shopify App Store
• Search for miniOrange Single Sign-On – SSO
• Click Install to add the app to your store
• Open the app from Apps to start Hydrogen SSO configuration

Step by Step Guide to Configure Hydrogen as IDP for SSO into Shopify

Step 1: Get Service Provider Metadata from Shopify

• Go to your Shopify store & navigate to the App section and click on Single Sign On - SSO login application.

• Click on the Add Identity Provider button to add your IDP.

• Select SAML protocol.

• From the list of identity providers (IDPs), select Custom IDP.

• Click on the Get Metadata button to retrieve the Service Provider (Shopify) metadata.

• Navigate to the SP Initiated Metadata section and copy down the ACS URL and Entity ID or Issuer.

• These details will help in configuring your identity provider.

Step 2: Configure your Identity Provider (IDP)

• You can configure Hydrogen SSO for Shopify New Customer Accounts with various identity providers like Microsoft Entra ID, Auth0, Okta, Salesforce and many more.
• To configure Shopify as a service provider in your preferred IDP, you can follow step-by-step guides from here.

• Navigate back to the miniOrange Single Sign On-SSO application and click on the Add Identity Provider button.

• Select SAML protocol.

• From the list of identity providers (IDPs), select Custom IDP.

• Click on the Import IDP Metadata button.

• Select the upload method as Metadata Link. Paste the copied XML file link from Step 1 and Click on Import.

• Add the appropriate IDP Name and click on Save.

You have completed Shopify side configuration.

Step 3: Enable & Test SSO Configurations

Select Shopify Store Type:

• Non-Plus Store
• Plus Store

SSO Configuration in Non-Plus Shopify Stores

Choose the type of account you have enabled on your Shopify Store:

• Customer Accounts
• Legacy Customer Accounts

• Go to the application dashboard, enable the customer accounts extension as shown in the below image.

• Enable the New Customer Accounts extension and click on Save.

• Navigate to the application home page and enable the IDP Login toggle option against the IDP you have configured.

• Go to the application dashboard, you will see a warning box to add the login button extension on the Account page, click on the login widget extension link as shown in the below image to enable it.

• Navigate to the application home page and enable the IDP Login toggle option against the IDP you have configured.

• If you want to configure SSO into Shopify using multiple IDPs, then select your IDP from the list provided here, and setup SSO using that IDP.
• Enable the IDP login toggle option for enabling SSO into Shopify using multiple IDPs.

SSO Configuration in Plus Shopify Stores

Choose the type of account you have enabled on your Shopify Store:

• Customer Accounts
• Legacy Customer Accounts

• Go back to the SSO application, and navigate to Connect Store tab. Copy the Client ID, Client Secret, Post-Logout Redirect URL and Discovery Endpoint URL and keep them handy.

• Click on the Customer Accounts link as shown in the below image.

• Select the Customer accounts option recommended by Shopify & look for the Identity Provider option, if not present please reach out to shopifysupport@xecurify.com.

• If the identity provider is present, click on Manage.

• Click on Connect to Provider button.

• Add the Identity Provider name and fill in the details such as Discovery endpoint URL, Client ID, Client secret, Additional Scopes, Post-logout redirect URI parameter that you copied from above step. Click on Save.

• Once the Identity Provider has been added, do the Test Connection.

• After verifying the flow make the identity provider as Active.

• Navigate to the application home page and enable the IDP Login toggle option against the IDP you have configured.

• Now, click on the Setup Guide button and follow the steps mentioned to get multipass token.

• Enable the Multipass Token option. Refer to this Faq to get the Multipass token value and paste it in the below field.

• Click on Save.

• Go to the application dashboard, you will see a warning box to add the login button extension on the Account page, click on the login widget extension link as shown in the below image to enable it.

• Navigate to the application home page and enable the IDP Login toggle option against the IDP you have configured.

• If you want to configure SSO into Shopify using multiple IDPs, then select your IDP from the list provided here, and setup SSO using that IDP.
• Enable the IDP login toggle option for enabling SSO into Shopify using multiple IDPs.

Step 4: Testing SSO

Testing SSO into Shopify using your custom identity provider credentials.

• Go to your Hydrogen storefront login.
• Click on the Sign In button.

• You’ll be redirected to the login page of the identity provider you configured. Log in with your IDP account credentials.
• You can see that you have successfully logged in into your Hydrogen storefront.