Authentication

2min
Auth Providers
We currently support two auth providers: Magic and Stytch.

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.
Stytch
Magic
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>
    )
}
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>
    )
}
﻿
Migration Guides
For more on how to add auth to your site see the Next.js ↔️ Stytch Migration Guide﻿  or Magic Migration Guide﻿  documentation
Updated 03 Mar 2023
Did this page help you?
v3.x to v4.x Migration Guide
Chord Platform and Google OAuth Integration