Gatsby ↔️ Stytch Migration Guide

stytch account setup create your stytch account following our stytch account setup docid\ sstgzajo30gx2bs9qdols guide add your public key to the env you can find your public token in the stytch dashboard gatsby public stytch api key={your token} also remove the magic key from your env if you have one install stytch and gatsby theme autonomy npm install @stytch/nextjs @stytch/vanilla js @chordcommerce/gatsby theme autonomy@^5 0 0 add a stytchprovider create a new file called "authprovider" and paste the following code import react from 'react' import { stytchprovider } from '@stytch/nextjs' import { useauth } from '@chordcommerce/react autonomy' const authprovider = ({ children }) => { const { serviceclient } = useauth() return \<stytchprovider stytch={serviceclient}>{children}\</stytchprovider> } export default authprovider then wrap element in your gatsby browser js file with the authprovider \<authprovider>{element}\</authprovider> add a loginform component that uses stytchlogin go to the config docs to see what options are available import react from 'react' import { stytchlogin, stytchprovider } from '@stytch/nextjs' import { createstytchuiclient } from '@stytch/nextjs/ui' import { usememo } from 'react' import { useauth } from '@chordcommerce/react autonomy' import { navigate } from 'gatsby' const authloginform = () => { let baseurl if (typeof window !== 'undefined') baseurl = window\ location origin const { gettoken, serviceclient } = useauth() const stytchprops = usememo( () => ({ config { products \['emailmagiclinks', 'oauth'], emailmagiclinksoptions { loginredirecturl `${baseurl}/authenticate`, loginexpirationminutes 30, signupredirecturl `${baseurl}/authenticate`, signupexpirationminutes 30, }, // these won't work until you have set them up in stytch oauthoptions { loginredirecturl `${baseurl}/authenticate`, signupredirecturl `${baseurl}/authenticate`, providers \[{ type 'google' }], }, }, styles { hideheadertext true, width '100%', primarycolor '#215732', }, callbacks { // this function will automatically navigate to the /account page when a user clicks // the magic link in their email and is authenticated on another tab onevent async () => { const intervalid = setinterval(async () => { if (serviceclient? session getsync()) { await gettoken() clearinterval(intervalid) navigate('/account') } }, 1000) }, // this function logs the error message in segment onerror (message) => { window\ analytics track({ message, meta { storeid process env gatsby chord oms store id, omsid process env gatsby chord oms id, tenantid process env gatsby chord oms tenant id, currency 'usd', locale 'en us', }, }) }, }, }), \[baseurl, gettoken, serviceclient] ) return ( \<stytchprovider stytch={createstytchuiclient( process env gatsby public stytch api key )} \> \<stytchlogin config={stytchprops config} styles={stytchprops styles} callbacks={stytchprops callbacks} /> \</stytchprovider> ) } export default 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 import react, { useeffect } from 'react' import { useauth } from '@chordcommerce/react autonomy' import { navigate } from 'gatsby' const authenticate = () => { const { handlecallback } = useauth() useeffect(() => { handlecallback() then(() => navigate('/account')) }, \[]) return <>loading \</> } export default 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