E-mail- og telefongodkendelse med Firebase
Implementér tilmelding og login med e-mail/adgangskode, tilføj godkendelse med telefonnummer og SMS-OTP, og lyt til onAuthStateChanged-observatøren for at styre navigationen.
E-mail- og telefongodkendelse med Firebase er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i React Native Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Native Academy-kurset indeholder 4 lektioner i alt.
Oversigt over Firebase Auth
Firebase Authentication tilbyder færdige loginforløb for e-mail/adgangskode, engangskoder via telefon og sociale udbydere som Google og Apple. Alle godkendelsesmetoder tilgås via singletonen auth() fra @react-native-firebase/auth.
Firebase Auth håndterer tokens, fornyer dem automatisk og gemmer brugersessionen i native lager. Observatøren onAuthStateChanged er den eneste pålidelige kilde til godkendelsestilstanden i din app — styr altid navigationen ud fra dette callback i stedet for individuelle resultater fra loginfunktioner.
Lytning efter ændringer i godkendelsestilstanden
Registrér en onAuthStateChanged-observatør tidligt i appens livscyklus, typisk i layoutkomponenten på rodniveau. Den udløses én gang med den aktuelle bruger ved montering og igen, hver gang brugeren logger ind eller ud.
Observatøren returnerer en funktion til afmelding — kald den altid i oprydningen i useEffect for at forhindre hukommelseslækager. Observatørens parameter user er null, når ingen er logget ind, og et FirebaseAuthTypes.User-objekt, når brugeren er godkendt.
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 };
}Oprettelse med e-mail og adgangskode
Hvis du vil registrere en ny bruger med e-mail og adgangskode, skal du kalde auth().createUserWithEmailAndPassword(email, password). Firebase validerer e-mailformatet og håndhæver minimumslængden for adgangskoden (6 tegn som standard) på serveren.
Efter en vellykket registrering logger Firebase automatisk den nye bruger ind — observatøren onAuthStateChanged udløses straks med det nye brugerobjekt. Du kan derefter bede brugeren bekræfte sin e-mail ved at kalde 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.');
}
}
}Login med e-mail og adgangskode
Eksisterende brugere logger ind med auth().signInWithEmailAndPassword(email, password). Dette returnerer et UserCredential-objekt, men i de fleste tilfælde behøver du ikke at håndtere returværdien — observatøren onAuthStateChanged håndterer allerede navigationen.
Pak login-kald ind i try/catch, og kontrollér egenskaben error.code for at vise brugervenlige meddelelser. Firebase bruger fejlkoder som auth/wrong-password og auth/user-not-found, som du kan knytte til forståelige meddelelser.
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.');
}
}Log ud
Kald auth().signOut() for at logge den aktuelle bruger ud. Det rydder den lokale session og udløser onAuthStateChanged med null. Hvis du styrer navigationen ud fra observatøren, omdirigerer appen automatisk til loginskærmen.
Logudhandlingen er synkron i sin virkemåde, men returnerer et Promise, der afsluttes, når den lokale session er ryddet. Du behøver ikke at afvente det, medmindre du vil bekræfte, at handlingen er afsluttet, før du udfører yderligere 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);
}
}Oversigt over telefongodkendelse
Firebase-telefongodkendelse fungerer ved at sende en engangs-SMS-kode til brugerens telefonnummer og bekræfte den. Forløbet har to trin: (1) kald signInWithPhoneNumber for at udløse SMS'en, og (2) bekræft den kode, som brugeren indtaster.
På iOS kan Firebase lydløst bekræfte telefonen ved hjælp af lydløse APNs-pushnotifikationer, så manuel indtastning af koden ikke er nødvendig på kendte enheder. Det kræver, at appen har tilladelsen Push Notification. På Android bruger Firebase Play Integrity API til automatisk at bekræfte koder på pålidelige enheder.
Trin 1: Send SMS-koden
Kald auth().signInWithPhoneNumber(phoneNumber), hvor phoneNumber er i E.164-format (f.eks. +14155552671). Metoden returnerer et confirmation-objekt, som du gemmer i tilstanden, så du kan bruge det i næste trin.
Vis en brugergrænseflade, der beder brugeren indtaste den 6-cifrede kode, som vedkommende modtager via SMS. Brug en numerisk TextInput med keyboardType='number-pad' og maxLength={6} for at give en enkel oplevelse ved indtastning af 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.');
}
}
// ...
}Trin 2: Bekræftelse af koden
Når brugeren indtaster SMS-koden, skal du kalde confirmation.confirm(code). Hvis koden er korrekt, logger Firebase brugeren ind, og onAuthStateChanged udløses med den godkendte bruger. Hvis koden er forkert, kaster metoden en fejl med koden auth/invalid-verification-code.
Hvert bekræftelsesobjekt kan kun bruges én gang. Hvis koden udløber, eller brugeren anmoder om en ny, skal du kalde signInWithPhoneNumber igen for at få et nyt bekræftelsesobjekt.
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
}
}
}Opdatering af brugerprofilen
Efter tilmelding kan du opdatere brugerens viste navn og foto-URL ved hjælp af auth().currentUser.updateProfile(). Det gemmer dataene direkte på Firebase Auth-brugerobjektet, så de er tilgængelige uden en separat forespørgsel til databasen.
For omfattende brugerprofiler (biografi, adresse osv.) er det dog bedre at gemme yderligere data i Firestore under en users-samling, hvor brugerens UID bruges som dokument-ID. Auth-profilen er kun beregnet til grundlæggende 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(),
});Nulstilling af adgangskode via e-mail
Hvis en bruger glemmer sin adgangskode, skal du kalde auth().sendPasswordResetEmail(email). Firebase sender en e-mail med et link til nulstilling af adgangskoden. Linket åbner en Firebase-hostet webside, hvor brugeren kan indtaste en ny adgangskode.
Dette forløb kræver ingen yderligere indbygget opsætning. Linket er ikke et dybt link ind i din app — det fører til en Firebase-hostet side. Hvis du vil have, at nulstillingsforløbet åbner inde i din app, skal du konfigurere Action URL i indstillingerne for Firebase Authentication, så den peger på din apps domæne med dynamiske links.
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.');
}
}
}Kontrol af status for e-mailbekræftelse
Efter tilmelding med e-mail og adgangskode kan du forhindre adgang til hovedappen, indtil brugeren har bekræftet sin e-mail. Kontrollér auth().currentUser?.emailVerified i onAuthStateChanged.
Bemærk, at emailVerified ikke opdateres i realtid — brugeren skal genindlæse tokenet, før værdien afspejler bekræftelsen. Kald auth().currentUser?.reload(), og læs derefter egenskaben igen, efter at brugeren siger, at vedkommende har klikket på bekræftelseslinket.
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' },
]
);
}
}Hurtig afprøvning
Afprøv din forståelse af begreberne inden for React Native Mobile Development fra denne lektion.
Opsummering af lektionen
I denne lektion lærte du: hvordan du implementerer tilmelding og login med e-mail og adgangskode ved hjælp af Firebase Auth, det totrinsbaserede OTP-godkendelsesforløb via telefon ved hjælp af signInWithPhoneNumber og confirmation.confirm samt hvordan du håndterer opdateringer af brugerprofiler og e-mailbekræftelse. Dernæst skal vi læse og skrive dokumenter i Cloud Firestore.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “E-mail- og telefongodkendelse med Firebase” gratis?
Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “E-mail- og telefongodkendelse med Firebase”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. React Native Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “E-mail- og telefongodkendelse med Firebase”?
Implementér tilmelding og login med e-mail/adgangskode, tilføj godkendelse med telefonnummer og SMS-OTP, og lyt til onAuthStateChanged-observatøren for at styre navigationen. Du øver dig i React Native Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på React Native Academy?
Der kræves ingen tidligere erfaring. React Native Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “E-mail- og telefongodkendelse med Firebase”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne React Native Academy-lektion?
Ja. Alle React Native Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Forbindelse af React Native Firebase til Deres projekt
- E-mail- og telefongodkendelse med Firebase
- Læsning og skrivning af Firestore-dokumenter
- Realtidslyttere og offline-persistens