wip

Author: NicolasLopes7

packages/clerk-js/src/core/resources/EmailAddress.ts

@@ -2,11 +2,13 @@ import { Poller } from '@clerk/shared/poller';
 import type {
   AttemptEmailAddressVerificationParams,
   CreateEmailLinkFlowReturn,
+  CreateEnterpriseConnectionLinkFlowReturn,
   EmailAddressJSON,
   EmailAddressResource,
   IdentificationLinkResource,
   PrepareEmailAddressVerificationParams,
   StartEmailLinkFlowParams,
+  StartEnterpriseConnectionLinkFlowParams,
   VerificationResource,
 } from '@clerk/types';
 
@@ -16,6 +18,7 @@ import { BaseResource, IdentificationLink, Verification } from './internal';
 export class EmailAddress extends BaseResource implements EmailAddressResource {
   id!: string;
   emailAddress = '';
+  matchesEnterpriseConnection = false;
   linkedTo: IdentificationLinkResource[] = [];
   verification!: VerificationResource;
 
@@ -77,6 +80,45 @@ export class EmailAddress extends BaseResource implements EmailAddressResource {
     return { startEmailLinkFlow, cancelEmailLinkFlow: stop };
   };
 
+  createEnterpriseConnectionLinkFlow = (): CreateEnterpriseConnectionLinkFlowReturn<
+    StartEnterpriseConnectionLinkFlowParams,
+    EmailAddressResource
+  > => {
+    const { run, stop } = Poller();
+
+    const startEnterpriseConnectionLinkFlow = async ({
+      redirectUrl,
+    }: StartEnterpriseConnectionLinkFlowParams): Promise<EmailAddressResource> => {
+      if (!this.id) {
+        clerkVerifyEmailAddressCalledBeforeCreate('SignUp');
+      }
+      const response = await this.prepareVerification({
+        strategy: 'saml',
+        redirectUrl: redirectUrl,
+      });
+      if (!response.verification.externalVerificationRedirectURL) {
+        throw Error('Unexpected: External verification redirect URL is missing');
+      }
+      window.open(response.verification.externalVerificationRedirectURL, '_blank');
+      return new Promise((resolve, reject) => {
+        void run(() => {
+          return this.reload()
+            .then(res => {
+              if (res.verification.status === 'verified') {
+                stop();
+                resolve(res);
+              }
+            })
+            .catch(err => {
+              stop();
+              reject(err);
+            });
+        });
+      });
+    };
+    return { startEnterpriseConnectionLinkFlow, cancelEnterpriseConnectionLinkFlow: stop };
+  };
+
   destroy = (): Promise<void> => this._baseDelete();
 
   toString = (): string => this.emailAddress;
@@ -89,6 +131,7 @@ export class EmailAddress extends BaseResource implements EmailAddressResource {
     this.id = data.id;
     this.emailAddress = data.email_address;
     this.verification = new Verification(data.verification);
+    this.matchesEnterpriseConnection = data.matches_enterprise_connection;
     this.linkedTo = (data.linked_to || []).map(link => new IdentificationLink(link));
     return this;
   }

packages/clerk-js/src/ui/components/UserProfile/EmailForm.tsx

@@ -8,8 +8,9 @@ import { localizationKeys } from '../../customizables';
 import type { FormProps } from '../../elements';
 import { Form, FormButtons, FormContainer, useCardState, withCardStateProvider } from '../../elements';
 import { handleError, useFormControl } from '../../utils';
-import { emailLinksEnabledForInstance } from './utils';
+import { emailLinksEnabledForInstance, getVerificationStrategy } from './utils';
 import { VerifyWithCode } from './VerifyWithCode';
+import { VerifyWithEnterpriseConnection } from './VerifyWithEnterpriseConnection';
 import { VerifyWithLink } from './VerifyWithLink';
 
 type EmailFormProps = FormProps & {
@@ -21,10 +22,9 @@ export const EmailForm = withCardStateProvider((props: EmailFormProps) => {
   const { user } = useUser();
   const environment = useEnvironment();
   const preferEmailLinks = emailLinksEnabledForInstance(environment);
-
   const [createEmailAddress] = useReverification(() => user?.createEmailAddress({ email: emailField.value }));
-
   const emailAddressRef = React.useRef<EmailAddressResource | undefined>(user?.emailAddresses.find(a => a.id === id));
+  const strategy = getVerificationStrategy(emailAddressRef.current, preferEmailLinks);
   const wizard = useWizard({
     defaultStep: emailAddressRef.current ? 1 : 0,
     onNextStep: () => card.setError(undefined),
@@ -89,13 +89,14 @@ export const EmailForm = withCardStateProvider((props: EmailFormProps) => {
               })
         }
       >
-        {preferEmailLinks ? (
+        {strategy === 'email_link' && (
           <VerifyWithLink
             nextStep={onSuccess}
             email={emailAddressRef.current as any}
             onReset={onReset}
           />
-        ) : (
+        )}
+        {strategy === 'email_code' && (
           <VerifyWithCode
             nextStep={onSuccess}
             identification={emailAddressRef.current}
@@ -104,6 +105,13 @@ export const EmailForm = withCardStateProvider((props: EmailFormProps) => {
             onReset={onReset}
           />
         )}
+        {strategy === 'saml' && (
+          <VerifyWithEnterpriseConnection
+            nextStep={onSuccess}
+            email={emailAddressRef.current as any}
+            onReset={onReset}
+          />
+        )}
       </FormContainer>
     </Wizard>
   );

packages/clerk-js/src/ui/components/UserProfile/VerifyWithEnterpriseConnection.tsx

@@ -0,0 +1,71 @@
+import type { EmailAddressResource } from '@clerk/types';
+import React from 'react';
+
+import { EmailLinkStatusCard } from '../../common';
+import { buildEmailLinkRedirectUrl } from '../../common/redirects';
+import { useEnvironment, useUserProfileContext } from '../../contexts';
+import { Button, descriptors, localizationKeys } from '../../customizables';
+import { FormButtonContainer, useCardState, VerificationLink } from '../../elements';
+import { useEnterpriseConnectionLink } from '../../hooks';
+import { handleError } from '../../utils';
+
+type VerifyWithEnterpriseConnectionProps = {
+  email: EmailAddressResource;
+  onReset: () => void;
+  nextStep: () => void;
+};
+
+export const VerifyWithEnterpriseConnection = (props: VerifyWithEnterpriseConnectionProps) => {
+  const { email, nextStep, onReset } = props;
+  const card = useCardState();
+  const profileContext = useUserProfileContext();
+  const { startEnterpriseConnectionLinkFlow } = useEnterpriseConnectionLink(email);
+  const { displayConfig } = useEnvironment();
+
+  React.useEffect(() => {
+    startVerification();
+  }, []);
+
+  function startVerification() {
+    /**
+     * The following workaround is used in order to make magic links work when the
+     * <UserProfile/> is used as a modal. In modals, the routing is virtual. For
+     * magic links the flow needs to end by invoking the /verify path of the <UserProfile/>
+     * that renders the <VerificationSuccessPage/>. So, we use the userProfileUrl that
+     * defaults to Clerk Hosted Pages /user as a fallback.
+     */
+    const { routing } = profileContext;
+    const baseUrl = routing === 'virtual' ? displayConfig.userProfileUrl : '';
+    const redirectUrl = buildEmailLinkRedirectUrl(profileContext, baseUrl);
+    startEnterpriseConnectionLinkFlow({ redirectUrl })
+      .then(() => nextStep())
+      .catch(err => handleError(err, [], card.setError));
+  }
+
+  return (
+    <>
+      <VerificationLink
+        resendButton={localizationKeys('userProfile.emailAddressPage.emailLink.resendButton')}
+        onResendCodeClicked={startVerification}
+      />
+      <FormButtonContainer>
+        <Button
+          variant='ghost'
+          localizationKey={localizationKeys('userProfile.formButtonReset')}
+          elementDescriptor={descriptors.formButtonReset}
+          onClick={onReset}
+        />
+      </FormButtonContainer>
+    </>
+  );
+};
+
+export const VerificationSuccessPage = () => {
+  return (
+    <EmailLinkStatusCard
+      title={localizationKeys('signUp.emailLink.verifiedSwitchTab.title')}
+      subtitle={localizationKeys('signUp.emailLink.verifiedSwitchTab.subtitle')}
+      status='verified'
+    />
+  );
+};

packages/clerk-js/src/ui/components/UserProfile/utils.ts

@@ -3,6 +3,7 @@ import type {
   EmailAddressResource,
   EnvironmentResource,
   PhoneNumberResource,
+  PrepareEmailAddressVerificationParams,
   UserResource,
 } from '@clerk/types';
 
@@ -76,3 +77,14 @@ export function sortIdentificationBasedOnVerification<T extends Array<EmailAddre
 
   return [...primaryItem, ...verifiedItems, ...unverifiedItems, ...unverifiedItemsWithoutVerification] as T;
 }
+
+export const getVerificationStrategy = (
+  emailAddress: EmailAddressResource | undefined,
+  preferLinks: boolean,
+): PrepareEmailAddressVerificationParams['strategy'] => {
+  if (emailAddress?.matchesEnterpriseConnection) {
+    return 'saml';
+  }
+
+  return preferLinks ? 'email_link' : 'email_code';
+};

packages/clerk-js/src/ui/hooks/index.ts

@@ -18,3 +18,4 @@ export * from './useDebounce';
 export * from './useScrollLock';
 export * from './useClerkModalStateParams';
 export * from './useNavigateToFlowStart';
+export * from './useEnterpriseConnectionLink';

packages/clerk-js/src/ui/hooks/useEnterpriseConnectionLink.ts

@@ -0,0 +1,32 @@
+import type {
+  CreateEnterpriseConnectionLinkFlowReturn,
+  EmailAddressResource,
+  StartEnterpriseConnectionLinkFlowParams,
+} from '@clerk/types';
+import React from 'react';
+
+type EnterpriseConnectionLinkable = EmailAddressResource;
+type EnterpriseConnectionLinkEmailAddressReturn = CreateEnterpriseConnectionLinkFlowReturn<
+  StartEnterpriseConnectionLinkFlowParams,
+  EmailAddressResource
+>;
+
+function useEnterpriseConnectionLink(
+  resource: EnterpriseConnectionLinkable,
+): EnterpriseConnectionLinkEmailAddressReturn {
+  const { startEnterpriseConnectionLinkFlow, cancelEnterpriseConnectionLinkFlow } = React.useMemo(
+    () => resource.createEnterpriseConnectionLinkFlow(),
+    [resource],
+  );
+
+  React.useEffect(() => {
+    return cancelEnterpriseConnectionLinkFlow;
+  }, []);
+
+  return {
+    startEnterpriseConnectionLinkFlow,
+    cancelEnterpriseConnectionLinkFlow,
+  };
+}
+
+export { useEnterpriseConnectionLink };

packages/types/src/emailAddress.ts

@@ -1,7 +1,13 @@
 import type { IdentificationLinkResource } from './identificationLink';
 import type { ClerkResource } from './resource';
-import type { EmailCodeStrategy, EmailLinkStrategy } from './strategies';
-import type { CreateEmailLinkFlowReturn, StartEmailLinkFlowParams, VerificationResource } from './verification';
+import type { EmailCodeStrategy, EmailLinkStrategy, EmailSAMLStrategy } from './strategies';
+import type {
+  CreateEmailLinkFlowReturn,
+  CreateEnterpriseConnectionLinkFlowReturn,
+  StartEmailLinkFlowParams,
+  StartEnterpriseConnectionLinkFlowParams,
+  VerificationResource,
+} from './verification';
 
 export type PrepareEmailAddressVerificationParams =
   | {
@@ -10,6 +16,10 @@ export type PrepareEmailAddressVerificationParams =
   | {
       strategy: EmailLinkStrategy;
       redirectUrl: string;
+    }
+  | {
+      strategy: EmailSAMLStrategy;
+      redirectUrl: string;
     };
 
 export type AttemptEmailAddressVerificationParams = {
@@ -20,11 +30,16 @@ export interface EmailAddressResource extends ClerkResource {
   id: string;
   emailAddress: string;
   verification: VerificationResource;
+  matchesEnterpriseConnection: boolean;
   linkedTo: IdentificationLinkResource[];
   toString: () => string;
   prepareVerification: (params: PrepareEmailAddressVerificationParams) => Promise<EmailAddressResource>;
   attemptVerification: (params: AttemptEmailAddressVerificationParams) => Promise<EmailAddressResource>;
   createEmailLinkFlow: () => CreateEmailLinkFlowReturn<StartEmailLinkFlowParams, EmailAddressResource>;
+  createEnterpriseConnectionLinkFlow: () => CreateEnterpriseConnectionLinkFlowReturn<
+    StartEnterpriseConnectionLinkFlowParams,
+    EmailAddressResource
+  >;
   destroy: () => Promise<void>;
   create: () => Promise<EmailAddressResource>;
 }

packages/types/src/json.ts

@@ -139,6 +139,7 @@ export interface EmailAddressJSON extends ClerkResourceJSON {
   email_address: string;
   verification: VerificationJSON | null;
   linked_to: IdentificationLinkJSON[];
+  matches_enterprise_connection: boolean;
 }
 
 export interface IdentificationLinkJSON extends ClerkResourceJSON {

packages/types/src/strategies.ts

@@ -7,6 +7,7 @@ export type PasswordStrategy = 'password';
 export type PhoneCodeStrategy = 'phone_code';
 export type EmailCodeStrategy = 'email_code';
 export type EmailLinkStrategy = 'email_link';
+export type EmailSAMLStrategy = 'saml';
 export type TicketStrategy = 'ticket';
 export type TOTPStrategy = 'totp';
 export type BackupCodeStrategy = 'backup_code';

packages/types/src/verification.ts

@@ -41,3 +41,12 @@ export type CreateEmailLinkFlowReturn<Params, Resource> = {
   startEmailLinkFlow: (params: Params) => Promise<Resource>;
   cancelEmailLinkFlow: () => void;
 };
+
+export interface StartEnterpriseConnectionLinkFlowParams {
+  redirectUrl: string;
+}
+
+export type CreateEnterpriseConnectionLinkFlowReturn<Params, Resource> = {
+  startEnterpriseConnectionLinkFlow: (params: Params) => Promise<Resource>;
+  cancelEnterpriseConnectionLinkFlow: () => void;
+};