Thank you for posting.
1. Created a simple React app by cloning this [sample repo/(https://github.com/login?return_to=%2Fstaticwebdev%2Freact-basic%2Fgenerate)
2. Added your suggested HTML to the `/public/index.html` for the app frontend
3. Added the `anonymous`, `authenticated` and `custom` directories, each with their own `index.html`.
4. Created a `staticwebapp.config.json` file with the sample `routes` you have listed.
5. Verified that the `app_location` in the workflow file is indeed `/`.
The problem I have, is *where* to put these directories and the config file. I put the config file in the project root (see `tree` below). The only place I could the directories to work is to place them in `/public`. I tried putting them in `/src` too, no go. I ran `npm run build` then `npm start` to view the app. But still, whenever I click on the `authenticated` link, the `index.html` for that directory is opened without auth. I cleared site data and even used an Incognito Window. Still, no auth being enforced.
Do you have thoughts on what I'm missing?
**EDIT 1**: I was trying to test this locally. This auth mechanism seems to only work when the Static Web App is *deployed* to Azure. This sure makes auth simple.
Thank you!