React Native Academy · Lektion

Opsætning af Supabase-klienten i React Native

Opret et Supabase-projekt, installér @supabase/supabase-js, initialisér klienten med projektets URL og anon-nøgle, og konfigurér AsyncStorage som sessionslager.

Lektion 1 af 413 trin

Opsætning af Supabase-klienten i React Native er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 1 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.

Hvad er Supabase?

Supabase er et open source-alternativ til Firebase, der leverer en hostet PostgreSQL-database, godkendelse, abonnementer i realtid og fillagring – alt sammen tilgængeligt via en enkel JavaScript-klient. Det er et fremragende backendvalg til React Native-apps, fordi det ikke kræver serverkode til almindelige handlinger.

I modsætning til Firebase bruger Supabase standard-SQL og giver dig mulighed for at forespørge dine data med fuld relationel funktionalitet. Du opretter et projekt på supabase.com og får en projekt-URL samt en anon-nøgle, som du bruger i din app.

Installation af Supabase JS-klienten

For at bruge Supabase i et React Native-projekt skal du installere den officielle JavaScript-klient sammen med den AsyncStorage-adapter, som Supabase bruger til at gemme godkendelsessessioner på mobilenheder.

Kør følgende kommando i projektets rodmappe. Pakken @supabase/supabase-js håndterer al API-kommunikation, mens @react-native-async-storage/async-storage gemmer sessionstokenet mellem appens opstarter.

npx expo install @supabase/supabase-js @react-native-async-storage/async-storage

Oprettelse af en Supabase-klientinstans

Du initialiserer Supabase-klienten én gang og eksporterer den, så den kan bruges i hele appen. Opret en fil med navnet lib/supabase.ts, og kald createClient med din projekt-URL og anon-nøgle.

Indstillingerne for auth fortæller klienten, at den skal bruge AsyncStorage, så sessionen bevares, efter appen er lukket. detectSessionInUrl sættes til false, fordi React Native ikke bruger browser-URL'er til OAuth-callbacks.

import AsyncStorage from '@react-native-async-storage/async-storage';
import { createClient } from '@supabase/supabase-js';

const SUPABASE_URL = 'https://your-project.supabase.co';
const SUPABASE_ANON_KEY = 'your-anon-key';

export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
  auth: {
    storage: AsyncStorage,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});

Hvor du skal gemme dine Supabase-nøgler

Din Supabase-URL og anon-nøgle er ikke hemmelige — anon-nøglen er beregnet til brug i klientkode og beskyttes af politikker for Row Level Security (RLS) i din database. Din service_role-nøgle er derimod hemmelig og må aldrig indlejres i en mobilapp.

Det er en god praksis at gemme de offentlige nøgler i miljøvariabler ved hjælp af en .env-fil og tilgå dem via process.env.EXPO_PUBLIC_SUPABASE_URL. Expo eksponerer automatisk variabler med præfikset EXPO_PUBLIC_ for JavaScript-bundtet.

# .env
EXPO_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
EXPO_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

# lib/supabase.ts
const SUPABASE_URL = process.env.EXPO_PUBLIC_SUPABASE_URL!;
const SUPABASE_ANON_KEY = process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY!;

Forståelse af Row Level Security

Row Level Security (RLS) er grundstenen i Supabase-sikkerhed. Når RLS er aktiveret for en tabel, filtreres alle forespørgsler fra anon- eller godkendelsesnøglen gennem de politikker, du definerer i SQL. Uden RLS kan alle, der har din anon-nøgle, læse eller ændre alle rækker.

En typisk politik tillader brugere kun at læse deres egne rækker: USING (auth.uid() = user_id). Du aktiverer RLS i Supabase-dashboardet under sektionen Authentication > Policies eller med SQL: ALTER TABLE posts ENABLE ROW LEVEL SECURITY;

-- Enable RLS on a table
ALTER TABLE posts ENABLE ROW LEVEL SECURITY;

-- Allow users to read only their own posts
CREATE POLICY 'Users read own posts'
  ON posts FOR SELECT
  USING (auth.uid() = user_id);

-- Allow users to insert posts for themselves
CREATE POLICY 'Users insert own posts'
  ON posts FOR INSERT
  WITH CHECK (auth.uid() = user_id);

Kontrol af klientopsætningen

Efter du har oprettet klienten, kan du kontrollere, at den er konfigureret korrekt, ved at udføre en enkel forespørgsel til kontrol af systemets tilstand. Kald af supabase.from('your_table').select('count') returnerer en fejl, hvis URL'en eller nøglen er forkert, eller et resultat, hvis forbindelsen lykkes.

Et almindeligt mønster er at teste forbindelsen i en useEffect under udviklingen og logge eventuelle fejl. Husk at fjerne fejlsøgningslogning, før du udgiver til produktion.

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

export default function App() {
  useEffect(() => {
    async function testConnection() {
      const { data, error } = await supabase.from('profiles').select('count');
      if (error) {
        console.error('Supabase connection error:', error.message);
      } else {
        console.log('Connected to Supabase:', data);
      }
    }
    testConnection();
  }, []);

  return null;
}

Bevarelse af godkendelsessessioner med AsyncStorage

