import {
  Products,
  createStytchClient,
  StytchLogin,
} from "@stytch/vanilla-js";

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

// Set the login configuration
const config = {
  products: [Products.emailMagicLinks, Products.oauth],
  oauthOptions: {
    providers: [
      { type: 'google', one_tap: true },
      { type: 'microsoft' }
    ],
    loginRedirectURL: 'https://example.com/authenticate',
    signupRedirectURL: 'https://example.com/authenticate',
  },
  emailMagicLinksOptions: {
    loginRedirectURL: 'https://example.com/authenticate',
    signupRedirectURL: 'https://example.com/authenticate',
  },
  sessionOptions: {
    sessionDurationMinutes: 60,
  },
};

// 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: (error) => {
    console.log(error);
  },
};

// Customize the text in the prebuilt UI
const strings = {
  'login.title': 'Log in or sign up',
};

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

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

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

const config = {
  products: [Products.emailMagicLinks, Products.oauth],
  emailMagicLinksOptions: {
    loginRedirectURL: 'https://example.com/authenticate',
    signupRedirectURL: 'https://example.com/authenticate',
  },
  oauthOptions: {
    providers: [
      { type: 'google', one_tap: true, cancel_on_tap_outside: false },
      { type: 'microsoft' },
      { type: 'apple' },
    ],
    loginRedirectURL: 'https://example.com/authenticate',
    signupRedirectURL: 'https://example.com/authenticate',
  },
  sessionOptions: {
    sessionDurationMinutes: 60,
  },
};