> ## Documentation Index > Fetch the complete documentation index at: https://stytch.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Add OTPs to Stytch Login > Add One-Time Passcodes (OTP) to the Stytch Login UI with the Consumer frontend SDK. 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. 1. Navigate to [Frontend SDK](https://stytch.com/dashboard/sdk-configuration) and click **Enable SDK**. 2. In [Project ID & API keys](https://stytch.com/dashboard), copy your `public_token`. **Note:** Stytch has [Test and Live environments](/api-reference/consumer/api/overview). Projects use **Test** by default. To call SMS OTP endpoints in **Live**, configure a payment method in [Workspace Settings > Billing](https://stytch.com/dashboard/settings/billing). Install @stytch/nextjs: ```bash theme={null} npm install @stytch/nextjs ``` Or with Yarn: ```bash theme={null} yarn add @stytch/nextjs ``` Initialize the Stytch client with your `public_token`: ```jsx layout.tsx theme={null} 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 ( {children} ); } ``` Create a component for your signup/login page and pass the OTP config. The Stytch UI accepts a config object; learn more [here](/api-reference/consumer/frontend-sdks/vanilla-js/prebuilt-ui/login/configuration). ```jsx theme={null} import { Products, StytchLogin } from '@stytch/nextjs'; const config = { otpOptions: { methods: ["sms"], expirationMinutes: 10, }, products: [ Products.otp, ], }; export const Login = () => { return ; }; ``` 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](/consumer-auth/manage-sessions/overview). Have feedback after integrating? Reach out in our [forum](https://stytch.com/web/discourse), via [support@stytch.com](mailto:support@stytch.com), or in our [Slack community](https://join.slack.com/t/stytch/shared%5Finvite/zt-3aqo03e10-afWXyLzRIAlzGWJyF%5F~zHw).