Next.js ↔️ 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 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 config docs 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 user management https //stytch com/dashboard/user management page to see your user enabling oauth if your would like to enable oauth, visit the sdk configuration 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 oauth page https //stytch com/dashboard/oauth , then select the provider you would like to use and follow the directions