UI config

import React from 'react';
import { StytchB2B } from '@stytch/react/b2b';

const Login = () => {
  const style = {
    fontFamily: 'Arial',
  };

  const callbacks = {
    onEvent: ({ type, data }) => {
      console.log(type, data);
    },
    onError: (data) => {
      console.log(data);
    },
  };

  // Example config for the Discovery auth flow, hosted on a generic login page
  const discoveryConfig = {
    authFlowType: 'Discovery',
    products: ['emailMagicLinks', '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,
    },
  };

  // Example config for the Organization auth flow, hosted on an
  // Organization-specific login page
  const organizationConfig = {
    authFlowType: 'Organization',
    products: ['emailMagicLinks', 'oauth', 'sso', 'passwords'],
    emailMagicLinksOptions: {
      loginRedirectURL: 'https://example.com/authenticate',
      signupRedirectURL: 'https://example.com/signup',
    },
    oauthOptions: {
      loginRedirectURL: 'https://example.com/authenticate',
      signupRedirectURL: 'https://example.com/signup',
      providers: [
        { type: 'google', one_tap: true, cancel_on_tap_outside: false },
        { type: 'microsoft' },
      ],
      providerParams: {
        login_hint: 'example_hint@stytch.com',
      },
    },
    ssoOptions: {
      loginRedirectURL: 'https://example.com/authenticate',
      signupRedirectURL: 'https://example.com/signup',
    },
    passwordOptions: {
      loginRedirectURL: 'https://example.com/authenticate',
      resetPasswordRedirectURL: 'https://example.com/resetPassword',
      resetPasswordExpirationMinutes: 20,
    },
    sessionOptions: {
      sessionDurationMinutes: 60,
    },
  };

  // Example config for PasswordReset flows - you'll launch the UI component with this configuration after users click the password reset redirect URL.
  const passwordResetConfig = {
    authFlowType: 'PasswordReset',
    products: ['passwords'],
    sessionOptions: { sessionDurationMinutes: 60 },
  };

  return (
    <div>
      {/* Choose the discoveryConfig, organizationConfig, or passwordResetConfig */}
      <StytchB2B
        config={discoveryConfig}
        styles={style}
        callbacks={callbacks}
      />
    </div>
  );
};

export default Login;