Issue with final redirect URI after successful AAD Auth in a React.js Azure Static Web App

Question

I am very new to React.js. Just created a simple app where user needs to authenticate with the Azure Active Directory (AAD) to access a given page ("authenticated-map"). I'm using Custom AAD Auth for Azure Static Web Apps (specifically Azure Active Directory Version 1)

How it works:

1. I created a "Login" button in the navbar component.

import React, { useState } from 'react';
import { Link } from 'react-router-dom';

const Navigation = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <nav>
      <Link to="/">
        <img src="/logo.png" alt="logo" className="logo" onClick={() => setIsOpen(false)} />
      </Link>
      <button className="hamburger" onClick={() => setIsOpen(!isOpen)}>
        &#9776;
      </button>
      <ul className={`nav-links ${isOpen ? 'open' : ''}`}>
        <li><Link to="/" onClick={() => setIsOpen(false)}>Home</Link></li>
        <li><Link to="/blog" onClick={() => setIsOpen(false)}>Blog</Link></li>
        <li><Link to="/public-map" onClick={() => setIsOpen(false)}>Map</Link></li>
        <li><Link to="/login" onClick={() => setIsOpen(false)}>Login</Link></li>  //<--here
      </ul>
    </nav>
  );
};

export default Navigation;

2. Then I created a LoginPage. When the navbar link is clicked, the user is presented with the Microsoft AAD login screen.

import React, { useEffect } from 'react';


const LoginPage = () => {
  useEffect(() => {
    window.location.href = "/.auth/login/aad?post_login_redirect_uri=https://<my-static-web-app>.azurestaticapps.net/authenticated-map";
  }, []);

  return <div>Redirecting to login...</div>;
};

export default LoginPage;

3. I created a staticwebapp.config.json file with the route and auth sections defined

{
  "routes": [
    {
      "route": "/authenticated-map*",
      "allowedRoles": ["authenticated"]
    }
  ],

  "auth": {
    "identityProviders": {
      "azureActiveDirectory": {
        "userDetailsClaim": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
        "registration": {
          "openIdIssuer": "https://login.microsoftonline.com/<my-tenant-id>",
          "clientIdSettingName": "AZURE_CLIENT_ID",
          "clientSecretSettingName": "AZURE_CLIENT_SECRET"
        }
      }
    }
  }
}

4. I then registered a new AAD service principal (App Registration)

   • Originally, I set type to Single Page Application, but this failed with the errors below
   • Set Redirect URL to https://<my-static-web-app>.azurestaticapps.net/authenticated-map
   • 

5. I generated a new client_secret then saved both the client_id and new client_secret to the Static Web App's App Settings (AZURE_CLIENT_ID and AZURE_CLIENT_SECRET)

   • 

Issue:

I run npm run build then commit the app to GitHub where a GitHub Action builds it. When I click the "Login" button on the rendered website (in a new Incognito Window): - I'm directed to the AAD login screen - I input my email address and password - Handle MFA - Then I'm shown this error:

AADSTS50011: The redirect URI 'https://<my-static-app>.azurestaticapps.net/.auth/login/aad/callback' specified in the request does not match the redirect URIs configured for the application '24bb1069-01fc-443c-82e3-816d67a03655'. Make sure the redirect URI sent in the request matches one added to your application in the Azure portal. Navigate to https://aka.ms/redirectUriMismatchError to learn more about how to fix this.

• So then I add the .../add/callback redirect URI to the AAD App Registration then try the Login process again. This time I'm greeted with a different error:

AADSTS9002325: Proof Key for Code Exchange is required for cross-origin authorization code redemption.

• There is this StackOverflow question about this same error.

  • This is where I implement the suggested change of changing the App Registration from Single Page Application to Website

• At this point, the login is working, but I get a 404 Not Found after logon has been completed. The app is pointed to the correct page https://<my-static-app>.azurestaticapps.net/authenticated-map. I have a component built for this page, but why is it not showing?

Here is the structure of the project:

.
├── README.md
├── build
│   ├── asset-manifest.json
│   ├── favicon.svg
│   ├── index.html
│   ├── index1.html
│   ├── logo.png
│   ├── manifest.json
│   ├── me-ai.png
│   ├── robots.txt
│   ├── service-worker.js
│   └── static
│       ├── css
│       │   ├── main.233b8d40.css
│       │   └── main.233b8d40.css.map
│       └── js
│           ├── 496.6f2d4419.chunk.js
│           ├── 496.6f2d4419.chunk.js.map
│           ├── 781.8442ebaf.chunk.js
│           ├── 781.8442ebaf.chunk.js.map
│           ├── 829.f02c3826.chunk.js
│           ├── 829.f02c3826.chunk.js.map
│           ├── main.8fb141a5.js
│           ├── main.8fb141a5.js.LICENSE.txt
│           └── main.8fb141a5.js.map
├── package-lock.json
├── package.json
├── public
│   ├── favicon.svg
│   ├── index.html
│   ├── index1.html
│   ├── logo.png
│   ├── manifest.json
│   ├── me-ai.png
│   ├── robots.txt
│   └── service-worker.js
├── src
│   ├── auth
│   │   └── authConfig.js
│   ├── components
│   │   ├── forms
│   │   │   └── PinForm.js
│   │   ├── layout
│   │   │   ├── Footer.js
│   │   │   └── Navigation.js
│   │   ├── markers
│   │   │   └── DraggableMarker.js
│   │   ├── pages
│   │   │   ├── AuthenticatedMapPage.js //<--Should be rendered upon successful AAD login
│   │   │   ├── BlogPage.js
│   │   │   ├── HomePage.js
│   │   │   ├── LoginPage.js
│   │   │   ├── PostPage.js
│   │   │   └── PublicMapPage.js
│   │   ├── posts
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── posts.json
│   │   └── utils.js
│   ├── core
│   │   ├── App.js
│   │   └── reportWebVitals.js
│   ├── db
│   │   └── indexedDBHelper.js
│   ├── index.js
│   ├── router
│   │   └── AppRouter.js
│   ├── services
│   │   └── posts.js
│   ├── styles
│   │   ├── component
│   │   │   └── pages
│   │   │       ├── AuthenticatedMapPage.css
│   │   │       ├── BlogPage.css
│   │   │       ├── PostPage.css
│   │   │       └── PublicMap.css
│   │   └── global
│   │       ├── App.css
│   │       └── index.css
│   └── tests
│       ├── App.test.js
│       └── setupTests.js
├── staticwebapp.config.json
└── swa-db-connections
    └── staticwebapp.database.config.json

Answer 1

Figured this out...

Had to add...

"navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
  },

...to staticwebapp.config.json.

Hm...it doesn't make intuitive sense to me (a novice JS dev) why I need to "rewrite" to /index.html instead of "redirecting" to (in my case) /authenticated-map page after a successful authentication.

Important ref material here