Gatsby ↔️ Stytch Migration Guide

stytch account setup create your stytch account following our docid\ sstgzajo30gx2bs9qdols guide add your public key to the env you can find your https //stytch com/dashboard/api keys 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 https //stytch com/docs/sdks/javascript sdk#ui config 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 https //stytch com/dashboard/user management page to see your user enabling oauth if your would like to enable oauth, visit the https //stytch com/dashboard/sdk configuration page, and click the oauth toggle then, expand the oauth section and toggle enable pkce once oauth is enabled, visit the https //stytch com/dashboard/oauth , then select the provider you would like to use and follow the directions