Where and how to store OAuth2 access tokens?

Developer Community
,
#1

Hello all
I have a question about how to store the access tokens safely in a browser. Hope it is not out of topic :sweat_smile:

I’m using FastAPI’s tutorial on OAuth2 to implement a password based login system. Now if I want to integrate it with my frontend, I’m confused on where to store the access token.

On searching the web, most of the articles are outdated or is tightly coupled with a major framework like React etc. What I would like to do is vanilla Javascript based solution with no dependencies.

This is purely for learning purposes but I don’t want to learn it the wrong way by lowering the bars of security.

My first guess is to use Local Storage but a few websites say that it is insecure. So what really is the good approach? Is there a good write-up on this topic that applies to the current state of technology (like no third party cookies, Firefox containers etc.).

Thank you!

#2

I’m not sure that you would want to store it client side (i.e. in the browser). From some cursory reading it seems that the access token would be something the server uses to act on behalf of the client.

From the oauth website: “Access tokens must be kept confidential in transit and in storage.” (https://www.oauth.com/oauth2-servers/access-tokens/)

Almost everything is potentially not confidential in the browser. In part this is due to extensions. Memory is the only somewhat safe place I can think of in the browser - and I’m not 100% certain of that depending on the cleverness of the attacker, browser implementation, and frameworks being used.