---
title: Authentication
slug: oms/authentication
icon: 🔒
docTags: 
createdAt: 2022-11-11T17:56:55.000Z
---

## Auth Providers

We currently support two auth providers: [Magic](https://magic.link/) and [Stytch](https://stytch.com/).

Note: We do also support Cognito, but you will need to contact your account rep or sales rep for more information.

## ChordProvider

In order to use our auth providers, you will first need to wrap your app in `ChordProvider` and pass it an auth client.

:::CodeblockTabs
Stytch

```javascript
import { ChordProvider } from '@chordcommerce/react-autonomy'
import { StytchClient } from '@chordcommerce/chord-stytch'

const MyApp = ({ Component, pageProps }) => {
    const stytchClient = new StytchClient({
        apiKey: process.env.NEXT_PUBLIC_STYTCH_API_KEY,
        redirectPath: '/authenticate',
        sessionDurationMinutes: 60
    })

    return (
        <ChordProvider auth={stytchClient}>
            <Component pageProps={...pageProps} />
        </ChordProvider>
    )
}
```

Magic

```javascript
import { ChordProvider } from '@chordcommerce/react-autonomy'
import { MagicClient } from '@chordcommerce/chord-magic'

const MyApp = ({ Component, pageProps }) => {
    const magicClient = new MagicClient(process.env.MAGIC_API_KEY)

    return (
        <ChordProvider auth={magicClient}>
            <Component pageProps={...pageProps} />
        </ChordProvider>
    )
}
```
:::

## Migration Guides

For more on how to add auth to your site see the [Next.js ↔️ Stytch Migration Guide](docId\:Iku-QpRh57QgyBeHRlKfs)  or [Magic Migration Guide](docId:8sJlmF_4VgWpSx34C-7yB)  documentation