Magic Migration Guide

6 min

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 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

MagicLoginForm

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!