Mengatasi Session Hilang Setelah Refresh di Supabase Auth

 

Kalau kamu sedang membangun aplikasi dengan Supabase Auth, lalu setiap kali halaman di-refresh user langsung logout seperti kenangan mantan yang tiba-tiba hilang begitu saja…
Tenang, kamu tidak sendirian 

Masalah session hilang setelah refresh adalah salah satu problem paling sering dialami developer, terutama yang memakai Supabase Auth + JavaScript/Flutter/React/Next.js.
Tapi jangan panik! Pada artikel ini kita akan bahas:

• Kenapa session hilang setelah refresh

• Apa penyebab sebenarnya

• Cara memperbaikinya

• Best practice agar tidak terjadi lagi

• Tips khusus untuk React/Next.js/Flutter

Siap? Mari kita selesaikan misteri session yang hilang ini 

 

Kenapa Session Bisa Hilang Setelah Refresh?

Supabase sebenarnya sudah punya mekanisme auto-refresh dan auto-persist session.
Jadi secara teori, ketika user login:

• Supabase menyimpan session (access token + refresh token)

• Ketika halaman direfresh, session akan diambil lagi

• Jika access token expired, dia otomatis refresh token

• Jadi user tetap login tanpa merasa “terlempar”

Lalu kenapa bisa hilang?
Jawabannya biasanya salah satu dari tiga:

 

Kamu Tidak Mengaktifkan Persist Session

Secara default, sesi harusnya tersimpan.
Tapi kalau kamu menginisiasi Supabase Client seperti ini:

const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);

…tanpa konfigurasi tambahan, maka tergantung framework, session tidak selalu otomatis tersimpan.

 

Proyek Kamu Menggunakan SSR (Next.js) Tanpa Handler yang Benar

Next.js + Supabase adalah pasangan manis...
...kalau kamu pakai konfigurasi yang benar.

Banyak developer salah mengelola:

• Session di server

• Session di client

• Cookies Supabase

• Auth Helpers

Hasilnya: refresh halaman = session lenyap

 

Kamu Menggunakan Storage Sendiri (localStorage)

Ada developer yang mencoba menyimpan token sendiri…

STOP.

Supabase sudah melakukannya secara aman.
Kalau kamu override, jangan kaget kalau session tidak kembali saat refresh.

 

Cara Memperbaiki Session yang Hilang Setelah Refresh

Sekarang kita masuk langkah penyelesaiannya.

Pastikan Persist Session Aktif

Untuk JS, gunakan konfigurasi ini:

const supabase = createClient(SUPABASE_URL, SUPABASE_KEY, {
  auth: {
    persistSession: true,
    autoRefreshToken: true,
    detectSessionInUrl: true
  }
});

Penjelasan:

• persistSession: true
  Menyimpan session ke localStorage (browser).

• autoRefreshToken: true
  Refresh otomatis jika token expired.

• detectSessionInUrl: true
  Untuk login dari magic link / OAuth.

Kalau salah satu dimatikan → session gampang hilang.

Jika Pakai React, Gunakan Supabase Auth Helpers

Tanpa Auth Helpers, React tidak otomatis membaca session dari storage.

Cara benar:

npm install @supabase/auth-helpers-react @supabase/auth-helpers-nextjs

Di file _app.js:

import { SessionContextProvider } from '@supabase/auth-helpers-react'
import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'

export default function App({ Component, pageProps }) {
  const [supabase] = useState(() => createBrowserSupabaseClient())

  return (
    <SessionContextProvider supabaseClient={supabase}>
      <Component {...pageProps} />
    </SessionContextProvider>
  )
}

Dengan ini:

• Session otomatis tersimpan

• Di-refresh tidak hilang

• Auto refresh berjalan

Solusi Untuk Next.js 13/14 App Router

Pastikan kamu pakai Supabase Auth Helpers versi App Router.

Middleware:

// middleware.js
import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs';

export async function middleware(req) {
  const res = NextResponse.next();
  const supabase = createMiddlewareClient({ req, res });

  await supabase.auth.getSession();

  return res;
}

Server Component:

const supabase = createServerComponentClient({ cookies })
const { data: { session }} = await supabase.auth.getSession()

Client Component:

const supabase = createBrowserSupabaseClient()

Kalau tidak pakai ini → session selalu kosong.

Supabase Session di Flutter

Jika kamu pakai Flutter, pastikan:

Wajib pakai supabase_flutter package

dependencies:
  supabase_flutter: ^2.0.0

Inisialisasi:

await Supabase.initialize(
  url: supabaseUrl,
  anonKey: supabaseKey,
  authOptions: const FlutterAuthClientOptions(
    autoRefreshToken: true,
    persistSession: true,
  ),
);

Setelah itu session:

• Tersimpan otomatis

• Kembali setelah restart app

• Tidak hilang setelah hot reload

Kalau session tetap hilang, cek:

Supabase.instance.client.auth.currentSession

Jangan Menghapus Session Secara Tidak Sengaja

Banyak developer tanpa sadar menambahkan:

supabase.auth.signOut();

Di:

• useEffect React

• OnInit Flutter

• Middleware

• API handler tertentu

• Routing guard

Cek apakah ada signOut tersembunyi.

Hapus Token Lama yang Rusak

Kadang localStorage menyimpan token rusak.
Solusi:

localStorage.removeItem('supabase.auth.token');

Refresh → login ulang → problem hilang.

Cek Domain Storage untuk Cookies

Kalau kamu memakai:

• Domain custom

• Subdomain

• Reverse proxy

• Cloudflare / Nginx

Cookies bisa salah domain → session tidak terbaca.

Pastikan:

• Domain sama

• Cookie tidak diberi flag Secure saat lokal

• Tidak terblokir CORS

   

Tips Anti-Error Agar Session Tidak Hilang Lagi

Berikut best practice agar hidup lebih damai:

Selalu pakai Supabase Auth Client resmi

Jangan menyimpan session manual.

Gunakan Layout Provider untuk Membungkus App

Agar context tidak reset.

Jangan melakukan redirect sebelum Supabase selesai membaca session

Kesalahan umum di React:

if (!session) router.push('/login')

Masalahnya: session masih loading → dianggap null → logout paksa.

Solusi:

if (session === undefined) return 'Loading...'

Jangan Buat Client Baru Setiap Render

Ini fatal.

Salah:

const supabase = createClient(...)

Benar:

useState(() => createClient(...))

Jangan simpan token pakai cookies buatan sendiri

Biarkan Supabase yang atur.

 

Contoh Implementasi Aman (Paling Direkomendasikan)

Di React:

import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
import { SessionContextProvider } from '@supabase/auth-helpers-react'

function App({ Component, pageProps }) {
  const [supabase] = useState(() => createBrowserSupabaseClient())

  return (
    <SessionContextProvider supabaseClient={supabase}>
      <Component {...pageProps} />
    </SessionContextProvider>
  )
}

Simpel, aman, dan anti-session hilang.

Masalah "session hilang setelah refresh di Supabase Auth" biasanya bukan bug, tetapi:

• Konfigurasi yang belum lengkap

• Salah inisialisasi client

• Salah penanganan SSR (Next.js)

• Fitur persistSession tidak aktif

• Context React reset

• Token lama rusak

Dengan mengikuti langkah-langkah di artikel ini, aplikasimu akan:

•  Session bertahan meskipun halaman direfresh
•  Auto refresh token berjalan
•  Login tidak perlu diulang
•  User experience meningkat drastis

Dan tentu saja:
Tidak ada lagi sesi yang hilang seperti kenangan pahit