I'm building a very security conscious application. (All applications should be security conscious, but this one may contain a lot of red data).
Assuming that I will use a Vue/React JavaScript Single Page App that will authenticate with Google for user sign in:
There will be a
Sign In With Googlebutton on the page.That button will take the user to Google where the user may/may not give my site access to their resources.
Google will redirect to a callback URL, that I supplied to Google when signing up for the API access.
That callback should have a key which will allow me to make another call to get an access token and a refresh token.
I have 2 main questions:
Given that I have a Vue/React JavaScript SPA that calls an API for resources (vs a more traditional Rails/Django/Laravel/etc server side rendered sites), how does the redirect flow work? Should I:
- Redirect to the static site which makes the second ajax call to get the access token/refresh token then send that to the server?
- Redirect to the API which makes the second ajax call internally and stores that data on the user in the db (or associated table) which redirects to the static site.
- Set up a whole other micro service to do the authentication and update the user object.
- Something else...
Once I chose a method of getting the access token, when the user comes to my site, the Vue/React app will grab the user object which will give them the access token. Where I should store the access token safely on the client side?
- Have the server set the access token as a HTTP only cookie like one does in JWT, but that's not something I've read about.
- I could store the access token in local storage, but that's not safe if the JavaScript on my site could be comprised.
