Static web app Auth0 integration not working

Derek Ruf 6

I have a Static web app which I am trying to integrate Auth0 authentication into. I have followed all the steps from the Microsoft documentation on how to do so found here:

https://learn.microsoft.com/en-us/azure/static-web-apps/authentication-custom?tabs=openid-connect%2Cinvitations

I added the necessary info to the staticwebapp.config.json file. I have also added all the necessary callback URLs to the auth0 application settings.

"auth": {
        "identityProviders": {
            "customOpenIdConnectProviders": {
                "auth0": {
                    "registration": {
                        "clientIdSettingName": "AUTH0_CLIENT_ID",
                        "clientCredential": {
                            "clientSecretSettingName": "AUTH0_CLIENT_SECRET"
                        },
                        "openIdConnectConfiguration": {
                            "wellKnownOpenIdConfiguration": "https://dev-26y6p72d7lwzkpwp.us.auth0.com/.well-known/openid-configuration"
                        }
                    },
                    "login": {
                        "nameClaimType": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
                        "scopes": ["openid", "profile"]
                    }
                }
            }
        }
    }

When I attempt to login, using this URL (found on the Microsoft documentation)

https://<website>.com/.auth/login/auth0

I get the error

404: Not Found

We couldn’t find that page, please check the URL and try again.

The issue seems to me like it is not a problem with auth0 but with the static web app not properly recognizing the data in the config file and therefore not rerouting the URL to the login URL, but I could be wrong.

Thanks in advance for any guidance.

SnehaAgrawal-MSFT 21,766 Reputation points

2023-11-14T09:34:54.4333333+00:00

@Derek Ruf Thanks for reaching here!

Could you please check here as its mentioned in the document that-

The provider name, myProvider in this example, is the unique identifier used by Azure Static Web Apps.

Also, Make sure to replace <PROVIDER_ISSUER_URL> with the path to the Issuer URL of the provider.

Let us know if issue remains.
Derek Ruf 6 Reputation points

2023-11-14T21:17:48.52+00:00

@SnehaAgrawal-MSFT Thank you for the response.

The way I understand it, the myProvider field in the config file can be replaced by any string as long as the same string is referenced when using functions like login and purge user details. In this case, I set the field to auth0 as shown in the staticwebapp.config.json file provided. I then referenced this in the login URL:

mywebsite.com/.auth/login/auth0

This URL currently does not work and gives the error:

404: Not Found

We couldn’t find that page, please check the URL and try again.

Please let me know if I am doing this correctly.

As for the issuer URL, I did replace <PROVIDER_ISSUER_URL> with the issuer URL of the provider as shown in the config file.

I appreciate any additional feedback.
SnehaAgrawal-MSFT 21,766 Reputation points

2023-11-16T17:54:05.8866667+00:00

@Derek Ruf Thanks! Also, could you confirm the file location as the recommended location for the staticwebapp.config.json is in the folder set as the app_location in the workflow file.

However, the file may be placed in any subfolder within the folder set as the app_location. Additionally, if there is a build step, you must ensure that the build step outputs the file to the root of the output_location.

See the example configuration file for details.

You may refer to this document would be helpful- https://learn.microsoft.com/en-us/azure/static-web-apps/configuration

Let us know.
SnehaAgrawal-MSFT 21,766 Reputation points

2023-11-20T08:57:56.28+00:00

@Derek Ruf Just checking if you have chance to see recent response.

Please let us know if further query or issue remains.
Derek Ruf 6 Reputation points

2023-11-21T19:05:34.87+00:00
@SnehaAgrawal-MSFT I appreciate the follow up. I do have the staticwebapp.config.json file in the directory specified in the app_location field. The routes data that I have in the config file does work, which indicates that the file is in the right place and is being recognized.

I have tried removing everything except the auth section of the config file to see if something else there was causing the problem, and the issue persisted. The entire config file for when I did that test is provided below.

{ "auth": { "identityProviders": { "customOpenIdConnectProviders": { "auth0": { "registration": { "clientIdSettingName": "AUTH0_CLIENT_ID", "clientCredential": { "clientSecretSettingName": "AUTH0_CLIENT_SECRET" }, "openIdConnectConfiguration": { "wellKnownOpenIdConfiguration": "https://dev-26y6p72d7lwzkpwp.us.auth0.com/.well-known/openid-configuration" } }, "login": { "nameClaimType": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name", "scopes": ["openid", "profile"] } } } } } }

The AUTH0_CLIENT_ID and AUTH0_CLIENT_SECRET values correspond to application settings variables.

As a reminder, when attempting to login through the URL

https://mywebsite.com/.auth/login/auth0

I get the error

404: Not Found

We couldn’t find that page, please check the URL and try again.

It seems to me like this is an internal error with how the login URL is being processed and not a problem with the third party authentication provider. The static web app seemingly behaves as if the auth data in the config file doesn't exist.

Thank you for any additional feedback.
SnehaAgrawal-MSFT 21,766 Reputation points

2023-11-22T05:01:54.8066667+00:00

@Derek Ruf Thanks for reply Could you please reach out to us by sending an email with subject line “Attn:Sneha |thread title” to AzCommunity[at]microsoft[dot]com referencing this thread, for deeper investigation.
Toby Cook 0 Reputation points

2024-01-19T03:02:17.4333333+00:00

was there ever a solution for this? I have the same issue.
Toby Cook 0 Reputation points

2024-01-19T05:03:03.15+00:00

It could be that you are on a free hosting plan as opposed to standard. That was my issue. The docs don't really emphasise this is required.

1 answer

SnehaAgrawal-MSFT 21,766 Reputation points

2024-01-22T09:15:31.22+00:00

Update- The problem was solved by changing to the Standard plan, because the free hosting plan does not allow custom authentication.
Please sign in to rate this answer.

1 person found this answer helpful.
Sam Kimmel 0 Reputation points

2024-03-25T22:07:29.96+00:00

Thank you, this was exactly my issue.

George 0 Reputation points

2024-07-04T18:36:55.13+00:00

Hello,

im also having the same issue BUT i am on the Standard Plan. Same configuration but the odd thing is i get a 404 page from my Framework (Next.js) like the ./auth/ folder is not being recognized
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

Static web app Auth0 integration not working

1 answer

Your answer