reactjs - Firebase signInWithPhoneNumber not returning confirmationResult despite successful reCAPTCHA verification - Stack Over

admin管理员组

文章数量:1334133

I'm trying to implement phone authentication using Firebase's signInWithPhoneNumber method. The reCAPTCHA verification seems to work fine (confirmed via logs), but the confirmationResult is not returned after calling signInWithPhoneNumber hence I'm not getting any OTP message, also with the test phoneNumber I can login successfully. I;ve tried to attach the code related to it at Ideone.

Additional Context:

1. Using Firebase v9 modular SDK.
2. reCAPTCHA is implemented using RecaptchaVerifier.
3. Phone authentication is enabled in the Firebase Console.

Code:

  const signInWithPhone = async (phoneNumber: string): Promise<string> => {
    try {
      const normalizedPhone = phoneNumber.startsWith('+91') ? phoneNumber : `+91${phoneNumber}`;

      if (normalizedPhone === TEST_PHONE) {
        const testUserWithMethods = {
          ...TEST_USER,
          isTestUser: true
        };
        await setupTestUserData();
        localStorage.setItem('testUser', JSON.stringify(testUserWithMethods));
        setUser(testUserWithMethods as unknown as User);
        toast.success('Test account activated!');
        navigate('/profile');
        return 'test-verification-id';
      }


      // Clear any existing state
      clearRecaptcha();

      // Set up new reCAPTCHA
      const verifier = setupRecaptcha();

      // Explicitly render and wait for reCAPTCHA
      try {
        await verifier.render();
      } catch (error) {
        console.error('reCAPTCHA render error:', error);
        clearRecaptcha();
        throw new Error('Please refresh the page and try again');
      }

      // Attempt phone authentication
      const confirmationResult = await signInWithPhoneNumber(auth, normalizedPhone, verifier);

      if (!confirmationResult) {
        throw new Error('Failed to send verification code');
      }

      // Store confirmation result
      confirmationResultRef.current = confirmationResult;

      toast.success('Verification code sent!');
      return confirmationResult.verificationId;
    } catch (error: any) {
      clearRecaptcha();
      console.error('Phone sign-in error:', error);

      // Handle specific error cases
      if (error.code === 'auth/invalid-app-credential' ||
          error.message?.includes('reCAPTCHA')) {
        throw new Error('Please refresh the page and try again');
      }

      const errorMessages = {
        'auth/invalid-phone-number': 'Invalid phone number format',
        'auth/quota-exceeded': 'SMS quota exceeded. Please try again later',
        'auth/captcha-check-failed': 'Security check failed. Please refresh and try again',
        'auth/network-request-failed': 'Network error. Please check your connection',
        'auth/too-many-requests': 'Too many attempts. Please try again later'
      } as const;

      const message = errorMessages[error.code as keyof typeof errorMessages] ||
          error.message ||
          'Failed to send verification code';

      throw new Error(message);
    }
  };

本文标签：