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.jsx

'use client';

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

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

export default function Stytch({ children }: { children: ReactNode }) {
  return <StytchProvider stytch={stytchClient}>{children}</StytchProvider>;
}

Wrap your application with <Stytch> to provide context to all child components:

app/layout.jsx

import Stytch from './components/stytch-provider';

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

Add <StytchLogin> UI component

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

components/LoginOrSignupForm.jsx

import { Products, StytchLogin } from '@stytch/nextjs';

const config = {
  products: [Products.emailMagicLinks, Products.oauth],
  oauthOptions: {
    providers: [{ type: 'google' }],
  },
  sessionOptions: {
    sessionDurationMinutes: 60,
  },
};

export const LoginOrSignupForm = () => {
  return <StytchLogin config={config} />;
};

Add <LoginOrSignupForm> to your login page(s)

Add <LoginOrSignupForm> to your /login page.

app/login/page.jsx

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useStytchSession } from '@stytch/nextjs';
import { LoginOrSignupForm } from "src/components/LoginOrSignupForm";

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

  useEffect(() => {
    if (session && isInitialized) {
      router.replace("/home");
    }
  }, [session, isInitialized, router]);

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

  return <LoginOrSignupForm/>;
}

If you’re using separate routes, add <LoginOrSignupForm> to your /authenticate redirect route as well, e.g. app/authenticate/page.jsx or pages/authenticate.jsx.

Handle session and user data

At this point, you can retrieve Session data and User data via the SDK. For example, useStytchSession() 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 <StytchProvider>

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

pages/_app.jsx

// For Page Router setups
import { createStytchClient, StytchProvider } from '@stytch/nextjs';

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

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

Add <StytchLogin> UI component

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

components/LoginOrSignupForm.jsx

import { Products, StytchLogin } from '@stytch/nextjs';
const config = {
  products: [Products.emailMagicLinks, Products.oauth],
  oauthOptions: {
    providers: [{ type: 'google' }],
  },
  sessionOptions: {
    sessionDurationMinutes: 60,
  },
};

export const LoginOrSignupForm = () => {
  return <StytchLogin config={config} />;
};

Add <LoginOrSignupForm> to your login page(s)

Add <LoginOrSignupForm> to your /login page.

app/login/page.jsx

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useStytchSession } from '@stytch/nextjs';
import { LoginOrSignupForm } from "src/components/LoginOrSignupForm";

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

  useEffect(() => {
    if (session && isInitialized) {
      router.replace("/home");
    }
  }, [session, isInitialized, router]);

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

  return <LoginOrSignupForm/>;
}

If you’re using separate routes, add <LoginOrSignupForm> to your /authenticate redirect route as well, e.g. app/authenticate/page.jsx or pages/authenticate.jsx.

Handle session and user data

At this point, you can retrieve Session data and User data via the SDK. For example, useStytchSession() lets you easily check for an active session.

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 <StytchProvider>

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

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

const stytch = createStytchClient($YOUR_PUBLIC_KEY);

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

Add <StytchLogin> UI component

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

import { Products, StytchLogin } from '@stytch/react';

const config = {
  products: [Products.emailMagicLinks, Products.oauth],
  oauthOptions: {
    providers: [{ type: 'google' }],
  },
  sessionOptions: {
    sessionDurationMinutes: 60,
  },
};

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

Add <LoginOrSignup> to your login page(s)

Add <LoginOrSignup> to your /login page:

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

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

  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.jsx.

Handle session and user data

At this point, you can retrieve Session data and User data via the SDK. For example, useStytchSession() lets you easily check for an active session.

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 UI client through createStytchClient().
Export the initialized client as stytch so it can be used across your app.

js/stytch-client.js

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

Create a login.js file to register and initialize the custom element.
Set authentication methods and relevant options in the config object.

js/login.js

import { Products, StytchUI } from '@stytch/vanilla-js';
import { stytch } from "./stytch-client.js";

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

// Pass in the StytchClient and config
const login = document.getElementById('stytch-ui');
login.render({
  client: stytch,
  config: {
    products: [Products.emailMagicLinks, Products.oauth],
    oauthOptions: {
      providers: [{ type: 'google' }],
    },
    sessionOptions: {
      sessionDurationMinutes: 60,
    },
  },
});

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 user data

At this point, you can retrieve Session data and User data via the SDK. For example, useStytchSession() 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