---
title: Magic Migration Guide
slug: oms/magic-migration-guide
icon: ➡️
docTags: 
createdAt: 2022-11-11T20:32:03.000Z
---

## Magic Account Setup

Visit [Magic](https://dashboard.magic.link/signup) 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.

```Text
MAGIC_API_KEY={your_token}
```

## Install magic-sdk and chord-magic

```shell
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`:

```javascript
const magicClient = new MagicClient(process.env.MAGIC_API_KEY)
```

Then, pass the `magicClient` to the `auth` prop of the `ChordProvider`:

```javascript
<ChordProvider
  {...otherProps}
  auth={magicClient}
>
```

## Add a LoginForm component

::::CodeDrawer{title="MagicLoginForm" isResponseExpanded="false" autoGeneratedAnchorSlug="magicloginform" legacyHash="rUjRummbzeXPFev0BR4ID"}
:::CodeblockTabsExamples
```javascript
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

```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::

## Try it out

Visit your login page and try logging in using a magic link!