Load gapi.auth2 when VueJs starts

Question

I'm building a vue js web app with the possibility to connect with user's Google account.

The log in process (front-end and back-end) are working fine: the google sign in button is displayed, user clicks on it and it's avatar is showed, without a page reload.

Now, a user is already logged in and refresh the page. The "visual" problem here is that the request to the back-end is done at the end because I cannot instantiate gapi.auth2 before the vue js component/page is loaded.

I've tried this solution from this post, but I cannot call gapi.auth2 in 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()

The error is TypeError: gapi.auth2 is undefined

Is it possible to have the information directly, before the whole page is loaded?

did you try `window.gapi`? – Vishal Sharma Aug 09 '19 at 10:15 — Vishal Sharma, Aug 09 '19 at 10:15
Just tried but it doen't work – Kaymaz Aug 09 '19 at 10:16 — Kaymaz, Aug 09 '19 at 10:16

Abdelillah Aissani · Answer 1 · 2019-08-11T09:54:59.273

0

I assume that gapi.auth2.getAuthInstance().currentUser.get() is an async task for that you can use the async created hook which is triggered on the creation of your instance and there 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,
  }
})

and make sure you have imported gapi at the top of your script.

edited Aug 11 '19 at 09:54

answered Aug 09 '19 at 11:40

Abdelillah Aissani

3,058
2
10
25

Import gapi from what? I'm loading it in through script tag – Kaymaz Aug 11 '19 at 08:26
You got it as long as it is defined you don't need to import it.... The code works right ? – Abdelillah Aissani Aug 11 '19 at 09:54
Actually gapi is undefined if you got `TypeError: gapi.auth2 is undefined´ – Abdelillah Aissani Aug 11 '19 at 09:56
Still the same error: gapi.auth2 not defined. I think it's because gapi.auth2 is defined when the google button is initialised – Kaymaz Aug 11 '19 at 12:46

Load gapi.auth2 when VueJs starts

1 Answers1