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 password reset email template reset your password 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 %} reset your password 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 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 https //github com/chordcommerce/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 https //docs netlify com/functions/build with javascript/ 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 https //github com/chordcommerce/gatsby starter performance/blob/main/scripts/shopify multipass js its value is the multipass secret that can be found in the shopify admin https //shopify dev/docs/admin api/rest/reference/plus/multipass 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