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

16.0.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: {
      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

# 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

Dependencies (0)

    Dev Dependencies (9)

    Package Sidebar

    Install

    npm i @stytch/react

    Weekly Downloads

    4,451

    Version

    16.0.0

    License

    MIT

    Unpacked Size

    103 kB

    Total Files

    13

    Last publish

    Collaborators

    • alex-stytch
    • jbolduc-stytch
    • chris-stytch
    • danny-stytch
    • allison-stytch
    • ollie-stytch
    • taronish-stytch
    • marygruen
    • jennifer-stytch
    • jhaven-stytch
    • nicole-stytch
    • anmol-stytch
    • max-stytch
    • julianna-stytch
    • reed-stytch
    • grace-stytch