React Router not recognizing auth token (AAD B2C) in incognito

Question

I'm using the react-azure-adb2c package to authenticate users in my web app. I have a react-router-dom Route set up to require authentication:

import React from 'react';
import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';
import authentication from 'react-azure-adb2c';
import Home from '../Home';
import Products from '../Products';

authentication.initialize({
  instance: 'https://login.microsoftonline.com/tfp/',
  tenant: process.env.REACT_APP_AAD_DOMAIN,
  signInPolicy: process.env.REACT_APP_AAD_POLICY_ID,
  applicationId: process.env.REACT_APP_AAD_CLIENT_ID,
  scopes: [process.env.REACT_APP_AAD_SCOPES],
  cacheLocation: 'sessionStorage',
  redirectUri: process.env.REACT_APP_URL,
  postLogoutRedirectUri: process.env.REACT_APP_URL,
});

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route
          exact
          path="/products"
          component={authentication.required(Products)}
        />
      </Switch>
    </Router>
  );
}

export default App;

This works as expected in a normal browser window, the user clicks a link to /products, gets redirected to an Azure AD B2C login page, gets pushed back to the app on login, and then redirected to /products.

But in an incognito browser, when the user gets pushed back to the app after login, they get redirected back to the Azure login page a second time. If they log in again with the second prompt, then they get pushed to /products, as they should have the first time.

My guess here is that the Router is trying to redirect the user to the authenticated Route before the app is recognizing the token, but I'm not really sure. Again, this is only happening in an incognito browser.

Answer 1

This is because as incognito / private browsing windows will not retain local / session storage.

You can use localStorage in Chrome and Firefox, however private storage is independent from non-private/private windows, i.e. setting an item in private mode will not reflect back into non-private mode.

Local Storage data stored on normal browsing sessions will not be available when you open a browser in private browsing or in Incognito mode.

MDN Reference:

When private browsing mode is enabled, temporary, databases are created to be used for cookies and local storage; these databases are thrown away when private browsing mode is turned off, and the regular databases are re-activated. The temporary cookie and local storage databases start out empty. more.