@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 on 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 = {
    loginOrSignupView: {
      products: ['emailMagicLinks'],
      emailMagicLinksOptions: {
        loginRedirectURL: 'https://example.com/authenticate',
        loginExpirationMinutes: 30,
        signupRedirectURL: 'https://example.com/authenticate',
        signupExpirationMinutes: 30,
        createUserAsPending: true,
      },
    },
    style: {
      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">
      <Stytch
        publicToken={stytchProps.publicToken}
        loginOrSignupView={stytchProps.loginOrSignupView}
        style={stytchProps.style}
        callbacks={stytchProps.callbacks}
      />
    </div>
  );
};

Typescript Support

There are built in typescript definitions in the npm package.