Add OTPs to Stytch Login

Use Stytch One-Time Passcodes (OTP) with the pre-built login UI. This guide uses the Next.js SDK, but the same configuration applies to other frontend SDKs.

Configure your Project in the Stytch Dashboard

Navigate to Frontend SDK and click Enable SDK.
In Project ID & API keys, copy your public_token.

Note: Stytch has Test and Live environments. Projects use Test by default. To call SMS OTP endpoints in Live, configure a payment method in Workspace Settings > Billing.

Add Stytch to your project

Install @stytch/nextjs:

npm install @stytch/nextjs

Or with Yarn:

yarn add @stytch/nextjs

Initialize the Stytch client with your public_token:

layout.tsx

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

const STYTCH_PUBLIC_TOKEN = 'YOUR_PUBLIC_TOKEN';
const stytch = createStytchClient(STYTCH_PUBLIC_TOKEN);

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

Configure OTP for signup and login

Create a component for your signup/login page and pass the OTP config. The Stytch UI accepts a config object; learn more here.

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

const config = {
  otpOptions: {
      methods: ["sms"],
      expirationMinutes: 10,
  },
  products: [
    Products.otp,
  ],
};

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

Tie it all together

You now have an OTP signup and login flow with the pre-built UI config. The SDK handles the code authentication and manages the session automatically. Learn more about sessions here.Have feedback after integrating? Reach out via support@stytch.com or in our Slack community.

⌘I