Stytch SDK as an ES Module

Use the Stytch SDK as an ES module. You might want to use this library if you want to use the SDK with a Javascript bundler, but aren't using the Stytch React library. If you want to use the SDK with plain HTML, include https://js.stytch.com/stytch.js as a source directly, like we do here.

Installation

npm install @stytch/stytch-js

Usage

loadStytch

This function returns a Promise that resolves with a newly created window.Stytch once the SDK has loaded. If you call loadStytch in a server environment - for example during server-side rendering - it will resolve to null.

import {loadStytch} from '@stytch/stytch-js';

const Stytch = await loadStytch();

Stytch('public-token-test-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx')
  .mount({
    elementId: "#magic-link",
    loginOrSignupView: {
      products: ['emailMagicLinks', 'oauth'],
      emailMagicLinksOptions: {
        loginRedirectURL: "https://example.com/authenticate",
        loginExpirationMinutes: 30,
        signupRedirectURL: "https://example.com/authenticate",
        signupExpirationMinutes: 30,
        createUserAsPending: true,
      },
      oauthOptions: {
        providers: [{ type: 'google' }, { type: 'microsoft' }, { type: 'apple' }],
        loginRedirectURL: "https://example.com/authenticate",
        signupRedirectURL: "https://example.com/authenticate",
      }
    }
  });

For more information on how to use the Stytch SDK, please refer to the docs.

See Also

• For usage with React: see the @stytch/stytch-react library and sample app
• For usage with Next.js: see the sample app

Changelog

[2.0.3] - 2020-9-5

• Added type definitions for Apple OAuth

[2.0.2] - 2020-8-25

• Added type definitions for the OAuth product