UI config

import React from 'react';
import { StytchLogin } from '@stytch/react';

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

  const callbacks = {
    onEvent: ({ type, data }) => {
      if (type === 'MAGIC_LINK_LOGIN_OR_CREATE') {
        console.log('Email magic Link sent', data);
      }
    },
    onError: (data) => {
      console.log(data);
    },
  };

  const config = {
    products: ['emailMagicLinks', 'oauth'],
    emailMagicLinksOptions: {
      loginRedirectURL: 'https://example.com/authenticate',
      loginExpirationMinutes: 30,
      signupRedirectURL: 'https://example.com/authenticate',
      signupExpirationMinutes: 30,
    },
    oauthOptions: {
      providers: [{ type: 'google', one_tap: true, position: 'floating' }, { type: 'microsoft' }],
    },
  };

  return (
    <div className="sign-in-container">
      <StytchLogin config={config} styles={style} callbacks={callbacks} />
    </div>
  );
};

export default Login;