Microsite Google Login Prototype

packages/component-boilerplate/src/hooks/managedIdentity/useAuthenticateWithGoogleMutation.ts

@@ -0,0 +1,63 @@
+import gql from "graphql-tag";
+import decode from "jwt-decode";
+
+import { BaseQueryData } from "../graphql/useBaseQuery";
+import { setUserIdentity, DecodedSquatchJWT } from "../environment";
+import { useMutation } from "../graphql/useMutation";
+
+const AuthenticateWithGoogleMutation = gql`
+  mutation AuthenticateWithGoogle($idToken: String!) {
+    authenticateManagedIdentityWithGoogle(
+      authenticateManagedIdentityWithGoogleInput: { idToken: $idToken }
+    ) {
+      token
+      email
+      emailVerified
+      sessionData
+    }
+  }
+`;
+
+interface AuthenticateWithGoogleResult {
+  authenticateManagedIdentityWithGoogle: {
+    token: string;
+    email: string;
+    emailVerified: boolean;
+    sessionData: Record<string, any>;
+  };
+}
+
+export function useAuthenticateWithGoogleMutation(): [
+  (variables: {
+    idToken: string;
+  }) => Promise<AuthenticateWithGoogleResult | Error>,
+  BaseQueryData<AuthenticateWithGoogleResult>
+] {
+  const [request, { loading, data, errors }] =
+    useMutation<AuthenticateWithGoogleResult>(AuthenticateWithGoogleMutation);
+
+  const requestAndSetUserIdentity = async (v: { idToken: string }) => {
+    const result = await request(v);
+    if (
+      !(result instanceof Error) &&
+      result.authenticateManagedIdentityWithGoogle
+    ) {
+      const jwt = result.authenticateManagedIdentityWithGoogle.token;
+      const { user } = decode<DecodedSquatchJWT>(jwt);
+      setUserIdentity({
+        jwt,
+        id: user.id,
+        accountId: user.accountId,
+        managedIdentity: {
+          email: result.authenticateManagedIdentityWithGoogle.email,
+          emailVerified:
+            result.authenticateManagedIdentityWithGoogle.emailVerified,
+          sessionData: result.authenticateManagedIdentityWithGoogle.sessionData,
+        },
+      });
+    }
+    return result;
+  };
+
+  return [requestAndSetUserIdentity, { loading, data, errors }];
+}

packages/component-boilerplate/src/index.ts

@@ -17,6 +17,7 @@ export { useRequestPasswordResetEmailMutation } from "./hooks/managedIdentity/us
 export { useRequestVerificationEmailMutation } from "./hooks/managedIdentity/useRequestVerificationEmailMutation";
 export { useManagedIdentitySessionQuery } from "./hooks/managedIdentity/useManagedIdentitySessionQuery";
 export { useAuthenticateManagedIdentityWithInstantAccess } from "./hooks/instantaccess/useAuthenticateManagedIdentityWithInstantAccess";
+export { useAuthenticateWithGoogleMutation } from "./hooks/managedIdentity/useAuthenticateWithGoogleMutation";
 
 //
 //      GraphQL API

packages/mint-components/src/components.d.ts

@@ -754,6 +754,9 @@ export namespace Components {
          */
         "type": string;
     }
