Skip to main content

​
Quickstart

Select a framework to start:

Example app

Next.js code example

Web demo

Try out the login flow

SDK reference

Next.js SDK reference
1

Before you start

  • Have a public_token from your Stytch project & environment.
  • Enable and configure Frontend SDKs in your Dashboard.
  • Add your application’s domain to your project’s Authorized Domains.
2

Install the Next.js SDK and configure your API key

  1. In your Next.js app, run the command to install the SDK:
npm
npm install @stytch/nextjs --save
  1. Then add your Stytch public_token to your project’s .env file:
.env
NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN=$PUBLIC_TOKEN
3

Set up a Stytch context provider

  1. Create a custom Stytch wrapper component that initializes the Stytch client.
components/stytch-provider.tsx
'use client';

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

const stytchClient = createStytchB2BClient(
  process.env.NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN
);

export default function Stytch({ children }: { children: React.ReactNode }) {
  return <StytchB2BProvider stytch={stytchClient}>{children}</StytchB2BProvider>;
}
  1. Wrap your application with <Stytch> to provide context to all child components:
app/layout.tsx
import Stytch from './components/stytch-provider';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <Stytch>{children}</Stytch>
      </body>
    </html>
  );
}
4

Add <StytchB2B> UI component

  1. Create a <StytchB2B> component.
  2. Set authentication methods and relevant options in the config object.
components/LoginOrSignupDiscoveryForm.tsx
import { AuthFlowType, B2BProducts, StytchB2B } from '@stytch/nextjs/b2b';

const config = {
  authFlowType: AuthFlowType.Discovery,
  products: [B2BProducts.emailMagicLinks, B2BProducts.oauth],
  emailMagicLinksOptions: {
    discoveryRedirectURL: 'https://localhost:3000/authenticate',
  },
  oauthOptions: {
    discoveryRedirectURL: 'https://localhost:3000/authenticate',
    providers: ['google'],
  },
  sessionOptions: {
    sessionDurationMinutes: 60,
  },
};

export const LoginOrSignupDiscoveryForm = () => {
  return <StytchB2B config={config} />;
};
5

Set redirect URLs, if necessary

Point discoveryRedirectURL to the URL in your app where users are redirected back to after clicking on their email magic link or after completing OAuth:
  • Using a single route: Set the redirect back to the /login route if you plan on having one shared experience for both the start (login or signup) and end (MFA, organization discovery) of the authentication flow.
  • Using separate routes: Set the redirect to a new route (e.g. /authenticate) if you want a different user experience between the start and the end of the authentication flow. For example, a marketing-oriented login page that redirects to a more focused authentication experience for MFA and organization selection.
For security, add redirect URLs in the Dashboard before being used.
6

Add <LoginOrSignupDiscoveryForm> to your login page(s)

  1. Add <LoginOrSignupDiscoveryForm> to your /login page.
app/login/page.tsx
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useStytchMemberSession } from '@stytch/nextjs/b2b';
import { LoginOrSignupDiscoveryForm } from "src/components/LoginOrSignupDiscoveryForm";

export default function Login() {
  const { session, isInitialized } = useStytchMemberSession();
  const router = useRouter();

  // Route users to your app once they have fully authenticated (either immediately or upon completing the remainder of the auth flow, like MFA)
  useEffect(() => {
    if (session && isInitialized) {
      router.replace("/home");
    }
  }, [session, isInitialized, router]);

  if (!isInitialized || session) {
    return <p>Loading...</p>;
  }

  return <LoginOrSignupDiscoveryForm/>;
}
  1. If you’re using separate routes, add <LoginOrSignupDiscoveryForm> to your /authenticate redirect route as well, e.g. app/authenticate/page.tsx or pages/authenticate.tsx.

Handle session and member data

After a user selects an organization, the <StytchB2B> component automatically exchanges their intermediate_session_token for a fully minted session_token and session_jwt, both of which are stored in browser cookies.At this point, you can retrieve Session data and Member data via the SDK. For example, useStytchMemberSession() lets you easily check for an active session.

​
Next steps

  • Authentication methods
  • Session management