Apparently google is discontinuing service for gapi.oauth2. I'm trying to use their new Sign in With Google tools but they are very confusing.

Project Structure
I have a Vue frontend where I need to allow users to sign in with google. I then need to use the OIDC server flow to authenticate them on my backend.

My file structure is the default structure that the Vue CLI gives you.

I followed these docs but they don't explain how to actually give the user the opportunity to sign in. Like how do we initiate the whole flow? I thought maybe the flow was initiated by the new Sign in With Google Button but I can not figure out how to get this button to work.

Here is how I'm trying things now:

In App.vue I have the following

created() {
    loadGSIClient().then((this.GSILoaded = true));
}

googleAuth.js

export function loadGSIClient() {
  console.log("loading GSI");
  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.src = ";;
    script.onload = () => {
      var client = window.google.accounts.oauth2.initCodeClient({
        client_id: process.env.VUE_APP_CLIENT_ID,
        scope: ".readonly",
        ux_mode: "redirect",
        redirect_uri:
          "http://localhost:5001/sig-wig/us-central1/handleRedirect",
      });
      resolve(client);
    };
    script.onerror = (message, url, line, column, error) => {
      reject({ message, url, line, column, error });
    };
  });
}

Then, in my sign in file AccessRequest I have

  created() {
    var google = window.google;
    google.accounts.id.initialize({
      client_id: process.env.VUE_APP_CLIENT_ID,
      callback: () => {
        "I'm a callback";
      },
    });
    google.accounts.id.renderButton(
      document.getElementById("buttonDiv"),
      { theme: "outline", size: "large" } // customization attributes
    );
  },

However that setup always throws the error Error in created hook: "TypeError: Cannot read properties of undefined (reading 'accounts')"

So it seems like window.google exists when I'm in App.vue but not in AccessRequest.vue. Is there some big misunderstanding I'm having about how all of this is supposed to work?

Is this "Sign in With Google Button" meant to work with an OIDC Server flow?

Apparently google is discontinuing service for gapi.oauth2. I'm trying to use their new Sign in With Google tools but they are very confusing.

Project Structure
I have a Vue frontend where I need to allow users to sign in with google. I then need to use the OIDC server flow to authenticate them on my backend.

My file structure is the default structure that the Vue CLI gives you.

I followed these docs but they don't explain how to actually give the user the opportunity to sign in. Like how do we initiate the whole flow? I thought maybe the flow was initiated by the new Sign in With Google Button but I can not figure out how to get this button to work.

Here is how I'm trying things now:

In App.vue I have the following

created() {
    loadGSIClient().then((this.GSILoaded = true));
}

googleAuth.js

export function loadGSIClient() {
  console.log("loading GSI");
  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.src = "https://accounts.google./gsi/client";
    script.onload = () => {
      var client = window.google.accounts.oauth2.initCodeClient({
        client_id: process.env.VUE_APP_CLIENT_ID,
        scope: "https://www.googleapis./auth/calendar.readonly",
        ux_mode: "redirect",
        redirect_uri:
          "http://localhost:5001/sig-wig/us-central1/handleRedirect",
      });
      resolve(client);
    };
    script.onerror = (message, url, line, column, error) => {
      reject({ message, url, line, column, error });
    };
  });
}

Then, in my sign in file AccessRequest I have

  created() {
    var google = window.google;
    google.accounts.id.initialize({
      client_id: process.env.VUE_APP_CLIENT_ID,
      callback: () => {
        "I'm a callback";
      },
    });
    google.accounts.id.renderButton(
      document.getElementById("buttonDiv"),
      { theme: "outline", size: "large" } // customization attributes
    );
  },

However that setup always throws the error Error in created hook: "TypeError: Cannot read properties of undefined (reading 'accounts')"

So it seems like window.google exists when I'm in App.vue but not in AccessRequest.vue. Is there some big misunderstanding I'm having about how all of this is supposed to work?

Is this "Sign in With Google Button" meant to work with an OIDC Server flow?

• javascript
• vue.js
• google-signin

Share Improve this question Follow asked Apr 5, 2022 at 19:20 Dallin DavisDallin Davis 57122 gold badges99 silver badges2222 bronze badges 1

• Did you ever figure this out ? If So could you post your results here for me and others that are ing across this thread looking for answers ? – DRW Commented Jun 7, 2022 at 22:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 13

Here is My Code
First, You have to put this code index.html in public folder

<script src="https://accounts.google./gsi/client" async defer></script>

<template>
 <div ref="googleLoginBtn" />
</template>
<script>
  export default(){
    mounted() {
      const gClientId = [Your Client Id]
      window.google.accounts.id.initialize({
        client_id: gClientId,
        callback: this.handleCredentialResponse,
        auto_select: true
      })
      window.google.accounts.id.renderButton(
        this.$refs.googleLoginBtn, {
          text: 'signin_with', // or 'signup_with' | 'continue_with' | 'signin'
          size: 'large', // or 'small' | 'medium'
          width: '366', // max width 400
          theme: 'outline', // or 'filled_black' |  'filled_blue'
          logo_alignment: 'left' // or 'center'
        }
      )
    },
    methods: {
      async handleCredentialResponse(response) {
         console.log(response.credential)
         // Put your backend code in here
      }
    }
  }
</script>

To follow good practices, I would offload the logics outside the index.html. Here is my working implementation:

index.html

<script src="https://accounts.google./gsi/client"></script>
<script type="module">
  import { GOOGLE_USER_ID, handleCredentialResponse } from './src/utils/oauth_google.js';
  document.getElementById("g_id_onload").setAttribute("data-client_id", GOOGLE_USER_ID);
</script>
<div id="g_id_onload"
    data-callback="handleCredentialResponse"
    data-auto_prompt="false"
    >
</div>

oauth_google.js

export const GOOGLE_USER_ID = import.meta.env.VITE_GOOGLE_USER_ID;


export function handleCredentialResponse(response) {
  const data = { token: response.credential };
  // Do what you need
}

window.handleCredentialResponse = handleCredentialResponse;

.env

VITE_GOOGLE_USER_ID=YOUR_CREDENTIAL