Magic Migration Guide

magic account setup visit magic and sign up for an account add your public key to the env you can find your publishable api key https //dashboard magic link/app in the home section of the magic dashboard magic api key={your token} install magic sdk and chord magic npm install @magic sdk @chordcommerce/chord magic create a magic client visit the file where you wrap your app in chordprovider and add a magicclient const magicclient = new magicclient(process env magic api key) then, pass the magicclient to the auth prop of the chordprovider \<chordprovider { otherprops} auth={magicclient} \> add a loginform component import { usestate } from 'react' import { userouter } from 'next/router' import { useauth } from '@chordcommerce/react autonomy' const authloginform = () => { const router = userouter() const { login } = useauth() const \[error, seterror] = usestate(null) const \[email, setemail] = usestate('') const onlogin = async () => { seterror(null) try { await login({ email, showui true, redirecturi window\ location origin }) router push('/account') } catch (error) { seterror(error) } } return ( \<form onsubmit={e => { onlogin() e preventdefault() }} \> \<input name="email" value={email} onchange={e => setemail(e target value)} /> \<button type="submit">sign in\</button> {error && \<p classname="error">{error message}\</p>} \</form> ) } export default authloginform try it out visit your login page and try logging in using a magic link!