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')"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?