expo-firebase-phone-auth-recaptcha

A small React Native WebView bridge for Firebase Phone Auth reCAPTCHA.

It renders Firebase Auth's web reCAPTCHA inside react-native-webview, calls signInWithPhoneNumber inside the WebView, and returns the verificationId to React Native so you can confirm the SMS code with the normal Firebase Auth SDK.

This is useful when you are using the Firebase JS SDK in an Expo or React Native app and do not want to use deprecated reCAPTCHA helpers.

Install

npm install expo-firebase-phone-auth-recaptcha firebase react-native-webview

For Expo:

npx expo install react-native-webview
npm install expo-firebase-phone-auth-recaptcha firebase

Usage

import { useState } from "react";
import { Button, TextInput, View } from "react-native";
import { getAuth, PhoneAuthProvider, signInWithCredential } from "firebase/auth";
import { FirebasePhoneCaptchaModal } from "expo-firebase-phone-auth-recaptcha";
import { firebaseConfig } from "./firebase";

const auth = getAuth();

export function PhoneSignIn() {
	const [phoneNumber, setPhoneNumber] = useState("");
	const [captchaPhoneNumber, setCaptchaPhoneNumber] = useState("");
	const [verificationId, setVerificationId] = useState("");
	const [smsCode, setSmsCode] = useState("");
	const [error, setError] = useState("");

	async function confirmCode() {
		try {
			const credential = PhoneAuthProvider.credential(verificationId, smsCode.trim());
			await signInWithCredential(auth, credential);
		} catch (caught) {
			setError(caught instanceof Error ? caught.message : "Could not verify code.");
		}
	}

	return (
		<View>
			<TextInput
				value={phoneNumber}
				onChangeText={setPhoneNumber}
				placeholder="+15551234567"
				keyboardType="phone-pad"
			/>

			<Button title="Send code" onPress={() => setCaptchaPhoneNumber(phoneNumber.trim())} />

			<TextInput
				value={smsCode}
				onChangeText={setSmsCode}
				placeholder="123456"
				keyboardType="number-pad"
			/>

			<Button title="Verify code" onPress={confirmCode} />

			<FirebasePhoneCaptchaModal
				visible={!!captchaPhoneNumber}
				phoneNumber={captchaPhoneNumber}
				firebaseConfig={firebaseConfig}
				onVerificationId={(nextVerificationId) => {
					setVerificationId(nextVerificationId);
					setCaptchaPhoneNumber("");
				}}
				onExpired={() => setError("The captcha expired. Try again.")}
				onError={(nextError) => setError(nextError.message)}
				onClose={() => setCaptchaPhoneNumber("")}
			/>
		</View>
	);
}

Firebase Setup

• Enable Authentication > Sign-in method > Phone in the Firebase console.
• Add your Firebase Auth domain to Authentication > Settings > Authorized domains.
• Pass a matching baseUrl through firebaseConfig.authDomain; the component uses https://${firebaseConfig.authDomain}.
• Phone numbers must be E.164 formatted, for example +15551234567.

API

FirebasePhoneCaptchaModal

Props:

• visible: whether the modal is open.
• phoneNumber: E.164 phone number to send the SMS code to.
• firebaseConfig: public Firebase client config.
• firebaseJsVersion: optional Firebase web compat script version. Defaults to 10.12.5.
• title: optional text displayed above the captcha.
• description: optional text displayed under the title.
• modalBackgroundColor: optional modal overlay color.
• cardBackgroundColor: optional WebView card color.
• onSending: called after the captcha passes and SMS sending starts.
• onVerificationId: called with the Firebase verificationId.
• onExpired: called when the captcha expires.
• onError: called when the captcha or phone auth request fails.
• onClose: called by the native modal close request.

createPhoneCaptchaHtml

Returns the HTML string rendered inside the WebView. Exported for advanced custom wrappers.

parsePhoneCaptchaMessage

Parses and validates messages posted by the WebView.

Notes

This package does not make Firebase Phone Auth server-side. It is still Firebase's client Phone Auth flow, with the reCAPTCHA challenge rendered inside a WebView. Do not put admin credentials or service-account keys in the WebView HTML.

The Firebase config values used here are client config values, not admin secrets.