Initiate gapi.auth2 upon VueJs initialization

Question

Initiate gapi.auth2 upon VueJs initialization

I am currently developing a Vue.js web application that allows users to connect with their Google accounts.

The login process, both front-end and back-end, is functioning properly: the Google sign-in button is displayed, the user clicks on it, and their avatar appears without the page needing to be refreshed.

However, I encountered a visual issue when a user who is already logged in refreshes the page. The problem lies in the fact that the request to the back-end is made towards the end because I cannot initialize gapi.auth2 before the Vue.js component/page has finished loading.

I attempted a solution mentioned in this post, but I faced difficulty calling gapi.auth2 within the main app data section:

<script>
  function onLoad() {
    gapi.load('auth2', function() {
      gapi.auth2.init();
    });
  }
</script>
<script type="text/javascript" src="https://apis.google.com/js/platform.js?onload=onLoad"></script>
...
<script type="module" src="main.js"></script>
</body>
</html>

Main.js:

var app = new Vue({
  el: '#app',
  data: {
    user: gapi.auth2.getAuthInstance().currentUser.get()
  }

This results in the error message:

TypeError: gapi.auth2 is undefined

Is there a way to retrieve this information directly before the entire page finishes loading?

javascript vue.js google-oauth google-signin

Answer 1

Answer №1

If you are dealing with the asynchronous task of

gapi.auth2.getAuthInstance().currentUser.get()

, you can utilize Vue's async created hook. This hook is triggered upon the creation of your instance, allowing you to assign the value to your data:

// import gapi from '....'
var app = new Vue({
  el: '#app',
  async created() {
    try {
      let res = await gapi.auth2.getAuthInstance().currentUser.get();
      this.user = res.data
    } catch (e) {
      console.log(e)
    }
  },
  data: {
    user: null,
  }
})

Ensure that you have imported gapi at the top of your script.

Answer 2

If you are dealing with the asynchronous task of

gapi.auth2.getAuthInstance().currentUser.get()

, you can utilize Vue's async created hook. This hook is triggered upon the creation of your instance, allowing you to assign the value to your data:

// import gapi from '....'
var app = new Vue({
  el: '#app',
  async created() {
    try {
      let res = await gapi.auth2.getAuthInstance().currentUser.get();
      this.user = res.data
    } catch (e) {
      console.log(e)
    }
  },
  data: {
    user: null,
  }
})

Ensure that you have imported gapi at the top of your script.

Initiate gapi.auth2 upon VueJs initialization

Answer №1

Similar questions

Incorporating SSL into an Express web application

Issue with PHP functionality not functioning properly

Adjusting the view of an OpenLayers3 map to encompass various vector layers

Load External HTML content into webpage along with executing JavaScript code and triggering JS functions upon loading

Is there a way to search through an array of object arrays in JavaScript for a specific key/value pair using lodash or any other function?

Adding hue to the portion of text following a JavaScript split() operation

The mouse coordinates do not align with the drawing of a rectangle on the canvas

What steps do I need to take to implement AJAX form authentication?

Ways to showcase INPUT TYPE when making a Selection?

How can I pass a specific value, rather than the entire array, in a ReactJS dropdown menu?

Utilizing Django to access a JavaScript variable within server-side template code

Guide to integrating Google Maps JS API into a React application without relying on third-party libraries

Identifying the device name in Safari on iOS 13 despite the inaccurate display of the user agent - a step-by-step guide

Tips for navigating through pagination indexes with Angular 6

What's the best approach for implementing TimeInput exclusively in React-Admin?

Issue: ENOENT - The requested file or directory cannot be found in the context of an Angular2 and Express.js

Implementing a post request triggered by a button click in Node.js with Express

I continue to encounter the same error while attempting to deliver data to this form

Calculate the total amount by multiplying the price and quantity values within nested arrays

Encountering a loading error with r.js while attempting to optimize