OAuth2 + OpenID in your SPA
I will try to give some good points about this topic to help you understand more the base of it in the context of a Single Page App and also highlight one thing that you probably should not do about the access token.
The base knowledge
So first if you are lost when someone talk about OAuth2 and OpenID.
Please take the time to watch the video HERE. It’s one of the best if not the best available about the topic and thanks to OKTA team that provided this video on YouTube.
Access token in Browser Locale Storage
!!!!!!!!This is what you should not do!!!!!!!!
Now let’s move to the thing I wanted to highlight. We are seeing more and more usage of locale Storage of the browser to keep the access token and be able to reuse it (for either browser refresh or SSO across multi apps). I’ll say it once for all => This is pretty [BAD] risky for your customers in production code.
Also :) it’s not only me that say it’s risky. Look at here.
=> It can be as simple as a malicious person opening the browser of someone and sending by email the access token to reuse it later.
Access token in Browser HttpOnly Secure Cookie
!!!!!!!!This is what you should do!!!!!!!!
When the backend send the clientID + secret + auth. code to the auth server to get the access token you can create an HttpOnly Secure cookie in the backend and use it with your Front End App and that’s it.
Note 1: if you have multiple domain for your Api(s). You can use your Back End as a proxy and set from HttpOnly Secure cookie an authorization header between your Back End (for Front End) and the other Apis under other domain.
Note 2: CSRF attacks can be done when using cookies but there is multiple ways to block them. Please read here, here or here (spring) or here (angular).
CSRF attacks were at number 5 in the OWASP Top 10 list published in 2010, but they declined to number 8 in the OWASP Top Ten in 2013. People suggested that the reason for this was increased awareness of CSRF and the common use of Anti-CSRF tokens by frameworks.
Third party cookie new limitation — Okta example
!!This can apply to any Integrated corporate login solution!!
as Okta, Auth0, KeyCloak, UAA, VMWare Workspace One intelligent Hub…
In the case of Okta, if your application let them handle the cookie part. From what I found reading in Okta Forum, there is a new limitation with third party cookie that OKTA team faced in 2020. You can read more about it here. There is a workaround mentioned also.
[never tried it yet => soon] In the other hand, you can do the cookie part by your self => there is a mode in Okta where it can send back the access token and I guess you can do the HttpOnly Secure cookie in your Back End as mentioned in the previous section.
You found anything wrong with the content :) let me know in the comment section.
You found this post helpful! give it some 👏👏👏.
Thank you
