Add Sign in with Shop to your external login page

Sign in with Shop provides a secure and streamlined way for users with existing Shop accounts to authenticate on your platform. This tutorial shows you how to integrate Sign in with Shop using OpenID Connect (OIDC), whether you host your own login page or use a third-party identity platform. By incorporating Sign in with Shop into your login process, you'll provide users with a frictionless, trusted authentication experience.

Anchor to What you'll learnWhat you'll learn

In this tutorial, you'll learn how to:

• Configure the Sign in with Shop API client in Shopify admin.
• Create and add the official Sign in with Shop button to your login page.
• Locate the necessary OpenID Connect (OIDC) endpoints.
• Integrate Sign in with Shop with common third-party identity platforms using OIDC.
• Integrate Sign in with Shop on a self-hosted login page.

Anchor to RequirementsRequirements

• You've activated Shop Pay on your store.
• You've installed Shop sales channel on your store.
• You've configured your store to connect a custom identity provider and/or you're building headless.
• You are familiar with OpenID Connect (OIDC) concepts and the authentication flow you're implementing (third-party platform or self-hosted).
• Admin access to configure your third-party identity platform or your self-hosted login page.

Anchor to Step 1: Set up your API clientStep 1: Set up your API client

Activate the Sign in with Shop API client in your Shopify admin to get the necessary credentials:

