feat(ui): Add Google Workspace SAML to self-serve SSO

.changeset/beige-breads-bathe.md

@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': patch
+'@clerk/shared': patch
+'@clerk/ui': patch
+---
+
+Add support for Google Workspace SAML provider to self-serve SSO

packages/localizations/src/en-US.ts

@@ -242,6 +242,7 @@ export const enUS: LocalizationResource = {
  groupLabel: 'SAML',
  okta: 'Okta Workforce',
  customSaml: 'Custom SAML Provider',
+ google: 'Google Workspace',
  },
  warning: 'Once a provider is selected you cannot change again until the configuration is over',
  },
@@ -359,11 +360,11 @@ export const enUS: LocalizationResource = {
  step5: 'Click <bold>Next</bold> to complete creating the application.',
  },
  serviceProviderInstructions: {
- title: 'Configure service provider',
+ title: 'Add service provider configuration to Okta',
  paragraph1:
  'Once you have moved forward from the General Settings instructions, you will be presented with the Configure SAML page.',
  paragraph2:
- 'To configure your service provider (Clerk), you must add these two fields to your Okta application:',
+ 'To configure your service provider, you must add these two fields to your Okta SAML application:',
  serviceProviderFields: {
  acsUrl: {
  label: 'Single sign-on URL',
@@ -387,7 +388,7 @@ export const enUS: LocalizationResource = {
  step2: 'Select <bold>Add Expression</bold> for each row below, then enter the matching name and value:',
  attributeMappingTable: {
  columns: {
- name: 'Name',
+ name: 'Attribute name',
  expression: 'Expression',
  },
  rows: {
@@ -516,6 +517,104 @@ export const enUS: LocalizationResource = {
  },
  },
  },
+ samlGoogle: {
+ mainHeaderTitle: 'Configure Google Workspace',
+ createAppStep: {
+ headerSubtitle: 'Create a new enterprise application in your Google Workspace',
+ createAppInstructions: {
+ title: 'Create a new enterprise application in Google Workspace',
+ step1: 'Sign in to Google Admin Portal.',
+ step2: 'In the side navigation, under <bold>Apps</bold>, select <bold>Web and mobile apps.</bold>',
+ step3: 'Click on the <bold>Add</bold> app button, and select <bold>Add custom SAML app.</bold>',
+ step4: 'In the <bold>App details</bold> section, fill out the required <bold>App name</bold>.',
+ step5: 'Select the <bold>Continue</bold> button.',
+ },
+ },
+ identityProviderMetadataStep: {
+ headerSubtitle: 'Configure identity provider metadata',
+ modes: {
+ title: 'Fill in your Google Workspace application details',
+ ariaLabel: 'Configuration ',
+ metadataFile: 'Add via metadata',
+ manual: 'Configure manually',
+ },
+ metadataFile: {
+ label: 'IdP metadata',
+ description: 'In your Google Workspace application, download the IdP metadata and upload it below.',
+ uploadFile: 'Upload file',
+ replaceFile: 'Replace file',
+ removeFile: 'Remove file',
+ fileUploaded: 'File uploaded',
+ },
+ manual: {
+ description: 'In your Google Workspace application, retrieve these values.',
+ signOnUrl: {
+ label: 'SSO URL',
+ placeholder: 'Paste URL here...',
+ },
+ issuer: {
+ label: 'Entity ID',
+ placeholder: 'Paste URL here...',
+ },
+ signingCertificate: {
+ label: 'Signing certificate',
+ uploadFile: 'Upload file',
+ replaceFile: 'Replace file',
+ removeFile: 'Remove file',
+ fileUploaded: 'File uploaded',
+ },
+ },
+ },
+ serviceProviderStep: {
+ headerSubtitle: 'Configure service provider',
+ title: 'Configure service provider',
+ paragraph:
+ 'To configure your service provider, you must add these two fields to your Google Workspace SAML application:',
+ serviceProviderFields: {
+ acsUrl: {
+ label: 'ACS URL',
+ },
+ spEntityId: {
+ label: 'Entity ID',
+ },
+ },
+ nameIdInstructions: {
+ step1:
+ 'Under the <bold>Name ID</bold> section, select the <bold>Name ID</bold> format dropdown and select <bold>Email</bold>.',
+ step2: 'Select <bold>Continue</bold>',
+ },
+ },
+ attributeMappingStep: {
+ headerSubtitle: 'Map user attributes from Google Workspace to your application',
+ paragraph: 'We expect your SAML response to return the user’s email, first name and last name.',
+ step1: 'In the <bold>Google Admin Console</bold>, find the <bold>Attributes</bold> section.',
+ step2:
+ 'Select <bold>Add mapping</bold> for each attribute, and enter the following Google and app attribute:',
+ attributeMappingTable: {
+ columns: {
+ googleAttribute: 'Google attribute',
+ appAttribute: 'App attribute',
+ },
+ rows: {
+ email: { googleAttribute: 'Primary email', appAttribute: 'email' },
+ firstName: { googleAttribute: 'First name', appAttribute: 'firstName' },
+ lastName: { googleAttribute: 'Last name', appAttribute: 'lastName' },
+ },
+ },
+ },
+ configureUserAccess: {
+ headerSubtitle: 'Enable your Google Workspace SAML application',
+ assignUsersInstructions: {
+ paragraph1:
+ "Once the configuration is complete in Google, you'll be redirected to the app's overview page.",
+ step1: 'Open the <bold>User access</bold> section.',
+ step2: 'Select <bold>ON for everyone.</bold>',
+ step3: 'Select <bold>Save</bold>.',
+ paragraph2:
+ 'Google may take up to 24 hours to propagate these changes. The connection will remain inactive until they take effect.',
+ },
+ },
+ },
  },
  },
  createOrganization: {

packages/shared/src/react/hooks/useEnterpriseConnectionTestRuns.tsx

@@ -104,6 +104,7 @@ function useEnterpriseConnectionTestRuns(
  },
  enabled: queryEnabled,
  refetchIntervalInBackground: false,
+ refetchOnWindowFocus: false,
  });
 
  const hasRows = (query.data?.data?.length ?? 0) > 0;

packages/shared/src/types/elementIds.ts

@@ -28,6 +28,7 @@ export type FieldId =
  | 'apiKeySecret'
  | 'idpCertificate'
  | 'idpEntityId'
+ | 'idpMetadata'
  | 'idpMetadataUrl'
  | 'idpSsoUrl'
  | 'acsUrl'

packages/shared/src/types/localization.ts

@@ -1308,6 +1308,7 @@ export type __internal_LocalizationResource = {
  groupLabel: LocalizationValue;
  okta: LocalizationValue;
  customSaml: LocalizationValue;
+ google: LocalizationValue;
  };
  warning: LocalizationValue;
  };
