E-post- og telefonautentisering med Firebase
Implementer registrering og innlogging med e-post/passord, legg til telefonnummerautentisering med SMS-OTP, og lytt til onAuthStateChanged-observatøren for å styre navigeringen.
E-post- og telefonautentisering med Firebase er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Native Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Native Academy inneholder totalt 4 leksjoner.
Oversikt over Firebase Auth
Firebase Authentication tilbyr ferdige innloggingsflyter for e-post/passord, telefonbasert OTP og sosiale leverandører som Google og Apple. Alle autentiseringsmetoder er tilgjengelige gjennom singleton-instansen auth() fra @react-native-firebase/auth.
Firebase Auth administrerer tokens, fornyer dem automatisk og lagrer brukerøkten i native lagring. Observatøren onAuthStateChanged er den eneste pålitelige kilden til autentiseringstilstanden i appen – la alltid navigasjonen styres av denne callbacken i stedet for av resultatene fra individuelle innloggingsfunksjoner.
Lytte etter endringer i autentiseringstilstanden
Registrer en onAuthStateChanged-observatør tidlig i appens livssyklus, vanligvis i rotlayoutkomponenten. Den utløses én gang med den gjeldende brukeren når komponenten monteres, og deretter hver gang brukeren logger inn eller ut.
Observatøren returnerer en unsubscribe-funksjon – kall den alltid i oppryddingen til useEffect for å forhindre minnelekkasjer. Observatørens user-parameter er null når ingen er innlogget, og et FirebaseAuthTypes.User-objekt når brukeren er autentisert.
import auth from '@react-native-firebase/auth';
import { useEffect, useState } from 'react';
export function useFirebaseAuth() {
const [user, setUser] = useState(null);
const [initializing, setInitializing] = useState(true);
useEffect(() => {
const unsubscribe = auth().onAuthStateChanged((user) => {
setUser(user);
if (initializing) setInitializing(false);
});
return unsubscribe; // auto-cleanup on unmount
}, []);
return { user, initializing };
}Registrere seg med e-post og passord
For å registrere en ny bruker med e-post og passord kaller du auth().createUserWithEmailAndPassword(email, password). Firebase validerer e-postformatet og håndhever minimumslengden for passord (6 tegn som standard) på serveren.
Etter vellykket registrering logger Firebase automatisk inn den nye brukeren – observatøren onAuthStateChanged utløses umiddelbart med det nye brukerobjektet. Du kan deretter be brukeren bekrefte e-postadressen ved å kalle user.sendEmailVerification().
import auth from '@react-native-firebase/auth';
async function signUpWithEmail(email: string, password: string) {
try {
const { user } = await auth().createUserWithEmailAndPassword(email, password);
await user.sendEmailVerification();
console.log('Sign-up successful, verification email sent to', email);
} catch (error: any) {
if (error.code === 'auth/email-already-in-use') {
Alert.alert('Error', 'That email address is already in use.');
} else if (error.code === 'auth/invalid-email') {
Alert.alert('Error', 'That email address is invalid.');
}
}
}Logge inn med e-post og passord
Eksisterende brukere logger inn med auth().signInWithEmailAndPassword(email, password). Dette returnerer et UserCredential-objekt, men i de fleste tilfeller trenger du ikke å håndtere returverdien – observatøren onAuthStateChanged håndterer allerede navigasjonen.
Plasser innloggingskall i en try/catch-blokk og kontroller egenskapen error.code for å vise brukervennlige meldinger. Firebase bruker feilkoder som auth/wrong-password og auth/user-not-found, som du kan knytte til lesbare meldinger.
async function signInWithEmail(email: string, password: string) {
try {
await auth().signInWithEmailAndPassword(email, password);
// onAuthStateChanged will fire and handle navigation
} catch (error: any) {
const messages: Record<string, string> = {
'auth/wrong-password': 'Incorrect password.',
'auth/user-not-found': 'No account found with this email.',
'auth/too-many-requests': 'Too many failed attempts. Try again later.',
};
Alert.alert('Sign In Failed', messages[error.code] ?? 'An error occurred.');
}
}Logge ut
Kall auth().signOut() for å logge ut den gjeldende brukeren. Dette tømmer den lokale økten og utløser onAuthStateChanged med null. Hvis navigasjonen styres av observatøren, omdirigerer appen automatisk til innloggingsskjermen.
Utlogging er synkron i virkemåte, men returnerer et Promise som fullføres når den lokale økten er tømt. Du trenger ikke å bruke await med mindre du vil bekrefte at dette er fullført før du utfører flere handlinger.
async function handleSignOut() {
try {
await auth().signOut();
// onAuthStateChanged fires with null, navigator switches to auth stack
} catch (error) {
console.error('Sign out error:', error);
}
}Oversikt over telefonautentisering
Firebase Phone Authentication fungerer ved å sende en engangskode på SMS til brukerens telefonnummer og bekrefte den. Flyten har to trinn: (1) kall signInWithPhoneNumber for å utløse SMS-en, og (2) bekreft koden brukeren oppgir.
På iOS kan Firebase bekrefte telefonen i bakgrunnen ved hjelp av stille push-varsler fra APNs, slik at manuell kodeinntasting unngås på kjente enheter. Dette krever at Push Notification-funksjonalitet er aktivert i appen. På Android bruker Firebase Play Integrity API til å bekrefte koder automatisk på pålitelige enheter.
Trinn 1: Sende SMS-koden
Kall auth().signInWithPhoneNumber(phoneNumber) der phoneNumber er i E.164-format (for eksempel +14155552671). Metoden returnerer et confirmation-objekt som De lagrer i state for bruk i det andre trinnet.
Vis et brukergrensesnitt som ber brukeren skrive inn den sekssifrede koden de mottar på SMS. Bruk en numerisk TextInput med keyboardType='number-pad' og maxLength={6} for en ryddig opplevelse ved inntasting av koden.
import auth from '@react-native-firebase/auth';
import { useState } from 'react';
export function PhoneAuthScreen() {
const [phoneNumber, setPhoneNumber] = useState('');
const [confirmation, setConfirmation] = useState(null);
async function sendCode() {
try {
const confirm = await auth().signInWithPhoneNumber(phoneNumber);
setConfirmation(confirm);
// Now show the code entry screen
} catch (error) {
Alert.alert('Error', 'Failed to send verification code.');
}
}
// ...
}Steg 2: Bekrefte koden
Når brukeren skriver inn SMS-koden, kaller De confirmation.confirm(code). Hvis koden er riktig, logger Firebase brukeren inn, og onAuthStateChanged utløses med den autentiserte brukeren. Hvis koden er feil, kaster metoden en feil med koden auth/invalid-verification-code.
Hvert bekreftelsesobjekt kan bare brukes én gang. Hvis koden utløper eller brukeren ber om en ny kode, må De kalle signInWithPhoneNumber på nytt for å hente et nytt bekreftelsesobjekt.
async function confirmCode(code: string) {
try {
await confirmation.confirm(code);
// User is now signed in, onAuthStateChanged fires
} catch (error: any) {
if (error.code === 'auth/invalid-verification-code') {
Alert.alert('Error', 'The code you entered is incorrect.');
} else if (error.code === 'auth/code-expired') {
Alert.alert('Code Expired', 'Please request a new code.');
setConfirmation(null); // Reset to phone number entry
}
}
}Oppdatere brukerprofilen
Etter registrering kan De oppdatere brukerens visningsnavn og URL til profilbildet ved hjelp av auth().currentUser.updateProfile(). Dette lagrer dataene direkte på Firebase Auth-brukerobjektet, slik at de er tilgjengelige uten et separat databasekall.
For mer omfattende brukerprofiler (biografi, adresse og så videre) er det imidlertid bedre å lagre tilleggsdata i Firestore under en users-samling, med brukerens UID som dokument-ID. Auth-profilen er bare ment for grunnleggende identitetsdata.
async function updateUserProfile(displayName: string, photoURL: string) {
const user = auth().currentUser;
if (!user) return;
await user.updateProfile({ displayName, photoURL });
console.log('Profile updated:', auth().currentUser?.displayName);
}
// Also save extended data to Firestore:
await firestore().collection('users').doc(user.uid).set({
displayName,
bio: '',
createdAt: firestore.FieldValue.serverTimestamp(),
});Tilbakestille passord via e-post
Hvis en bruker glemmer passordet sitt, kaller De auth().sendPasswordResetEmail(email). Firebase sender en e-post med en lenke for å tilbakestille passordet. Lenken åpner en Firebase-hostet nettside der brukeren kan skrive inn et nytt passord.
Denne flyten krever ikke noe ekstra opprinnelig oppsett. Lenken er ikke en dyplenke inn i appen — den går til Firebase-siden. Hvis De vil at tilbakestillingsflyten skal åpnes inne i appen, konfigurerer De Action URL i innstillingene for Firebase Authentication slik at den peker til appens domene med dynamiske lenker.
async function sendPasswordReset(email: string) {
try {
await auth().sendPasswordResetEmail(email);
Alert.alert(
'Email Sent',
'Check your inbox for a link to reset your password.'
);
} catch (error: any) {
if (error.code === 'auth/user-not-found') {
// For security, show the same message even if the email is not found
Alert.alert('Email Sent', 'If this email is registered, you will receive a reset link.');
}
}
}Kontrollere status for e-postbekreftelse
Etter registrering med e-post/passord kan De hindre tilgang til hovedappen til brukeren har bekreftet e-postadressen sin. Kontroller auth().currentUser?.emailVerified i onAuthStateChanged.
Vær oppmerksom på at emailVerified ikke oppdateres i sanntid — brukeren må laste inn tokenet på nytt for at verdien skal gjenspeile bekreftelsen. Kall auth().currentUser?.reload(), og les deretter egenskapen på nytt etter at brukeren oppgir at vedkommende har klikket på bekreftelseslenken.
async function checkEmailVerification() {
const user = auth().currentUser;
if (!user) return;
await user.reload(); // Refresh the user object
if (user.emailVerified) {
console.log('Email is verified — grant access');
navigation.replace('Main');
} else {
Alert.alert(
'Not Verified',
'Please click the link in your email. Tap Resend to get a new link.',
[
{ text: 'Resend', onPress: () => user.sendEmailVerification() },
{ text: 'OK' },
]
);
}
}Kort kontroll
Test forståelsen Deres av React Native Mobile Development-konseptene fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen har De lært: hvordan De implementerer registrering og innlogging med e-post/passord ved hjelp av Firebase Auth, den totrinns telefonbaserte OTP-autentiseringsflyten ved hjelp av signInWithPhoneNumber og confirmation.confirm, og hvordan De håndterer oppdateringer av brukerprofilen og e-postbekreftelse. Deretter skal vi lese og skrive dokumenter i Cloud Firestore.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «E-post- og telefonautentisering med Firebase» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien React Native Academy, inkludert «E-post- og telefonautentisering med Firebase», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i React Native Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «E-post- og telefonautentisering med Firebase»?
Implementer registrering og innlogging med e-post/passord, legg til telefonnummerautentisering med SMS-OTP, og lytt til onAuthStateChanged-observatøren for å styre navigeringen. Du øver på React Native Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med React Native Academy?
Ingen tidligere erfaring er nødvendig. React Native Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «E-post- og telefonautentisering med Firebase»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne React Native Academy-leksjonen?
Ja. Alle React Native Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Koble React Native Firebase til prosjektet
- E-post- og telefonautentisering med Firebase
- Lese og skrive Firestore-dokumenter
- Sanntidslyttere og frakoblet lagring