How to improve user experience and refresh Static Web Apps session when it expires in a SPA?

mkb13 11 Reputation points
2023-05-08T18:58:20.8966667+00:00

I have a Blazor WASM app hosted by Azure Static Web Apps, with Managed Functions. I have a SWA Standard plan and am using custom authentication (Auth0).

My authentication system works well, and I also have roles-based authorization which works great.

The thing that is not great is that when the SWA session expires after eight hours, the browser doesn't know about it and the user can wander around clicking on things as long as they don't hit the server. Furthermore, when they do hit the server, I have my routing rules send any 401 to /login, which goes to /.auth/login/auth0 -- but it fails, and the user experience is that the appearance of the site simply degrades (things don't load, elements are empty, etc.) but the user is never notified that a refresh is necessary or how to fix it.

If I look in the Console in the browser developer tools pane, I see this Auth0 failure:

Access to fetch at 'https://<my_subdomain>.us.auth0.com/authorize?response_type=code&<a_bunch_of_stuff>' (redirected from 'https://<my_domain>/api/<my_api_path>') from origin 'https://<my_domain>' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I don't believe it's a configuration issue with Auth0, because I do have my origin listed in the CORS-approved origin section, plus authentication works normally, for example, when the user presses my app's login button.

I really just want some way to let the user know immediately when they try to do something that the session is expired and they need to refresh it. But how do I do that? Do I need to make a javascript timer to run for 8 hours and pop up a login button when it's expired? I really just want to do an auto-refresh but that's clearly not working.

Any suggestions?

Azure Functions
Azure Functions
An Azure service that provides an event-driven serverless compute platform.
4,213 questions
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,378 questions
Azure Static Web Apps
Azure Static Web Apps
An Azure service that provides streamlined full-stack web app development.
757 questions

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Bruce (SqlWork.com) 55,041 Reputation points
    2023-05-08T20:01:38.0366667+00:00

    you don't specify your authentication details, but I assume you are using a oauth ticket. your 401 error would result from calling the api functions, not blazer routing. you appear to not be handling these correctly. under the covers HttpClient uses the javascript fetch, and you are redirecting the fetch to the oauth server which gets the CORS error. You need to redirect blazor navigation to the login page. the redirect to the oauth server will unload the blazor app, which will get reloaded when redirected back. you can also just do a javascript interop and reload the page via window.locaton.reload()

    another approach is to get a refresh token from the oauth server. these are typically good for 90 days.