UI Configuration

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

const Login = () => {
  const styles = {
    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,
      createUserAsPending: true,
    },
    oauthOptions: {
      providers: [
        {
          type: 'google',
          one_tap: true,
          position: 'floating',
          cancel_on_tap_outside: false,
        },
        {
          type: 'microsoft',
          provider_params: {
            login_hint: 'example_hint@stytch.com',
          },
        },
      ],
    },
  };

  // Customize the text in the prebuilt UI via the `strings` parameter
  const strings = {
    'login.title': 'Welcome back!',
  };

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

export default Login;