Ved at angive storage: AsyncStorage i Supabase-klientens indstillinger gemmes godkendelsessessionen (JWT-tokenet og refresh-tokenet) automatisk i enhedens lager. Når brugeren åbner appen igen, læser klienten den gemte session og gendanner den godkendte tilstand, uden at brugeren skal logge ind igen.

Du kan lytte efter ændringer i godkendelsestilstanden med supabase.auth.onAuthStateChange, som udløses, hver gang sessionen oprettes, opdateres eller slettes. Det er nyttigt til at styre din navigationsstak.

import { useEffect, useState } from 'react';
import { Session } from '@supabase/supabase-js';
import { supabase } from '../lib/supabase';

export function useSession() {
  const [session, setSession] = useState<Session | null>(null);

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session);
    });

    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      (_event, session) => setSession(session)
    );

    return () => subscription.unsubscribe();
  }, []);

  return session;
}

Oversigt over Supabase-projektets dashboard

Supabase-dashboardet på app.supabase.com giver dig et komplet overblik over din backend. Vigtige sektioner omfatter:

Tabelredigering — opret og gennemse databasetabeller visuelt
Godkendelse — administrer brugere, konfigurer udbydere, og angiv politikker
Lager — administrer fillagre til billeder og dokumenter
API — se automatisk genereret dokumentation til REST- og realtids-API'er

Med SQL-editoren kan du køre vilkårlige SQL-forespørgsler mod din database. Det er nyttigt til at oprette tabeller, indeks og RLS-politikker under udviklingen.

Oprettelse af en profiltabel

Et almindeligt mønster i Supabase-apps er at oprette en profiles-tabel, der udvider den indbyggede auth.users-tabel med appspecifikke data som visningsnavne og avatarer. Du kan bruge en database-trigger til automatisk at oprette en profilrække, når en ny bruger tilmelder sig.

Kolonnen id refererer til auth.users, så hver profil er knyttet til præcis én godkendt bruger. RLS-politikker sikrer, at brugere kun kan læse og opdatere deres egen profil.

-- profiles table
CREATE TABLE profiles (
  id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
  username TEXT UNIQUE,
  avatar_url TEXT,
  created_at TIMESTAMPTZ DEFAULT now()
);

ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;

CREATE POLICY 'Public profiles are viewable'
  ON profiles FOR SELECT USING (true);

CREATE POLICY 'Users update own profile'
  ON profiles FOR UPDATE USING (auth.uid() = id);

Automatisk opdatering af tokens

Supabase-JWT'er udløber som standard efter én time. Når du angiver autoRefreshToken: true i klientens indstillinger, kalder klienten automatisk opdateringsslutpunktet, før tokenet udløber, så brugeren forbliver logget ind uden indgriben fra din kode.

Hvis opdateringen mislykkes (for eksempel hvis brugerens internetforbindelse er afbrudt i længere tid), udsender klienten en TOKEN_REFRESHED-hændelse efterfulgt af en SIGNED_OUT-hændelse. Du bør håndtere SIGNED_OUT i din onAuthStateChange-lytter for at omdirigere brugeren til login-skærmen.

supabase.auth.onAuthStateChange((event, session) => {
  if (event === 'SIGNED_OUT') {
    // Navigate user to login screen
    navigation.reset({
      index: 0,
      routes: [{ name: 'Login' }],
    });
  }
  if (event === 'TOKEN_REFRESHED') {
    console.log('Token refreshed successfully');
  }
});

TypeScript-typer fra Supabase

Supabase kan generere TypeScript-typer ud fra dit databaseskema ved hjælp af Supabase CLI. Kør npx supabase gen types typescript for at oprette en database.types.ts-fil. Giv derefter denne type som en generisk typeparameter til createClient for at få fuldt typede databaseforespørgsler.

Typede forespørgsler opdager stavefejl i feltnavne på kompileringstidspunktet og giver dig autofuldførelse i din editor — et betydeligt produktivitetsløft i større projekter.

import { Database } from './database.types';
import { createClient } from '@supabase/supabase-js';

export const supabase = createClient<Database>(
  process.env.EXPO_PUBLIC_SUPABASE_URL!,
  process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY!
);

// Now queries are fully typed:
// supabase.from('profiles').select('id, username')
// TypeScript knows the shape of each row

Hurtig kontrol

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

Besvar den i den interaktive lektion

Opsummering af lektionen

I denne lektion lærte du at installere og initialisere Supabase-JS-klienten, hvilken rolle AsyncStorage spiller i bevarelsen af godkendelsessessioner, og hvorfor Row Level Security er afgørende, når du bruger anon-nøglen i mobilapps. Nu ser vi nærmere på godkendelsesforløb med Supabase, herunder e-mail/adgangskode og OAuth-udbydere.

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 gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Opsætning af Supabase-klienten i React Native” gratis?

Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “Opsætning af Supabase-klienten i React Native”, 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 “Opsætning af Supabase-klienten i React Native”?

Opret et Supabase-projekt, installér @supabase/supabase-js, initialisér klienten med projektets URL og anon-nøgle, og konfigurér AsyncStorage som sessionslager. 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 1 af 4.

Hvor lang tid tager lektionen “Opsætning af Supabase-klienten i React Native”?

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

Opsætning af Supabase-klienten i React Native
E-mail- og OAuth-godkendelse
Forespørgsler til databasen med Supabase-klienten
Realtidsabonnementer

← Tilbage til React Native Academy