User Authentication

18min
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:
Password reset email template
|
<a href="{{ customer.reset_password_url }}" class="button__text">Reset your password</a>
<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>:
Password reset email template
|
{% 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>
{% 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
|
$ yarn start:multipass
$ 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. 
If using Netlify functions, the endpoint will be available via a predictable URL:
GATSBY_SHOPIFY_MULTIPASS_URL=/.netlify/functions/shopify-multipass
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:
Shopify store admin:
Enable customer accounts
Enable Multipass
Update email template
Gatsby site:
Add Multipass API endpoint
Add Multipass environment variables GATSBY_SHOPIFY_MULTIPASS_URL and SHOPIFY_MULTIPASS_SECRET to .env
﻿