CODEWITHSUNDEEP
reactjsrestauthenticationasp.net-corearchitecture
Felipe Oriani
Felipe Oriani

Reputation: 38638

How to keep authentication token safe in js web apps?

I am not sure if I should create it here on StackOverflow or another stackexchange channel, but let's try here.

We have a web api made in asp.net core which uses the basic authentication where another web app post some login data to the api and it respond a token for the next requests. The client app stores this token and the next request to get/post data uses this token key for authentication. It works fine from the api perspective.

The point here is our web app. We are building it using react.js and the point how to keep the authentication token safe. We store the token on the current app (which is executed in a web browser). We have a feeling about store it on the browser because bad users can access the console on devTools and investigate how to to get the token from the global variables on the react app (just a sample). Given this point the questions are: How to deal with it to keep the back-end and front-end safe? How make sure the users cannot get the auth token and use it on another apps?

We were thinking in creating a kind of server-side channel just to store the authentication token like the picture bellow:

enter image description here

  1. The web browser app make requests to server-side channel to get/post some data;
  2. The server-side channel make a new request the API defining the authentication token and repassing the get/post data;
  3. The api process the request and respond;
  4. The server-side channel get a response from api and send it to the browser;
  5. The web browser app get the final response.

It could work and keep it safe, but another question is: How computationally expensive is that?

Is there any possible solutions or suggestions how to deal with it?

Thank you.

Upvotes: 3

Views: 1312

Answers (2)

Dylan Morley
Dylan Morley

Reputation: 1744

Use JWT access tokens against your API and authenticate your SPA with an identity provider using an Open ID Connect flow (OIDC).

https://www.ubisecure.com/single-sign-on/single-page-application-and-openid-connect/

There are lots of examples of this, Identity Server is a common OIDC implementation with examples, http://docs.identityserver.io/en/latest/quickstarts/6_javascript_client.html

Once you've gone through the OIDC flow and acquired an access token for the user, you can store this client side safely, as

  • The access token has an inbuilt lifetime and once it's expired can no longer be used. Good practice is to keep this lifetime short (thus limiting the attack vector) and provide some sort of token refresh logic to automatically keep the user working against the API, as long as they keep the SPA open.

  • Your netcore web api has all the libraries it needs to do token validation / lifetime valdiation etc. This has been made very simple at the API layer

NB: I mention safely as there is still an attack vector, someone who acquires the JWT can act as that user for the lifetime of the token against your API, they are the bearer of the token. It's up to you to make sure the lifetimes of your tokens are sane and the the process for acquiring a new token is as secure as possible

There are a lot of examples on how to implement this, and whether or not you want to use your own Identity Server or use a solution such as Auth0.

Don't try and roll your own security solution. Stick to the specs and standards and adhere to all the industry best practices, making use of battle-tested libraries.

Upvotes: 2

Rupesh kumar Sharma
Rupesh kumar Sharma

Reputation: 61

store token in local storage in web browser in encrypted form

Upvotes: 1

Related Questions