PricingLoginStart free
React Native Academy · Lektion

E-mail- og OAuth-godkendelse

Implementér tilmelding og login med e-mail/adgangskode, tilføj Google OAuth med WebBrowser til redirect-flowet, og bevar sessionen på tværs af appgenstarter.

Lektion 2 af 413 trin

E-mail- og OAuth-godkendelse 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.

Godkendelsesmuligheder i Supabase

Supabase Auth understøtter flere godkendelsesstrategier direkte: e-mail/adgangskode, magisk link (e-mail uden adgangskode), OAuth-udbydere (Google, Apple, GitHub osv.) og telefon-OTP. De er alle tilgængelige via den samme supabase.auth-API.

I React Native er de mest almindelige forløb e-mail/adgangskode på grund af enkelheden samt Google-/Apple-OAuth for en gennemført indbygget oplevelse. Supabase håndterer automatisk lagring, opdatering og udløb af tokens, når AsyncStorage er konfigureret.

Tilmelding med e-mail og adgangskode

For at registrere en ny bruger skal du kalde supabase.auth.signUp med e-mailadressen og adgangskoden. Supabase opretter brugeren i tabellen auth.users og sender en bekræftelses-e-mail. Den returnerede data.session er null, indtil brugeren bekræfter sin e-mail, medmindre du deaktiverer e-mailbekræftelse i Supabase-dashboardet.

Kontrollér altid feltet error i svaret, og vis brugeren en meningsfuld meddelelse, hvis tilmeldingen mislykkes.

import { supabase } from '../lib/supabase';

async function signUp(email: string, password: string) {
  const { data, error } = await supabase.auth.signUp({
    email,
    password,
  });

  if (error) {
    console.error('Sign up error:', error.message);
    return null;
  }

  // data.user is available; data.session may be null until email confirmed
  return data.user;
}

Login med e-mail og adgangskode

For tilbagevendende brugere skal du kalde supabase.auth.signInWithPassword. Ved succes returnerer Supabase en session med et JWT-token og et refresh-token. Med persistSession: true gemmer klienten automatisk denne session i AsyncStorage.

Hvis brugeren indtaster forkerte loginoplysninger, indeholder fejlen en meddelelse som Invalid login credentials. Omsæt den til en brugervenlig meddelelse som E-mailadressen eller adgangskoden er forkert i stedet for at vise intern fejltekst.

async function signIn(email: string, password: string) {
  const { data, error } = await supabase.auth.signInWithPassword({
    email,
    password,
  });

  if (error) {
    Alert.alert('Login Failed', 'Email or password is incorrect.');
    return;
  }

  // Session is saved automatically; navigate to main app
  console.log('Signed in as:', data.user?.email);
}

Log ud

Det er enkelt at logge ud: kald supabase.auth.signOut(). Det ugyldiggør sessionen på serveren, fjerner den fra AsyncStorage og udløser hændelsen SIGNED_OUT i onAuthStateChange.

Et godt mønster for brugeroplevelsen er at navigere brugeren til login-skærmen i onAuthStateChange-lytteren i stedet for direkte efter kaldet til signOut, så alle dele af appen reagerer ensartet på ændringen i godkendelsestilstanden, uanset hvor signOut udløses.

async function signOut() {
  const { error } = await supabase.auth.signOut();
  if (error) {
    console.error('Sign out error:', error.message);
  }
  // Navigation to login happens in onAuthStateChange listener
}

Oprettelse af en komponent til godkendelsesskærmen

En typisk godkendelsesskærm gemmer e-mail og adgangskode i komponentens tilstand, indeholder knapperne Log ind og Tilmeld og viser en indlæsningsindikator, mens det asynkrone kald er i gang. Hold formularen enkel: To TextInput-komponenter og to TouchableOpacity-knapper er nok til en funktionel login-skærm.

Brug propen keyboardType='email-address' på e-mailfeltet og secureTextEntry på adgangskodefeltet for at forbedre brugeroplevelsen med mobiltastaturer.

import { useState } from 'react';
import { View, TextInput, TouchableOpacity, Text, ActivityIndicator } from 'react-native';
import { supabase } from '../lib/supabase';

export function AuthScreen() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);

  async function handleSignIn() {
    setLoading(true);
    await supabase.auth.signInWithPassword({ email, password });
    setLoading(false);
  }

  return (
    <View>
      <TextInput value={email} onChangeText={setEmail} keyboardType='email-address' />
      <TextInput value={password} onChangeText={setPassword} secureTextEntry />
      {loading ? <ActivityIndicator /> : (
        <TouchableOpacity onPress={handleSignIn}>
          <Text>Sign In</Text>
        </TouchableOpacity>
      )}
    </View>
  );
}

OAuth med Google: Installation af afhængigheder

OAuth i React Native kræver, at der åbnes en ekstern browser til udbyderens samtykkeskærm, hvorefter omdirigeringen tilbage til appen skal opfanges. Den anbefalede tilgang med Expo bruger expo-web-browser og expo-auth-session.

Installér disse pakker med npx expo install expo-web-browser expo-auth-session. Du skal også konfigurere en omdirigerings-URL, som browseren kan bruge til at give kontrollen tilbage til appen, efter brugeren har givet sit samtykke. I Expo ser denne URL sådan ud under udvikling: exp://your.project/--/auth/callback.

npx expo install expo-web-browser expo-auth-session

# In app.json, register a deep-link scheme:
# {
#   'expo': {
#     'scheme': 'myapp'
#   }
# }
#
# This makes the redirect URL:
# myapp://auth/callback

Gennemførelse af Google OAuth-forløbet

Kald supabase.auth.signInWithOAuth for at hente OAuth-URL'en, og åbn den derefter med WebBrowser.openAuthSessionAsync. Når browseren omdirigerer tilbage til appen med sessionstokens i URL'en, skal du udtrække dem og kalde supabase.auth.setSession.

Du skal registrere din omdirigerings-URL i Supabase-dashboardet under Authentication > URL Configuration > Redirect URLs og også konfigurere din apps brugerdefinerede skema, så operativsystemet videresender omdirigeringen korrekt.

import * as WebBrowser from 'expo-web-browser';
import * as Linking from 'expo-linking';
import { supabase } from '../lib/supabase';

async function signInWithGoogle() {
  const redirectUrl = Linking.createURL('/auth/callback');

  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: { redirectTo: redirectUrl },
  });

  if (error || !data.url) return;

  const result = await WebBrowser.openAuthSessionAsync(data.url, redirectUrl);

  if (result.type === 'success') {
    const { url } = result;
    // Extract tokens from URL and set session
    const parsedUrl = new URL(url);
    const accessToken = parsedUrl.searchParams.get('access_token')!;
    const refreshToken = parsedUrl.searchParams.get('refresh_token')!;
    await supabase.auth.setSession({ access_token: accessToken, refresh_token: refreshToken });
  }
}

Hentning af den aktuelle bruger

Efter login kan du når som helst hente den aktuelt godkendte bruger ved at kalde supabase.auth.getUser(). Det validerer JWT-tokenet med Supabase-serveren og er derfor mere sikkert end at læse det cachede session.user-objekt.

I tilfælde, hvor ydeevnen er vigtig, og du kun har brug for brugerens ID, undgår læsning af session?.user fra supabase.auth.getSession() en ekstra netværksrunde. Brug getUser() til sikkerhedsfølsomme handlinger og getSession() til visningsformål.

// Secure: validates with Supabase server
async function getAuthenticatedUser() {
  const { data: { user }, error } = await supabase.auth.getUser();
  if (error) {
    console.error('Auth error:', error.message);
    return null;
  }
  return user; // { id, email, created_at, ... }
}

// Fast: reads from local cache
async function getUserFromSession() {
  const { data: { session } } = await supabase.auth.getSession();
  return session?.user ?? null;
}

Beskyttelse af skærme baseret på godkendelsestilstanden

Et enkelt mønster til beskyttelse af skærme er at oprette en rodnavigator, der holder øje med Supabase-sessionen og skifter mellem en godkendelsesstak og en stak til hovedappen, afhængigt af om der findes en session.

