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) {
@@ -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,51 @@ 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 });
+    setIsLoading(true);
+
+    try {
+      return await verifyOtpCode({ code, strategy, tokenTemplate });
+    } 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

@@ -43,7 +43,7 @@ export function useOtpVerification(): UseOtpVerificationReturn {
   };
 
   const sendOtpCode: UseOtpVerificationReturn['sendOtpCode'] = async (strategy) => {
-    const isSignIn = !!signIn?.id;
+    const isSignIn = !!signIn?.id && !!signIn.identifier;
 
     if (isSignIn) {
       await sendSignInOtpCode(strategy);
@@ -55,7 +55,8 @@ export function useOtpVerification(): UseOtpVerificationReturn {
   const verifyCode: UseOtpVerificationReturn['verifyCode'] = async ({ code, strategy, tokenTemplate }) => {
     try {
       setIsVerifying(true);
-      const isSignIn = !!signIn?.id;
+
+      const isSignIn = !!signIn?.id && !!signIn.identifier;
 
       if (isSignIn) {
         const completeSignIn = await signIn.attemptFirstFactor({

src/lib/src/features/clerk/hooks/use-reset-password.ts

@@ -1,3 +1,5 @@
+
+
 import { useState } from 'react';
 import { OtpMethod, UseResetPasswordReturn } from '../types';
 import { useClerkResources } from './use-clerk-resources';
@@ -11,17 +13,22 @@ import { useGetSessionToken } from './use-get-session-token';
  *
  * @returns {UseResetPasswordReturn} Object containing:
  * - `startResetPassword` - A function to initiate the password reset process by sending a verification code to the user's email or phone number
- * - `resetPassword` - A function to reset the user's password by verifying the code and setting a new password
+ * - `resetPassword` - A function to reset the user's password and setting a new password
+ * - `verifyCode` - A function to verify a code sent to the identifier, completing the verification process
  * - `isCodeSending` - A boolean indicating if the verification code is being sent
  * - `isResetting` - A boolean indicating if the password is being reset
+ * - `isVerifying` - A boolean indicating whether a verification code is currently being processed
  */
 export function useResetPassword({ method }: { method: OtpMethod }): UseResetPasswordReturn {
-  const strategy = method === 'emailAddress' ? 'reset_password_email_code' : 'reset_password_phone_code';
   const { signIn, setActive } = useClerkResources();
   const { getSessionToken } = useGetSessionToken();
+
   const [isCodeSending, setIsCodeSending] = useState(false);
+  const [isVerifying, setIsVerifying] = useState(false);
   const [isResetting, setIsResetting] = useState(false);
 
+  const strategy = method === 'emailAddress' ? 'reset_password_email_code' : 'reset_password_phone_code';
+
   const startResetPassword: UseResetPasswordReturn['startResetPassword'] = async ({ identifier }) => {
     setIsCodeSending(true);
 
@@ -39,32 +46,61 @@ export function useResetPassword({ method }: { method: OtpMethod }): UseResetPas
     }
   };
 
-  const resetPassword: UseResetPasswordReturn['resetPassword'] = async ({ code, password, tokenTemplate }) => {
-    setIsResetting(true);
+  const verifyCode: UseResetPasswordReturn['verifyCode'] = async ({ code }) => {
+    setIsVerifying(true);
 
     try {
-      const result = await signIn?.attemptFirstFactor({
+      await signIn?.attemptFirstFactor({
         strategy,
         code,
+      });
+
+      return { isSuccess: true, signIn };
+    } catch (error) {
+      return { isSuccess: false, signIn, error };
+    } finally {
+      setIsVerifying(false);
+    }
+  };
+
+  const resetPassword: UseResetPasswordReturn['resetPassword'] = async ({ password, tokenTemplate }) => {
+    setIsResetting(true);
+
+    try {
+      const result = await signIn?.resetPassword({
         password,
       });
 
-      if (result?.status === 'complete') {
-        setActive({ session: result.createdSessionId });
-        const { sessionToken } = await getSessionToken({ tokenTemplate });
+      await setActive({ session: result?.createdSessionId });
+
+      const { sessionToken, error } = await getSessionToken({ tokenTemplate });
 
-        if (sessionToken) {
-          return { isSuccess: true, signIn, sessionToken };
-        }
+      if (sessionToken) {
+        return {
+          isSuccess: true,
+          signIn,
+          sessionToken: sessionToken,
+        };
+      } else {
+        return {
+          signIn,
+          error,
+          isSuccess: false,
+        };
       }
     } catch (error) {
       return { isSuccess: false, signIn, error };
     } finally {
       setIsResetting(false);
     }
-
-    return { isSuccess: false, signIn };
   };
 
-  return { startResetPassword, resetPassword, isCodeSending, isResetting };
+  return {
+    startResetPassword,
+    verifyCode,
+    resetPassword,
+    isCodeSending,
+    isVerifying,
+    isResetting,
+  };
 }