Installation - Stytch Docs

For a full walk-through of how to get up and running with a sign-up and login flow using Stytch, including page router instructions, check out our Quickstart Guide. The instructions below assume you are using app router.

Install Packages

Install the Next.js package:

npm install @stytch/nextjs

Create a Stytch context component

Create a new StytchContext client component. Initialize the Stytch client, passing in your Project’s public_token from the Project Overview of the Stytch Dashboard. Pass the Stytch client to the <StytchB2BProvider> component.

StytchContext.jsx

'use client';

import { createStytchB2BClient, StytchB2BProvider } from '@stytch/nextjs/b2b';

const stytch = createStytchB2BClient(
  process.env.NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN, // or process.env.STYTCH_PUBLIC_TOKEN for non-Vite based projects
);

export const StytchContext = ({ children }) => (
  <StytchB2BProvider stytch={stytch}>
    {children}
  </StytchB2BProvider>
);

Wrap your application in <StytchB2BProvider>

Next, pass the Stytch client to the <StytchB2BProvider> component at the root of your application, making it accessible to all child components.

layout.jsx

import { StytchContext } from './StytchContext';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <StytchContext>{children}</StytchContext>
      </body>
    </html>
  );
}

Add your login flow

You have now initialized the Stytch client, and can add the <StytchB2B> pre-built login component to get a robust, end-to-end login flow working with just a simple config.

⌘I