---
title: Add Sign in with Shop to your external login page
description: Learn how to integrate Sign in with Shop on your external login page to provide a fast, secure sign-in experience. This guide covers integration with third-party identity platforms using OpenID Connect and implementation on self-hosted login pages.
source_url:
  html: https://shopify.dev/docs/apps/build/shop/sign-in-with-shop
  md: https://shopify.dev/docs/apps/build/shop/sign-in-with-shop.md
---

ExpandOn this page

* [What you'll learn](https://shopify.dev/docs/apps/build/shop/sign-in-with-shop#what-youll-learn)
* [Requirements](https://shopify.dev/docs/apps/build/shop/sign-in-with-shop#requirements)
* [Step 1: Set up your API client](https://shopify.dev/docs/apps/build/shop/sign-in-with-shop#step-1-set-up-your-api-client)
* [Step 2: Get the official Shop button](https://shopify.dev/docs/apps/build/shop/sign-in-with-shop#step-2-get-the-official-shop-button)
* [Step 3: Integrate your login page](https://shopify.dev/docs/apps/build/shop/sign-in-with-shop#step-3-integrate-your-login-page)
* [Localization](https://shopify.dev/docs/apps/build/shop/sign-in-with-shop#localization)

# 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.

***

## What you'll learn

In this tutorial, you'll learn how to:

* Configure the **Sign in with Shop** API client in [Shopify admin](https://admin.shopify.com/).
* Create and add the official **Sign in with Shop** button to your login page.
* Locate the necessary [OpenID Connect (OIDC)](https://openid.net/connect/) 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.

***

## Requirements

* You've [activated Shop Pay](https://help.shopify.com/en/manual/payments/shop-pay/activating-shop-pay) on your store.
* You've installed [Shop sales channel](https://help.shopify.com/en/manual/online-sales-channels/shop/setup#add-shop) on your store.
* You've configured your store to [connect a custom identity provider](https://help.shopify.com/en/manual/customers/customer-accounts/new-customer-accounts/identity-provider) and/or you're [building headless](https://shopify.dev/docs/storefronts/headless).
* You are familiar with [OpenID Connect (OIDC)](https://openid.net/connect/) 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.

***

## Step 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](https://admin.shopify.com/apps/shop-72/merchant/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`).

***

## Step 2: Get the official Shop button

Note

If you're using Auth0 as your identity provider, then you can skip this step as the **Sign in with Shop** button is available on the [Auth0 marketplace](https://marketplace.auth0.com/integrations/shop).

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:

### Option 1: Customize your Shop button

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

#### Shop button

| Attribute | Type | Description |
| - | - | - |
| `variant` | String | The updated version of the button with the revised text. Accepted values: `continue`, `sign-in`, `sign-up` or `logo`. |
| `disabled` | Boolean | An optional parameter. If `true`, then the button does nothing when clicked. Defaults to `false`. |
| `bordered` | Boolean | An optional parameter. If `true`, then the button includes a light border. Defaults to `false`. |
| `full-width` | Boolean | Whether the button will expand to fill its container width. |

#### CSS Properties

| **Name** | **Description** | **Constraints** |
| - | - | - |
| `--button-padding-inline` | The horizontal padding of the button. | Default: `32px` Minimum: `16px` |
| `--button-padding-block` | The vertical padding of the button. | Default: `14px` Minimum: `8px` |
| `--buttons-radius` | The border radius of the button. | Default: `12px` |
| `--font-paragraph--size` | The size of the button's font. | Default: `14px` Minimum: `12px` |
| `--font-paragraph--line-height` | The height of the button's text line. | Default: `16px` Minimum: `14px` |

### Option 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.

[![](https://shopify.dev/images/icons/48/image.png)![](https://shopify.dev/images/icons/48/image-dark.png)](https://shopify.dev/zip/Shop-button-PNGs.zip)

[PNG](https://shopify.dev/zip/Shop-button-PNGs.zip)

[![](https://shopify.dev/images/icons/48/vector.png)![](https://shopify.dev/images/icons/48/vector-dark.png)](https://shopify.dev/zip/Shop-button-SVGs.zip)

[SVG](https://shopify.dev/zip/Shop-button-SVGs.zip)

***

## Step 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)

### Option 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.

#### Auth0

Go to the **Sign in with Shop** listing on the [Auth0 marketplace](https://marketplace.auth0.com/integrations/shop), click `Add Integration`, and follow the installation guide.

#### Other 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:

| Endpoint | URL |
| - | - |
| Issuer | `https://accounts.shop.app` |
| Discovery | `https://accounts.shop.app/.well-known/openid-configuration` |
| Authorization | `https://accounts.shop.app/oauth/authorize` |
| Token | `https://accounts.shop.app/oauth/token` |
| UserInfo | `https://accounts.shop.app/oauth/userinfo` |
| JWKS | `https://accounts.shop.app/auth/jwks` |

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

| Platform | Instructions |
| - | - |
| **Ping Identity** | When creating the custom OIDC connection, map the email attribute:`Email Address → providerAttributes.email`Add the following application attribute mappings:• `sub → User ID`• `email → Email Address`• `email_verified → $(user.emailVerified == true \|\| true)` |
| **AWS Cognito** | When adding the OIDC identity provider, select **Email** as the required sign-in identifier and attribute. |
| **Other providers** | Follow your provider's documentation for creating a custom OIDC integration. Confirm you've properly configured all endpoints and scopes. |

### Option 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:

     ```javascript
     <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](https://openid.net/specs/openid-connect-core-1_0.html#CodeFlowAuth)
   * Use the OIDC endpoints from the endpoints table above

***

## Localization

**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.

### Supported 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:

| Locale Code | Language |
| - | - |
| `cs` | Czech |
| `da` | Danish |
| `de` | German |
| `el` | Greek |
| `en` | English |
| `es` | Spanish |
| `fi` | Finnish |
| `fr` | French |
| `hi` | Hindi |
| `hr-HR` | Croatian |
| `hu` | Hungarian |
| `id` | Indonesian |
| `it` | Italian |
| `ja` | Japanese |
| `ko` | Korean |
| `lt-LT` | Lithuanian |
| `ms` | Malay |
| `nb` | Norwegian Bokmål |
| `nl` | Dutch |
| `pl` | Polish |
| `pt-BR` | Portuguese - Brazil |
| `pt-PT` | Portuguese - Portugal |
| `ro-RO` | Romanian |
| `ru` | Russian |
| `sk-SK` | Slovak |
| `sl-SI` | Slovenian |
| `sv` | Swedish |
| `th` | Thai |
| `tr` | Turkish |
| `vi` | Vietnamese |
| `zh-CN` | Chinese - Simplified |
| `zh-TW` | Chinese - Traditional |

Tip

Regularly review the supported locales and translations to ensure they meet the needs of your user base.

### Language 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:

   ```html
   <!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.

***

* [What you'll learn](https://shopify.dev/docs/apps/build/shop/sign-in-with-shop#what-youll-learn)
* [Requirements](https://shopify.dev/docs/apps/build/shop/sign-in-with-shop#requirements)
* [Step 1: Set up your API client](https://shopify.dev/docs/apps/build/shop/sign-in-with-shop#step-1-set-up-your-api-client)
* [Step 2: Get the official Shop button](https://shopify.dev/docs/apps/build/shop/sign-in-with-shop#step-2-get-the-official-shop-button)
* [Step 3: Integrate your login page](https://shopify.dev/docs/apps/build/shop/sign-in-with-shop#step-3-integrate-your-login-page)
* [Localization](https://shopify.dev/docs/apps/build/shop/sign-in-with-shop#localization)