You can create an authenticated checkout experience for buyers within your mobile app by utilizing the Checkout Sheet Kit and the Customer Account API. The checkout will be prefilled with the buyer's customer account information, making it easier and faster to complete checkout. To get started, follow the step-by-step example provided in this guide. ## What you'll learn In this tutorial, you'll learn how to do the following tasks: - Obtain a Customer Account API access token. - Use the access token to create an authenticated cart. - Present the checkout to a buyer using Checkout Sheet Kit. The following sequence diagram illustrates the complete flow covered in the following steps.
Steps for authenticating checkouts in a mobile app
## Requirements - Your store is using [new customer accounts](docs/storefronts/headless/building-with-the-customer-account-api/getting-started#step-1-enable-customer-accounts). - You have an app using Checkout Sheet Kit. - Your app has [Storefront API access](docs/storefronts/headless/building-with-the-storefront-api/getting-started#step-1-enable-storefront-api-access). ## Step 1: Get access to the Customer Account API Configure [Customer Account API access](docs/storefronts/headless/building-with-the-customer-account-api/getting-started#step-2-configure-customer-account-api-access) for your app. > Note: > Make sure that you've configured Customer Account API access as a public mobile client. Take a note of the callback URL and client ID as you'll need this information in the following step. ## Step 2: Open the login page in a WebView To authenticate with the Customer Account API, your app needs to implement an [OAuth 2.0 authorization flow](https://shopify.dev/docs/storefronts/headless/building-with-the-customer-account-api/getting-started#step-3-perform-authorization-requests-and-make-queries). Mobile clients can begin the authorization flow by opening the [authorization endpoint](/docs/api/customer#step-authorization) in a WebView. When building the URL, the `client_id` parameter should match the mobile client you created in the previous step. The `redirect_uri` should also match the callback URL specified for that client. By default, the format is `shop..app://callback`. The `code_challenge` and `code_challenge_method` parameters are also required for mobile clients. After the URL has been built, open the URL in a WebView for the customer to complete login. ### Generate a code challenge and code verifier A code challenge and verifier will be used to verify that the client requesting tokens is the same client that initiated the authorization request. For more information, refer to [Proof Key for Code Exchange](https://datatracker.ietf.org/doc/html/rfc7636). The code snippets below show how you can generate a code challenge and code verifier. Save a reference to the code verifier as you'll use it in [Step 4](#step-4-exchange-authorization-code-for-an-access-token).

### Building the authorization URL After you've generated the code challenge and code verifier, you can build a complete authorization URL.

## Step 3: Handle the authorization code callback After the customer successfully logs in, the WebView is redirected to the specified `redirect_uri` with a `code` query parameter. Clients should listen for page navigation events within the login WebView and extract the authorization code from the URL so that it can be used in [Step 4](#step-4-exchange-authorization-code-for-an-access-token). After the `code` has been extracted, the login WebView can be closed.

## Step 4: Exchange authorization code for an access token After you've extracted the `code` parameter from the callback URL, you can submit it, along with the `code_verifier` saved earlier, to the token endpoint to [obtain a Customer Account API access token](/docs/api/customer#step-obtain-access-token).

## Step 5: Attach the access token to your cart When you create or update a cart using the Storefront API, the token obtained in [Step 4](#step-4-exchange-authorization-code-for-an-access-token) should be included in the [buyer identity input](https://shopify.dev/docs/api/storefront/2025-01/input-objects/CartBuyerIdentityInput#field-customeraccesstoken) of your cart mutation requests. > Note: > The token endpoint response has multiple fields (including `access_token`, `refresh_token`, and `expires_in`), the token to submit in cart mutation requests is found in the `access_token` field.

> Caution: > The `checkoutUrl` returned from cart mutation requests should be used within a short time frame. ## Step 6: Show the checkout using Checkout Sheet Kit Storefront API cart mutations will return a `checkoutUrl` that you can submit to Checkout Sheet Kit's `present()` or `preload()` methods to display the authenticated checkout to the buyer.

More details can be found within the [repository](/docs/storefronts/headless/mobile-apps/checkout-sheet-kit#repositories) READMEs. ## Limitations and considerations This section describes some of the limitations and considerations associated with authenticating checkouts with the Checkout Sheet Kit and the Customer Account API. ### Token expiry Customer Account API access tokens have an expiry in seconds, which is available from the `expires_in` field of the token endpoint response. After an access token expires, it's invalid and needs to be refreshed. You can refresh an access token using the `refresh_token`, which is also returned in the token endpoint response, by making a [request](/docs/api/customer#step-using-refresh-token) with `refresh_token` as the `grant_type`. ### Storing tokens Any tokens that have been retrieved should be stored securely using security features offered by the operating system. Examples: - [KeyChain](https://developer.apple.com/documentation/security/keychain-services) in iOS - [Keystore](https://developer.android.com/privacy-and-security/keystore) or [Encrypted Shared Preferences](https://developer.android.com/reference/androidx/security/crypto/EncryptedSharedPreferences) in Android ### Logging out To allow users to logout of your app, you can make a request to the [logout endpoint](/docs/api/customer#step-logging-out). This is also the time to clear up any related state in your app, such as locally stored tokens and existing authenticated carts.