Google Sign in integration to Vaadin

GoogleLogin.java

/*
 * Java component counterpart for the frontend file, src/main/java/com/example/application/views/helloworld/GoogleLogin.java
 * It accepts the user token from client side login. You should validate the token on the server side to recieve the details.
 * See https://developers.google.com/identity/sign-in/web/backend-auth
 */
package com.example.application.views.helloworld;

import com.vaadin.flow.component.ClientCallable;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.littemplate.LitTemplate;

@Tag("vaadin-google-login")
@JsModule("./src/vaadin-google-login.ts")
@JsModule("https://apis.google.com/js/platform.js")

public class GoogleLogin extends LitTemplate {

    interface GoogleUserLoggedIn {
        void userLoggedIn(String token);
    }

    private GoogleUserLoggedIn loggedInListener = null;

    public GoogleUserLoggedIn getLoggedInListener() {
        return loggedInListener;
    }

    public void setLoggedInListener(GoogleUserLoggedIn loggedInListener) {
        this.loggedInListener = loggedInListener;
    }

    @ClientCallable
    public void userLoggedIn(String token) {
        if(loggedInListener != null) {
            loggedInListener.userLoggedIn(token);
        }
    }
}

HelloWorldView.java

/*
 * Example view for showing how to use the component.
 * src/main/java/com/example/application/views/helloworld/HelloWorldView.java
 */

package com.example.application.views.helloworld;

import com.example.application.views.main.MainView;

import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.router.RouteAlias;

@Route(value = "hello", layout = MainView.class)
@RouteAlias(value = "", layout = MainView.class)
@PageTitle("Hello World")
public class HelloWorldView extends VerticalLayout {

    public HelloWorldView() {
        GoogleLogin googleLogin = new GoogleLogin();
        add(googleLogin);
        googleLogin.setLoggedInListener(token ->
                add(new Paragraph("User logged in token logged in: " + token)));
    }

}

vaadin-google-login.ts

/*
 * Client side file in frontend folder, frontend/src/vaadin-google-login.ts
 * Used to load the Google platform library, render login button, and send the login info the server.
 * Remember to put your Google Client ID into the meta tag.
 */
import { LitElement, html } from "lit-element";
import "@vaadin/vaadin-text-field/vaadin-text-field.js";
import "@vaadin/vaadin-button/vaadin-button.js";
declare global {
  interface Window {
    onSignIn: any;
  }
}

interface VaadinGoogleLoginServerInterface {
  userLoggedIn(text: string): void;
}

class VaadinGoogleLogin extends LitElement {
  private $server?: VaadinGoogleLoginServerInterface;

  render() {
    return html` <div>
      Login with google.
      <div class="g-signin2" data-onsuccess="onSignIn"></div>
    </div>`;
  }

  createRenderRoot() {
    return this;
  }

  connectedCallback() {
    super.connectedCallback();

    // Add your google client id as a meta tag to the page
    var meta = document.createElement("meta");
    meta.name = "google-signin-client_id";
    meta.content =
      "YOUR_CLIENT_ID.apps.googleusercontent.com";
    document.getElementsByTagName("head")[0].appendChild(meta);

    // Notify server with user token after user has signed in
    const component = this;
    window.onSignIn = function (googleUser: any) {
      const id_token = googleUser.getAuthResponse().id_token;
      console.log("id_token: " + id_token);
      component.$server!.userLoggedIn(id_token);
    };

    // Load the Google platform library
    const el = document.createElement("script");
    el.setAttribute("src", "https://apis.google.com/js/platform.js");
    this.appendChild(el);
  }
}

customElements.define("vaadin-google-login", VaadinGoogleLogin);