JSPM

  • Created
  • Published
  • Downloads 27856
  • Score
    100M100P100Q138364F
  • License MIT

Stytch's official React Library

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@stytch/react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    @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 { createStytchUIClient } from '@stytch/react/ui';
    
    const stytch = createStytchUIClient('public-token-<find yours in the stytch dashboard>');
    
    // Wrap your App in the StytchProvider
    const Root = () => (
      <StytchProvider stytch={stytch}>
        <App />
      </StytchProvider>
    );
    
    // 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: {
          container: { width: '321px' },
          colors: { primary: '#0577CA' },
          fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        },
        callbacks: {
          onEvent: (message) => console.log(message),
          onError: (message) => console.log(message),
        },
      };
    
      return (
        <div id="login">
          <StytchLogin config={stytchProps.config} styles={stytchProps.styles} 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 createStytchHeadlessClient from @stytch/react/headless
    • To create the Stytch UI client, use createStytchUIClient from @stytch/react/ui
    • Pass it into <StytchProvider /> component from @stytch/react
    import React from 'react';
    import { StytchProvider } from '@stytch/react';
    import { createStytchHeadlessClient } from '@stytch/react/headless';
    // Or alternately
    // import { createStytchUIClient } from '@stytch/react/ui';
    
    const stytch = createStytchHeadlessClient(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
    • There are some additional changes to the styles config documented here