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 Google button 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:

  1. Redirect to the static site which makes the second ajax call to get the access token/refresh token then send that to the server?
  2. 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.
  3. Set up a whole other micro service to do the authentication and update the user object.
  4. 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?

  1. 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.
  2. I could store the access token in local storage, but that's not safe if the JavaScript on my site could be comprised.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.