Notorious Puppy Memes

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

    0.9.0 • Public • Published


    Stytch's React Library


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


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

    Example Usage

    import { StytchProvider } from '@stytch/react';
    import { StytchUIClient } from '@stytch/vanilla-js';
    const stytch = new StytchUIClient('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">

    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/react
    # Yarn
    yarn add @stytch/vanilla-js @stytch/react

    Step 2: Remove the old SDK

    • Remove the @styth/stytch-react package
    • If you are explicitly loading the stytch.js script 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 client in your Application Root

    • 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 StytchHeadlessClient from @stytch/vanilla-js/headless
    • To create the Stytch UI client, use StytchUIClient from @stytch/vanilla-js
    • Pass it into <StytchProvider /> component from @stytch/react
    import React from 'react';
    import { StytchProvider } from '@stytch/react';
    import { StytchHeadlessClient } from '@stytch/vanilla-js/headless';
    // Or alternately
    // import { StytchUIClient } from '@stytch/vanilla-js';
    const stytch = new StytchHeadlessClient(process.env.REACT_APP_STYTCH_PUBLIC_TOKEN);
    function WrappedApp() {
      return (
        <StytchProvider stytch={stytch}>
          <App />
    export default WrappedApp;

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

    • useStytchUser and useStytchSession hooks now return envelope objects - { user, isCached } and { session, isCached } respectively.
      • On first render the SDK will read user/session out of persistent storage, and serve them 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 { useStytchUser } from '@stytch/react';
    export default function Profile() {
      const router = useRouter();
      const { user, isCached } = useStytchUser();
      return (
          <h1>Your {isCached ? 'Cached' : null} 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/react

    DownloadsWeekly Downloads






    Unpacked Size

    45 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