Sign In With Google (GIS) on Vue.js Application

Question

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.com/gsi/client";
    script.onload = () => {
      var client = window.google.accounts.oauth2.initCodeClient({
        client_id: process.env.VUE_APP_CLIENT_ID,
        scope: "https://www.googleapis.com/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?

Answer 1

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

<script src="https://accounts.google.com/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>