@stytch/react

@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/javascript-sdk.

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: {
      container: { width: '321px' },
      colors: { primary: '#0577CA' },
      fontFamily: '"Helvetica New", Helvetica, sans-serif',
    },
    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.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

• The core SDK is now bundled in its own module - @stytch/vanilla-js
• We now have a library specifically for React bindings - @stytch/react

# 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
• There are some additional changes to the styles config documented here