---
title: Sign in with Shop
description: >-
  Add Sign in with Shop to your self-hosted login page using the Shop SDK login
  feature.
source_url:
  html: 'https://shopify.dev/docs/api/shop/guides/use-cases/sign-in'
  md: 'https://shopify.dev/docs/api/shop/guides/use-cases/sign-in.md'
---

# Sign in with Shop

Use the Shop SDK `login` feature to add Sign in with Shop to your self-hosted login page. The SDK loads the sign-in code, creates a login instance, and returns an element that you can mount where the sign-in experience should appear.

***

## What you'll learn

In this guide, you'll learn how to:

* Initialize the Shop SDK.
* Create a `login` feature instance and add it to your page.
* Handle authentication events after the user signs in.

***

## Requirements

* A [Shop app](https://shopify.dev/docs/api/shop/guides/creating-a-client) with a client ID.
* A storefront where you can add HTML and JavaScript.

***

## Step 1: Load and initialize the SDK

Add the SDK loader script to your page and initialize it with your client ID. If you want to preload the login code before calling `sdk.create()`, set `features.login` to `true`.

## HTML

```html
<script type="module">
  import 'https://cdn.shopify.com/shopifycloud/shop-js/modules/v2/loader.sdk.esm.js';


  const sdk = window.ShopSDK.initialize({
    apiKey: 'YOUR_CLIENT_ID',
    locale: 'en',
    features: {
      login: true, // Preload the login code
    },
  });
</script>
```

The script registers `window.ShopSDK` when it loads. `initialize` returns an SDK instance that you use to create the login feature.

***

## Step 2: Create a login instance

Call `sdk.create('login', config)` to create a login instance. The method returns a Promise that resolves after the feature is loaded and the element is ready.

Use the builder to customize the generated SDK code for your login button:

Add a container to your page, such as `<div id="login-container"></div>`. The SDK creates the underlying HTML element for you. You're responsible for inserting `login.element` into the DOM wherever you want the sign-in experience to appear.

### Login attributes

The following attributes are common for the `login` feature. Pass them as JavaScript configuration in `sdk.create()`, not as markup on the page.

| Attribute | Description |
| - | - |
| `buttonType` | Changes the call-to-action text. For example, use `'continue'` to show a Continue with Shop flow. |
| `buttonLayout` | Renders a standalone button flow when set to `'standalone'`. |
| `emailInputSelector` | Connects the login flow to an existing email input instead of rendering a standalone button. |
| `scope` | Required Shop OAuth scope. Use `'shop_app:oauth'` to access the user's email. |
| `appearance.variables` | CSS custom properties that customize the rendered login feature. |

For the full list of attributes and event handlers, see the [login reference](https://shopify.dev/docs/api/shop-sdk/reference/login).

***

## Step 3: Handle authentication results

The `onComplete` handler runs after the sign-in flow completes. Use it to update your UI or send the authentication result to your backend. If the event includes user-scoped credentials, then handle them like other authentication tokens:

* Send them only over HTTPS.
* If your app needs them after the page session, then store them server-side.
* Don't log them in analytics or error reports.

The `onError` handler runs when the login flow can't complete. Use it to show a fallback login path or ask the user to try again.

***

## Localization

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

### Set the locale

Set the language with the `locale` option when you initialize the SDK. Pass a [BCP-47](https://en.wikipedia.org/wiki/IETF_language_tag) locale tag, such as `'en'`, `'fr'`, or `'ro-RO'`. The locale defaults to `'en'` and is inherited by every feature you create, including `login`.

## HTML

```html
<script type="module">
  import 'https://cdn.shopify.com/shopifycloud/shop-js/modules/v2/loader.sdk.esm.js';


  const sdk = window.ShopSDK.initialize({
    apiKey: 'YOUR_CLIENT_ID',
    locale: 'fr', // Render the login experience in French
    features: {
      login: true,
    },
  });
</script>
```

### Supported locales

The button text adapts to the `buttonType` you choose. For example, `buttonType: 'continue'` renders a **Continue with Shop** button. Regardless of the `buttonType`, the button text is translated according to the configured `locale`. With `locale: 'fr'`, a `'continue'` button renders as **Continuer avec Shop**.

The SDK supports the following locales for the login 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.

***

## Next steps

* Review the full [`login` feature reference](https://shopify.dev/docs/api/shop-sdk/reference/login).
* If your sign-in flow returns a `shopConsentToken`, then exchange it for a user access token to read and write Shop User data. See [Store metafields on Shop users](https://shopify.dev/docs/api/shop/guides/use-cases/metafields).
* Use the [lead capture](https://shopify.dev/docs/api/shop/guides/use-cases/lead-capture) feature to collect email addresses from users who aren't yet signed in.

***