Next.js ↔️ 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 next public stytch api key={your token} also remove the magic key from your env if you have one install stytch and chord stytch npm install @stytch/nextjs @stytch/vanilla js @chordcommerce/chord stytch add a stytchprovider visit the file where you wrap your app in chordprovider and add a stytchclient const stytchclient = new stytchclient({ apikey process env next public stytch api key, redirectpath '/authenticate', sessiondurationminutes 60 }) then, pass the stytchclient to the auth prop of the chordprovider \<chordprovider { otherprops} auth={stytchclient} \> finally, wrap children with a stytchprovider (import from @stytch/nextjs) and pass stytchclient getserviceclient() to it \<stytchprovider stytch={stytchclient getserviceclient()}> {children} \</stytchprovider> 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 please note that you will need to wrap the \<stytchlogin /> component with another \<stytchprovider /> this is because the \<stytchlogin /> component depends on stytch's ui client, which is quite heavy, and that chord stytch uses the headless client for it's normal operations 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 { userouter } from 'next/router' const stytchloginform = () => { let baseurl if (typeof window !== 'undefined') baseurl = window\ location origin const router = userouter() const { serviceclient, gettoken } = useauth() const stytchprops = usememo( () => ({ config { products \['emailmagiclinks', 'oauth'], emailmagiclinksoptions { loginredirecturl `${baseurl}/authenticate`, loginexpirationminutes 30, signupredirecturl `${baseurl}/authenticate`, signupexpirationminutes 30, createuseraspending false }, // 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) router push('/account') } }, 1000) }, // this function logs the error message in segment onerror message => { window\ analytics track({ message, meta { storeid process env chord oms store id, omsid process env chord oms id, tenantid process env chord oms tenant id, currency 'usd', locale 'en us' } }) } } }), \[baseurl, gettoken, serviceclient, router] ) return ( \<stytchprovider stytch={createstytchuiclient( process env next public stytch api key )} \> \<stytchlogin config={stytchprops config} styles={stytchprops styles} callbacks={stytchprops callbacks} /> \</stytchprovider> ) } export default stytchloginform 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 { useeffect } from 'react' import { userouter } from 'next/router' import { useauth } from '@chordcommerce/react autonomy' const authenticate = () => { const { handlecallback } = useauth() const router = userouter() useeffect(() => { handlecallback() then(() => router push('/account')) }, \[handlecallback]) 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