> ## 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 login or signup > Build a login or signup page. ## Quickstart Select a framework to start: Next.js code example Try out the login flow Next.js SDK reference * Have a `public_token` from your Stytch project & environment. * Enable and configure [Frontend SDKs](https://stytch.com/dashboard/sdk-configuration) in your Dashboard. * Add your application's domain to your project's [Authorized Domains](https://stytch.com/dashboard/sdk-configuration). 1. In your Next.js app, run the command to install the SDK: ```bash npm icon=terminal theme={null} npm install @stytch/nextjs --save ``` 2. Then add your Stytch `public_token` to your project's `.env` file: ```dotEnv .env icon=file-code theme={null} NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN=$PUBLIC_TOKEN ``` 1. Create a custom `Stytch` wrapper component that initializes the Stytch client. ```jsx components/stytch-provider.jsx icon=file-code lines theme={null} '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 {children}; } ``` 2. Wrap your application with `` to provide context to all child components: ```jsx app/layout.jsx icon=file-code lines {1,11} theme={null} import Stytch from './components/stytch-provider'; export default function RootLayout({ children, }: { children: ReactNode }) { return ( {children} ); } ``` 1. Create a `` component. 2. Set authentication methods and relevant options in the [config object](/api-reference/consumer/frontend-sdks/react/prebuilt-ui/login/configuration). ```jsx components/LoginOrSignupForm.jsx icon=file-code lines theme={null} import { Products, StytchLogin } from '@stytch/nextjs'; const config = { products: [Products.emailMagicLinks, Products.oauth], oauthOptions: { providers: [{ type: 'google' }], }, sessionOptions: { sessionDurationMinutes: 60, }, }; export const LoginOrSignupForm = () => { return ; }; ``` 1. Add `` to your `/login` page. ```jsx app/login/page.jsx icon=file-code theme={null} 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

; } return ; } ``` 2. If you're using separate routes, add `` to your `/authenticate` redirect route as well, e.g. `app/authenticate/page.jsx` or `pages/authenticate.jsx`. At this point, you can retrieve [Session data](/api-reference/consumer/api/sessions/session-object) and [User data](/api-reference/consumer/api/users/get-user) via the SDK. For example, [`useStytchSession()`](/api-reference/consumer/frontend-sdks/nextjs/hooks/use-stytch-session) lets you easily check for an active session. React code example Try out the login flow React SDK reference * Have a `public_token` from your Stytch project & environment. * Enable and configure [Frontend SDKs](https://stytch.com/dashboard/sdk-configuration) in your Dashboard. * Add your application's domain to your project's [Authorized Domains](https://stytch.com/dashboard/sdk-configuration). In your React app, run the command to install the SDK: ```bash npm icon=terminal theme={null} npm install @stytch/react --save ``` 1. Initialize the Stytch UI client through `createStytchClient()`. 2. Pass the Stytch UI client to the `` component at the root of your application, making it accessible to all child components. ```jsx lines theme={null} 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 ( {/* Your app code */} ); } ``` 1. Create a `` component. 2. Set authentication methods and relevant options in the [config object](/api-reference/consumer/frontend-sdks/react/prebuilt-ui/login/configuration). ```jsx lines theme={null} import { Products, StytchLogin } from '@stytch/react'; const config = { products: [Products.emailMagicLinks, Products.oauth], oauthOptions: { providers: [{ type: 'google' }], }, sessionOptions: { sessionDurationMinutes: 60, }, }; const LoginOrSignup = () => { return ; }; ``` 1. Add `` to your `/login` page: ```jsx Login.jsx icon=file-code lines theme={null} import { useStytchSession } from "@stytch/react"; import { Navigate } from "react-router"; import { LoginOrSignup } from "./LoginOrSignup"; export const Login = () => { const { session } = useStytchSession(); if (session) { return ; } return ; }; ``` 2. If you're using separate routes, add `` to your `/authenticate` redirect route as well, e.g. `Authenticate.jsx`. At this point, you can retrieve [Session data](/api-reference/consumer/api/sessions/session-object) and [User data](/api-reference/consumer/api/users/get-user) via the SDK. For example, [`useStytchSession()`](/api-reference/consumer/frontend-sdks/nextjs/hooks/use-stytch-session) lets you easily check for an active session. Vanilla JS code example Try out the login flow Vanilla JS SDK reference * Have a `public_token` from your Stytch project & environment. * Enable and configure [Frontend SDKs](https://stytch.com/dashboard/sdk-configuration) in your Dashboard. * Add your application's domain to your project's [Authorized Domains](https://stytch.com/dashboard/sdk-configuration). In your project, run the command to install the SDK: ```bash npm icon=terminal theme={null} npm install @stytch/vanilla-js --save ``` 1. Initialize the Stytch UI client through `createStytchClient()`. 2. Export the initialized client as `stytch` so it can be used across your app. ```js js/stytch-client.js icon=file-code lines theme={null} import { createStytchClient } from "@stytch/vanilla-js"; export const stytch = createStytchClient($YOUR_PUBLIC_KEY); ``` 1. Create a `login.js` file to register and initialize the custom element. 2. Set authentication methods and relevant options in the [config object](/api-reference/consumer/frontend-sdks/vanilla-js/prebuilt-ui/login/configuration). ```js js/login.js icon=file-code lines theme={null} 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, }, }, }); ``` 1. Add `` on your `/login` page: ```html login.html {5,6} icon=file-code lines theme={null} ... ``` 2. If you're using separate routes, add `` on your `/authenticate` redirect route as well, e.g. `authenticate.html`. At this point, you can retrieve [Session data](/api-reference/consumer/api/sessions/session-object) and [User data](/api-reference/consumer/api/users/get-user) via the SDK. For example, [`useStytchSession()`](/api-reference/consumer/frontend-sdks/react/hooks/use-stytch-session) 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