CODEWITHSUNDEEP
vue.jslogoutgoogle-signingoogle-api-js-client
triplepointer
triplepointer

Reputation: 21

How to implement sign out via gapi

I'm writing Vue js app.

In index html file I include in the head tag the following:

<meta name="google-signin-client_id" content="<my_client_id>.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>

When I've written Login component, I've used the following code (this link helped me) to implement sign in button:

template: `
...

    <div id="google-signin-button"></div>
...
`

methods: {
...
        onSignIn (user) {
          const profile = user.getBasicProfile();
          this.login(profile);
        }
...
}

mounted() {
...
      gapi.signin2.render('google-signin-button', {
        onsuccess: this.onSignIn
      })
...
    },

And it worked. Now I;ve tried to use the following code in Navbar component (which is a part of other components after redirection) to implement signout, but I get "TypeError: Cannot read properties of undefined (reading 'getAuthInstance')":

logout: function () {
  var self = this;
    if(confirm("Вы действительно хотите выйти?")) {
      const auth2 = gapi.auth2.getAuthInstance();

      auth2.signOut().then(function () {
          console.log('user signed out');
          self.$store.dispatch('authentication/logout')
          .then(() => {
            self.$router.push('/login')
          })
      });
    }
  },

I tried the answer from this link, but I get cookie policy error and don't know what to do about it. May be there is another way? Please, help! And correct my grammar errors if you please. Thank you!

Upvotes: 0

Views: 721

Answers (1)

triplepointer
triplepointer

Reputation: 21

Ok, I've forgot to run web server. Then I've used the last link, get auth2 global variable and I've used it to signOut. Done.

Upvotes: 1

Related Questions