Access your Vue.js application using Google Sign-In (GIS)

Question

Access your Vue.js application using Google Sign-In (GIS)

Having trouble with the discontinuation of gapi.oauth2 by Google and finding the new Sign in With Google tools confusing.

Project Structure
Looking to implement user sign-in with Google on my Vue frontend and authenticate them using OIDC server flow on the backend.

My file structure is based on the default setup provided by Vue CLI.

Following the instructions in these docs, but struggling to understand how to initiate the sign-in process. How do we start the entire flow? I assumed it would be triggered by the new Sign in With Google Button, but unable to make the button work as intended.

This is my current approach:

In App.vue, I have the following code snippet

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 include

  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
    );
  },

Encountering an error

Error in created hook: "TypeError: Cannot read properties of undefined (reading 'accounts')"

with this setup. It seems that window.google is available in App.vue but not in AccessRequest.vue. Is there a misunderstanding about how everything should function together?

Is the "Sign in With Google Button" designed to work with an OIDC Server flow?

javascript vue.js google-signin

Answer 1

Answer №1

Below is the Code Snippet
To begin, place the following code index.html in the public directory

<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)
         // Insert your server-side logic here
      }
    }
  }
</script>

Answer 2

Below is the Code Snippet
To begin, place the following code index.html in the public directory

<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)
         // Insert your server-side logic here
      }
    }
  }
</script>

Answer 3

Answer №2

In order to adhere to best practices, I suggest moving the logic outside of the index.html file. Below is an example of how this can be implemented:

Index.html

<script src="https://accounts.google.com/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 };
  // Perform necessary actions
}

window.handleCredentialResponse = handleCredentialResponse;

.env

VITE_GOOGLE_USER_ID=YOUR_CREDENTIAL

Answer 4

In order to adhere to best practices, I suggest moving the logic outside of the index.html file. Below is an example of how this can be implemented:

Index.html

<script src="https://accounts.google.com/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 };
  // Perform necessary actions
}

window.handleCredentialResponse = handleCredentialResponse;

.env

VITE_GOOGLE_USER_ID=YOUR_CREDENTIAL

Access your Vue.js application using Google Sign-In (GIS)

Answer №1

Answer №2

Similar questions

Is it possible to use a v-for loop within F7+Vue to dynamically update the title of each accordion item?

What is the best way to retrieve socket emitted data in a separate route in Express?

Tips for showing a DialogBox when a blur event occurs and avoiding the re-firing of onBlur when using the DialogBox

Is there a way to dynamically expand and collapse all table rows, with the latest row always remaining visible, using pure JavaScript?

The Axios call functions properly within the Vue.js mounted() hook, however it encounters issues when placed inside

Parsing HTML to access inner content

An easy way to adjust the date format when linking a date in ng-model with md-datepicker

Remove chosen tags from the options list in Material UI Autocomplete Multiple

Print Vue page with the same styling as the original

Error: Unable to locate module - The specified file cannot be resolved when utilizing an external JavaScript library

The Material UI Drawer stays closed despite the state being set to true

Challenge arises when implementing conditional styling in Vuejs

Importing an SVG file dynamically into a VueJS component

What is causing the VueJS template ref to be undefined when dealing with multiple divs

What is the best way to interact with my component in React?

Extracting the chosen content from a textarea using AngularJS

Tips for unit testing an Angular Service that is primarily responsible for redirecting to an external page from the application

How can SQL data be loaded following the selection from a dropdown menu?

Tips on managing canvas overflow within a vuetify card and ensuring responsiveness

The proper way to define an event delegator's syntax