Developer Tools

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

Magic

Docs powered by Archbee

TABLE OF CONTENTS

Auth Providers

ChordProvider

Migration Guides