Skip to main content

Firebase Phone Auth Setup Guide

🔧 Required Firebase Console Setup​

1. Enable Phone Authentication​

  1. Go to: https://console.firebase.google.com/project/toto-f9d2f/authentication/sign-in
  2. Click on "Phone" provider
  3. Enable it by toggling the switch
  4. Save changes

2. Add Authorized Domains​

  1. Go to: https://console.firebase.google.com/project/toto-f9d2f/authentication/settings
  2. Scroll to "Authorized domains"
  3. Add your domains:
    • localhost (for development)
    • toto-f9d2f.firebaseapp.com (Firebase hosting)
    • Your custom domain if you have one

3. Set Up Test Phone Numbers​

  1. Go to: https://console.firebase.google.com/project/toto-f9d2f/authentication/sign-in
  2. Click on "Phone" provider
  3. Expand "Phone numbers for testing"
  4. Add test numbers:
Phone Number: +1 650-555-3434
Verification Code: 654321

Phone Number: +54 9 11 5555-1234
Verification Code: 123456

Phone Number: +52 55 5555-1234
Verification Code: 789012

🧪 Testing Guidelines​

Development Testing​

  • Use test phone numbers to avoid SMS costs
  • Test numbers work without actual SMS sending
  • No reCAPTCHA required for test numbers
  • Perfect for development and CI/CD

Production Testing​

  • Use real phone numbers for production testing
  • SMS will be sent with verification codes
  • reCAPTCHA required for security
  • Monitor usage in Firebase Console

📊 Monitoring in Firebase Console​

Authentication > Usage​

  • Monitor SMS sent count
  • Check verification success rates
  • Track quota usage

Authentication > Users​

  • See verified phone numbers
  • Check user creation dates
  • Monitor authentication methods

Authentication > Sign-in method > Phone​

  • View test phone numbers
  • Check provider settings
  • Monitor error rates

🔒 Security Best Practices​

1. Inform Users About Security​

const securityInfo = phoneValidationService.getSecurityInfo();
// Display warning to users before phone auth

2. Use Multiple Auth Methods​

  • Offer email/password alongside phone auth
  • Consider social login options
  • Implement 2FA when possible

3. Rate Limiting​

  • Firebase automatically limits SMS per phone number
  • Monitor for abuse patterns
  • Implement additional rate limiting if needed

🚨 Common Issues & Solutions​

Issue: "reCAPTCHA not rendered"​

Solution:

  • Check authorized domains
  • Ensure reCAPTCHA container exists
  • Verify Firebase config

Issue: "SMS not sent"​

Solution:

  • Check if Phone Auth is enabled
  • Verify phone number format
  • Check Firebase quota limits
  • Use test numbers for development

Issue: "Invalid verification code"​

Solution:

  • Use correct test codes for test numbers
  • Check SMS delivery for real numbers
  • Verify code format (6 digits)

📱 Phone Number Formats​

Supported Formats:​

  • +54 9 11 1234-5678 (Argentina)
  • +1 (555) 123-4567 (US/Canada)
  • +52 55 1234 5678 (Mexico)
  • +34 612 345 678 (Spain)

Validation Rules:​

  • Must include country code (+)
  • 10-15 digits total
  • No special characters except +, spaces, dashes, parentheses

🔄 Testing Workflow​

  1. Setup: Enable Phone Auth in Firebase Console
  2. Test Numbers: Add test phone numbers with codes
  3. Development: Use test numbers for development
  4. Production: Use real numbers for production testing
  5. Monitor: Check Firebase Console for usage and errors

📞 SMS Message Localization​

The SMS messages are automatically localized based on the phone number's country code:

  • Argentina (+54): Spanish
  • US/Canada (+1): English
  • Mexico (+52): Spanish
  • Spain (+34): Spanish

You can also manually set the language:

phoneValidationService.setLanguage('es'); // Spanish
phoneValidationService.setLanguage('en'); // English