website logo
Navigate through spaces
Chord Commerce
⌘K
Getting Started
CMS
Data
OMS
Integrations
👩‍💻Developer Tools
Shopify
Docs powered by archbee 

Gatsby ↔️ Stytch Migration Guide

This guide is only relevant for @chordcommerce/gatsby-theme-autonomy<4.0.0

Stytch Account Setup

Create your Stytch account following our Stytch Account Setup guide.

Add your public key to the .env

You can find your public token in the Stytch dashboard.

Shell
|

Also remove the magic key from your .env if you have one.

Install Stytch and gatsby-theme-autonomy

Shell
|

Add a StytchProvider

Create a new file called "AuthProvider" and paste the following code:

StytchProvider

Then wrap element in your gatsby-browser.js file with the AuthProvider:

JS
|

Add a LoginForm component that uses StytchLogin

Go to the config docs to see what options are available.

AuthLoginForm

Create an Authenticate component

This component will authenticate the user by calling handleCallback() from useAuth, then it will navigate to the /account page.

Add this component to the pages directory:

Authenticate

Try it out

Visit your login page and try logging in using a magic link!

Once you've clicked the link in the email from Stytch to sign-up/login, you can visit the user management page to see your user.

Enabling OAuth

If your would like to enable OAuth, visit the SDK Configuration page, and click the OAuth toggle. Then, expand the OAuth section and toggle Enable PKCE.

Once OAuth is enabled, visit the OAuth page, then select the provider you would like to use and follow the directions.

Updated 18 Jan 2023
Did this page help you?
Yes
No
UP NEXT
Guides
Docs powered by archbee 
StytchProvider