Package Exports

@stytch/react
@stytch/react/dist/index.esm.js
@stytch/react/dist/index.js

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 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.