Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Rename verification hook to enterprise SSO
Browse files Browse the repository at this point in the history
LauraBeatris committed Dec 3, 2024
1 parent 9471486 commit 0d9bdfe
Showing 13 changed files with 74 additions and 75 deletions.
8 changes: 4 additions & 4 deletions packages/clerk-js/src/core/resources/EmailAddress.ts
Original file line number Diff line number Diff line change
@@ -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();
6 changes: 3 additions & 3 deletions packages/clerk-js/src/ui/common/redirects.ts
Original file line number Diff line number Diff line change
@@ -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,
});
}

Original file line number Diff line number Diff line change
@@ -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 => {
Original file line number Diff line number Diff line change
@@ -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);
21 changes: 17 additions & 4 deletions packages/clerk-js/src/ui/components/UserProfile/EmailForm.tsx
Original file line number Diff line number Diff line change
@@ -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';
};
Original file line number Diff line number Diff line change
@@ -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}
Original file line number Diff line number Diff line change
@@ -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));
12 changes: 0 additions & 12 deletions packages/clerk-js/src/ui/components/UserProfile/utils.ts
Original file line number Diff line number Diff line change
@@ -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';
};
2 changes: 1 addition & 1 deletion packages/clerk-js/src/ui/hooks/index.ts
Original file line number Diff line number Diff line change
@@ -18,4 +18,4 @@ export * from './useDebounce';
export * from './useScrollLock';
export * from './useClerkModalStateParams';
export * from './useNavigateToFlowStart';
export * from './useEnterpriseConnectionLink';
export * from './useEnterpriseSsoLink';
32 changes: 0 additions & 32 deletions packages/clerk-js/src/ui/hooks/useEnterpriseConnectionLink.ts

This file was deleted.

29 changes: 29 additions & 0 deletions packages/clerk-js/src/ui/hooks/useEnterpriseSsoLink.ts
Original file line number Diff line number Diff line change
@@ -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 };
8 changes: 4 additions & 4 deletions packages/types/src/emailAddress.ts
Original file line number Diff line number Diff line change
@@ -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>;
8 changes: 4 additions & 4 deletions packages/types/src/verification.ts
Original file line number Diff line number Diff line change
@@ -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;
};

0 comments on commit 0d9bdfe

Please sign in to comment.