Komplett guide till Supabase Auth 2026 — email/password, OAuth, magic link, RLS, användarhantering och integration med Next.js.
Supabase har 2026 etablerat sig som den ledande open source-alternativet till Firebase. Supabase Auth är en central del av plattformen och erbjuder autentisering ur lådan med stöd för email/password, OAuth (Google, GitHub, Apple, Azure AD), magic link, SMS-kod och eventuellt anpassade provider. Kombinationen med PostgreSQL Row Level Security gör att du kan implementera säker, skalbar autentisering utan att skriva egen backend-kod.
Den här guiden tar dig genom hela processen: från att konfigurera Supabase Auth i ditt projekt, implementera login och registrering, hantera sessioner, skydda routes, och bygga ett rollbaserat åtkomstsystem med RLS. Alla exempel är i Next.js App Router, men principerna gäller för alla ramverk som stöder Supabase.
Varför Supabase Auth?
Supabase Auth är mer än bara en login-modul. Det är en komplett autentiseringslösning som bygger på öppna standarder (JWT, OAuth 2.0, PKCE) och integrerar djupt med Supabases databas. Varje användare får automatiskt en post i auth.users-tabellen, och du kan koppla en publik profiles-tabell för ytterligare användardata. Row Level Security gör att du kan styra dataåtkomst direkt i databasen baserat på användarens JWT — ingen middleware krävs.
För svenska utvecklingsteam innebär Supabase Auth att du slipper bygga och underhålla egen autentiseringsinfrastruktur. Du får funktioner som lösenordsåterställning, email-bekräftelse, rate limiting, session management och användarhantering ur lådan. Supabase hostas inom EU (Frankfurt eller Stockholm via AWS) och följer GDPR, vilket är avgörande för svenska företag.
Installation och konfiguration
Börja med att installera Supabase-klienten i ditt projekt:
| 1 | npm install @supabase/supabase-js @supabase/ssr |
Skapa en Supabase-klient för servern och klienten. För Next.js App Router använder du paketet @supabase/ssr som hanterar cookies och sessioner på både server och client. Skapa utils/supabase/server.ts och utils/supabase/client.ts med rätt konfiguration. Miljövariablerna NEXT_PUBLIC_SUPABASE_URL och NEXT_PUBLIC_SUPABASE_ANON_KEY hämtar du från Supabase Dashboard.
Supabase SSR-klienten hanterar cookies automatiskt för att hålla reda på användarens session. För servern använder den cookies() från Next.js headers, och för klienten hanterar den cookies via webbläsaren. Du behöver inte skriva egen logik för att spara och hämta tokens.
Email/Password-autentisering
Email och lösenord är den vanligaste autentiseringsmetoden. Så här implementerar du registrering och inloggning:
| 1 | // app/auth/login/page.tsx (Client Component) |
| 2 | "use client" |
| 3 | import { createClient } from "@/utils/supabase/client" |
| 4 | |
| 5 | export default function LoginPage() { |
| 6 | const supabase = createClient() |
| 7 | |
| 8 | const handleLogin = async (email: string, password: string) => { |
| 9 | const { error } = await supabase.auth.signInWithPassword({ email, password }) |
| 10 | if (error) console.error(error) |
| 11 | else router.push("/dashboard") |
| 12 | } |
| 13 | |
| 14 | const handleSignUp = async (email: string, password: string) => { |
| 15 | const { error } = await supabase.auth.signUp({ email, password }) |
| 16 | if (error) console.error(error) |
| 17 | else router.push("/verify") |
| 18 | } |
| 19 | // ... render form |
| 20 | } |
Som standard skickar Supabase ett bekräftelsemail för nya registreringar. Du kan stänga av detta i Supabase Dashboard under Authentication > Settings. För produktion rekommenderar jag att behålla email-bekräftelse och använda Supabases inbyggda email-mallar eller en egen SMTP-server.
OAuth — Google, GitHub, Apple och fler
OAuth ger användare möjlighet att logga in med sina befintliga konton. Så här lägger du till Google-inloggning:
| 1 | const handleGoogleLogin = async () => { |
| 2 | const { error } = await supabase.auth.signInWithOAuth({ |
| 3 | provider: "google", |
| 4 | options: { redirectTo: `${location.origin}/auth/callback` } |
| 5 | }) |
| 6 | } |
Konfigurera varje OAuth-provider i Supabase Dashboard under Authentication > Providers. För Google behöver du ett OAuth 2.0-klient-ID från Google Cloud Console. Ange rätt redirect-URL:er — för lokal utveckling http://localhost:3000/auth/callback, för produktion din domän. Supabase stöder 15+ providers inklusive Azure AD, vilket är särskilt användbart för svenska företag som använder Microsoft 365.
Magic Link — lösenordslös inloggning
Magic link låter användare logga in genom att klicka på en länk i ett email — inget lösenord behövs. Det är både säkrare och bekvämare för användaren:
| 1 | const handleMagicLink = async (email: string) => { |
| 2 | const { error } = await supabase.auth.signInWithOtp({ |
| 3 | email, |
| 4 | options: { emailRedirectTo: `${location.origin}/dashboard` } |
| 5 | }) |
| 6 | } |
Supabase skickar ett email med en unik, tidsbegränsad länk. När användaren klickar på länken loggas de in automatiskt. Magic link är särskilt bra för SaaS-produkter där användare ofta glömmer sina lösenord. Kombinera med en sessions-cookie som varar i 30–60 dagar för en smidig användarupplevelse.
Telefonautentisering med SMS
Supabase stöder även autentisering via SMS genom Twilio. Konfigurera Twilio-integration i Supabase Dashboard och använd:
| 1 | const handlePhoneLogin = async (phone: string) => { |
| 2 | const { error } = await supabase.auth.signInWithOtp({ phone }) |
| 3 | } |
| 4 | |
| 5 | const handleVerifyOtp = async (phone: string, token: string) => { |
| 6 | const { error } = await supabase.auth.verifyOtp({ phone, token, type: "sms" }) |
| 7 | } |
Telefonautentisering är användbart för appar där användare inte har email (t.ex. mobil-first-produkter) eller som ett andra steg i tvåfaktorsautentisering. Tänk på att SMS-kostnader tillkommer via Twilio, och att telefonnummer måste hanteras enligt GDPR.
Session management och cookies
Supabase SSR hanterar sessioner via cookies automatiskt, men det är viktigt att förstå hur det fungerar. När en användare loggar in får de en access-token (JWT) och en refresh-token. Access-token är kortlivad (vanligtvis 1 timme) medan refresh-token lever längre (30 dagar som standard). Supabase-klienten förnyar automatiskt access-token när den löper ut.
För att hämta den inloggade användaren i en serverkomponent:
| 1 | import { createClient } from "@/utils/supabase/server" |
| 2 | |
| 3 | export default async function Page() { |
| 4 | const supabase = createClient() |
| 5 | const { data: { user } } = await supabase.auth.getUser() |
| 6 | if (!user) return <p>Ej inloggad</p> |
| 7 | return <p>Välkommen, {user.email}</p> |
| 8 | } |
I klientkomponenter använder du supabase.auth.getSession() och prenumererar på förändringar med supabase.auth.onAuthStateChange() för att hålla UI:t uppdaterat.
Skyddade routes och middleware
För att skydda routes använder du Next.js middleware tillsammans med Supabase-klienten. Skapa middleware.ts i rotmappen:
| 1 | import { createServerClient } from "@supabase/ssr" |
| 2 | import { NextResponse } from "next/server" |
| 3 | |
| 4 | export async function middleware(request) { |
| 5 | const supabase = createServerClient( |
| 6 | process.env.NEXT_PUBLIC_SUPABASE_URL!, |
| 7 | process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, |
| 8 | { cookies: { get: (name) => request.cookies.get(name)?.value } } |
| 9 | ) |
| 10 | const { data: { user } } = await supabase.auth.getUser() |
| 11 | if (!user && request.nextUrl.pathname.startsWith("/dashboard")) { |
| 12 | return NextResponse.redirect(new URL("/auth/login", request.url)) |
| 13 | } |
| 14 | return NextResponse.next() |
| 15 | } |
Middlewären kontrollerar om användaren är inloggad för varje request till skyddade routes. Omdirigera oautentiserade användare till login-sidan. Du kan också kontrollera användarens roll här för att skydda admin-routes.
Row Level Security — databasnivåns åtkomstkontroll
RLS är Supabases säkerhetslager direkt i PostgreSQL. Du skriver policies som avgör vem som får läsa, skriva, uppdatera eller ta bort data i varje tabell. När en användare är inloggad innehåller deras JWT deras auth.uid() som du kan använda i policies:
| 1 | -- Alla kan läsa publika inlägg |
| 2 | CREATE POLICY "Publika inlägg syns för alla" |
| 3 | ON posts FOR SELECT |
| 4 | USING (true); |
| 5 | |
| 6 | -- Användare kan bara redigera sina egna inlägg |
| 7 | CREATE POLICY "Användare redigerar egna inlägg" |
| 8 | ON posts FOR UPDATE |
| 9 | USING (auth.uid() = user_id) |
| 10 | WITH CHECK (auth.uid() = user_id); |
RLS är aktiverat per tabell och du måste aktivera det explicit (ALTER TABLE posts ENABLE ROW LEVEL SECURITY). Utan RLS har din användare klientnyckel (anon key) tillgång till all data — med RLS är data skyddad även om någon får tag i nyckeln.
Rollbaserad åtkomstkontroll
För rollbaserad åtkomst (RBAC) använder du en anpassad user_roles-tabell eller Supabases raw_user_meta_data. Skapa en tabell för roller och koppla till auth.users:
| 1 | CREATE TABLE user_roles ( |
| 2 | id BIGSERIAL PRIMARY KEY, |
| 3 | user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE, |
| 4 | role TEXT NOT NULL CHECK (role IN ('admin', 'editor', 'viewer')), |
| 5 | UNIQUE(user_id) |
| 6 | ); |
I dina RLS-policies kontrollerar du rollen:
| 1 | CREATE POLICY "Bara admin kan ta bort inlägg" |
| 2 | ON posts FOR DELETE |
| 3 | USING ( |
| 4 | auth.uid() IN ( |
| 5 | SELECT user_id FROM user_roles WHERE role = 'admin' |
| 6 | ) |
| 7 | ); |
Roller kan också sättas i raw_app_meta_data via Supabase Admin API, vilket är bra för enklare RBAC utan extra tabeller.
Användarhantering med Admin API
Supabase Admin API (service_role key — använd bara från betrodd backend) låter dig skapa, uppdatera och ta bort användare programmatiskt. Det är användbart för admin-paneler, import av användare, eller automatiserad användarhantering:
| 1 | import { createClient } from "@supabase/supabase-js" |
| 2 | const admin = createClient(SUPABASE_URL, SERVICE_ROLE_KEY, { |
| 3 | auth: { autoRefreshToken: false, persistSession: false } |
| 4 | }) |
| 5 | const { data, error } = await admin.auth.admin.createUser({ |
| 6 | email: "user@example.com", |
| 7 | password: "säkertLösenord123", |
| 8 | email_confirm: true, |
| 9 | user_metadata: { role: "editor" } |
| 10 | }) |
Använd alltid service_role-nyckeln på serversidan, aldrig i klientkod. Skydda admin-panelen med en extra kontroll av användarens roll för att förhindra obehörig åtkomst till Admin API.
Integration med Next.js — komplett flöde
Ett komplett autentiseringsflöde med Supabase och Next.js App Router ser ut så här: användaren besöker en skyddad sida → middleware kontrollerar sessionen → om ej inloggad, omdirigera till login → användaren loggar in med email/OAuth → Supabase skapar en session och sätter cookies → middleware känner igen sessionen och tillåter åtkomst → serverkomponenten hämtar användaren via getUser() och visar skyddat innehåll.
Skapa en app/auth/callback/route.ts som hanterar OAuth-callbacken från Supabase. Anropa supabase.auth.exchangeCodeForSession() för att byta den tillfälliga koden mot en riktig session. Omdirigera sedan användaren till dashboarden eller den sida de försökte nå från början.
Felsökning och vanliga problem
Autentiseringsproblem i Supabase har ofta enkla orsaker. Kontrollera att alla miljövariabler är korrekt inställda — felaktig URL eller anon key är den vanligaste orsaken till att auth misslyckas. Kontrollera att rätt redirect-URL:er är konfigurerade i Supabase Dashboard under Authentication > Settings. Om OAuth inte fungerar, verifiera klient-ID och hemlighet hos providern.
Session som inte sparas beror ofta på cookie-konfiguration. Supabase SSR kräver att cookies hanteras korrekt — kontrollera att cookieOptions har rätt domain, path och sameSite. För lokalt utveckling med localhost måste secure vara false. Kontrollera också att din Supabase-instans inte är i pause-läge (gratisplanen pausas efter inaktivitet).
Sammanfattning
Supabase Auth är en kraftfull, komplett autentiseringslösning som tar dig från enkel inloggning till avancerad RBAC utan att du behöver bygga egen backend. Kombinationen av email/password, OAuth, magic link, RLS och sömlös Next.js-integration gör det till ett av de bästa alternativen för svenska utvecklare 2026. Nyckeln till en säker implementation är att alltid använda RLS, aldrig exponera service_role-nyckeln på klienten, och noggrant konfigurera dina OAuth-providers och redirect-URL:er.
“Supabase Auth med Row Level Security är den mest säkra och produktiva autentiseringslösningen för fullstack-applikationer 2026.”
- Simon Axelsson
Vanliga frågor
- Är Supabase Auth gratis?
- Supabase Auth är gratis upp till 50 000 aktiva användare per månad på Free Tier. Därefter kostar det från $0,00325 per aktiv användare. OAuth-providers och email ingår i gratiskvoten. SMS-autentisering kostar extra via Twilio. För svenska startups räcker Free Tier långt.
- Kan jag använda Supabase Auth med egen backend?
- Ja. Supabase Auth är fristående från resten av Supabase. Du kan använda bara Auth och koppla din egen backend via REST API eller genom att validera JWT-tokens i din backend. Supabase publicerar JWKS-endpointen för token-validering i dina egna tjänster.
- Hur säker är Supabase Auth?
- Supabase Auth använder branschstandarder: JWT (RS256), PKCE för OAuth, bcrypt för lösenordshashning, och rate limiting på alla endpoints. Sessioner har automatisk token-rotation och förnyelse. För högsta säkerhet, aktivera MFA (Multi-Factor Authentication) som Supabase stöder via TOTP.
- Fungerar Supabase Auth med Azure AD?
- Ja, Supabase stöder Azure AD som OAuth-provider. Konfigurera en app-registrering i Azure Portal, ange rätt redirect-URL:er och klient-ID/hemlighet i Supabase Dashboard. Detta är särskilt användbart för svenska företag som använder Microsoft 365 och vill låta användare logga in med sina jobbkonton.
- Hur migrerar jag användare från en annan auth-lösning?
- Använd Supabase Admin API för att skapa användare med fördefinierade lösenordshashar (om du har tillgång till hasharna) eller låt användare återställa sina lösenord via email. Supabase har en guide för migrering från Firebase, Auth0 och andra plattformar. Planera migreringen noggrant för att undvika att användare blir utlåsta.
Om författaren
Simon Axelsson är senior IT-konsult och grundare av SIAX Technology AB. Han hjälper nordiska företag med molninfrastruktur, dataplattformar och AI-automation.
Fler artiklar av Simon
