Memperbarui Klaim Cookie Sesi Setelah Verifikasi Email Pengguna di Firebase

Menangani Cookie Sesi dan Verifikasi Email dengan Firebase Authentication

Saat mengembangkan aplikasi web yang memprioritaskan rendering sisi server dan pengambilan data, seperti aplikasi yang dibangun dengan NextJS dan React Server Components, mengelola autentikasi pengguna secara efisien menjadi sangat penting. Memanfaatkan Firebase Authentication dengan cookie sesi menawarkan solusi yang tangguh, terutama untuk aplikasi yang memerlukan waktu sesi yang lebih lama. Pendekatan ini, yang dirinci dalam dokumentasi Firebase, menggunakan cookie sesi untuk autentikasi, sehingga memungkinkan sesi berlangsung hingga 14 hari, jauh lebih lama daripada umur ID token default. Implementasinya melibatkan pembuatan cookie sesi dari ID token pengguna saat login atau mendaftar dan menyimpannya sebagai cookie HttpOnly, memastikan sesi pengguna yang aman dan persisten.

Namun, metode ini menemui tantangan saat mengintegrasikan verifikasi email. Setelah pengguna mendaftar menggunakan email dan kata sandi dan memverifikasi email mereka melalui tautan, email terverifikasi bidang dalam cookie sesinya tetap tidak berubah, mencerminkan statusnya yang belum terverifikasi. Perbedaan ini muncul karena cookie sesi, setelah disetel, tidak diperbarui secara otomatis untuk mencerminkan perubahan dalam status autentikasi pengguna, seperti verifikasi email. Mengatasi masalah ini memerlukan strategi yang memungkinkan cookie sesi di-refresh atau diperbarui tanpa mengorbankan keamanan atau pengalaman pengguna, terutama mengingat keterbatasan Firebase pada persistensi token dan manajemen sesi.

Memahami Mekanisme Penyegaran Cookie Sesi

Skrip backend yang disediakan memanfaatkan Node.js dan Firebase Admin SDK untuk menangani proses penting dalam menyegarkan cookie sesi pengguna setelah email mereka diverifikasi. Operasi ini dimulai dengan menyiapkan server Express.js dan mengintegrasikan middleware parser cookie untuk mengelola cookie HTTP secara efisien. Fungsi admin.initializeApp() menginisialisasi aplikasi Firebase dengan kredensial sisi server, sehingga memungkinkan aplikasi berinteraksi dengan layanan Firebase dengan aman. Fungsi middleware, checkAuth, menggunakan admin.auth().verifySessionCookie() untuk memverifikasi cookie sesi yang dikirim bersama permintaan klien. Verifikasi ini sangat penting untuk memastikan bahwa hanya permintaan terotentikasi yang dilanjutkan ke rute atau operasi sensitif. Bagian penting dari skrip adalah rute '/refresh-session', yang dapat diminta oleh setiap pengguna terverifikasi. Atas permintaan ini, middleware mengautentikasi pengguna, dan kemudian token khusus baru dibuat menggunakan admin.auth().createCustomToken(). Token ini penting untuk membuat cookie sesi baru dengan klaim yang diperbarui, termasuk status verifikasi email.

Cookie sesi yang baru dibuat dikirim kembali ke klien dengan waktu kedaluwarsa yang diperbarui, memastikan pengguna tetap login tanpa risiko keamanan apa pun. Proses ini mengatasi masalah awal bidang email_verified yang tidak diperbarui setelah verifikasi email. Di sisi klien, cuplikan JavaScript memicu proses penyegaran sesi. Ia mendengarkan peristiwa tertentu (seperti klik tombol) dan membuat permintaan GET ke titik akhir '/refresh-session'. Fungsi ambil() sangat penting di sini, karena menangani permintaan jaringan dan memproses respons. Jika penyegaran sesi berhasil, klien akan diberitahu, dan halaman dapat dimuat ulang untuk mencerminkan status terverifikasi pengguna. Metode ini memastikan bahwa pengalaman pengguna tetap lancar, tanpa mengharuskan pengguna untuk mengautentikasi ulang secara manual atau mempertahankan ID Token di sisi klien setelah mendaftar, mengatasi tantangan dalam mempertahankan status otentikasi yang diperbarui dan aman di seluruh lingkungan klien dan server.

