Blazor Server, API with OpenIdDict and using introspection - What to do with the access token?

Question

I have an API that is also hosting an OpenIdDict token endpoint. The API does not have any web pages with login forms but instead returns an access token in a response as a result of receiving a form post.

I previously had an old AngularJS frontend which talked to the API to get the token and stored those on the client. Angular was responsible for adding the token to every request to the server.

I am now planning on rebuilding the frontend using Blazor Server. I want the new Blazor Server client/frontend to use introspection against the APIs token endpoint.

My plan was to build a custom Login page that on post would, server-side, talk to the API and get an access token, refresh token, etc. But I have no idea where to put the access token afterwards so that it's used by Blazor through introspection whenever I use the Authorize attribute. I could just return the tokens and maybe write some javascript that saves it somewhere and adds it to any subsequent http requests, but that does not feel like a Blazor Server solution?

My latest discovery is that the tokens could be stored "in session" on the server and a "session identifier" cookie is created on the client? Might be completely off here...

When I played around with the Identity support in Blazor Server a cookie with the name ".AspNetCore.Identity.Application" was always created after a successful login.

Another less desirable solution, or workaround, I have been thinking about is copying the API's OpenIdDict-setup code over to the Blazor Server project and point them to the same database.

Any help here would be greatly appreciated!

Answer 1

My plan was to build a custom Login page that on post would, server-side, talk to the API and get an access token, refresh token, etc. But I have no idea where to put the access token afterwards so that it's used by Blazor through introspection whenever I use the Authorize attribute. I could just return the tokens and maybe write some javascript that saves it somewhere and adds it to any subsequent http requests, but that does not feel like a Blazor Server solution?

You can store the Access Token in the local storage, and retrieve its value whenever you want to use it. Yes, it is Blazor Server solution. That is how you should do it.

When I played around with the Identity support in Blazor Server a cookie with the name ".AspNetCore.Identity.Application" was always created after a successful login.

This is true. Is this a statement or you're asking a question here ? Anyhow, I guess this cookie will be automatically removed when its life time ends. But in your case, you'll have to do it manually; you'll have to write code that checks whether the access token has expired. If you do not do so, your app will have issues when you try to access a Wep Api endpoint. There is also the authorization components and objects in Blazor that will wrongly perform if you do not manage the stored access token, as for instance, the AuthorizeView embedded in the LoginDisplay component will show the name of an authenticated user (because the claims you extract from the access token constitutes the data from which the AuthenticationSateProvider creates the AuthenticationState object), but no checking of the validity of the access token is perform. But accessing your web api with the current access token will result in an exception as the access token is not valid.

I've described above something that should be explained by text of hundreds of pages. Hope you're not much confused.

Here's the best place for you to start your investigation Customizing the AuthenticationStateProvider in Blazor Server App with Jwt Token Authentication

Hope this helps...