Trusted Auth Tokens - Stytch Docs

import { StytchClient, StytchIdentityProvider } from '@stytch/vanilla-js';

const stytch = new StytchClient('public-token-test-be835f9a-ac37-44cf-817d-f58ac2b3ae3d');

const trustedAuthTokenParams = {
  trustedAuthToken: 'eyJ...',
  tokenProfileID: 'token-profile-id',
};

const presentation = {
  theme: { 'font-family': 'Arial' },
};

customElements.define('stytch-identity-provider', StytchIdentityProvider);
// In HTML: <stytch-identity-provider id="stytch-identity-provider" />
document.getElementById('stytch-identity-provider').render({
  client: stytch,
  presentation,
  trustedAuthTokenParams,
});

import { StytchClient, StytchIdentityProvider } from '@stytch/vanilla-js';

const stytch = new StytchClient('public-token-test-be835f9a-ac37-44cf-817d-f58ac2b3ae3d');

const trustedAuthTokenParams = {
  trustedAuthToken: 'eyJ...',
  tokenProfileID: 'token-profile-id',
};

const presentation = {
  theme: { 'font-family': 'Arial' },
};

customElements.define('stytch-identity-provider', StytchIdentityProvider);
// In HTML: <stytch-identity-provider id="stytch-identity-provider" />
document.getElementById('stytch-identity-provider').render({
  client: stytch,
  presentation,
  trustedAuthTokenParams,
});

If your project is using Trusted Auth Tokens, they can be provided to the component as well. When trustedAuthTokenParams are supplied, the component will exchange the provided token for a session and automatically log the user in before starting the authorization flow. To see all authentication and customization options, see the UI configuration props.

⌘I