Kom i gang med Supabase Auth i React

Forutsetninger

Før vi starter, sørg for at du har:

  • En code editor (VS Code anbefales)
  • Node.js installert (lær hvordan her)
  • En konto hos Auth

Steg-for-steg Guide

1. Opprett Supabase-prosjekt

Gå til database.new og opprett et nytt prosjekt. Kopier URL og Anon Key.

VITE_SUPABASE_URL=https://xyz.supabase.co
VITE_SUPABASE_ANON_KEY=eyJ...

2. Installer Klient

Vi trenger @supabase/supabase-js pakken.

npm install @supabase/supabase-js

3. Konfigurer Klient

Opprett supabaseClient.js.

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

4. Lag Login Komponent

Bruk supabase.auth.signInWithOtp for passordløs innlogging.

const handleLogin = async (email) => {
  const { error } = await supabase.auth.signInWithOtp({ email })
  if (error) console.error(error)
}

Vanlige feil (Troubleshooting)

Her er noen kjente problemer du kan støte på: