Apps met Firebase-authenticatie en realtime database · Les

Gebruikerssessies en -statussen beheren

Leer authenticatiestatussen van gebruikers te monitoren, sessies te bewaren en gebruikersprofielen veilig te beheren

Les 2 van 411 stappen

Gebruikerssessies en -statussen beheren is een gratis Apps met Firebase-authenticatie en realtime database-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Apps met Firebase-authenticatie en realtime database. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Apps met Firebase-authenticatie en realtime database bevat in totaal 4 lessen.

Introductie tot gebruikerssessies en -statussen

Welkom! In deze les leer je gebruikerssessies beheren en authenticatiestatussen in Firebase begrijpen. Dit is cruciaal voor het bouwen van veilige en gebruiksvriendelijke apps.

We behandelen hoe je:

bijhoudt wanneer een gebruiker zich aan- of afmeldt;
gebruikers aangemeld houdt wanneer de app opnieuw wordt gestart;
profielgegevens van gebruikers bijwerkt.

De gebruikersstatus bijhouden

Firebase Authentication biedt een krachtige manier om de aanmeldstatus van een gebruiker in realtime te volgen. Dit doe je met een 'listener voor de authenticatiestatus'.

Deze vertelt je app of een gebruiker momenteel is aangemeld of afgemeld.
De listener wordt geactiveerd wanneer de authenticatiestatus van de gebruiker verandert, bijvoorbeeld bij aanmelden, afmelden of het vernieuwen van een token.
Dit is ideaal om elementen van de gebruikersinterface bij te werken of gebruikers door te sturen.

Realtime listener voor de authenticatiestatus

Zo stel je een listener voor de authenticatiestatus in. Dit is een belangrijk onderdeel om je app op aan- en afmeldingen van gebruikers te laten reageren.

In dit voorbeeld wordt ervan uitgegaan dat Firebase is geïnitialiseerd en de service auth beschikbaar is.

import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth();

// This function will be called whenever the auth state changes
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in
    console.log("User logged in:", user.email);
    // You can access user.uid, user.displayName, etc.
  } else {
    // User is signed out
    console.log("No user logged in.");
  }
});

console.log("Auth state listener set up.");

Sessiebehoud uitgelegd

Stel je voor: je gebruiker meldt zich aan, sluit de app en opent deze opnieuw — om vervolgens te ontdekken dat die is afgemeld. Frustrerend, toch?

Firebase Auth lost dit op met 'sessiebehoud'. Hiermee kun je bepalen hoelang de aanmeldsessie van een gebruiker actief blijft, zelfs nadat die de browser of app heeft gesloten.

Firebase slaat gebruikersgegevens veilig op.
De gebruiker wordt automatisch opnieuw geauthenticeerd wanneer die terugkomt.

Opties voor sessiebehoud kiezen

Firebase biedt verschillende niveaus van sessiebehoud voor uiteenlopende behoeften van apps:

LOCAL: de sessie van de gebruiker blijft behouden, zelfs als het browservenster wordt gesloten. (Standaard voor het web)
SESSION: de sessie blijft alleen behouden tijdens de huidige browsersessie. De sessie wordt gewist wanneer het venster wordt gesloten.
NONE: er is geen sessiebehoud. De gebruiker wordt afgemeld wanneer de pagina wordt vernieuwd of de app opnieuw wordt gestart.

Sessiebehoud aanpassen

Je kunt het gewenste persistentieniveau instellen voordat een gebruiker zich aanmeldt. Hiermee geef je Firebase aan hoe de sessie voor die specifieke aanmelding moet worden behandeld.

Hier zie je een voorbeeld waarin dit wordt ingesteld op SESSION voor een tijdelijke aanmelding.

import { getAuth, setPersistence, browserSessionPersistence } from "firebase/auth";
const auth = getAuth();

// Set persistence to SESSION
setPersistence(auth, browserSessionPersistence)
  .then(() => {
    console.log("Persistence set to SESSION.");
    // Now you can sign in your user
    // signInWithEmailAndPassword(auth, email, password);
  })
  .catch((error) => {
    console.error("Error setting persistence:", error.message);
  });

console.log("Attempting to set persistence...");

Gebruikersinformatie openen

Zodra een gebruiker is aangemeld, moet je vaak informatie zoals de ID, het e-mailadres of de weergavenaam opvragen. Firebase maakt dit eenvoudig.

De eigenschap currentUser van het object auth bevat de gebruiker die momenteel is aangemeld.
Deze eigenschap is null als er geen gebruiker is aangemeld.
Belangrijk: Controleer currentUser altijd binnen een listener voor onAuthStateChanged om er zeker van te zijn dat de waarde actueel is.

Gebruikersprofielen beheren

Met Firebase Auth kunnen gebruikers rechtstreeks hun basisprofielgegevens bijwerken. Dit omvat hun weergavenaam en de URL van hun profielfoto.

Deze updates vinden aan de clientzijde plaats. De gebruiker hoeft zich niet opnieuw te authenticeren om de wijzigingen in het eigen profielobject te zien.

Gebruik de methode updateProfile op het gebruikersobject.
Veelgebruikte updates zijn displayName en photoURL.

De weergavenaam wijzigen

Je gaat bekijken hoe je de weergavenaam van een gebruiker bijwerkt. Dit is handig om de ervaring in je app te personaliseren.

Voor deze bewerking moet de gebruiker zijn aangemeld.

import { getAuth, updateProfile } from "firebase/auth";
const auth = getAuth();

const user = auth.currentUser; // Get the current user

if (user) {
  updateProfile(user, {
    displayName: "Jane Doe",
    // photoURL: "https://example.com/jane-profile.jpg"
  }).then(() => {
    console.log("Profile updated successfully!");
    console.log("New display name:", user.displayName);
  }).catch((error) => {
    console.error("Error updating profile:", error.message);
  });
} else {
  console.log("No user is logged in to update profile.");
}

console.log("Attempting to update user profile...");

Korte controle: authenticatiestatus

Denk aan een webtoepassing die Firebase Authentication gebruikt. Een gebruiker meldt zich aan, sluit daarna de browser en opent deze enkele minuten later opnieuw. De gebruiker blijkt nog steeds aangemeld te zijn.

Welke instelling voor persistentie van Firebase Auth was waarschijnlijk actief?

Beantwoord dit in de interactieve les

Samenvatting: sessies en statussen

Goed gedaan! In deze les heb je geleerd hoe je gebruikerssessies en -statussen in je Firebase-toepassing effectief beheert.

We hebben onAuthStateChanged bekeken voor het realtime controleren van de gebruikersstatus.
Je hebt het belang van sessiepersistentie en de verschillende niveaus ervan begrepen (LOCAL, SESSION, NONE).
Ten slotte heb je geleerd hoe je profielgegevens van een aangemelde gebruiker opvraagt en bijwerkt.

Deze vaardigheden zijn essentieel voor het bouwen van dynamische en gepersonaliseerde gebruikerservaringen!

Gratis beginnen

Leer Apps met Firebase-authenticatie en realtime database met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 11
Lessen: 44

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Gebruikerssessies en -statussen beheren” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Apps met Firebase-authenticatie en realtime database, waaronder “Gebruikerssessies en -statussen beheren”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Apps met Firebase-authenticatie en realtime database bevat in totaal 4 lessen.

Wat leer ik in “Gebruikerssessies en -statussen beheren”?

Leer authenticatiestatussen van gebruikers te monitoren, sessies te bewaren en gebruikersprofielen veilig te beheren Je oefent met Apps met Firebase-authenticatie en realtime database door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Apps met Firebase-authenticatie en realtime database te beginnen?

Ervaring vooraf is niet nodig. Apps met Firebase-authenticatie en realtime database op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Gebruikerssessies en -statussen beheren”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Apps met Firebase-authenticatie en realtime database?

Ja. Elke les over Apps met Firebase-authenticatie en realtime database bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

Authenticatie met e-mail en wachtwoord implementeren
Gebruikerssessies en -statussen beheren
Authenticatiefouten afhandelen
Wachtwoord opnieuw instellen en e-mail verifiëren

← Terug naar Apps met Firebase-authenticatie en realtime database