@stytch/vanilla-js

Stytch Javascript SDK

Installation

npm install @stytch/vanilla-js

Usage

The vanilla Stytch Javascript SDK is built on open web standards and is compatible with all Javascript frameworks.

StytchUIClient

The Stytch UI Client provides methods for interacting with the Stytch API from a browser environment, along with prebuilt UI components such as our login form.

import { StytchUIClient } from '@stytch/vanilla-js';

const stytch = new StytchUIClient('public-token-test-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx');

// Call Stytch APIs from the browser
stytch.magicLinks.email.loginOrCreate('[e-mail]');

// Render prebuilt UI
stytch.mountLogin({
  elementId: '#magic-link',
  config: {
    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',
    },
  },
});

StytchHeadlessClient

Developers that don't use Stytch UI elements can use the StytchHeadlessClient instead, which is significantly smaller (sub-20kb gzipped!)

import { StytchHeadlessClient } from '@stytch/vanilla-js/headless';

const stytch = new StytchHeadlessClient('public-token-test-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx');

// Call Stytch APIs from the browser
stytch.magicLinks.email.loginOrCreate('[e-mail]');

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

See Also

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