https://urbanplates.com/assets/js/ui/components/sign-in-with-google/google-sign-in-button.js

1import {SocialLogin} from "@capgo/capacitor-social-login"
2import config from "../../../config.js";
3import App from "../../../app.js";
4
5
6export class GoogleSignInButton extends HTMLElement {
7    constructor() {
8        super();
9    }
10
11    async loginGoogle() {
12        try {
13            this.querySelector(".googleSignInButton").classList.add("loading");
14
15            if (App.getPlatform() === "ios") {
16                await SocialLogin.initialize({
17                    google: {
18                        iOSClientId: config.google_sign_in_ios_client_id
19                    },
20                });
21            } else {
22                await SocialLogin.initialize({
23                    google: {
24                        webClientId: config.google_sign_in_client_id
25                    },
26                });
27            }
28
29            const res = await SocialLogin.login({
30                provider: "google",
31                options: {
32                    scopes: ['email', 'profile'],
33                },
34            });
35
36            // token = the JWT returned by Apple
37            const token = res.result.idToken;
38
39            // Dispatch event on this element containing jwt
40            this.dispatchEvent(new CustomEvent("google-sign-in", {
41                detail: {
42                    token: token
43                }
44            }));
45        } catch (error) {
46            this.querySelector(".googleSignInButton").classList.remove("loading");
47            console.log(error);
48
49            if (error.message !== "The user canceled the sign-in flow.") {
50
51            }
52        }
53    }
54
55    connectedCallback() {
56        const button = document.createElement("button");
57        button.classList.add("googleSignInButton");
58
59        button.innerHTML = `
60            <img class="googleSignInButtonImage" src="/assets/images/icons/google.svg" alt="Google">
61            Sign in with Google
62        `;
63
64        this.appendChild(button);
65
66        // Add click listener to sign in with Google
67        this.addEventListener("click", this.loginGoogle);
68    }
69}
70
71if (!customElements.get("google-sign-in-button")) {
72    customElements.define("google-sign-in-button", GoogleSignInButton);
73}