Installation - Stytch Docs

For a full walk-through of how to get up and running with a sign-up and login flow using Stytch, check out our Quickstart Guide.

Install Packages

Install Next.js package:

npm install @stytch/nextjs

Create the Stytch client

Initialize the Stytch client, passing in your Project’s public_token from the Project Overview of the Stytch Dashboard.

import { createStytchClient } from '@stytch/nextjs';

const stytch = createStytchClient(
  process.env.NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN,
);

Wrap your application in <StytchProvider>

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

layout.jsx

import { createStytchClient, StytchProvider } from '@stytch/nextjs';

const stytch = createStytchClient(
  process.env.NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN,
);

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

Add your login flow

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

⌘I