@@ -1570,6 +1571,99 @@ export type __internal_LocalizationResource = {
  };
  };
  };
+ samlGoogle: {
+ mainHeaderTitle: LocalizationValue;
+ createAppStep: {
+ headerSubtitle: LocalizationValue;
+ createAppInstructions: {
+ title: LocalizationValue;
+ step1: LocalizationValue;
+ step2: LocalizationValue;
+ step3: LocalizationValue;
+ step4: LocalizationValue;
+ step5: LocalizationValue;
+ };
+ };
+ identityProviderMetadataStep: {
+ headerSubtitle: LocalizationValue;
+ modes: {
+ title: LocalizationValue;
+ ariaLabel: LocalizationValue;
+ metadataFile: LocalizationValue;
+ manual: LocalizationValue;
+ };
+ metadataFile: {
+ label: LocalizationValue;
+ description: LocalizationValue;
+ uploadFile: LocalizationValue;
+ replaceFile: LocalizationValue;
+ removeFile: LocalizationValue;
+ fileUploaded: LocalizationValue;
+ };
+ manual: {
+ description: LocalizationValue;
+ signOnUrl: {
+ label: LocalizationValue;
+ placeholder: LocalizationValue;
+ };
+ issuer: {
+ label: LocalizationValue;
+ placeholder: LocalizationValue;
+ };
+ signingCertificate: {
+ label: LocalizationValue;
+ uploadFile: LocalizationValue;
+ replaceFile: LocalizationValue;
+ removeFile: LocalizationValue;
+ fileUploaded: LocalizationValue;
+ };
+ };
+ };
+ serviceProviderStep: {
+ headerSubtitle: LocalizationValue;
+ title: LocalizationValue;
+ paragraph: LocalizationValue;
+ serviceProviderFields: {
+ acsUrl: {
+ label: LocalizationValue;
+ };
+ spEntityId: {
+ label: LocalizationValue;
+ };
+ };
+ nameIdInstructions: {
+ step1: LocalizationValue;
+ step2: LocalizationValue;
+ };
+ };
+ attributeMappingStep: {
+ headerSubtitle: LocalizationValue;
+ paragraph: LocalizationValue;
+ step1: LocalizationValue;
+ step2: LocalizationValue;
+ attributeMappingTable: {
+ columns: {
+ googleAttribute: LocalizationValue;
+ appAttribute: LocalizationValue;
+ };
+ rows: {
+ email: { googleAttribute: LocalizationValue; appAttribute: LocalizationValue };
+ firstName: { googleAttribute: LocalizationValue; appAttribute: LocalizationValue };
+ lastName: { googleAttribute: LocalizationValue; appAttribute: LocalizationValue };
+ };
+ };
+ };
+ configureUserAccess: {
+ headerSubtitle: LocalizationValue;
+ assignUsersInstructions: {
+ paragraph1: LocalizationValue;
+ step1: LocalizationValue;
+ step2: LocalizationValue;
+ step3: LocalizationValue;
+ paragraph2: LocalizationValue;
+ };
+ };
+ };
  };
  confirmation: {
  statusSection: {

packages/ui/src/components/ConfigureSSO/elements/Stepper/Stepper.tsx

@@ -95,6 +95,7 @@ const Item = ({
  fontSize: theme.fontSizes.$xs,
  fontWeight: theme.fontWeights.$medium,
  color: theme.colors.$colorBackground,
+ lineHeight: '1rem',
  })}
  >
  {bullet}

packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/index.tsx

@@ -6,12 +6,12 @@ import { useConfigureSSO } from '../../ConfigureSSOContext';
 import { Step } from '../../elements/Step';
 import { Wizard } from '../../elements/Wizard';
 import type { ProviderType } from '../../types';
-import { SamlCustomConfigureSteps } from './saml/SamlCustomConfigureSteps';
-import { SamlOktaConfigureSteps } from './saml/SamlOktaConfigureSteps';
+import { SamlCustomConfigureSteps, SamlGoogleConfigureSteps, SamlOktaConfigureSteps } from './saml';
 
 const STEPS_BY_PROVIDER: Record<ProviderType, () => JSX.Element> = {
  saml_custom: SamlCustomConfigureSteps,
  saml_okta: SamlOktaConfigureSteps,
+ saml_google: SamlGoogleConfigureSteps,
 };
 
 export const ConfigureStep = (): JSX.Element | null => {