PRD-2150: Update Clerk feature

package.json

@@ -42,8 +42,8 @@
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@clerk/clerk-expo": "^2.19.6",
-    "@clerk/types": "^4.101.3",
+    "@clerk/clerk-expo": "^2.19.18",
+    "@clerk/types": "^4.101.11",
     "@eslint/compat": "^1.4.0",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.37.0",

src/lib/src/features/clerk/hooks/index.ts

@@ -6,3 +6,5 @@ export * from './use-otp-verification';
 export * from './use-auth-with-identifier';
 export * from './use-add-identifier';
 export * from './use-reset-password';
+export * from './use-update-password';
+export * from './use-update-identifier';

src/lib/src/features/clerk/hooks/use-add-identifier.ts

@@ -1,54 +1,55 @@
 import { isClerkAPIResponseError, useUser } from '@clerk/clerk-expo';
 import { EmailAddressResource, PhoneNumberResource } from '@clerk/types';
 import { useState } from 'react';
-import { ClerkApiError } from '../enums';
-import { UseAddIdentifierReturn } from '../types';
+import { IdentifierType, UseAddIdentifierReturn } from '../types';
 
 /**
  * Hook that provides functionality to add new email or phone number identifiers to a user's account and verify them using verification codes.
  *
+ * @param {IdentifierType} type - Specifies the type of identifier (e.g., 'phone', 'email')
+ *
  * @returns {UseAddIdentifierReturn} Object containing:
  * - `createIdentifier` - A function to add a new email or phone number identifier to the user's account and prepare it for verification
  * - `verifyCode` - A function to verify a code sent to the identifier, completing the verification process
  * - `isCreating` - A boolean indicating whether an identifier is currently being added
  * - `isVerifying` - A boolean indicating whether a verification code is currently being processed
  */
-export function useAddIdentifier(): UseAddIdentifierReturn {
+export function useAddIdentifier(type: IdentifierType): UseAddIdentifierReturn {
   const { user } = useUser();
   const [identifierResource, setIdentifierResource] = useState<PhoneNumberResource | EmailAddressResource>();
   const [isCreating, setIsCreating] = useState(false);
   const [isVerifying, setIsVerifying] = useState(false);
 
+  const isEmail = type === 'email';
+
   const createIdentifier: UseAddIdentifierReturn['createIdentifier'] = async ({ identifier }) => {
     setIsCreating(true);
-    const isEmail = identifier?.includes('@');
 
     try {
-      isEmail
-        ? await user?.createEmailAddress({ email: identifier })
-        : await user?.createPhoneNumber({ phoneNumber: identifier });
-
-      await user?.reload();
+      let resource = isEmail
+        ? user?.emailAddresses.find((a) => a.emailAddress === identifier)
+        : user?.phoneNumbers.find((a) => a.phoneNumber === identifier);
+
+      // If the resource already exists, re-creating it will cause an error,
+      // so skip the creation step and go to the send verification code flow.
+      if (!resource) {
+        resource = isEmail
+          ? await user?.createEmailAddress({ email: identifier })
+          : await user?.createPhoneNumber({ phoneNumber: identifier });
+
+        await user?.reload();
+      }
+      await prepareVerification({ isEmail, identifier });
 
-      await prepareVerification({ identifier, isEmail });
+      setIdentifierResource(resource);
 
       return { isSuccess: true, user };
     } catch (e) {
       if (isClerkAPIResponseError(e)) {
-        const error = e.errors[0];
-
-        if (error?.code === ClerkApiError.FORM_IDENTIFIER_EXIST && !getIdentifierVerified({ identifier, isEmail })) {
-          await prepareVerification({ identifier, isEmail });
-
-          await user?.reload();
-
-          return { isSuccess: true, user };
-        } else {
-          return { error: e, user };
-        }
+        return { error: e, user };
       }
 
-      return { user, isSuccess: false };
+      return { isSuccess: false, user };
     } finally {
       setIsCreating(false);
     }
@@ -82,13 +83,5 @@ export function useAddIdentifier(): UseAddIdentifierReturn {
     setIdentifierResource(isEmail ? emailResource : phoneResource);
   };
 
-  const getIdentifierVerified = ({ identifier, isEmail }: { identifier: string; isEmail: boolean }): boolean => {
-    const identifierResource = isEmail
-      ? user?.emailAddresses?.find((a) => a.emailAddress === identifier)
-      : user?.phoneNumbers?.find((a) => a.phoneNumber === identifier);
-
-    return identifierResource?.verification?.status === 'verified';
-  };
-
   return { createIdentifier, verifyCode, isCreating, isVerifying };
 }

src/lib/src/features/clerk/hooks/use-auth-with-identifier.ts

@@ -7,6 +7,7 @@ import {
   IdentifierMethodFor,
   StartAuthParams,
   StartSignInWithIdentifierReturn,
+  StartSignUpParams,
   StartSignUpWithIdentifierReturn,
   UseAuthWithIdentifierReturn,
 } from '../types';
@@ -37,6 +38,8 @@ export function useAuthWithIdentifier<
   const { signUp, signIn, setActive } = useClerkResources();
   const { sendOtpCode, verifyCode: verifyOtpCode, isVerifying } = useOtpVerification();
   const { getSessionToken } = useGetSessionToken();
+
+  const [isAuthorizing, setIsAuthorizing] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const strategy = method === 'emailAddress' ? 'email_code' : 'phone_code';
 
@@ -77,6 +80,7 @@ export function useAuthWithIdentifier<
   ): Promise<StartSignInWithIdentifierReturn<TVerifyBy> | StartSignUpWithIdentifierReturn<TMethod>> => {
     const { identifier, password, tokenTemplate } = params;
     const authMethod = isSignUp ? signUp : signIn;
+
     const authAttempt = await authMethod?.create({ username: identifier, password });
 
     if (authAttempt?.status === 'complete' && 'createdSessionId' in authAttempt) {
@@ -111,7 +115,7 @@ export function useAuthWithIdentifier<
     } else if (verifyBy === 'otp') {
       try {
         await authMethod?.create({ [identifierFieldName]: identifier });
-        await sendOtpCode(strategy);
+        await sendOtpCode({ strategy, isSignUp });
       } catch (error) {
         return { error, signIn, signUp };
       }
@@ -128,8 +132,8 @@ export function useAuthWithIdentifier<
       setIsLoading(true);
 
       return method === 'username'
-        ? handleUsernameAuth(params as StartAuthParams<'password'>, true)
-        : handleEmailPhoneAuth(params, true);
+        ? await handleUsernameAuth(params as StartAuthParams<'password'>, true)
+        : await handleEmailPhoneAuth(params, true);
     } catch (error) {
       return { error, signUp, isSuccess: false } as StartSignUpWithIdentifierReturn<TMethod>;
     } finally {
@@ -142,8 +146,8 @@ export function useAuthWithIdentifier<
       setIsLoading(true);
 
       return method === 'username'
-        ? handleUsernameAuth(params as StartAuthParams<'password'>, false)
-        : handleEmailPhoneAuth(params, false);
+        ? await handleUsernameAuth(params as StartAuthParams<'password'>, false)
+        : await handleEmailPhoneAuth(params, false);
     } catch (error) {
       return { error, signIn, isSuccess: false } as StartSignInWithIdentifierReturn<TVerifyBy>;
     } finally {
@@ -153,42 +157,59 @@ export function useAuthWithIdentifier<
 
   const startAuthorization: UseAuthWithIdentifierReturn<TVerifyBy, TMethod>['startAuthorization'] = async (params) => {
     try {
-      setIsLoading(true);
-      const result = await startSignUp(params);
+      setIsAuthorizing(true);
+
+      const result = await startSignUp(params as StartSignUpParams<TVerifyBy>);
 
       if (result?.error && isClerkAPIResponseError(result.error)) {
         const error = result.error.errors[0];
 
         if (error?.code === ClerkApiError.FORM_IDENTIFIER_EXIST) {
-          return await startSignIn(params);
+          const signInResult = await startSignIn(params);
+
+          return { ...signInResult, isSignUp: false };
         }
       }
 
       return { ...result, isSignUp: true };
     } catch (error) {
       return { error, signIn, signUp, isSuccess: false } as StartSignInWithIdentifierReturn<TVerifyBy>;
     } finally {
-      setIsLoading(false);
+      setIsAuthorizing(false);
     }
   };
 
-  const verifyCode = async ({ code, tokenTemplate }: { code: string; tokenTemplate?: string }) => {
-    return verifyOtpCode({ code, strategy, tokenTemplate });
+  const verifyCode = async ({
+    code,
+    isSignUp,
+    tokenTemplate,
+  }: {
+    code: string;
+    isSignUp: boolean;
+    tokenTemplate?: string;
+  }) => {
+    setIsLoading(true);
+
+    try {
+      return await verifyOtpCode({ code, strategy, tokenTemplate, isSignUp });
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   if (method === 'username') {
     return {
       startSignIn,
       startSignUp,
       startAuthorization,
-      isLoading,
+      isLoading: isAuthorizing || isLoading,
     } as UseAuthWithIdentifierReturn<TVerifyBy, TMethod>;
   } else {
     return {
       startSignIn,
       startSignUp,
       startAuthorization,
-      isLoading,
+      isLoading: isAuthorizing || isLoading,
       verifyCode,
       isVerifying,
     } as UseAuthWithIdentifierReturn<TVerifyBy, TMethod>;

src/lib/src/features/clerk/hooks/use-otp-verification.ts

@@ -42,30 +42,27 @@ export function useOtpVerification(): UseOtpVerificationReturn {
     await signUp.prepareVerification({ strategy });
   };
 
-  const sendOtpCode: UseOtpVerificationReturn['sendOtpCode'] = async (strategy) => {
-    const isSignIn = !!signIn?.id;
-
-    if (isSignIn) {
-      await sendSignInOtpCode(strategy);
-    } else {
+  const sendOtpCode: UseOtpVerificationReturn['sendOtpCode'] = async ({ strategy, isSignUp }) => {
+    if (isSignUp) {
       await sendSignUpOtpCode(strategy);
+    } else {
+      await sendSignInOtpCode(strategy);
     }
   };
 
-  const verifyCode: UseOtpVerificationReturn['verifyCode'] = async ({ code, strategy, tokenTemplate }) => {
+  const verifyCode: UseOtpVerificationReturn['verifyCode'] = async ({ code, strategy, tokenTemplate, isSignUp }) => {
     try {
       setIsVerifying(true);
-      const isSignIn = !!signIn?.id;
 
-      if (isSignIn) {
-        const completeSignIn = await signIn.attemptFirstFactor({
+      if (isSignUp) {
+        const completeSignUp = await signUp?.attemptVerification({
           strategy,
           code,
         });
 
-        if (completeSignIn?.status === 'complete') {
-          await setActive?.({ session: completeSignIn.createdSessionId });
-          const sessionToken = (await getSessionToken({ tokenTemplate })).sessionToken;
+        if (completeSignUp?.status === 'complete') {
+          await setActive?.({ session: completeSignUp.createdSessionId });
+          const { sessionToken, error } = await getSessionToken({ tokenTemplate });
 
           if (sessionToken) {
             return {
@@ -77,21 +74,21 @@ export function useOtpVerification(): UseOtpVerificationReturn {
           }
 
           return {
-            sessionToken: null,
             signIn,
             signUp,
+            error,
             isSuccess: false,
           };
         }
       } else {
-        const completeSignUp = await signUp?.attemptVerification({
+        const completeSignIn = await signIn?.attemptFirstFactor({
           strategy,
           code,
         });
 
-        if (completeSignUp?.status === 'complete') {
-          await setActive?.({ session: completeSignUp.createdSessionId });
-          const { sessionToken, error } = await getSessionToken({ tokenTemplate });
+        if (completeSignIn?.status === 'complete') {
+          await setActive?.({ session: completeSignIn.createdSessionId });
+          const sessionToken = (await getSessionToken({ tokenTemplate })).sessionToken;
 
           if (sessionToken) {
             return {
@@ -103,9 +100,9 @@ export function useOtpVerification(): UseOtpVerificationReturn {
           }
 
           return {
+            sessionToken: null,
             signIn,
             signUp,
-            error,
             isSuccess: false,
           };
         }