JavaScript SDK - WebAuthn | Stytch Consumer authentication

StytchPasskeyRegistration

The SDK also comes with a pre-built UI component for our Passkeys product.

To add passkeys to the login UI, add Products.passkeys to the products array in the configuration.

We require that you also add at least one other product to the products array as well.

To see all authentication and customization options, see the UI config section.

import React from 'react';
import { Products } from '@stytch/vanilla-js';
import { StytchLogin } from '@stytch/react';

const config = {
  emailMagicLinksOptions: {
    loginExpirationMinutes: 30,
    loginRedirectURL: 'https://example.com/authenticate',
    signupExpirationMinutes: 30,
    signupRedirectURL: 'https://example.com/authenticate',
  },
  products: [Products.emailMagicLinks, Products.passkeys],
};

export const Login = () => {
  return <StytchLogin config={config} />;
};

There is a separate component for the Passkey registration flow.

The component takes all props the StytchLogin component supports.

To see all authentication and customization options, see the UI config section.

import React from 'react';
import { Products } from '@stytch/vanilla-js';
import { StytchPasskeyRegistration } from '@stytch/react';

const config = {
  emailMagicLinksOptions: {
    loginExpirationMinutes: 30,
    loginRedirectURL: 'https://example.com/authenticate',
    signupExpirationMinutes: 30,
    signupRedirectURL: 'https://example.com/authenticate',
  },
  products: [Products.emailMagicLinks, Products.passkeys],
};

export const PasskeyRegistration = () => {
  return <StytchPasskeyRegistration config={config} />;
};