User Authentication

The Chord Performance Gatsby theme and starter support Shopify customer accounts. A customer can log into their Shopify store customer account on a Chord Performance Gatsby site and see their order history and saved addresses.

If the Shopify store is on Shopify Plus, the Shopify Plus Multipass feature can transfer the authenticated user session from the Gatsby site to Shopify checkout. In other words, if a user logs into their Shopify customer account via the Gatsby site, and then clicks "Check Out" and is brought to Shopify checkout, they will continue to be logged in and have access to their saved addresses. This transfer of user session from the Gatsby site to Shopify checkout is only possible for Shopify Plus stores with Multipass enabled. Gatsby sites for non-Shopify Plus stores can still support Shopify customer accounts, but the user session will not be transferred to Shopify checkout.

Configure Shopify

Enable customer accounts

Customer accounts must be enabled in the Shopify store admin to use this feature. See Shopify's docs for step-by-step instructions for enabling customer accounts.

Enable Multipass

If the Shopify Store is a Shopify Plus store, Multipass can be enabled to allow user sessions to be transferred from the Gatsby site to Shopify checkout. See Shopify's docs for step-by-step instructions for enabling Multipass.

Update email template

Shopify's Customer account password reset transactional email template contains a link to the Shopify storefront. Since the Gatsby site has a different URL, the link in the email template needs to be updated to point to the Gatsby site.

Navigate to Settings -> Notifications -> Customer account password reset in the Shopify store admin. You'll see this block of code in the email template:

<a href="{{ customer.reset_password_url }}" class="button__text">Reset your password</a>

Replace it with this block of code, inserting your Gatsby site's domain name in place of <DOMAIN>:

{% raw %}
{% assign url_parts = customer.reset_password_url  | split: '/' %}
{% endraw %}
<a href="<DOMAIN>/reset?id={{url_parts[5]}}&token={{url_parts[6]}}" class="button__text">Reset your password</a>

Configure Gatsby Site

@chordcommerce/gatsby-starter-performance added account registration, login, and profile React components in v2.1.0. Make sure to use a compatible version.

Development

No specific changes need to be made to the development environment to support Shopify customer accounts without Multipass.

Multipass API endpoint

In order to support the Multipass flow, the Gatsby site needs to expose a single API endpoint that creates a Multipass token. Creating a Multipass token requires a Multipass secret key, so this cannot be done client-side for security reasons. This API endpoint can be hosted anywhere.

To make local development easier, the gatsby-starter-performance repo includes a simple Node.js script that starts a local web server and has all the code necessary for creating the token. To start the server locally, run:

$ yarn start:multipass

This simply starts a local web server at http://localhost:3000 by running the Node.js script at scripts/shopify-multipass.js.

Multipass environment configuration

Two environment variables need to be added to the Gatsby site's .env file:

GATSBY_SHOPIFY_MULTIPASS_URL: This variable tells gatsby-theme-shopify where to find the Multipass token creation endpoint. In development, its value is probably http://localhost:3000 as described above in the "Multipass API endpoint" section.

SHOPIFY_MULTIPASS_SECRET: This variable is used by the Node.js script at scripts/shopify-multipass.js. Its value is the Multipass secret that can be found in the Shopify admin. Make sure to keep this secret private. It should not be exposed client-side.

Production

No specific changes need to be made to a production site to support Shopify customer accounts without Multipass.

Multipass API endpoint

As covered above, a Gatsby site needs to expose a single API endpoint that creates a Multipass token. In production, you may choose to run this API endpoint anywhere. If you're hosting your site in Netlify, the gatsby-starter-performance repo includes a Netlify function to supply this functionality. The code for the function can easily be adapted to work in other infrastructure.

Multipass environment configuration

Two environment variables need to be added to the Gatsby site's .env file:

GATSBY_SHOPIFY_MULTIPASS_URL: This variable tells gatsby-theme-performance where to find the Multipass token creation endpoint.

SHOPIFY_MULTIPASS_SECRET: This variable is used by the Node.js script at scripts/shopify-multipass.js. Its value is the Multipass secret that can be found in the Shopify admin. Make sure to keep this secret private. It should not be exposed client-side.

Checklist

Here's a summary of the changes you'll need to make to fully support Shopify customer authentication on your Gatsby site: