Rename verification hook to enterprise SSO

LauraBeatris · LauraBeatris · commit 0d9bdfe71e4e · 2024-12-03T10:06:52.000-03:00
diff --git a/packages/clerk-js/src/core/resources/EmailAddress.ts b/packages/clerk-js/src/core/resources/EmailAddress.ts
@@ -80,21 +80,21 @@ export class EmailAddress extends BaseResource implements EmailAddressResource {
     return { startEmailLinkFlow, cancelEmailLinkFlow: stop };
   };
 
-  createEnterpriseConnectionLinkFlow = (): CreateEnterpriseConnectionLinkFlowReturn<
+  createEnterpriseSsoLinkFlow = (): CreateEnterpriseConnectionLinkFlowReturn<
     StartEnterpriseConnectionLinkFlowParams,
     EmailAddressResource
   > => {
     const { run, stop } = Poller();
 
-    const startEnterpriseConnectionLinkFlow = async ({
+    const startEnterpriseSsoLinkFlow = async ({
       redirectUrl,
     }: StartEnterpriseConnectionLinkFlowParams): Promise<EmailAddressResource> => {
       if (!this.id) {
         clerkVerifyEmailAddressCalledBeforeCreate('SignUp');
       }
       const response = await this.prepareVerification({
         strategy: 'enterprise_sso',
-        redirectUrl: redirectUrl,
+        redirectUrl,
       });
       if (!response.verification.externalVerificationRedirectURL) {
         throw Error('Unexpected: External verification redirect URL is missing');
@@ -116,7 +116,7 @@ export class EmailAddress extends BaseResource implements EmailAddressResource {
         });
       });
     };
-    return { startEnterpriseConnectionLinkFlow, cancelEnterpriseConnectionLinkFlow: stop };
+    return { startEnterpriseSsoLinkFlow, cancelEnterpriseSsoLinkFlow: stop };
   };
 
   destroy = (): Promise<void> => this._baseDelete();
diff --git a/packages/clerk-js/src/ui/common/redirects.ts b/packages/clerk-js/src/ui/common/redirects.ts
@@ -2,9 +2,9 @@ import { buildURL } from '../../utils/url';
 import type { SignInContextType, SignUpContextType, UserProfileContextType } from './../contexts';
 
 const SSO_CALLBACK_PATH_ROUTE = '/sso-callback';
-const MAGIC_LINK_VERIFY_PATH_ROUTE = '/verify';
+const VERIFICATION_PATH_ROUTE = '/verify';
 
-export function buildEmailLinkRedirectUrl(
+export function buildVerificationRedirectUrl(
   ctx: SignInContextType | SignUpContextType | UserProfileContextType,
   baseUrl: string | undefined = '',
 ): string {
@@ -14,7 +14,7 @@ export function buildEmailLinkRedirectUrl(
     baseUrl,
     authQueryString,
     path,
-    endpoint: MAGIC_LINK_VERIFY_PATH_ROUTE,
+    endpoint: VERIFICATION_PATH_ROUTE,
   });
 }
 
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEmailLinkCard.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEmailLinkCard.tsx
@@ -4,7 +4,7 @@ import type { EmailLinkFactor, SignInResource } from '@clerk/types';
 import React from 'react';
 
 import { EmailLinkStatusCard } from '../../common';
-import { buildEmailLinkRedirectUrl } from '../../common/redirects';
+import { buildVerificationRedirectUrl } from '../../common/redirects';
 import { useCoreSignIn, useSignInContext } from '../../contexts';
 import { Flow, localizationKeys, useLocalizations } from '../../customizables';
 import type { VerificationCodeCardProps } from '../../elements';
@@ -45,7 +45,7 @@ export const SignInFactorOneEmailLinkCard = (props: SignInFactorOneEmailLinkCard
   const startEmailLinkVerification = () => {
     startEmailLinkFlow({
       emailAddressId: props.factor.emailAddressId,
-      redirectUrl: buildEmailLinkRedirectUrl(signInContext, signInUrl),
+      redirectUrl: buildVerificationRedirectUrl(signInContext, signInUrl),
     })
       .then(res => handleVerificationResult(res))
       .catch(err => {
diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpEmailLinkCard.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpEmailLinkCard.tsx
@@ -3,7 +3,7 @@ import type { SignUpResource } from '@clerk/types';
 import React from 'react';
 
 import { EmailLinkStatusCard } from '../../common';
-import { buildEmailLinkRedirectUrl } from '../../common/redirects';
+import { buildVerificationRedirectUrl } from '../../common/redirects';
 import { useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';
 import { Flow, localizationKeys, useLocalizations } from '../../customizables';
 import { VerificationLinkCard } from '../../elements';
@@ -36,7 +36,7 @@ export const SignUpEmailLinkCard = () => {
   };
 
   const startEmailLinkVerification = () => {
-    return startEmailLinkFlow({ redirectUrl: buildEmailLinkRedirectUrl(signUpContext, displayConfig.signUpUrl) })
+    return startEmailLinkFlow({ redirectUrl: buildVerificationRedirectUrl(signUpContext, displayConfig.signUpUrl) })
       .then(res => handleVerificationResult(res))
       .catch(err => {
         handleError(err, [], card.setError);
diff --git a/packages/clerk-js/src/ui/components/UserProfile/EmailForm.tsx b/packages/clerk-js/src/ui/components/UserProfile/EmailForm.tsx
@@ -1,5 +1,5 @@
 import { useReverification, useUser } from '@clerk/shared/react';
-import type { EmailAddressResource } from '@clerk/types';
+import type { EmailAddressResource, PrepareEmailAddressVerificationParams } from '@clerk/types';
 import React from 'react';
 
 import { useWizard, Wizard } from '../../common';
@@ -8,7 +8,7 @@ import { localizationKeys } from '../../customizables';
 import type { FormProps } from '../../elements';
 import { Form, FormButtons, FormContainer, useCardState, withCardStateProvider } from '../../elements';
 import { handleError, useFormControl } from '../../utils';
-import { emailLinksEnabledForInstance, getVerificationStrategy } from './utils';
+import { emailLinksEnabledForInstance } from './utils';
 import { VerifyWithCode } from './VerifyWithCode';
 import { VerifyWithEnterpriseConnection } from './VerifyWithEnterpriseConnection';
 import { VerifyWithLink } from './VerifyWithLink';
@@ -24,7 +24,7 @@ export const EmailForm = withCardStateProvider((props: EmailFormProps) => {
   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 strategy = getEmailAddressVerificationStrategy(emailAddressRef.current, preferEmailLinks);
   const wizard = useWizard({
     defaultStep: emailAddressRef.current ? 1 : 0,
     onNextStep: () => card.setError(undefined),
@@ -80,6 +80,7 @@ export const EmailForm = withCardStateProvider((props: EmailFormProps) => {
       <FormContainer
         headerTitle={localizationKeys('userProfile.emailAddressPage.verifyTitle')}
         headerSubtitle={
+          // TODO - Get localization per strategy
           preferEmailLinks
             ? localizationKeys('userProfile.emailAddressPage.emailLink.formSubtitle', {
                 identifier: emailAddressRef.current?.emailAddress,
@@ -105,7 +106,7 @@ export const EmailForm = withCardStateProvider((props: EmailFormProps) => {
             onReset={onReset}
           />
         )}
-        {strategy === 'saml' && (
+        {strategy === 'enterprise_sso' && (
           <VerifyWithEnterpriseConnection
             nextStep={onSuccess}
             email={emailAddressRef.current as any}
@@ -116,3 +117,15 @@ export const EmailForm = withCardStateProvider((props: EmailFormProps) => {
     </Wizard>
   );
 });
+
+// TODO - Handle `preferEmailLinks`
+export const getEmailAddressVerificationStrategy = (
+  emailAddress: EmailAddressResource | undefined,
+  preferLinks: boolean,
+): PrepareEmailAddressVerificationParams['strategy'] => {
+  if (emailAddress?.matchesEnterpriseConnection) {
+    return 'enterprise_sso';
+  }
+
+  return preferLinks ? 'email_link' : 'email_code';
+};
diff --git a/packages/clerk-js/src/ui/components/UserProfile/VerifyWithEnterpriseConnection.tsx b/packages/clerk-js/src/ui/components/UserProfile/VerifyWithEnterpriseConnection.tsx
@@ -2,11 +2,11 @@ import type { EmailAddressResource } from '@clerk/types';
 import React from 'react';
 
 import { EmailLinkStatusCard } from '../../common';
-import { buildEmailLinkRedirectUrl } from '../../common/redirects';
+import { buildVerificationRedirectUrl } 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 { useEnterpriseSsoLink } from '../../hooks';
 import { handleError } from '../../utils';
 
 type VerifyWithEnterpriseConnectionProps = {
@@ -19,7 +19,7 @@ export const VerifyWithEnterpriseConnection = (props: VerifyWithEnterpriseConnec
   const { email, nextStep, onReset } = props;
   const card = useCardState();
   const profileContext = useUserProfileContext();
-  const { startEnterpriseConnectionLinkFlow } = useEnterpriseConnectionLink(email);
+  const { startEnterpriseSsoLinkFlow } = useEnterpriseSsoLink(email);
   const { displayConfig } = useEnvironment();
 
   React.useEffect(() => {
@@ -36,14 +36,15 @@ export const VerifyWithEnterpriseConnection = (props: VerifyWithEnterpriseConnec
      */
     const { routing } = profileContext;
     const baseUrl = routing === 'virtual' ? displayConfig.userProfileUrl : '';
-    const redirectUrl = buildEmailLinkRedirectUrl(profileContext, baseUrl);
-    startEnterpriseConnectionLinkFlow({ redirectUrl })
+    const redirectUrl = buildVerificationRedirectUrl(profileContext, baseUrl);
+    startEnterpriseSsoLinkFlow({ redirectUrl })
       .then(() => nextStep())
       .catch(err => handleError(err, [], card.setError));
   }
 
   return (
     <>
+      {/* TODO - Handle localization */}
       <VerificationLink
         resendButton={localizationKeys('userProfile.emailAddressPage.emailLink.resendButton')}
         onResendCodeClicked={startVerification}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/VerifyWithLink.tsx b/packages/clerk-js/src/ui/components/UserProfile/VerifyWithLink.tsx
@@ -2,7 +2,7 @@ import type { EmailAddressResource } from '@clerk/types';
 import React from 'react';
 
 import { EmailLinkStatusCard } from '../../common';
-import { buildEmailLinkRedirectUrl } from '../../common/redirects';
+import { buildVerificationRedirectUrl } from '../../common/redirects';
 import { useEnvironment, useUserProfileContext } from '../../contexts';
 import { Button, descriptors, localizationKeys } from '../../customizables';
 import { FormButtonContainer, useCardState, VerificationLink } from '../../elements';
@@ -37,7 +37,7 @@ export const VerifyWithLink = (props: VerifyWithLinkProps) => {
     const { routing } = profileContext;
     const baseUrl = routing === 'virtual' ? displayConfig.userProfileUrl : '';
 
-    const redirectUrl = buildEmailLinkRedirectUrl(profileContext, baseUrl);
+    const redirectUrl = buildVerificationRedirectUrl(profileContext, baseUrl);
     startEmailLinkFlow({ redirectUrl })
       .then(() => nextStep())
       .catch(err => handleError(err, [], card.setError));
diff --git a/packages/clerk-js/src/ui/components/UserProfile/utils.ts b/packages/clerk-js/src/ui/components/UserProfile/utils.ts
@@ -3,7 +3,6 @@ import type {
   EmailAddressResource,
   EnvironmentResource,
   PhoneNumberResource,
-  PrepareEmailAddressVerificationParams,
   UserResource,
 } from '@clerk/types';
 
@@ -77,14 +76,3 @@ 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';
-};
diff --git a/packages/clerk-js/src/ui/hooks/index.ts b/packages/clerk-js/src/ui/hooks/index.ts
@@ -18,4 +18,4 @@ export * from './useDebounce';
 export * from './useScrollLock';
 export * from './useClerkModalStateParams';
 export * from './useNavigateToFlowStart';
-export * from './useEnterpriseConnectionLink';
+export * from './useEnterpriseSsoLink';
diff --git a/packages/clerk-js/src/ui/hooks/useEnterpriseConnectionLink.ts b/packages/clerk-js/src/ui/hooks/useEnterpriseConnectionLink.ts
diff --git a/packages/clerk-js/src/ui/hooks/useEnterpriseSsoLink.ts b/packages/clerk-js/src/ui/hooks/useEnterpriseSsoLink.ts
@@ -0,0 +1,29 @@
+import type {
+  CreateEnterpriseSsoFlowReturn,
+  EmailAddressResource,
+  StartEnterpriseSsoLinkFlowParams,
+} from '@clerk/types';
+import React from 'react';
+
+type EnterpriseSsoLinkEmailAddressReturn = CreateEnterpriseSsoFlowReturn<
+  StartEnterpriseSsoLinkFlowParams,
+  EmailAddressResource
+>;
+
+function useEnterpriseSsoLink(resource: EmailAddressResource): EnterpriseSsoLinkEmailAddressReturn {
+  const { startEnterpriseSsoLinkFlow, cancelEnterpriseSsoLinkFlow } = React.useMemo(
+    () => resource.createEnterpriseSsoLinkFlow(),
+    [resource],
+  );
+
+  React.useEffect(() => {
+    return cancelEnterpriseSsoLinkFlow;
+  }, []);
+
+  return {
+    startEnterpriseSsoLinkFlow,
+    cancelEnterpriseSsoLinkFlow,
+  };
+}
+
+export { useEnterpriseSsoLink };
diff --git a/packages/types/src/emailAddress.ts b/packages/types/src/emailAddress.ts
@@ -3,9 +3,9 @@ import type { ClerkResource } from './resource';
 import type { EmailCodeStrategy, EmailLinkStrategy, EnterpriseSSOStrategy } from './strategies';
 import type {
   CreateEmailLinkFlowReturn,
+  CreateEnterpriseSsoFlowReturn,
   StartEmailLinkFlowParams,
-  StartEnterpriseSsoFlowParams,
-  StartEnterpriseSsoFlowReturn,
+  StartEnterpriseSsoLinkFlowParams,
   VerificationResource,
 } from './verification';
 
@@ -36,8 +36,8 @@ export interface EmailAddressResource extends ClerkResource {
   prepareVerification: (params: PrepareEmailAddressVerificationParams) => Promise<EmailAddressResource>;
   attemptVerification: (params: AttemptEmailAddressVerificationParams) => Promise<EmailAddressResource>;
   createEmailLinkFlow: () => CreateEmailLinkFlowReturn<StartEmailLinkFlowParams, EmailAddressResource>;
-  createEnterpriseConnectionLinkFlow: () => StartEnterpriseSsoFlowReturn<
-    StartEnterpriseSsoFlowParams,
+  createEnterpriseSsoLinkFlow: () => CreateEnterpriseSsoFlowReturn<
+    StartEnterpriseSsoLinkFlowParams,
     EmailAddressResource
   >;
   destroy: () => Promise<void>;
diff --git a/packages/types/src/verification.ts b/packages/types/src/verification.ts
@@ -42,11 +42,11 @@ export type CreateEmailLinkFlowReturn<Params, Resource> = {
   cancelEmailLinkFlow: () => void;
 };
 
-export interface StartEnterpriseSsoFlowParams {
+export interface StartEnterpriseSsoLinkFlowParams {
   redirectUrl: string;
 }
 
-export type StartEnterpriseSsoFlowReturn<Params, Resource> = {
-  startEnterpriseConnectionLinkFlow: (params: Params) => Promise<Resource>;
-  cancelEnterpriseConnectionLinkFlow: () => void;
+export type CreateEnterpriseSsoFlowReturn<Params, Resource> = {
+  startEnterpriseSsoLinkFlow: (params: Params) => Promise<Resource>;
+  cancelEnterpriseSsoLinkFlow: () => void;
 };
