JSPM

@stytch/vanilla-js

5.41.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 75885
  • Score
    100M100P100Q163538F
  • License MIT

Stytch's official Javascript Client Library

Package Exports

  • @stytch/vanilla-js
  • @stytch/vanilla-js/b2b
  • @stytch/vanilla-js/b2b/adminPortal
  • @stytch/vanilla-js/b2b/headless
  • @stytch/vanilla-js/dist/adminPortal/index.esm.js
  • @stytch/vanilla-js/dist/adminPortal/index.js
  • @stytch/vanilla-js/dist/b2b/index.esm.js
  • @stytch/vanilla-js/dist/b2b/index.headless.esm.js
  • @stytch/vanilla-js/dist/b2b/index.headless.js
  • @stytch/vanilla-js/dist/b2b/index.js
  • @stytch/vanilla-js/dist/index.esm.js
  • @stytch/vanilla-js/dist/index.headless.esm.js
  • @stytch/vanilla-js/dist/index.headless.js
  • @stytch/vanilla-js/dist/index.js
  • @stytch/vanilla-js/headless

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/vanilla-js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Stytch Javascript SDK

Slack Link

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.

B2C 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('charles.babbage@example.com');

// 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',
    },
  },
});

B2C StytchHeadlessClient

Developers that don't use Stytch UI elements can use the StytchHeadlessClient instead, which is significantly smaller!

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('charles.babbage@example.com');

B2B StytchB2BUIClient

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 { StytchB2BUIClient } from '@stytch/vanilla-js/b2b';

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

// Call Stytch APIs from the browser
stytch.magicLinks.email.loginOrSignup({
  email_address: 'charles.babbage@example.com',
  organization_id: 'organization-test-07971b06-ac8b-4cdb-9c15-63b17e653931',
});

// Render prebuilt UI
stytch.mount({
  elementId: '#magic-link',
  config: {
    authFlowType: 'Discovery',
    products: ['emailMagicLinks', 'oauth'],
    emailMagicLinksOptions: {
      loginRedirectURL: 'https://example.com/authenticate',
      signupRedirectURL: 'https://example.com/authenticate',
    },
    oauthOptions: {
      providers: [{ type: 'google' }, { type: 'microsoft' }],
      loginRedirectURL: 'https://example.com/authenticate',
      signupRedirectURL: 'https://example.com/authenticate',
    },
    sessionOptions: {
      sessionDurationMinutes: 60,
    },
  },
});

B2B StytchB2BHeadlessClient

Developers that don't use Stytch UI elements can use the StytchB2BHeadlessClient instead, which is significantly smaller!

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

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

// Call Stytch APIs from the browser
stytch.magicLinks.email.loginOrSignup({
  email_address: 'charles.babbage@example.com',
  organization_id: 'organization-test-07971b06-ac8b-4cdb-9c15-63b17e653931',
});

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

See Also