React Native Academy · Lektion

E-post- och OAuth-autentisering

Implementera registrering och inloggning med e-post/lösenord, lägg till Google OAuth med WebBrowser för omdirigeringsflödet och bevara sessionen mellan appomstarter.

Lektion 2 av 413 steg

E-post- och OAuth-autentisering är en gratis lektion i React Native Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för React Native Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Native Academy innehåller totalt 4 lektioner.

Autentiseringsalternativ i Supabase

Supabase Auth har stöd för flera autentiseringsstrategier direkt från början: e-post/lösenord, magic link (lösenordsfri e-post), OAuth-leverantörer (Google, Apple, GitHub med flera) och telefon-OTP. Alla dessa nås via samma supabase.auth-API.

I React Native är e-post/lösenord vanligast för enkelhetens skull, medan Google-/Apple-OAuth ger en mer genomarbetad inbyggd upplevelse. När AsyncStorage är konfigurerat hanterar Supabase automatiskt lagring, uppdatering och upphörande av token.

Registrera med e-post och lösenord

Registrera en ny användare genom att anropa supabase.auth.signUp med e-postadress och lösenord. Supabase skapar användaren i tabellen auth.users och skickar ett bekräftelsemeddelande via e-post. Det returnerade data.session är null tills användaren bekräftar sin e-postadress, såvida ni inte inaktiverar e-postbekräftelse i Supabase-instrumentpanelen.

Kontrollera alltid fältet error i svaret och visa användaren ett tydligt meddelande om registreringen misslyckas.

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;
}

Logga in med e-post och lösenord

Återkommande användare loggar in genom att ni anropar supabase.auth.signInWithPassword. Vid lyckad inloggning returnerar Supabase en session med en JWT och en uppdateringstoken. Med persistSession: true sparar klienten automatiskt sessionen i AsyncStorage.

Om användaren anger fel inloggningsuppgifter innehåller felet ett meddelande som Invalid login credentials. Översätt detta till ett användarvänligt meddelande, till exempel E-postadressen eller lösenordet är felaktigt, i stället för att visa intern feltext.

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);
}

Logga ut

Det är enkelt att logga ut: anropa supabase.auth.signOut(). Detta ogiltigförklarar sessionen på servern, tar bort den från AsyncStorage och utlöser händelsen SIGNED_OUT i onAuthStateChange.

Ett bra mönster för användarupplevelsen är att navigera användaren till inloggningssidan i lyssnaren onAuthStateChange i stället för direkt efter anropet till signOut. Då reagerar alla delar av appen konsekvent på ändringen av autentiseringstillståndet, oavsett varifrån signOut utlö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
}

Skapa en komponent för autentiseringsskärmen

En typisk autentiseringsskärm lagrar e-postadress och lösenord i komponentens tillstånd, visar knapparna Logga in och Registrera och visar en laddningsindikator medan det asynkrona anropet pågår. Håll formuläret enkelt: två TextInput-komponenter och två TouchableOpacity-knappar räcker för en fungerande inloggningsskärm.

Använd egenskapen keyboardType='email-address' på e-postfältet och secureTextEntry på lösenordsfältet för att förbättra användarupplevelsen med mobila tangentbord.

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: installera beroenden

OAuth i React Native kräver att en extern webbläsare öppnas för leverantörens samtyckessida och att omdirigeringen tillbaka till appen sedan fångas upp. Den rekommenderade metoden med Expo använder expo-web-browser och expo-auth-session.

Installera dessa paket med npx expo install expo-web-browser expo-auth-session. Ni måste också konfigurera en omdirigerings-URL som webbläsaren kan använda för att lämna tillbaka kontrollen till appen när användaren har gett sitt samtycke. I Expo ser denna URL i utvecklingsmiljö ut så här: 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

Genomför Google OAuth-flödet

Anropa supabase.auth.signInWithOAuth för att hämta OAuth-URL:en och öppna den sedan med WebBrowser.openAuthSessionAsync. När webbläsaren omdirigerar tillbaka till appen med sessionstoken i URL:en extraherar ni dem och anropar supabase.auth.setSession.

