Notorious Puppy Memes

    @stytch/react
    TypeScript icon, indicating that this package has built-in type declarations

    0.9.0 • Public • Published

    @stytch/react

    Stytch's React Library

    Install

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

    Documentation

    For full documentation please refer to Stytch's javascript SDK documentation at https://stytch.com/docs/sdks.

    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
    ReactDOM.render(
      <StytchProvider stytch={stytch}>
        <App />
      </StytchProvider>,
      document.getElementById('root'),
    );
    
    // Now use Stytch in your components
    const App = () => {
      const stytchProps = {
        config: {
          products: ['emailMagicLinks'],
          emailMagicLinksOptions: {
            loginRedirectURL: 'https://example.com/authenticate',
            loginExpirationMinutes: 30,
            signupRedirectURL: 'https://example.com/authenticate',
            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.loginOrSignupView}
            styles={stytchProps.style}
            callbacks={stytchProps.callbacks}
          />
        </div>
      );
    };

    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 />
        </StytchProvider>
      );
    }
    
    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 (
        <Layout>
          <h1>Your {isCached ? 'Cached' : null} Profile</h1>
          <pre>{JSON.stringify(user, null, 2)}</pre>
        </Layout>
      );
    }

    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

    Install

    npm i @stytch/react

    DownloadsWeekly Downloads

    802

    Version

    0.9.0

    License

    MIT

    Unpacked Size

    45 kB

    Total Files

    8

    Last publish

    Collaborators

    • 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