Placér onAuthStateChange-lytteren i komponenten for rod-layoutet. Når sessionen er null, skal du vise login-skærmene; når der findes en session, skal du vise hovedappens skærme. React Navigation håndterer overgangen automatisk.

import { NavigationContainer } from '@react-navigation/native';
import { useSession } from '../hooks/useSession';

export function RootNavigator() {
  const session = useSession(); // custom hook using onAuthStateChange

  return (
    <NavigationContainer>
      {session ? <AppStack /> : <AuthStack />}
    </NavigationContainer>
  );
}

Forløb til nulstilling af adgangskode

Supabase har et indbygget forløb til nulstilling af adgangskoder. Kald supabase.auth.resetPasswordForEmail med brugerens e-mailadresse. Supabase sender en e-mail med et magisk link. Når brugeren trykker på linket, åbnes en side til nulstilling af adgangskoden, hvor vedkommende kan angive en ny adgangskode.

I en opsætning med deep links på mobilen konfigurerer du omdirigerings-URL'en, så den peger tilbage på appen, hvor du derefter kalder supabase.auth.updateUser({ password: newPassword }), efter at brugeren har indtastet sine nye loginoplysninger.

// Step 1: Send password reset email
async function requestPasswordReset(email: string) {
  const { error } = await supabase.auth.resetPasswordForEmail(email, {
    redirectTo: 'myapp://auth/reset-password',
  });
  if (!error) {
    Alert.alert('Check your email', 'A password reset link has been sent.');
  }
}

// Step 2: After the user follows the link and is redirected to the app,
// update their password:
async function updatePassword(newPassword: string) {
  const { error } = await supabase.auth.updateUser({ password: newPassword });
  if (!error) {
    Alert.alert('Success', 'Your password has been updated.');
  }
}

Håndtering af godkendelsesfejl på en god måde

Håndter altid godkendelsesfejl på en brugervenlig måde. Almindelige Supabase-godkendelsesfejl omfatter:

  • Ugyldige loginoplysninger — forkert e-mail eller adgangskode
  • Brugeren er allerede registreret — e-mailadressen er allerede taget under tilmelding
  • E-mailen er ikke bekræftet — brugeren har tilmeldt sig, men har endnu ikke bekræftet sin e-mail

Kortlæg disse tekniske meddelelser til tydelige meddelelser i brugergrænsefladen. Overvej at gemme en authError-streng i tilstanden og vise den under formularfelterne i en rød Text-komponent.

const ERROR_MESSAGES: Record<string, string> = {
  'Invalid login credentials': 'Email or password is incorrect.',
  'User already registered': 'This email is already in use.',
  'Email not confirmed': 'Please confirm your email before signing in.',
};

async function handleSignIn(email: string, password: string) {
  const { error } = await supabase.auth.signInWithPassword({ email, password });
  if (error) {
    const friendlyMessage = ERROR_MESSAGES[error.message] ?? 'An error occurred. Try again.';
    setAuthError(friendlyMessage);
  }
}

Hurtigt tjek

Test din forståelse af begreberne inden for React Native-mobiludvikling fra denne lektion.

Besvar den i den interaktive lektion

Opsummering af lektionen

I denne lektion lærte du: hvordan du implementerer tilmelding og login med e-mail og adgangskode, hvordan du udfører OAuth med Google ved hjælp af expo-web-browser og hvordan du beskytter navigationsruter baseret på Supabase-godkendelsessessionen. Dernæst undersøger vi, hvordan du forespørger Supabase-databasen fra React Native-komponenter.

Gratis at komme i gang

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
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “E-mail- og OAuth-godkendelse” gratis?

Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “E-mail- og OAuth-godkendelse”, 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 OAuth-godkendelse”?

Implementér tilmelding og login med e-mail/adgangskode, tilføj Google OAuth med WebBrowser til redirect-flowet, og bevar sessionen på tværs af appgenstarter. 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 OAuth-godkendelse”?

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

  1. Opsætning af Supabase-klienten i React Native
  2. E-mail- og OAuth-godkendelse
  3. Forespørgsler til databasen med Supabase-klienten
  4. Realtidsabonnementer
← Tilbage til React Native Academy