Ni måste registrera omdirigerings-URL:en i Supabase-instrumentpanelen under Authentication > URL Configuration > Redirect URLs och även konfigurera appens anpassade schema så att operativsystemet dirigerar omdirigeringen tillbaka på rätt sätt.

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 });
  }
}

Hämta den aktuella användaren

Efter inloggningen kan ni när som helst hämta den användare som för närvarande är autentiserad genom att anropa supabase.auth.getUser(). Detta validerar JWT:n med Supabase-servern och är därför säkrare än att läsa det cachade objektet session.user.

I prestandakänsliga situationer där ni bara behöver användarens ID kan ni läsa session?.user från supabase.auth.getSession() för att undvika en extra nätverksförfrågan. Använd getUser() för säkerhetskänsliga åtgärder och getSession() för visningsändamå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;
}

Skydda skärmar utifrån autentiseringstillstånd

Ett tydligt mönster för att skydda skärmar är att skapa en rot-navigator som bevakar Supabase-sessionen och växlar mellan en autentiseringsstack och en stack för huvudappen beroende på om det finns en session.

Placera lyssnaren onAuthStateChange i komponenten för rotlayouten. När sessionen är null renderar ni inloggningsskärmarna. När det finns en session renderar ni huvudappens skärmar. React Navigation hanterar övergången automatiskt.

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>
  );
}

Flöde för återställning av lösenord

Supabase har ett inbyggt flöde för återställning av lösenord. Anropa supabase.auth.resetPasswordForEmail med användarens e-postadress. Supabase skickar ett e-postmeddelande med en magic link. När användaren trycker på länken kommer hen till en sida för återställning av lösenord där ett nytt lösenord kan anges.

I en mobil konfiguration med deep links anger ni omdirigerings-URL:en så att den leder tillbaka till appen. Där anropar ni sedan supabase.auth.updateUser({ password: newPassword }) när användaren har angett sina nya inloggningsuppgifter.

// 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.');
  }
}

Hantera autentiseringsfel på ett bra sätt

Hantera alltid autentiseringsfel på ett användarvänligt sätt. Vanliga Supabase-autentiseringsfel är:

Ogiltiga inloggningsuppgifter — fel e-postadress eller lösenord
Användaren är redan registrerad — e-postadressen används redan vid registreringen
E-postadressen har inte bekräftats — användaren har registrerat sig men ännu inte bekräftat sin e-postadress

Översätt dessa tekniska meddelanden till tydliga meddelanden i gränssnittet. Överväg att lagra en sträng för authError i state och visa den under formulärfälten 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);
  }
}

Snabbtest

Testa dina kunskaper om koncepten inom React Native Mobile Development från den här lektionen.

Besvara frågan i den interaktiva lektionen

Sammanfattning av lektionen

I den här lektionen har du lärt dig: hur du implementerar registrering och inloggning med e-postadress och lösenord, hur du genomför OAuth med Google med hjälp av expo-web-browser och hur du skyddar navigeringsrutter baserat på Supabase-autentiseringssessionen. Härnäst utforskar vi hur du hämtar data från Supabase-databasen i React Native-komponenter.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 30
Lektioner: 120

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”E-post- och OAuth-autentisering” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen React Native Academy, inklusive ”E-post- och OAuth-autentisering”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i React Native Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”E-post- och OAuth-autentisering”?

Implementera registrering och inloggning med e-post/lösenord, lägg till Google OAuth med WebBrowser för omdirigeringsflödet och bevara sessionen mellan appomstarter. Ni övar på React Native Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Native Academy?

Du behöver inga förkunskaper. Utbildningen i React Native Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”E-post- och OAuth-autentisering”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Native Academy-lektionen?

Ja. Varje React Native Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Konfigurera Supabase-klienten i React Native
E-post- och OAuth-autentisering
Fråga databasen med Supabase-klienten
Prenumerationer i realtid

← Tillbaka till React Native Academy