> For the complete documentation index, see [llms.txt](https://docs.chord.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.chord.co/chord-oms/developer-tools/authentication/stytch/stytch-migration-guides/next-js-stytch-migration-guide.md).

# Next.js ↔️ Stytch Migration Guide

## Stytch Account Setup

Create your Stytch account following our [Stytch Account Setup](/chord-oms/developer-tools/authentication/stytch/stytch-account-setup.md) guide.

## Add your public key to the .env

You can find your [public token](https://stytch.com/dashboard/api-keys) in the Stytch dashboard.

```
NEXT_PUBLIC_STYTCH_API_KEY={your_token}
```

Also remove the magic key from your .env if you have one.

## Install Stytch and chord-stytch

```shell
npm install @stytch/nextjs @stytch/vanilla-js @chordcommerce/chord-stytch
```

## Add a StytchProvider

Visit the file where you wrap your app in `ChordProvider` and add a `stytchClient`:

```javascript
const stytchClient = new StytchClient({
  apiKey: process.env.NEXT_PUBLIC_STYTCH_API_KEY,
  redirectPath: '/authenticate',
  sessionDurationMinutes: 60
})
```

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

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

Finally, wrap `children` with a `StytchProvider` (import from @stytch/nextjs) and pass `stytchClient.getServiceClient()` to it:

```javascript
<StytchProvider stytch={stytchClient.getServiceClient()}>
  {children}
</StytchProvider>
```

## Add a LoginForm component that uses StytchLogin

Go to the [config docs](https://stytch.com/docs/sdks/javascript-sdk#ui-config) to see what options are available. Please note that you will need to wrap the `<StytchLogin />` component with another `<StytchProvider />` . This is because the `<StytchLogin />` component depends on Stytch's UI client, which is quite heavy, and that `chord-stytch` uses the headless client for it's normal operations.

{% code title="StytchLoginForm" %}

```javascript
import React from 'react'
import { StytchLogin, StytchProvider } from '@stytch/nextjs'
import { createStytchUIClient } from '@stytch/nextjs/ui'
import { useMemo } from 'react'
import { useAuth } from '@chordcommerce/react-autonomy'
import { useRouter } from 'next/router'

const StytchLoginForm = () => {
  let baseUrl
  if (typeof window !== 'undefined') baseUrl = window.location.origin

  const router = useRouter()

  const { serviceClient, getToken } = useAuth()

  const stytchProps = useMemo(
    () => ({
      config: {
        products: ['emailMagicLinks', 'oauth'],
        emailMagicLinksOptions: {
          loginRedirectURL: `${baseUrl}/authenticate`,
          loginExpirationMinutes: 30,
          signupRedirectURL: `${baseUrl}/authenticate`,
          signupExpirationMinutes: 30,
          createUserAsPending: false
        },
        // these won't work until you have set them up in Stytch
        oauthOptions: {
          loginRedirectURL: `${baseUrl}/authenticate`,
          signupRedirectURL: `${baseUrl}/authenticate`,
          providers: [{ type: 'google' }]
        }
      },
      styles: {
        hideHeaderText: true,
        width: '100%',
        primaryColor: '#215732'
      },
      callbacks: {
        // this function will automatically navigate to the /account page when a user clicks
        // the magic link in their email and is authenticated on another tab
        onEvent: async () => {
          const intervalID = setInterval(async () => {
            if (serviceClient?.session.getSync()) {
              await getToken()
              clearInterval(intervalID)
              router.push('/account')
            }
          }, 1000)
        },
        // this function logs the error message in segment
        onError: message => {
          window.analytics.track({
            message,
            meta: {
              storeId: process.env.CHORD_OMS_STORE_ID,
              omsId: process.env.CHORD_OMS_ID,
              tenantId: process.env.CHORD_OMS_TENANT_ID,
              currency: 'USD',
              locale: 'en-US'
            }
          })
        }
      }
    }),
    [baseUrl, getToken, serviceClient, router]
  )

  return (
    <StytchProvider
      stytch={createStytchUIClient(
        process.env.NEXT_PUBLIC_STYTCH_API_KEY
      )}
    >
      <StytchLogin
        config={stytchProps.config}
        styles={stytchProps.styles}
        callbacks={stytchProps.callbacks}
      />
    </StytchProvider>
  )
}

export default StytchLoginForm
```

{% endcode %}

## Create an Authenticate component

This component will authenticate the user by calling `handleCallback()` from useAuth, then it will navigate to the /account page.

Add this component to the `pages` directory.

{% code title="Authenticate" %}

```javascript
import { useEffect } from 'react'
import { useRouter } from 'next/router'
import { useAuth } from '@chordcommerce/react-autonomy'

const Authenticate = () => {
  const { handleCallback } = useAuth()
  const router = useRouter()

  useEffect(() => {
    handleCallback().then(() => router.push('/account'))
  }, [handleCallback])

  return <>Loading...</>
}

export default Authenticate
```

{% endcode %}

## Try it out

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

Once you've clicked the link in the email from Stytch to sign-up/login, you can visit the [User management](https://stytch.com/dashboard/user-management) page to see your user.

## Enabling OAuth

If your would like to enable OAuth, visit the [SDK Configuration](https://stytch.com/dashboard/sdk-configuration) page, and click the OAuth toggle. Then, expand the OAuth section and toggle Enable PKCE.

Once OAuth is enabled, visit the [OAuth page](https://stytch.com/dashboard/oauth), then select the provider you would like to use and follow the directions.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.chord.co/chord-oms/developer-tools/authentication/stytch/stytch-migration-guides/next-js-stytch-migration-guide.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.