Add login or signup - Stytch Docs

Quickstart

Select a framework to start:

Next.js - App
Next.js - Pages
React
Vanilla JS

Example app

Next.js code example

Web demo

Try out the login flow

SDK reference

Next.js SDK reference

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.

Install the Next.js SDK and configure your API key

In your Next.js app, run the command to install the SDK:

npm

npm install @stytch/nextjs --save

Then add your Stytch public_token to your project’s .env file:

.env

NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN=$PUBLIC_TOKEN

Set up a Stytch context provider

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>;
}

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>
  );
}

Add <StytchB2B> UI component

Create a <StytchB2B> component.
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} />;
};

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.

Add <LoginOrSignupDiscoveryForm> to your login page(s)

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/>;
}

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.

Example app

Next.js code example

Web demo

Try out the login flow

SDK reference

Next.js SDK reference

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.

Install the Next.js SDK and configure your API key

In your Next.js app, run the command to install the SDK:

npm

npm install @stytch/nextjs --save

Then add your Stytch public_token to your project’s .env file:

.env

NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN=$PUBLIC_TOKEN

Wrap your application in <StytchB2BProvider>

Initialize the Stytch client through createStytchB2BClient().
Pass the Stytch client to the <StytchB2BProvider> component at the root of your application, making it accessible to all child components.

pages/_app.tsx

// For Page Router setups
import { createStytchB2BClient, StytchB2BProvider } from '@stytch/nextjs/b2b';

const stytch = createStytchB2BClient(process.env.NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN!);

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <StytchProvider stytch={stytch}>
      <Component {...pageProps} />
    </StytchProvider>
  );
}

Add <StytchB2B> UI component

Create a <StytchB2B> component.
Set authentication methods and relevant options in the config object.

components/LoginOrSignupDiscoveryForm.tsx

import { StytchB2B } from '@stytch/nextjs/b2b';
import { AuthFlowType, B2BProducts } from '@stytch/vanilla-js/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} />;
};

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.

Add <LoginOrSignupDiscoveryForm> to your login page(s)

Add <LoginOrSignupDiscoveryForm> to your /login page.

pages/login.tsx

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import { useStytchMemberSession } from '@stytch/nextjs/b2b';
import { LoginOrSignupDiscoveryForm } from "src/components/LoginOrSignupDiscoveryForm";

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

  // Routes 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/>;
}

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

Example app

React code example

Web demo

Try out the login flow

SDK reference

React SDK reference

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.

Install the React SDK and configure your API key

In your React app, run the command to install the SDK:

npm

npm install @stytch/react --save

Wrap your application in <StytchB2BProvider>

Initialize the Stytch client through createStytchB2BClient().
Pass the Stytch client to the <StytchB2BProvider> component at the root of your application, making it accessible to all child components.

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

const stytch = createStytchB2BClient($YOUR_PUBLIC_KEY);

// Add the component at the root of your application
export function App() {
  return (
    <StytchB2BProvider stytch={stytch}>
      {/* Your app code */}
    </StytchB2BProvider>
  );
}

Add <StytchB2B> UI component

Create a <StytchB2B> component.
Set authentication methods and relevant options in the config object.

import { AuthFlowType, B2BProducts, StytchB2B } from '@stytch/react/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 },
};

const LoginOrSignup = () => {
  return <StytchB2B config={config} />;
};

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.

Add <LoginOrSignup> to your login page(s)

Add <LoginOrSignup> to your /login page:

import { useStytchMemberSession } from "@stytch/react/b2b";
import { Navigate } from "react-router";
import { LoginOrSignup } from "./LoginOrSignup";

export const Login = () => {
  const { session } = useStytchMemberSession();

  // Route users to your app once they have fully authenticated (either immediately or upon completing the remainder of the auth flow, like MFA)
  if (session) {
    return <Navigate to="/home" />;
  }

  return <LoginOrSignup />;
};

If you’re using separate routes, add <LoginOrSignup> to your /authenticate redirect route as well, e.g. Authenticate.tsx.

Handle session and member data

Example app

Vanilla JS code example

Web demo

Try out the login flow

SDK reference

Vanilla JS SDK reference

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.

Install the JS SDK and configure your API key

In your project, run the command to install the SDK:

npm

npm install @stytch/vanilla-js --save

Initialize the Stytch client for your app

Initialize the Stytch client through createStytchB2BClient().
Export the initialized client as stytch so it can be used across your app.

js/stytch-client.js

import { createStytchB2BClient } from "@stytch/vanilla-js/b2b";
export const stytch = createStytchB2BClient($YOUR_PUBLIC_KEY);

Mount the Stytch UI components

Create a login.js file to initialize and mount stytch.
Set authentication methods and relevant options in the config object.

js/login.js

import { B2BProducts, StytchB2B } from '@stytch/vanilla-js/b2b'
import { stytch } from "./stytch-client.js";

// Stytch SDK method to get the current session synchronously
const session = stytch.session.getSync();
if (session) {
  // User already has a session, redirect to your app
  window.location.href = "/home";
  return;
}

// Register the stytch-ui custom element
customElements.define('stytch-ui', StytchB2B);

// Pass in the Stytch client and configuration
const login = document.getElementById('stytch-ui');
login.render({
  client: stytch,
  config: {
    authFlowType: "Discovery",
    products: [B2BProducts.emailMagicLinks, B2BProducts.oauth],
    sessionOptions: { sessionDurationMinutes: 60 },
    emailMagicLinks: {
      discoveryRedirectURL: "https://localhost:3000/authenticate",
    },
    oauthOptions: {
      discoveryRedirectURL: "https://localhost:3000/authenticate",
      providers: [{ type: "google" }],
    },
  },
});

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.

Add Stytch UI on your login page(s)

Add <stytch-ui> on your /login page:

<!DOCTYPE html>
<html lang="en">
  <head>...</head>
  <body>
    <stytch-ui id="stytch-ui" />
    <script type="module" src="js/login.js"></script>
  </body>
</html>

If you’re using separate routes, add <stytch-ui> on your /authenticate redirect route as well, e.g. authenticate.html.

Handle session and member data

After a user selects an organization, the Stytch UI 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, session.getSync() lets you retrieve the current session and can be used to determine if a user is already logged in.

Next steps

Authentication methods
Session management

​Quickstart

Example app

Web demo

SDK reference

Example app

Web demo

SDK reference

Example app

Web demo

SDK reference

Example app

Web demo

SDK reference

​Next steps

Quickstart

Next steps