Next.js Quickstart

This quickstart resource covers the essential considerations and steps required to start integrating Stytch’s B2B SaaS Authentication product within a Next.js application.

Overview

Stytch offers developers two SDKs that can be used within a Next.js application:

SDK	Development	Notes	Reference	Source Code	Example App
Next.js SDK	Client-side	Can be used in client-side code and components. Our Next.js SDK offers pre-built UI components with customizable login and signup forms, alongside a collection of headless methods for integrating with your own custom UI.	SDK Reference	npm	stytch-b2b-sdk-example
Node SDK	Server-side	Can be used in server-side code and components. Our Node SDK enables you to manage your auth and user management logic alongside your app’s existing backend business logic, validate sessions for backend protected resources, and utilize Next.js's server-side rendering (SSR).	API Reference	GitHub	stytch-b2b-node-example

Even if you're using our client-side Next.js SDK, you will also want to leverage our server-side Node SDK in order to handle server-side session authentication and authorization checks.

How Stytch's Next.js and Node SDKs fit into your full-stack Next.js application

You can read more about the differences and tradeoffs between each integration method (backend, frontend headless, and frontend with pre-built UI) by visiting our integration guides.

Getting started

To get started, we'll quickly set up a Discovery flow login form with our prebuilt UI components.

Pre-built UI component with Stytch's Next.js SDK

1Install Stytch SDKs and configure your API keys

If you haven't already, create a Stytch B2B Project in your Stytch Dashboard.

Add our frontend NextJS SDK package to your Next.js application:

npm install @stytch/nextjs @stytch/vanilla-js --save

Add your Stytch project's public_token to your application as an environment variable in a .env file:

# .env
# The below values may be found in your Stytch Dashboard: https://stytch.com/dashboard/api-keys
NEXT_PUBLIC_STYTCH_PROJECT_ENV=test
NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN="YOUR_STYTCH_PUBLIC_TOKEN"

2Configure Stytch SDK settings

To allow the Stytch SDK to run on your frontend, you'll also need to:

Enable frontend SDKs in Test in your Stytch Dashboard here.
Add the domain your application will run on (e.g. http://localhost:3000) to the list of Domains under Authorized applications.
Enable the Create organizations toggle under Enabled methods. This isn't required, but this setting will allow users to create new Organizations directly from our SDK.

3Create the UI client and wrap your application in <StytchB2BProvider>

First, initialize the Stytch UI client by invoking the createStytchB2BUIClient constructor function, passing in your Project's public token.

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

import { StytchB2BProvider } from '@stytch/nextjs/b2b';
import { createStytchB2BUIClient } from '@stytch/nextjs/b2b/ui';

const stytch = createStytchB2BUIClient(
  process.env.NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN
);

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
         // Truncated
      </Head>

      <StytchB2BProvider stytch={stytch}>
        <main>
          <div className="container">
            <Component {...pageProps} />
          </div>
        </main>
      </StytchB2BProvider>
    </>
  );
}

4Add the <StytchB2B> UI component

Create a StytchB2B component. You can configure which authentication flow and methods you'd like to offer by modifying the authFlowType and products fields respectively in your config object. Here's an example that uses our Discovery flow and utilizes our Email Magic Links product:

import { StytchB2B } from '@stytch/nextjs/b2b';
import { AuthFlowType, B2BProducts } from '@stytch/vanilla-js/b2b';

const LoginOrSignupDiscoveryForm = () => {
   const [config, setConfig] = useState<StytchB2BUIConfig | null>();

   const config = {
      products: [B2BProducts.emailMagicLinks],
      sessionOptions: { sessionDurationMinutes: 60 },
      authFlowType: AuthFlowType.Discovery,
    };

   return <StytchB2B config={config} />;
};

For Email Magic Links, you must specify a redirect URL in your Project's Dashboard to authenticate the token. By default, the redirect URL is set to http://localhost:3000/authenticate.

If the <StytchB2B> component is rendered on the redirect URL used for this flow, the Email Magic Link token will automatically be authenticated. You can specify additional Redirect URLs in your Project's Dashboard, and override the default by passing in an explicit emailMagicLinksOptions.discoveryRedirectURL to your UI config.

You can read more about redirect URLs in this guide.

5What's next

Check out our product-specific guides for how to handle full authentication flows for each product you'd like to support, like Email Magic Links and OAuth.