How to use JWT JSON Web Tokens in C# AspNetCore Websites?

Question

I am trying to pull together a website that uses JWTs for login. My problem is that I do not understand how a website should use the JWTs.

The idea is to split my monolithic architecture into:

• An IdentityServer for authentication and issuing JWTs.
• An ApplicationServer API that has endpoints protected by JWT based roles.
• Front-end Apps and Websites that request JWTs from the IdentityServer, and use them to access data on the ApplicationServer.

This will allow me to use one IdentityServer for many projects, and possibly farm front end development out to 3rd parties, and allow me to concentrate on the application API details.

I have the IdentityServer built. It can take a username/password, validate, and issue an access token and a refresh token. Super. The access token is short-lived and non-secure, and intended to be refreshed periodically. The intention is to store this on the client side, either app or web page. The refresh token is longer-lived, and intended to be stored securely. On a website, this would be stored server-side, and in an app, stored in secure storage for the 'session' duration.

I have a front end website shell set up with some test actions. The user must be authenticated to access them, where being authenticated means having a valid access token.

• When the user accesses an action initially, they have no token.
• The front-end webserver should redirect them to a login page, and request credentials (username and password).
• The webserver forwards credentials to IdentityServer, which should return access and refresh tokens to the webserver if the credentials are valid.
• The webserver would cache the refresh token and send the access token back to the webpage.
• The client-side webpage would then cache the access token and send that with each further page request.
• The webserver would decode the access token, possibly refresh it if necessary, and send back the pages with the updated access token.
• The conversation (session) ends when a request comes in with a stale access token and enough time has elapsed for the refresh token to expire, and the user is re-directed to the login page.

I am a little lost as to how to return the access token to the webpage.

Also, I do not understand how the web page could either automatically attach a token with each request if it has one, or how a web page could respond to a 401 challenge if it does not.

Is a cookie the only way to attach data to an HTTP conversation, and persist it on the client side during navigation?

Are JWTs purely for SinglePageApps (SPAs) where a page is initially served, and then all subsequent data is handled by Ajax (where I can set the header no problem)?

Alternatively, is it possible to write the webpages such that they always populate the Authorization header with the access token, if it exists?

I realise that I may have thought myself into a knot, any help would be appreciated.

Answer 1

You should have a read up on Auth0's documentation for Resource Owners Password Grant https://auth0.com/docs/api-auth/grant/password

I would keep the refresh token and the access token together on the client.

My approach would be.

Client knows it doesnt have an access token -> shows login button. Login button clicked -> redirect to authentication server with login page. It includes a state/code and a callback url. Client receives a callback from the user and treats it as the client logging in. The Client stores the access token and refresh token (if supplied) in the localstorage. It then passes the access token to requests to the api that it wants to access. The API checks if the access token is for it and is valid, allows authorisation and completes request. The API doesn't have any knowledge of refresh tokens.

Hope it helps