Long isLoading state when refreshing page

Help
,
1

Hello! I’m building a web application and this is my first time setting up authentication with auth0. I have the login flow working well. The user can login, and once authenticated, they are redirected to specific route. However once they get to the authenticated route, if they refresh the page, I have a loading spinner that shows if the auth0 hooks isLoading state is true, and it stays they way for a good minute or two, and eventually goes back to my login screen. I’ll paste some code snippets, but I’m not entirely sure what I’m doing wrong here:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import App from './App';
import store from './redux/store';
import { Auth0Provider } from '@auth0/auth0-react';
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Auth0Provider
      domain={import.meta.env.VITE_AUTH0_DOMAIN}
      clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
      authorizationParams={{
        redirect_uri: import.meta.env.VITE_AUTH0_REDIRECT_URI,
        audience: import.meta.env.VITE_AUTH0_VFR3D_API_AUDIENCE,
      }}
    >
      <Provider store={store}>
        <App />
      </Provider>
    </Auth0Provider>
  </React.StrictMode>
);


import React from 'react';
import { Ion, ArcGisMapService } from 'cesium';
import { RouterProvider, createBrowserRouter, Navigate } from 'react-router-dom';
import { useAuth0, withAuthenticationRequired } from '@auth0/auth0-react';
import AppLayout from './AppLayout';
import { ContactMePage } from './pages/ContactMe';
import DocumentationPage from './pages/DocumentationPage';
import HomePage from './pages/Home';
import AuthenticatedViewerPage from './pages/ViewerPage';
import ErrorBoundary from './ui/ErrorBoundary';
import LoginPage from './pages/LoginPage';
import LoadingSpinner from './ui/ReusableComponents/LoadingSpinner';

const AuthenticatedRoute = withAuthenticationRequired(AuthenticatedViewerPage, {
  onRedirecting: () => <LoadingSpinner />,
});

const ProtectedRoute = () => {
  const { isAuthenticated, isLoading } = useAuth0();

  if (isLoading) {
    return <LoadingSpinner />;
  }

  return isAuthenticated ? <AuthenticatedRoute /> : <Navigate to="/login" />;
};

const App: React.FC = () => {
  const arcGisApiKey = import.meta.env.VITE_ARCGIS_API_KEY;
  const cesiumAccessToken = import.meta.env.VITE_CESIUM_API_KEY;

  Ion.defaultAccessToken = cesiumAccessToken;
  ArcGisMapService.defaultAccessToken = arcGisApiKey;

  const router = createBrowserRouter([
    {
      element: <AppLayout />,
      children: [
        {
          path: '/',
          element: <HomePage />,
        },
        {
          path: '/Viewer',
          element: <ProtectedRoute />,
        },
        {
          path: '/contact',
          element: <ContactMePage />,
        },
        {
          path: '/documentation',
          element: <DocumentationPage />,
        },
        {
          path: '/login',
          element: <LoginPage />,
        },
      ],
      errorElement: <ErrorBoundary />,
    },
  ]);

  return <RouterProvider router={router} />;
};

export default App;


import { IonImageryProvider, ProviderViewModel, buildModuleUrl } from 'cesium';
import { useEffect, useState } from 'react';
import { Globe, Viewer as ResiumViewer } from 'resium';
import FlyTo from '../features/Airports/FlyTo';
import VisibleAirports from '../features/Airports/VisibleAirports';
import ImageryLayers from '../features/Imagery/ImageryLayers';
import LoadingSpinner from '../ui/ReusableComponents/LoadingSpinner';
import Sidebar from '../ui/Sidebar/Sidebar';
import { IMAGERY_LAYER_OPTIONS } from '../utility/constants';
import AirportInfoPopup from '../features/Airports/InformationPopup/AirportInfoPopup';
import { RoutesPanel } from '../features/Routes/RoutesPanel/RoutesPanel';
import RouteComponent from '../features/Routes/RouteComponent';
import { useDispatch } from 'react-redux';
import { useAuth0, withAuthenticationRequired } from '@auth0/auth0-react';
import { setAccessToken } from '../redux/slices/authSlice';

const ViewerPage = () => {
  const dispatch = useDispatch();
  const { isAuthenticated, getAccessTokenSilently } = useAuth0();
  const imageryViewModels: ProviderViewModel[] = [];

  const loadBaseImageryViewModels = () => {
    imageryViewModels.push(
      new ProviderViewModel({
        name: 'Sentinel-2',
        iconUrl: buildModuleUrl('Widgets/Images/ImageryProviders/sentinel-2.png'),
        tooltip: 'Sentinel-2 cloudless.',
        creationFunction: function () {
          return IonImageryProvider.fromAssetId(3954);
        },
      })
    );

    imageryViewModels.push(
      new ProviderViewModel({
        name: 'Bing Maps Aerial',
        iconUrl: buildModuleUrl('Widgets/Images/ImageryProviders/bingAerial.png'),
        tooltip: 'Bing Satellite Imagery',
        creationFunction: function () {
          return IonImageryProvider.fromAssetId(2);
        },
      })
    );

    imageryViewModels.push(
      new ProviderViewModel({
        name: 'Bing Maps Road',
        iconUrl: buildModuleUrl('Widgets/Images/ImageryProviders/bingRoads.png'),
        tooltip: 'Bing Maps With Roads',
        creationFunction: function () {
          return IonImageryProvider.fromAssetId(4);
        },
      })
    );
  };

  useEffect(() => {
    const getAccessToken = async () => {
      try {
        const token = await getAccessTokenSilently();
        dispatch(setAccessToken(token));
      } catch (error) {
        console.error('Error getting access token:', error);
      }
    };

    if (isAuthenticated) {
      getAccessToken();
    }
  }, [getAccessTokenSilently, isAuthenticated, dispatch]);

  loadBaseImageryViewModels();

  return (
    <div className="flex h-screen">
      <Sidebar imageryLayerOptions={IMAGERY_LAYER_OPTIONS} />
      <div className="flex-1">
        <ResiumViewer
          useBrowserRecommendedResolution={false}
          imageryProviderViewModels={imageryViewModels}
          className="h-full"
          geocoder={false}
          timeline={false}
          infoBox={false}
          animation={false}
        >
          <Globe maximumScreenSpaceError={1.3} />
          <ImageryLayers />
          <VisibleAirports />
          <RouteComponent />
          <FlyTo />
        </ResiumViewer>
        <RoutesPanel />
        <AirportInfoPopup />
      </div>
    </div>
  );
};

const AuthenticatedViewerPage = withAuthenticationRequired(ViewerPage, {
  onRedirecting: () => <LoadingSpinner fullScreen={true} />,
});

export default AuthenticatedViewerPage;

And when I refresh, I get this in console:

Cookie “auth0_compat” does not have a proper “SameSite” attribute value. Soon, cookies without the “SameSite” attribute or with an invalid value will be treated as “Lax”. This means that the cookie will no longer be sent in third-party contexts. If your application depends on this cookie being available in such contexts, please add the “SameSite=None“ attribute to it. To know more about the “SameSite“ attribute, read Set-Cookie - HTTP | MDN

I have my url set in my allowed web origins, I saw another post that suggested this, but hasn’t fixed it for me.

2

Exactly the same here. Did you ever get around fixing it?