1. In your Shopify admin, go to the Shop sales channel settings page and activate your Sign in with Shop API client.
2. Copy and securely store your Client ID and Client Secret. If you lose access to your secret or if it's been compromised, you can revoke it and generate a new one in your Shopify admin.
3. Configure the following Redirect URLs based on your integration type:
   • Third-party identity platform: Enter the callback URL provided by your identity provider (such as Auth0, Ping Identity, or AWS Cognito). Refer to your provider's documentation for the callback URL format.
   • Self-hosted login page: Enter your own callback URL (e.g., https://your-domain.com/auth/callback).

Anchor to Step 2: Get the official Shop buttonStep 2: Get the official Shop button

Use our official Sign in with Shop button on your login page. Using the Shopify button ensures brand consistency and helps users recognize a trusted sign-in method. Choose one of the following options:

Anchor to Option 1: Customize your Shop buttonOption 1: Customize your Shop button

Use our interactive button builder to create and customize your Sign in with Shop button:

Anchor to Shop buttonShop button

Anchor to CSS PropertiesCSS Properties

Anchor to Option 2: Use pre-approved buttonsOption 2: Use pre-approved buttons

As an alternative to using a custom image button, you can download our pre-approved Sign in with Shop buttons provided in PNG and SVG formats.

PNG

SVG

Anchor to Step 3: Integrate your login pageStep 3: Integrate your login page

Choose the integration method matching how your login page is hosted. Before you begin, ensure you have the following ready:

• Client ID and Client Secret
• Sign in with Shop button (if you are not integrating with Auth0)

Anchor to Option 1: Integrate with a third-party identity platformOption 1: Integrate with a third-party identity platform

You can use a third-party identity platform (such as Auth0, Ping Identity, or AWS Cognito), or use your own self-hosted login page.

Anchor to Auth0Auth0

Go to the Sign in with Shop listing on the Auth0 marketplace, click Add Integration, and follow the installation guide.

Anchor to Other platformsOther platforms

1. Follow your identity provider's instructions to add a social login or custom OIDC connection.
2. Use the Client ID and Client Secret you saved from Step 1.
3. Use the following values to configure your OIDC connection:

4. Set the required scopes to openid email. Optionally, you can add the profile scope to retrieve the user's name and picture.
5. Add the official Sign in with Shop button in your identity platform's login page or template.
6. Enable Proof Key for Code Exchange (PKCE) with code challenge method S256.
7. Finalize your platform-specific configuration:

Anchor to Option 2: Integrate with a self-hosted login pageOption 2: Integrate with a self-hosted login page

If you maintain your own login page, you'll need to implement the OIDC authentication flow:

1. Choose one of the following options to add the Sign in with Shop button:

   • Use the button builder or pre-approved buttons from Step 2 with your own click handler.

   • Use our JavaScript SDK component that handles the button and click behavior:

     Copy

     99

     1

     2

     3

     4

     5

     6

     7

     8

     9

     10

     11

     12

     13

     14

     15

     16

     17

     18

     19

     20

     21

     <script type="module" src="https://cdn.shopify.com/shopifycloud/shop-js/modules/v2/loader.shop-login-button.esm.js"></script>

     <style>

     shop-login-button {

     --button-padding-inline: 12px;

     --button-padding-block: 2px;

     --buttons-radius: 8px;

     --font-paragraph--size: 18px;

     --font-paragraph--line-height: 20px;

     }

     </style>

     <shop-login-button

     ux-mode="redirect"

     client-id="YOUR_CLIENT_ID" // Replace with your Client ID from Step 1

     code-challenge-method="S256"

     code-challenge="GENERATED_CODE_CHALLENGE" // Replace with generated PKCE code challenge

     response-type="code"

     scope="openid email profile" // Include profile scope if needed

     redirect-uri="YOUR_REDIRECT_URI" // Replace with your callback URL from Step 1

     state="GENERATED_STATE" // Replace with a random state value

     analytics-context="loginWithShopSelfServe"

     />

     The <shop-login-button> component accepts the following attributes. All attributes are required unless specified as optional:

     Attribute	Value	Description
     client-id	Your Sign in with Shop API client ID	Obtained from Shopify admin
     ux-mode	redirect	Handles auth through page redirects
     code-challenge-method	S256	PKCE security method
     code-challenge	Random string hashed with SHA256	Prevents auth code interception
     response-type	code	Auth code flow type
     scope	Required: openid email. Optional: profile	Requested access permissions
     redirect-uri	Your callback URL	Where to send auth response
     state	Random string	Security parameter to prevent CSRF attacks
     analytics-context	loginWithShopSelfServe
     bordered	Optional Boolean attribute	When present, the button includes a light border
     full-width	Optional Boolean attribute	When present, the button expands to fill its container width

2. Implement the OIDC authorization flow:

   • Follow the OIDC authorization with PKCE guide
   • Use the OIDC endpoints from the endpoints table above

Anchor to LocalizationLocalization

Sign in with Shop supports multiple languages so users can login in their preferred language. This feature enhances user accessibility and helps you accommodate a diverse user base.

Anchor to Supported LocalesSupported Locales

Depending on the context, the Sign in with Shop button can display in different variants (variant) depending on the context:

• Sign in with Shop

• Continue with Shop

• Sign up with Shop.

  Regardless of the variant you choose, the text for each button text is translated according to the defined locale.

  For example, the following are the variants' translations in French:

• Sign in with Shop: Se connecter avec Shop

• Continue with Shop: Continuer avec Shop

• Sign up with Shop: S'inscrire avec Shop

  The ShopJS library supports and defines the following locales, which contains translations for the button text:

Anchor to Language Selection PriorityLanguage Selection Priority

The button's language selection is based on the following priority rules:

1. HTML Document Language: The system first checks whether the document specifies the language it's been written in. To do so, it reads the lang attribute set on the <html> element of your document. If this attribute is present and the specified language is supported, the button will display the corresponding translation.

   The following is an example of how to set the language in the HTML code:

   Copy

   9

   1

   2

   3

   4

   5

   6

   7

   8

   9

   <!DOCTYPE html>

   <html lang="en">

   <head>

   ...

   </head>

   <body>

   ...

   </body>

   </html>
   Tip

   Include the lang attribute in your HTML <html> tag as a best practise to provide a consistent user experience to your international users.

2. Browser setting: If the document doesn't specify the language, then the system checks the user's preferred languages set in their browser. If translations are available for one of those languages, then the button displays in one of the user's selected language, following the order of priority set in the browser.

3. Default language: If neither the HTML document language nor the browser setting is supported, then the button defaults to English.