import {
  AuthFlowType,
  B2BProducts,
  createStytchB2BClient,
  StytchB2B,
} from "@stytch/vanilla-js/b2b";

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

// Set the login flow
// See below for examples of the different login flows
const config = {
  products: [B2BProducts.emailMagicLinks],
  sessionOptions: { sessionDurationMinutes: 60 },
  authFlowType: AuthFlowType.Discovery,
};

// Set the styles for the prebuilt UI
const presentation = {
  theme: { 'font-family': 'Arial' },
};

// Set the callbacks to fire as a result of events from the prebuilt UI
const callbacks = {
  onEvent: ({ type, data }) => {
    console.log(type, data);
  },
  onError: (data) => {
    console.log(data);
  },
};

// Customize the text in the prebuilt UI
const strings = {
  'organizationLogin.title': 'Proceed to your {organizationName} account',
};

// Register the custom element and set all of the options
customElements.define('stytch-ui', StytchB2B);
document.getElementById('stytch-ui').render({
  client: stytch,
  presentation,
  callbacks,
  config,
  strings,
});

// in HTML:
// <stytch-ui id="stytch-ui" />

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

// Hosted on a generic login page
const discoveryConfig = {
  authFlowType: 'Discovery',
  products: [B2BProducts.emailMagicLinks, B2BProducts.oauth],
  emailMagicLinksOptions: {
    discoveryRedirectURL: 'https://example.com/authenticate',
  },
  oauthOptions: {
    discoveryRedirectURL: 'https://example.com/authenticate',
    providers: [
      { type: 'google', one_tap: true, cancel_on_tap_outside: false },
      { type: 'microsoft' },
    ],
  },
  sessionOptions: {
    sessionDurationMinutes: 60,
  },
};