Authentication fails with 404 on Azure SWA when trying to access /.auth/login/auth0

Question

Hi,

I am trying to configure SWA custom authentication on a react app, but after trying multiple options still I am unable to figure out the issue.

I have configured SWA with staticwebapp.config.json for custom authentication using Auth0 but it always throw 404 error when I access /.auth/login/auth0

Here is my repo link for reference https://github.com/sagar098/ReactSWA

Also I dont find any relevant logs on SWA.

Answer 1

@sagar nayak Thanks for asking question!

It seems like you are having trouble configuring SWA custom authentication on your React app. I'll do my best to help you out.

Based on the information you provided, it looks like you have configured SWA with staticwebapp.config.json for custom authentication using Auth0, but you are getting a 404 error when you try to access /.auth/login/auth0.

Check this example of what your staticwebapp.config.json file should look like:

{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    },
    {
      "route": "/.auth/login/auth0",
      "allowedRoles": ["anonymous"],
      "authLevel": "anonymous"
    }
  ],
  "authentication": {
    "routeLogin": "/.auth/login/auth0",
    "routeLogout": "/.auth/logout",
    "login": {
      "provider": "auth0",
      "clientId": "<your-auth0-client-id>",
      "clientSecret": "<your-auth0-client-secret>",
      "domain": "<your-auth0-domain>",
      "audience": "<your-auth0-audience>"
    }
  }
}

Make sure to replace the placeholders with your own Auth0 client ID, client secret, domain, and audience.

Also, make sure that you have followed the steps in the Azure Static Web Apps documentation to configure Auth0 as your authentication provider.

You can find the documentation here: https://docs.microsoft.com/en-us/azure/static-web-apps/authentication-authorization#configure-authentication-providers

If you have followed all the steps correctly and are still experiencing issues, you can try enabling logging in your Azure Static Web App.

https://learn.microsoft.com/en-us/azure/static-web-apps/apis-functions#troubleshooting-and-logs

I hope this helps! Let me know if you have any further questions.

Answer 2

@sagar nayak Glad that you were able to resolve your issue and I appreciate your effort in sharing the solution.

Your contribution will undoubtedly assist others facing similar challenges.

As the [Microsoft Q&A community follows a policy where the question author cannot accept their own answer] {https://learn.microsoft.com/en-us/answers/support/accept-answer} ,

I've reposted your solution. Feel free to consider "Accepting" the answer if you find it suitable.

Issue resolved- By changing the plan to Standard tier from free tier because in free tier custom auth wasn't working and after changing it to Standard tier it redirects to the authentication provider login page.

As per your next query-

App Insights is only applicable to Static Web Apps with at least one function. Add a function to your app to enable App Insights. 

Using Application Insights with Azure Static Web Apps requires an application with an API.

You can enable Application Insights to monitor API requests, failures, and tracing information.

Note that Application Insights has an independent pricing model from Azure Static Web Apps.

Refer to this official doc link would be helpful- https://learn.microsoft.com/en-us/azure/static-web-apps/monitor?wt.mc_id=azurestaticwebapps_inline_inproduct_general