Auth0 login example as a set of functions that can be run in a typical front end application. The `checkAuthState()` function is run on load.

auth0-login-example.ts

import { Auth0Client, createAuth0Client } from '@auth0/auth0-spa-js';

const authConfig = {
  "domain": "MY_SITE.eu.auth0.com",
  "clientId": "SOME_STRING",
  "cacheLocation": "localstorage",
  "useRefreshTokens": true
}

/**
 * @description Do various authentication-checking steps to see if user is authenticated.
 */
export const checkAuthState = async () => {
  const auth0Client = await createAuth0Client(authConfig as any);

  await handleRedirect(auth0Client);
  await handleAuthenticatedState(auth0Client);
  await checkTokenExpiry(auth0Client);
};

/**
 * @description Handle the redirect logic.
 */
async function handleRedirect(auth0Client: Auth0Client) {
  const query = window.location.search;
  if (query.includes('code=') && query.includes('state=')) {
    await auth0Client.handleRedirectCallback();
    window.location.replace('/');
  }
}

/**
 * @description Ensure the user gets to the login if not authenticated.
 */
async function handleAuthenticatedState(auth0Client: Auth0Client) {
  const isAuthenticated = await auth0Client.isAuthenticated();
  if (!isAuthenticated) await login();
}

/**
 * @description Check if the authentication token has expired.
 */
async function checkTokenExpiry(auth0Client: Auth0Client) {
  const claims = await auth0Client.getIdTokenClaims();
  const expirationTimestamp = claims?.exp || 0;
  const currentTime = Math.floor(Date.now() / 1000);
  if (currentTime >= expirationTimestamp) await login();
}

/**
 * @description Get the user's raw token.
 */
export async function getUserToken() {
  const auth0Client = await createAuth0Client(authConfig as any);
  const claims = await auth0Client.getIdTokenClaims();
  return claims?.__raw;
}

/**
 * @description Log in the user.
 */
export async function login() {
  const auth0Client = await createAuth0Client(authConfig as any);
  await auth0Client.loginWithRedirect({
    authorizationParams: {
      redirect_uri: `${window.location.origin}/login-callback.html`
    }
  });
}

/**
 * @description Log out the user.
 */
export async function logout() {
  const auth0Client = await createAuth0Client(authConfig as any);
  auth0Client.logout({
    logoutParams: {
      returnTo: window.location.origin
    }
  });
}