Not returning to login page after access token expires in Chrome

[BirdThunderford]

I have a web app that returns to the login page when the refresh token expires. Its access policy tool looks like this (it looks a bit crazy but I’ve been running a bunch of tests):

Everything looks the same in terms of fetching a new access token every 5 minutes until ultimately returning to the login page after the 15 minute refresh token window is up. However this only seems to work for Firefox and Safari. In Chrome, it does the same steps but instead of going to the login page, it either reauthorizes as if I had clicked on the login button (and fetch an refresh/access token anew) or the access/refresh token never actually expired. At which point it returns me back to the Home screen that should be an authenticated route. I feel like its implicitly re-authenticating me even though I do not have any passwords saved or anything in Chrome.

Lots of code incoming.
App.js:

import { Fragment, lazy, Suspense } from 'react';
import { Routes, Route, useNavigate } from 'react-router-dom';

import { Security, LoginCallback } from '@okta/okta-react';
import { OktaAuth, toRelativeUrl } from '@okta/okta-auth-js';
import { ThemeProvider } from '@mui/material/styles';
import { CacheProvider } from '@emotion/react';

import Home from '../Home';
import Login from '../Login';

function App() {
  const navigate = useNavigate();
  const restoreOriginalUri = (_oktaAuth,  originalUri) => {
    let go_to_this = toRelativeUrl(originalUri || '/', window.location.origin);
    navigate(go_to_this);
  };

  return (
      <Security
        oktaAuth={oktaAuth} 
        restoreOriginalUri={restoreOriginalUri}
      >
        <CacheProvider value={cache}>
          <Box
            id='app-root-container'
            sx={{
              display: 'flex',
              flexDirection: 'column',
              height: '100vh',
              m: -1,
            }}
          >
            <BackendAPIClientProvider>
              <SocketProvider>
                <ThemeProvider theme={light}>
                  <Fragment>
                    <Suspense fallback={<LoadingIcon />}>
                      <Routes>
                        <Route path='/' exact={true} element={<RequireAuth />}>
                          <Route path='' element={<Home />} />
                        </Route>
                        <Route path='/login' element={<Login />} />
                        <Route path='/oidc/callback' element={<LoginCallback />} />
                        <Route path='*' element={<PageNotFound404 />} />
                      </Routes>
                    </Suspense>
                  </Fragment>
                </ThemeProvider>
              </SocketProvider>
            </BackendAPIClientProvider>
          </Box>
        </CacheProvider>
      </Security>  
  )
}

AuthRoute.js - the authorization gatekeeper for secure Routing based off the example found here.
I’m doing it this way because SecureRoute does not work with react-router-dom v6.

import React, { useEffect, useState } from "react";
import { useOktaAuth } from "@okta/okta-react";
import { Navigate, Outlet } from "react-router-dom";
import { toRelativeUrl } from '@okta/okta-auth-js';

import LoadingIcon from '../LoadingIcon';

export const RequireAuth = () => {
  const { oktaAuth, authState } = useOktaAuth();
  const [ notLoggedIn, setNotLoggedIn ] = useState(false);

  useEffect(() => {
    if (!authState) {
      console.log('authState not initialized.')
      return;
    }

    if (!authState?.isAuthenticated) {
      console.log('user not authenticated')
      setNotLoggedIn(true);
    } else {
      console.log('user is authenticated!')
      setNotLoggedIn(false)
    }
  }, [oktaAuth, !!authState, authState?.isAuthenticated]);

  if (!authState || !authState?.isAuthenticated) {
    if (notLoggedIn) {
      console.log("load login page");
      return <Navigate to='/login' replace={true} />
    } else {
      console.log(
        "Route not Authenticated. Waiting for authentication page to load."
      );
      return <LoadingIcon />
    }
  }

  return (<Outlet />);
}

Here’s my Login.js code:

import { useEffect } from 'react';
import { Navigate } from 'react-router-dom'
import { useOktaAuth } from '@okta/okta-react';


const Login = (props) => {
  const { oktaAuth, authState } = useOktaAuth();
  const theme = useTheme();

  useEffect(() => {
    console.log('login - user authenticated? ' + authState?.isAuthenticated);
  })

  const handleLogin = async () => {
    await oktaAuth.signInWithRedirect();
  }

  const layout = () => {
    if (authState?.isAuthenticated) {
      console.log('already authenticated. Going to main page.')
      return <Navigate to='/' replace={true} />
    } else {
      return (
		...layout UI code
      )
    }
  } 
  
  return layout();
}

export default Login;

When the token check returns a 400 error in Chrome this is what I see:

And then returns to the home screen automatically re-authenticated. Based on the above it almost looks like the code does a weird loopback within Login.js printing

login - user authenticated? false

and then re-rendering again immediately. As if Okta is doing some re-authentication in the background that then authenticates the user and triggers the login re-render.

The same thing in Firefox (at which point it returns to the login page and prints nothing else to the console:

If someone could point out what I may be doing wrong it would be a great help. The loss of SecureRoute functionality when used with react-router-dom threw me for a curve. I’m not exactly sure if I’m implementing things correctly here or not.

Thanks!