feat(astro): Add Google One Tap

.changeset/cool-chairs-swim.md

@@ -0,0 +1,5 @@
+---
+"@clerk/astro": patch
+---
+
+Add an Astro component and a React UI Component for Google One Tap.

packages/astro/src/astro-components/interactive/GoogleOneTap.astro

@@ -0,0 +1,8 @@
+---
+import type { GoogleOneTapProps } from "@clerk/types";
+type Props = GoogleOneTapProps
+
+import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
+---
+
+<InternalUIComponentRenderer {...Astro.props} component="google-one-tap" />

packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro

@@ -1,7 +1,7 @@
 ---
 interface Props {
   [key: string]: unknown
-  component: 'sign-in' | 'sign-up' | 'organization-list' | 'organization-profile' | 'organization-switcher' | 'user-button' | 'user-profile'
+  component: 'sign-in' | 'sign-up' | 'organization-list' | 'organization-profile' | 'organization-switcher' | 'user-button' | 'user-profile' | 'google-one-tap'
 }
 
 import { customAlphabet, urlAlphabet } from "nanoid";

packages/astro/src/astro-components/interactive/index.ts

@@ -14,3 +14,5 @@ export { default as OrganizationProfile } from './OrganizationProfile.astro';
 export { default as OrganizationSwitcher } from './OrganizationSwitcher.astro';
 // @ts-ignore
 export { default as OrganizationList } from './OrganizationList.astro';
+// @ts-ignore
+export { default as GoogleOneTap } from './GoogleOneTap.astro';

packages/astro/src/client/mount-clerk-astro-js-components.ts

@@ -12,6 +12,7 @@ const mountAllClerkAstroJSComponents = () => {
     'user-profile': 'mountUserProfile',
     'sign-in': 'mountSignIn',
     'sign-up': 'mountSignUp',
+    'google-one-tap': 'openGoogleOneTap',
   } as const;
 
   Object.entries(mountFns).forEach(([category, mountFn]) => {

packages/astro/src/client/react/uiComponents.tsx

@@ -1,4 +1,5 @@
 import type {
+  GoogleOneTapProps,
   OrganizationListProps,
   OrganizationProfileProps,
   OrganizationSwitcherProps,
@@ -7,22 +8,40 @@ import type {
   UserButtonProps,
   UserProfileProps,
 } from '@clerk/types';
-import React, { createElement } from 'react';
+import React from 'react';
 
 import { withClerk, type WithClerkProp } from './utils';
 
+export interface OpenProps {
+  open: ((props: any) => void) | undefined;
+  close: (() => void) | undefined;
+  props?: any;
+}
+
 export interface MountProps {
-  mount?: (node: HTMLDivElement, props: any) => void;
-  unmount?: (node: HTMLDivElement) => void;
+  mount: ((node: HTMLDivElement, props: any) => void) | undefined;
+  unmount: ((node: HTMLDivElement) => void) | undefined;
   updateProps?: (props: any) => void;
   props?: any;
-  customPagesPortals?: any[];
+  // TODO: Support custom pages
+  // customPagesPortals?: any[];
 }
 
-class Portal extends React.PureComponent<MountProps> {
+const isMountProps = (props: any): props is MountProps => {
+  return 'mount' in props;
+};
+
+const isOpenProps = (props: any): props is OpenProps => {
+  return 'open' in props;
+};
+
+class Portal extends React.PureComponent<MountProps | OpenProps> {
   private portalRef = React.createRef<HTMLDivElement>();
 
   componentDidUpdate(prevProps: Readonly<MountProps>) {
+    if (!isMountProps(prevProps) || !isMountProps(this.props)) {
+      return;
+    }
     if (
       prevProps.props.appearance !== this.props.props.appearance ||
       prevProps.props?.customPages?.length !== this.props.props?.customPages?.length
@@ -36,21 +55,34 @@ class Portal extends React.PureComponent<MountProps> {
 
   componentDidMount() {
     if (this.portalRef.current) {
-      this.props.mount?.(this.portalRef.current, this.props.props);
+      if (isMountProps(this.props)) {
+        this.props.mount?.(this.portalRef.current, this.props.props);
+      }
+
+      if (isOpenProps(this.props)) {
+        this.props.open?.(this.props.props);
+      }
     }
   }
 
   componentWillUnmount() {
     if (this.portalRef.current) {
-      this.props.unmount?.(this.portalRef.current);
+      if (isMountProps(this.props)) {
+        this.props.unmount?.(this.portalRef.current);
+      }
+      if (isOpenProps(this.props)) {
+        this.props.close?.();
+      }
     }
   }
 
   render() {
     return (
       <>
         <div ref={this.portalRef} />
-        {this.props?.customPagesPortals?.map((portal, index) => createElement(portal, { key: index }))}
+        {/*TODO: Support custom pages*/}
+        {/*{isMountProps(this.props) &&*/}
+        {/*  this.props?.customPagesPortals?.map((portal, index) => createElement(portal, { key: index }))}*/}
       </>
     );
   }
@@ -132,3 +164,13 @@ export const OrganizationList = withClerk(({ clerk, ...props }: WithClerkProp<Or
     />
   );
 }, 'OrganizationList');
+
+export const GoogleOneTap = withClerk(({ clerk, ...props }: WithClerkProp<GoogleOneTapProps>) => {
+  return (
+    <Portal
+      open={clerk?.openGoogleOneTap}
+      close={clerk?.closeGoogleOneTap}
+      props={props}
+    />
+  );
+}, 'GoogleOneTap');