// Backend: Node.js with Firebase Admin SDK
const admin = require('firebase-admin');
const express = require('express');
const cookieParser = require('cookie-parser');
const app = express();
app.use(cookieParser());
// Initialize Firebase Admin
admin.initializeApp({credential: admin.credential.applicationDefault()});
// Middleware to check authentication
const checkAuth = async (req, res, next) => {
  try {
    const sessionCookie = req.cookies.__session || '';
    const decodedClaims = await admin.auth().verifySessionCookie(sessionCookie, true);
    req.decodedClaims = decodedClaims;
    next();
  } catch (error) {
    res.status(401).send('Unauthorized');
  }
};
// Route to refresh session cookie
app.get('/refresh-session', checkAuth, async (req, res) => {
  const { uid } = req.decodedClaims;
  const newToken = await admin.auth().createCustomToken(uid);
  const expiresIn = 60 * 60 * 24 * 5 * 1000; // 5 days
  const sessionCookie = await admin.auth().createSessionCookie(newToken, { expiresIn });
  const options = { maxAge: expiresIn, httpOnly: true, secure: true };
  res.cookie('__session', sessionCookie, options);
  res.end('Session refreshed');
});
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

// Client-side: JavaScript to trigger session refresh
document.addEventListener('DOMContentLoaded', function() {
  const refreshButton = document.getElementById('refresh-session-button');
  refreshButton.addEventListener('click', async () => {
    try {
      const response = await fetch('/refresh-session', { method: 'GET' });
      if (response.ok) {
        alert('Session has been refreshed. Please reload the page.');
      } else {
        throw new Error('Failed to refresh session');
      }
    } catch (error) {
      console.error('Error:', error);
      alert('Error refreshing session. See console for details.');
    }
  });
});

Meningkatkan Keamanan dan Pengalaman Pengguna dengan Firebase Session Cookies

Mengintegrasikan Firebase Authentication dalam aplikasi, terutama yang dibangun dengan NextJS dan React Server Components, memerlukan pemahaman yang lebih mendalam tentang manajemen sesi dan keamanan. Mekanisme cookie sesi Firebase menawarkan alternatif menarik dibandingkan autentikasi berbasis token tradisional, khususnya untuk aplikasi yang memerlukan rendering sisi server dan sesi pengguna yang diperpanjang. Pilihan cookie sesi dibandingkan ID token didorong oleh masa berlakunya yang lebih lama, yang dapat diatur hingga maksimal 14 hari, sehingga mengurangi frekuensi autentikasi ulang pengguna dibandingkan dengan penyegaran setiap jam yang diperlukan oleh ID token. Pendekatan ini meningkatkan pengalaman pengguna dengan menjaga kesinambungan sesi bahkan dalam skenario di mana klien tidak aktif untuk waktu yang lama.

Selain kenyamanan, cookie sesi yang dikonfigurasi sebagai HttpOnly menambahkan lapisan keamanan tambahan dengan membuatnya tidak dapat diakses oleh skrip sisi klien, sehingga mengurangi risiko serangan skrip lintas situs (XSS). Namun, pengaturan aman ini menimbulkan tantangan, khususnya dalam memperbarui cookie sesi setelah verifikasi email pengguna. Karena klaim email_verified dalam cookie sesi tidak diperbarui secara otomatis setelah verifikasi email karena umur cookie yang panjang dan properti HttpOnly, pengembang harus menerapkan mekanisme untuk menyegarkan atau membuat ulang cookie sesi. Hal ini memastikan bahwa status autentikasi pengguna tercermin secara akurat, dan kontrol akses berdasarkan status verifikasi email dapat diterapkan dengan tepat.