Notable Pottery Manufacturer

    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published


    Stytch's Next.js Library


    With npm npm install @stytch/nextjs @stytch/vanilla-js --save


    For full documentation please refer to Stytch's javascript SDK documentation on

    Example Usage

    import { StytchProvider } from '@stytch/nextjs';
    import { createStytchUIClient } from '@stytch/nextjs/ui';
    const stytch = createStytchUIClient('public-token-<find yours in the stytch dashboard>');
    // Wrap your App in the StytchProvider
      <StytchProvider stytch={stytch}>
        <App />
    // Now use Stytch in your components
    const App = () => {
      const stytchProps = {
        config: {
          products: ['emailMagicLinks'],
          emailMagicLinksOptions: {
            loginRedirectURL: '',
            loginExpirationMinutes: 30,
            signupRedirectURL: '',
            signupExpirationMinutes: 30,
            createUserAsPending: true,
        styles: {
          fontFamily: '"Helvetica New", Helvetica, sans-serif',
          width: '321px',
          primaryColor: '#0577CA',
        callbacks: {
          onEvent: (message) => console.log(message),
          onSuccess: (message) => console.log(message),
          onError: (message) => console.log(message),
      return (
        <div id="login">
          <StytchLogin config={stytchProps.config} styles={stytchProps.styles} callbacks={stytchProps.callbacks} />

    Typescript Support

    There are built in typescript definitions in the npm package.

    Migrating from @stytch/stytch-react

    If you are migrating from @stytch/stytch-react, follow the steps below:

    Step 1: Install the new libraries

    # NPM
    npm install @stytch/vanilla-js @stytch/nextjs
    # Yarn
    yarn add @stytch/vanilla-js @stytch/nextjs

    Step 2: Remove the old SDK

    • Remove the @stytch/stytch-react package
    • If you are explicitly loading the stytch.js script via a blocking beforeInteractive tag in the document header, remove it. It isn't needed anymore.
    # NPM
    npm rm @stytch/stytch-react
    # Yarn
    yarn remove @stytch/stytch-react

    Step 3: Initialize the Stytch client in _app.js

    • Determine if you need the Headless or UI client. If you plan to use the <StytchLogin /> component in your application then you should use the the UI client. Otherwise use the Headless client to minimize application bundle size.
    • To create the Stytch Headless client, use createStytchHeadlessClient from @stytch/nextjs/headless
    • To create the Stytch UI client, use createStytchUIClient from @stytch/nextjs/ui
    • Pass it into <StytchProvider /> component from @stytch/nextjs
    import React from 'react';
    import { StytchProvider } from '@stytch/nextjs';
    import { createStytchHeadlessClient } from '@stytch/nextjs/headless';
    // Or alternately
    // import { createStytchUIClient } from '@stytch/nextjs/ui';
    const stytch = createStytchHeadlessClient(process.env.NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN);
    function MyApp({ Component, pageProps }) {
      return (
        <StytchProvider stytch={stytch}>
          <Component {...pageProps} />
    export default MyApp;

    Step 4: Update calls to useStytchUser , useStytchSession, and useStytchLazy

    • useStytchUser and useStytchSession hooks now return envelope objects - { user, isInitialized, isCached } and { session, isInitialized, isCached } respectively.
      • In SSR/SSG contexts, as well as the first clientside render, user/session will be null and isInitialized will be false
      • The SDK will read user/session out of persistent storage, and rerender with isCached: true - at this point you’re reading the stale-while-revalidating value
      • The SDK will make network requests to pull the most up-to-date user and session objects, and serve them with isCached: false
    • useStytchLazy is no longer required - you may always call useStytch now
    import React, { useEffect } from 'react';
    import { useRouter } from 'next/router';
    import { useStytchUser } from '@stytch/nextjs';
    export default function Profile() {
      const router = useRouter();
      const { user, isInitialized } = useStytchUser();
      useEffect(() => {
        if (isInitialized && user === null) {
      }, [user, isInitialized]);
      return (
          <h1>Your Profile</h1>
          <pre>{JSON.stringify(user, null, 2)}</pre>

    Step 5: UI Naming Changes

    We've made a number of small changes to our naming conventions to make the API cleaner and easier to understand.

    • The <Stytch /> login component is now called <StytchLogin />
    • The OAuthProvidersTypes enum is now called OAuthProviders
    • The SDKProductTypes enum is now called Products


    npm i @stytch/nextjs

    DownloadsWeekly Downloads






    Unpacked Size

    60 kB

    Total Files


    Last publish


    • nicole-stytch
    • susie-stytch
    • cal-stytch
    • spencer-stytch
    • anmol-stytch
    • jeremy-stytch
    • austin-stytch
    • kaden-stytch
    • max-stytch
    • julianna-stytch
    • marygruen
    • reed-stytch
    • grace-stytch