Azure / Azure/static-web-apps

Stuck in a redirect loop while trying to login with AAD in Static Web App with staticwebapp.config.json

Open
#1,228 18 comments 7 reactions 0 assignees View on GitHub
Dominant language
No language data
Stars
346
Forks
67
PR merge metrics
No merged PRs in 30d

Description

Hello,

We are using Static Web App for a small internal admin resource. It is written with the latest version of React and Typescript. For authentication we are using configuration in `staticwebapp.config.json`. Here is the content of this file:
```
{
"routes": [
{
"route": "/logout",
"rewrite": "/.auth/logout"
},
{
"route": "/login",
"rewrite": "/.auth/login/aad?post_login_redirect_uri=.referrer"
},
{
"route": "/.auth/*",
"allowedRoles": [
"anonymous",
"authenticated"
]
},
{
"route": "/*",
"allowedRoles": ["authenticated"]
}
],
"platform": {
"apiRuntime": "node:16"
},
"navigationFallback": {
"rewrite": "/index.html",
"exclude": [
"/.auth/*",
"/static/*",
"/asset-manifest.json"
]
},
"auth": {
"identityProviders": {
"azureActiveDirectory": {
"registration": {
"openIdIssuer": "https://login.microsoftonline.com/805bc25d-8e64-4ed6-8d24-3883c9068c5a/v2.0",
"clientIdSettingName": "AAD_CLIENT_ID",
"clientSecretSettingName": "AAD_CLIENT_SECRET"
}
}
}
},
"responseOverrides": {
"401": {
"statusCode": 302,
"redirect": "/login"
}
}
```

The authentication does seem to work for desktop browsers and it also protects the whole application. I can get `clientPrincipal` information by going to `/.auth/me` , however
The problem that I am facing is the redirect loop which goes on until it just fails at the end and the loop stops. I guess some browsers suppress this because I can only see this problem in the console for Edge for example. In mobile Safari browser on my iPhone I actually can't login and I keep getting redirected to the login screen. The same goes for desktop Firefox.

And when the loop in Firefox stops I get this:
image

I guess it's related to this issue [#297](https://github.com/Azure/static-web-apps/issues/297) but none of the suggestions helped me to resolve it on my end.

This is the screenshot of my network tab:
image

This is the screenshot of my console tab in desktop Edge:

![telegram-cloud-document-2-5321303839377207941](https://github.com/Azure/static-web-apps/assets/17291506/28013fe8-35eb-4f25-a90e-874f9742691d)

Worth mentioning that this route is probably to blame:
```
{
"route": "/*",
"allowedRoles": ["authenticated"]
}
```
because if I remove the wildcard `*` the redirect issues goes away. However my assumption was that by adding this route in front it would ignore everything that is related to `/.auth`:
```
{
"route": "/.auth/*",
"allowedRoles": [
"anonymous",
"authenticated"
]
},
```

I will appreciate any help :)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.