+    interface SqmGoogleSignin {
+        "nextPage": string;
+    }
     interface SqmGraphqlClientProvider {
         /**
           * @uiName Domain
@@ -2023,6 +2026,7 @@ export namespace Components {
           * @uiWidget pageSelect
          */
         "registerPath": string;
+        "showGoogleSignIn": boolean;
         /**
           * @uiName Submit button text
          */
@@ -5231,6 +5235,12 @@ declare global {
         prototype: HTMLSqmFormMessageElement;
         new (): HTMLSqmFormMessageElement;
     };
+    interface HTMLSqmGoogleSigninElement extends Components.SqmGoogleSignin, HTMLStencilElement {
+    }
+    var HTMLSqmGoogleSigninElement: {
+        prototype: HTMLSqmGoogleSigninElement;
+        new (): HTMLSqmGoogleSigninElement;
+    };
     interface HTMLSqmGraphqlClientProviderElement extends Components.SqmGraphqlClientProvider, HTMLStencilElement {
     }
     var HTMLSqmGraphqlClientProviderElement: {
@@ -5800,6 +5810,7 @@ declare global {
         "sqm-edit-profile": HTMLSqmEditProfileElement;
         "sqm-empty": HTMLSqmEmptyElement;
         "sqm-form-message": HTMLSqmFormMessageElement;
+        "sqm-google-signin": HTMLSqmGoogleSigninElement;
         "sqm-graphql-client-provider": HTMLSqmGraphqlClientProviderElement;
         "sqm-header-logo": HTMLSqmHeaderLogoElement;
         "sqm-hero": HTMLSqmHeroElement;
@@ -6600,6 +6611,9 @@ declare namespace LocalJSX {
          */
         "type"?: string;
     }
+    interface SqmGoogleSignin {
+        "nextPage"?: string;
+    }
     interface SqmGraphqlClientProvider {
         /**
           * @uiName Domain
@@ -7863,6 +7877,7 @@ declare namespace LocalJSX {
           * @uiWidget pageSelect
          */
         "registerPath"?: string;
+        "showGoogleSignIn"?: boolean;
         /**
           * @uiName Submit button text
          */
@@ -10965,6 +10980,7 @@ declare namespace LocalJSX {
         "sqm-edit-profile": SqmEditProfile;
         "sqm-empty": SqmEmpty;
         "sqm-form-message": SqmFormMessage;
+        "sqm-google-signin": SqmGoogleSignin;
         "sqm-graphql-client-provider": SqmGraphqlClientProvider;
         "sqm-header-logo": SqmHeaderLogo;
         "sqm-hero": SqmHero;
@@ -11079,6 +11095,7 @@ declare module "@stencil/core" {
             "sqm-edit-profile": LocalJSX.SqmEditProfile & JSXBase.HTMLAttributes<HTMLSqmEditProfileElement>;
             "sqm-empty": LocalJSX.SqmEmpty & JSXBase.HTMLAttributes<HTMLSqmEmptyElement>;
             "sqm-form-message": LocalJSX.SqmFormMessage & JSXBase.HTMLAttributes<HTMLSqmFormMessageElement>;
+            "sqm-google-signin": LocalJSX.SqmGoogleSignin & JSXBase.HTMLAttributes<HTMLSqmGoogleSigninElement>;
             "sqm-graphql-client-provider": LocalJSX.SqmGraphqlClientProvider & JSXBase.HTMLAttributes<HTMLSqmGraphqlClientProviderElement>;
             "sqm-header-logo": LocalJSX.SqmHeaderLogo & JSXBase.HTMLAttributes<HTMLSqmHeaderLogoElement>;
             "sqm-hero": LocalJSX.SqmHero & JSXBase.HTMLAttributes<HTMLSqmHeroElement>;

packages/mint-components/src/components/sqm-google-signin/readme.md

@@ -0,0 +1,30 @@
+# sqm-google-signin
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute   | Description | Type     | Default |
+| ---------- | ----------- | ----------- | -------- | ------- |
+| `nextPage` | `next-page` |             | `string` | `"/"`   |
+
+
+## Dependencies
+
+### Used by
+
+ - [sqm-portal-login](../sqm-portal-login)
+
+### Graph
+```mermaid
+graph TD;
+  sqm-portal-login --> sqm-google-signin
+  style sqm-google-signin fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/mint-components/src/components/sqm-google-signin/sqm-google-signin.tsx

@@ -0,0 +1,83 @@
+import { Component, h, Prop, getElement } from "@stencil/core";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { useEffect, useState } from "@saasquatch/universal-hooks";
+import {
+  navigation,
+  useAuthenticateWithGoogleMutation,
+} from "@saasquatch/component-boilerplate";
+import { sanitizeUrlPath } from "../../utils/utils";
+
+interface CredentialResponse {
+  credential: string;
+}
+
+@Component({
+  tag: "sqm-google-signin",
+  shadow: true,
+})
+export class GoogleSignIn {
+  @Prop()
+  nextPage: string = "/";
+
+  constructor() {
+    withHooks(this);
+  }
+  disconnectedCallback() {}
+
+  render() {
+    const [googleButtonDiv, setGoogleButtonDiv] =
+      useState<HTMLDivElement>(undefined);
+
+    const [request, { loading, errors, data }] =
+      useAuthenticateWithGoogleMutation();
+
+    // TODO: Error handling and nextPage url parameter
+
+    useEffect(() => {
+      // DOM not ready
+      if (!googleButtonDiv) return;
+
+      const handleCredentialResponse = async (response: CredentialResponse) => {
+        const result = await request({ idToken: response.credential });
+
+        if (result instanceof Error) {
+          // TODO: Handle errors
+          return;
+        }
+
+        if (result.authenticateManagedIdentityWithGoogle?.token) {
+          const url = sanitizeUrlPath(this.nextPage);
+          navigation.push(url.href);
+        }
+      };
+
+      // See https://developers.google.com/identity/gsi/web/guides/personalized-button
+      // for documentation on this Google button
+
+      // @ts-ignore
+      google.accounts.id.initialize({
+        // TODO: Get the client ID from SquatchPortal window config or similar
+        client_id:
+          "190322867385-elcm8vorp3vk2etknmv6irns3v8bo4mh.apps.googleusercontent.com",
+        callback: handleCredentialResponse,
+      });
+
+      // Button configuration options are here:
+      // https://developers.google.com/identity/gsi/web/reference/js-reference#GsiButtonConfiguration
+
+      // @ts-ignore
+      google.accounts.id.renderButton(
+        googleButtonDiv,
+        { theme: "outline", size: "large" } // customization attributes
+      );
+
+      // @ts-ignore
+      // google.accounts.id.prompt(); // also display the One Tap dialog
+
+      // @ts-ignore
+      //getElement(this).appendChild(div);
+    }, [googleButtonDiv]);
+
+    return <div ref={setGoogleButtonDiv}></div>;
+  }
+}