VueJs – How to validate if the user authenticated when switching pages/refresh without reauthenticating


I used vue-google-oauth2 to create a method to authenticate using google as follow:

---- pagelogin.vue ----

async login() {
  const googleUser = await this.$gAuth.signIn();
  console.log("googleUser", googleUser);
  //this.$cookie.set('googleUser', JSON.stringify(googleUser));
  console.log("getId", googleUser.getId());
  console.log("getBaseProfile", googleUser.getBasicProfile());
  console.log("getAuthResponse", googleUser.getAuthResponse());
  console.log(
    "getAuthResponse$G",
    this.$gAuth.GoogleAuth.currentUser.get().getAuthResponse()
  );
  this.isLogin = this.$gAuth.isAuthorized;
  if(this.isLogin == true){
  ...
  }
}

In my app the users can move between pages, and I want to save the credentials so they won’t need to reauthenticate.

At first I tried to save the credentials in vuex store, but I found out that when I refresh the store is deleted. I know there is ways to save the store so the data won’t be deleted on refresh, but I’m not sure this is the best way to do it (its even possible to access vuex store from the client side, so its not more secured).

So I used cookies to save the credentials:

this.$cookie.set('current-user', JSON.stringify(user));

while the var ‘user’ contains:

const user = {
    login_source: "google",
    userid: googleUser.ya,
    login_hint: googleUser.$b.login_hint,
    firstname: googleUser.it.HU,
    lastname: googleUser.it.YS,
    profile_pic: googleUser.it.kK,
    mail: googleUser.it.Tt,
}

And also I added those parameters to the database, when the user sign up.

(There are other parameters that the oauth returns which I didn’t know if to add them, such as – id_token, token_type, expires_in, access_token.)

My idea is to check every refresh/moving pages, if there a user with the userid & login_hint combinations in the users DataBase, as the current userid & login_hint in the cookie (I used login_hint because I saw it doesn’t changes between logins – but I’m not sure it won’t change forever – e.g. if the user change his password).

My questions are:

  1. Should I save those parameters (or any other parameters) in the cookie.
  2. Should I validate by myself if the userid + login_hint is the same as in the DB (to validate myself if its the correct user).
  3. Is there a way to use built in function to authenticate the user when he move between pages/refresh the page?

Source: Vue – Stack Overflow

October 13, 2021
Category : News
Tags: cookies | google-oauth | oauth-2.0 | Vue.js | vuejs2

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.