Assign custom roles with a function and Microsoft Graph in statci web apps

Question

I'm trying to follow Tutorial: Assign custom roles with a function and Microsoft Graph

I have gone through each step carefully and configured all the setting properly. But when I clikc Login I see following error in console

GET https://victorious-island-091e86f10.1.azurestaticapps.net/.auth/login/aad 404 (Not Found)

Looks like the static web page doesn't have access to /.auth

staticwebapp.config.json has

    "auth": {
        "rolesSource": "/api/GetRoles",
        "identityProviders": {
            "azureActiveDirectory": {
                "userDetailsClaim": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
                "registration": {
                    "openIdIssuer": "https://login.microsoftonline.com/<my tenant id>",
                    "clientIdSettingName": "AAD_CLIENT_ID",
                    "clientSecretSettingName": "AAD_CLIENT_SECRET"
                },
                "login": {
                    "loginParameters": [
                        "resource=https://graph.microsoft.com"
                    ]
                }
            }
        }
    },

score 0 · Answer 1 · answered Feb 01 '22 at 11:28

Please check if below points give an idea . I followed the doc and tried to login, and

Got the404 not found error . Some times it maybe due to some whitespace or extra character like (dot.) after callback or somewhere in azure ad app redirect url example: https://kind-ground-0932d10.1.azurestaticapps.net/.auth/login/aad/callback. (in my case)
Please make sure to add cliend id and secret name and value each, in the Application settings section under configuration blade ,if it has to be used in staticwebapp.config.json

Also please make sure to grant consent to the graph permissions required . Make sure to tick the Id token in the authentication section. Delete cache and cookies .Then go to website https://kind-ground-0932d10.1.azurestaticapps.net/ and try to login

Other workarounds:

Try if it works with v2 endpoint and by removing clientsecretsettingname.We need to erase userDetailsClaim,if we use v2 endpoint: Reference

"auth": {
    "identityProviders": {
      "azureActiveDirectory": {
        "registration": {
          "openIdIssuer": "https://login.microsoftonline.com/<tenantid>/v2.0",
          "clientIdSettingName": "STATICWEBCLIENTID"
        }

Check the json file for routes if they are set to return 404 .

{
  "route": "/.auth/login/aad",
  "statusCode": 404
}

Or

Try to create routing rules to redirect to a aad route

example-configuration-file- Azure Static Web Apps | Microsoft Docs

For Example ,routes in staticwebapp.config.json :

"routes": [
     {
       "route": "/login",
       "rewrite": "/.auth/login/aad"
     },
     {
       "route": "/api/*",
       "allowedRoles": ["authenticated"]
     },
    {
       "route": "/admin*",
       "allowedRoles": ["administrator"]
    }
...
]

Also please check this blog

Note: Customizing authentication and assigning roles using a function require the Standard Hosting plan.

References:

Assign custom roles with a function and Microsoft Graph in statci web apps

1 Answers1