feat(console): google one tap (#6034)

.changeset/mean-pumpkins-scream.md

@@ -0,0 +1,5 @@
+---
+"@logto/console": minor
+---
+
+support Google One Tap configuration

packages/console/src/components/ConnectorForm/GoogleOneTapCard/index.module.scss

@@ -0,0 +1,11 @@
+@use '@/scss/underscore' as _;
+
+.figure {
+ width: 200px;
+}
+
+.oneTapConfig {
+ display: flex;
+ gap: _.unit(2);
+ flex-direction: column;
+}

packages/console/src/components/ConnectorForm/GoogleOneTapCard/index.tsx

@@ -0,0 +1,111 @@
+import { type GoogleConnectorConfig } from '@logto/connector-kit';
+import { Theme } from '@logto/schemas';
+import { Controller, useFormContext } from 'react-hook-form';
+import { Trans, useTranslation } from 'react-i18next';
+
+import FormCard from '@/components/FormCard';
+import Checkbox from '@/ds-components/Checkbox';
+import FormField from '@/ds-components/FormField';
+import Switch from '@/ds-components/Switch';
+import TextLink from '@/ds-components/TextLink';
+import useTheme from '@/hooks/use-theme';
+
+import figureDark from './figure-dark.webp';
+import figureLight from './figure-light.webp';
+import * as styles from './index.module.scss';
+
+type FormContext = { rawConfig: { oneTap: GoogleConnectorConfig['oneTap'] } };
+
+const themeToFigure = Object.freeze({
+ [Theme.Light]: figureLight,
+ [Theme.Dark]: figureDark,
+} satisfies Record<Theme, string>);
+
+/**
+ * A card for configuring Google One Tap. It requires the `rawConfig.oneTap` field in the form
+ * context which can usually be obtained from the connector configuration context.
+ */
+function GoogleOneTapCard() {
+ const { t } = useTranslation(undefined, {
+ keyPrefix: 'admin_console.connector_details.google_one_tap',
+ });
+ const { register, control, watch } = useFormContext<FormContext>();
+ const isEnabled = watch('rawConfig.oneTap.isEnabled');
+ const theme = useTheme();
+
+ return (
+ <FormCard
+ title="connector_details.google_one_tap.title"
+ description="connector_details.google_one_tap.description"
+ >
+ <FormField title="connector_details.google_one_tap.enable_google_one_tap">
+ <Switch
+ description={
+ <>
+ <img
+ className={styles.figure}
+ src={themeToFigure[theme]}
+ alt="Google One Tap figure"
+ />
+ {t('enable_google_one_tap_description')}
+ </>
+ }
+ {...register('rawConfig.oneTap.isEnabled')}
+ />
+ </FormField>
+ {isEnabled && (
+ <FormField
+ title="connector_details.google_one_tap.configure_google_one_tap"
+ className={styles.oneTapConfig}
+ >
+ <Controller
+ name="rawConfig.oneTap.autoSelect"
+ control={control}
+ defaultValue={false}
+ render={({ field }) => (
+ <Checkbox label={t('auto_select')} checked={field.value} onChange={field.onChange} />
+ )}
+ />
+ <Controller
+ defaultValue
+ name="rawConfig.oneTap.closeOnTapOutside"
+ control={control}
+ render={({ field }) => (
+ <Checkbox
+ label={t('close_on_tap_outside')}
+ checked={field.value}
+ onChange={field.onChange}
+ />
+ )}
+ />
+ <Controller
+ defaultValue
+ name="rawConfig.oneTap.itpSupport"
+ control={control}
+ render={({ field }) => (
+ <Checkbox
+ label={
+ <Trans
+ components={{
+ a: (
+ <TextLink
+ href="https://developers.google.com/identity/gsi/web/guides/features#upgraded_ux_on_itp_browsers"
+ targetBlank="noopener"
+ />
+ ),
+ }}
+ i18nKey="admin_console.connector_details.google_one_tap.itp_support"
+ />
+ }
+ checked={field.value}
+ onChange={field.onChange}
+ />
+ )}
+ />
+ </FormField>
+ )}
+ </FormCard>
+ );
+}
+
+export default GoogleOneTapCard;

packages/console/src/components/FormCard/index.module.scss

@@ -6,6 +6,7 @@
  display: flex;
  align-items: center;
  gap: _.unit(2);
+ word-break: break-word;
 }
 
 .description {

packages/console/src/ds-components/Checkbox/Checkbox/index.tsx

@@ -9,7 +9,7 @@ import * as styles from './index.module.scss';
 
 type Props = {
  /* eslint-disable react/boolean-prop-naming */
- readonly checked: boolean;
+ readonly checked?: boolean;
  readonly disabled?: boolean;
  readonly indeterminate?: boolean;
  /* eslint-enable react/boolean-prop-naming */
@@ -61,7 +61,7 @@ function Checkbox({
  <svg
  className={classNames(
  styles.icon,
- (checked || isIndeterminate) && styles.checked,
+ (Boolean(checked) || isIndeterminate) && styles.checked,
  disabled && styles.disabled
  )}
  width="20"

packages/console/src/ds-components/Switch/index.module.scss

@@ -54,15 +54,18 @@
 
 .wrapper {
  display: flex;
+ gap: _.unit(6);
  align-items: center;
  border: 1px solid var(--color-neutral-90);
  border-radius: _.unit(2);
  padding: _.unit(4);
 
  .label {
  flex: 1;
- margin-right: _.unit(2);
  font: var(--font-body-2);
+ display: flex;
+ gap: _.unit(6);
+ align-items: center;
  }
 
  &.error {

packages/console/src/ds-components/Switch/index.tsx

@@ -1,18 +1,38 @@
+import { type AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
-import type { HTMLProps, ReactNode, Ref } from 'react';
+import type { HTMLProps, ReactElement, ReactNode, Ref } from 'react';
 import { forwardRef } from 'react';
 
+import DynamicT from '../DynamicT';
+
 import * as styles from './index.module.scss';
 
-type Props = Omit<HTMLProps<HTMLInputElement>, 'label'> & {
- readonly label?: ReactNode;
- readonly hasError?: boolean;
-};
+type Props =
+ | (Omit<HTMLProps<HTMLInputElement>, 'label'> & {
+ /** @deprecated Use `description` instead */
+ readonly label?: ReactNode;
+ readonly hasError?: boolean;
+ })
+ | (HTMLProps<HTMLInputElement> & {
+ readonly description: AdminConsoleKey | ReactElement;
+ readonly hasError?: boolean;
+ });
+
+function Switch(props: Props, ref?: Ref<HTMLInputElement>) {
+ const { label, hasError, ...rest } = props;
 
-function Switch({ label, hasError, ...rest }: Props, ref?: Ref<HTMLInputElement>) {
  return (
  <div className={classNames(styles.wrapper, hasError && styles.error)}>
- <div className={styles.label}>{label}</div>
+ {'description' in props && (
+ <div className={styles.label}>
+ {typeof props.description === 'string' ? (
+ <DynamicT forKey={props.description} />
+ ) : (
+ props.description
+ )}
+ </div>
+ )}
+ {label && <div className={styles.label}>{label}</div>}
  <label className={styles.switch}>
  <input type="checkbox" {...rest} ref={ref} />
  <span className={styles.slider} />

packages/console/src/hooks/use-connector-form-config-parser.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import type { ConnectorFormType } from '@/types/connector';
 import { parseFormConfig } from '@/utils/connector-form';
-import { safeParseJson } from '@/utils/json';
+import { safeParseJsonObject } from '@/utils/json';
 
 const useJsonStringConfigParser = () => {
  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
@@ -16,7 +16,7 @@ const useJsonStringConfigParser = () => {
  return;
  }
 
- const result = safeParseJson(config);
+ const result = safeParseJsonObject(config);
 
  if (!result.success) {
  toast.error(result.error);

packages/console/src/pages/ConnectorDetails/ConnectorContent/index.tsx

@@ -1,14 +1,15 @@
-import { ServiceConnector } from '@logto/connector-kit';
+import { ServiceConnector, GoogleConnector } from '@logto/connector-kit';
 import { ConnectorType } from '@logto/schemas';
 import type { ConnectorResponse } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 
 import BasicForm from '@/components/ConnectorForm/BasicForm';
 import ConfigForm from '@/components/ConnectorForm/ConfigForm';
+import GoogleOneTapCard from '@/components/ConnectorForm/GoogleOneTapCard';
 import ConnectorTester from '@/components/ConnectorTester';
 import DetailsForm from '@/components/DetailsForm';
 import FormCard from '@/components/FormCard';
@@ -34,18 +35,10 @@ function ConnectorContent({ isDeleted, connectorData, onConnectorUpdated }: Prop
  const { getDocumentationUrl } = useDocumentationUrl();
  const api = useApi();
  const formData = useMemo(() => convertResponseToForm(connectorData), [connectorData]);
-
  const methods = useForm<ConnectorFormType>({
  reValidateMode: 'onBlur',
- defaultValues: {
- ...formData,
- /**
- * Note:
- * The `formConfig` will be setup in the `useEffect` hook since react-hook-form's `useForm` hook infers `Record<string, unknown>` to `{ [x: string]: {} | undefined }` incorrectly,
- * this causes we cannot apply the default value of `formConfig` to the form.
- */
- formConfig: {},
- },
+ // eslint-disable-next-line no-restricted-syntax -- The original type will cause "infinitely deep type" error.
+ defaultValues: formData as Record<string, unknown>,
  });
 
  const {
@@ -67,23 +60,15 @@ function ConnectorContent({ isDeleted, connectorData, onConnectorUpdated }: Prop
  const isSocialConnector = connectorType === ConnectorType.Social;
  const isEmailServiceConnector = connectorId === ServiceConnector.Email;
 
- useEffect(() => {
- /**
- * Note: should not refresh form data when the form is dirty.
- */
- if (isDirty) {
- return;
- }
- reset(formData);
- }, [formData, isDirty, reset]);
-
  const configParser = useConnectorFormConfigParser();
 
  const onSubmit = handleSubmit(
  trySubmitSafe(async (data) => {
  const { formItems, isStandard, id } = connectorData;
- const config = configParser(data, formItems);
- const { syncProfile, name, logo, logoDark, target } = data;
+ const { syncProfile, name, logo, logoDark, target, rawConfig } = data;
+ // Apply the raw config first to avoid losing data updated from other forms that are not
+ // included in the form items.
+ const config = { ...rawConfig, ...configParser(data, formItems) };
 
  const payload = isSocialConnector
  ? {
@@ -165,6 +150,7 @@ function ConnectorContent({ isDeleted, connectorData, onConnectorUpdated }: Prop
  />
  </FormCard>
  )}
+ {connectorId === GoogleConnector.factoryId && <GoogleOneTapCard />}
  {!isSocialConnector && (
  <FormCard title="connector_details.test_connection">
  <ConnectorTester

packages/console/src/types/connector.ts

@@ -1,4 +1,4 @@
-import type { ConnectorResponse } from '@logto/schemas';
+import type { ConnectorResponse, JsonObject } from '@logto/schemas';
 import { type Nullable } from '@silverhand/essentials';
 
 export type ConnectorGroup<T = ConnectorResponse> = Pick<
@@ -20,6 +20,10 @@ export type ConnectorFormType = {
  logoDark?: Nullable<string>;
  target?: string;
  syncProfile: SyncProfileMode;
- jsonConfig: string; // Support editing configs by the code editor
- formConfig: Record<string, unknown>; // Support custom connector config form
+ /** The raw config data in JSON string. Used for code editor. */
+ jsonConfig: string;
+ /** The form config data. Used for form rendering. */
+ formConfig: Record<string, unknown>;
+ /** The raw config data. */
+ rawConfig: JsonObject;
 };

packages/console/src/utils/connector-form.ts

@@ -76,6 +76,7 @@ export const convertResponseToForm = (connector: ConnectorResponse): ConnectorFo
  syncProfile: syncProfile ? SyncProfileMode.EachSignIn : SyncProfileMode.OnlyAtRegister,
  jsonConfig: JSON.stringify(config, null, 2),
  formConfig,
+ rawConfig: config,
  };
 };
 
@@ -91,5 +92,6 @@ export const convertFactoryResponseToForm = (
  syncProfile: SyncProfileMode.OnlyAtRegister,
  jsonConfig,
  formConfig,
+ rawConfig: {},
  };
 };

packages/phrases/src/locales/en/translation/admin-console/connector-details.ts

@@ -54,6 +54,17 @@ const connector_details = {
  urls_not_allowed: 'URLs are not allowed',
  test_notes: 'Logto uses the “Generic” template for testing.',
  },
+ google_one_tap: {
+ title: 'Google One Tap',
+ description: 'Google One Tap is a secure and easy way for users to sign in to your website.',
+ enable_google_one_tap: 'Enable Google One Tap',
+ enable_google_one_tap_description:
+ "Enable Google One Tap in your sign-in experience: Let users quickly sign up or sign in with their Google account if they're already signed in on their device.",
+ configure_google_one_tap: 'Configure Google One Tap',
+ auto_select: 'Auto-select credential if possible',
+ close_on_tap_outside: 'Cancel the prompt if user click/tap outside',
+ itp_support: 'Enable <a>Upgraded One Tap UX on ITP browsers</a>',
+ },
 };
 
 export default Object.freeze(connector_details);