feat(auth): migrate to secure httpOnly cookie-based authentication

- Implement Refresh Token rotation and session persistence in dashboard-api
- Add centralized Axios 'api' utility with automatic 401 token refresh logic
- Refactor AuthContext to remove localStorage dependency and add session verification
- Update all 15+ frontend pages/components to use the new session-based API utility
- Fix session persistence race condition in ProtectedRoute on page refresh
- Securely clear cookies and server-side tokens on logout
- Remove manual JWT parsing and Authorization header management from the dashboard
- Update Developer model to support refresh token storage

Author: yash-pouranik

apps/dashboard-api/package.json

@@ -8,11 +8,12 @@
     "start": "node src/app.js"
   },
   "dependencies": {
-    "@urbackend/common": "*",
     "@kiroo/sdk": "^0.1.2",
     "@supabase/supabase-js": "^2.84.0",
+    "@urbackend/common": "*",
     "bcryptjs": "^3.0.2",
     "bullmq": "^5.70.1",
+    "cookie-parser": "^1.4.7",
     "cors": "^2.8.5",
     "dotenv": "^17.2.3",
     "express": "^5.1.0",
@@ -26,4 +27,3 @@
     "zod": "^4.1.13"
   }
 }
-

apps/dashboard-api/src/app.js

@@ -11,6 +11,7 @@ if (process.env.NODE_ENV !== 'test') {
 const express = require('express')
 const mongoose = require('mongoose')
 const cors = require('cors')
+const cookieParser = require('cookie-parser');
 const rateLimit = require('express-rate-limit');
 const app = express();
 app.set('trust proxy', 1);
@@ -24,6 +25,7 @@ const { emailQueue, authEmailQueue } = require('@urbackend/common');
 
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
+app.use(cookieParser());
 
 const dashboardLimiter = rateLimit({
     windowMs: 15 * 60 * 1000,
@@ -46,7 +48,8 @@ const whitelist = (function() {
 
 
 app.use(cors({
-  origin: whitelist.get(),
+    origin: whitelist.get(),
+    credentials: true,
 }));
 
 

apps/dashboard-api/src/controllers/auth.controller.js

@@ -15,9 +15,55 @@ const {
     verifyOtpSchema
 } = require("@urbackend/common");
 
-const JWT_EXPIRES_IN = '7d';
+const ACCESS_TOKEN_EXPIRES_IN = '15m';
+const REFRESH_TOKEN_EXPIRES_IN = '7d';
 const OTP_MAX_ATTEMPTS = 5;
 
+const sendTokenResponse = async (user, statusCode, res) => {
+    const accessToken = jwt.sign(
+        { _id: user._id, isVerified: user.isVerified, maxProjects: user.maxProjects },
+        process.env.JWT_SECRET,
+        { expiresIn: ACCESS_TOKEN_EXPIRES_IN }
+    );
+
+    const refreshToken = jwt.sign(
+        { _id: user._id },
+        process.env.JWT_REFRESH_SECRET || process.env.JWT_SECRET,
+        { expiresIn: REFRESH_TOKEN_EXPIRES_IN }
+    );
+
+    // Save refresh token to DB (Rotation)
+    user.refreshToken = refreshToken;
+    await user.save();
+
+    const cookieOptions = {
+        httpOnly: true,
+        expires: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 7 days
+        secure: process.env.NODE_ENV === 'production',
+        sameSite: 'Strict' // Use Strict for better CSRF protection
+    };
+
+    if (process.env.NODE_ENV === 'production') {
+        cookieOptions.secure = true;
+    }
+
+    res.status(statusCode)
+        .cookie('accessToken', accessToken, { 
+            ...cookieOptions, 
+            expires: new Date(Date.now() + 15 * 60 * 1000) // 15 mins
+        })
+        .cookie('refreshToken', refreshToken, cookieOptions)
+        .json({
+            success: true,
+            user: {
+                _id: user._id,
+                email: user.email,
+                isVerified: user.isVerified,
+                maxProjects: user.maxProjects
+            }
+        });
+};
+
 async function createAndStoreOtp(userId) {
     const otp = crypto.randomInt(100000, 1000000).toString();
 
@@ -86,13 +132,7 @@ module.exports.login = async (req, res) => {
         const validPass = await bcrypt.compare(password, dev.password);
         if (!validPass) return res.status(400).json({ error: "Invalid password" });
 
-        // JWT EXPIRE
-        const token = jwt.sign(
-            { _id: dev._id, isVerified: dev.isVerified, maxProjects: dev.maxProjects },
-            process.env.JWT_SECRET,
-            { expiresIn: JWT_EXPIRES_IN }
-        );
-        res.json({ token });
+        await sendTokenResponse(dev, 200, res);
     } catch (err) {
         if (err instanceof z.ZodError) {
             return res.status(400).json({
@@ -188,14 +228,7 @@ module.exports.verifyOtp = async (req, res) => {
         existingUser.isVerified = true;
         await existingUser.save();
 
-        // JWT
-        const token = jwt.sign(
-            { _id: existingUser._id, isVerified: true, maxProjects: existingUser.maxProjects },
-            process.env.JWT_SECRET,
-            { expiresIn: JWT_EXPIRES_IN }
-        );
-
-        res.status(200).json({ message: "OTP verified successfully", token });
+        await sendTokenResponse(existingUser, 200, res);
     } catch (err) {
         if (err.status) return res.status(err.status).json({ error: err.message });
         if (err instanceof z.ZodError) return res.status(400).json({ error: err.errors });
@@ -250,4 +283,66 @@ module.exports.resetPassword = async (req, res) => {
         console.error(err);
         res.status(500).json({ error: "Internal Server Error" });
     }
-}
+}
+
+// LOGOUT
+module.exports.logout = async (req, res) => {
+    try {
+        if (req.user) {
+            const user = await Developer.findById(req.user._id);
+            if (user) {
+                user.refreshToken = null;
+                await user.save();
+            }
+        }
+
+        res.cookie('accessToken', 'none', {
+            expires: new Date(Date.now() + 10 * 1000),
+            httpOnly: true,
+        });
+        res.cookie('refreshToken', 'none', {
+            expires: new Date(Date.now() + 10 * 1000),
+            httpOnly: true,
+        });
+
+        res.status(200).json({ success: true, message: "Logged out successfully" });
+    } catch (err) {
+        console.error(err);
+        res.status(500).json({ error: "Internal Server Error" });
+    }
+};
+
+// REFRESH TOKEN
+module.exports.refreshToken = async (req, res) => {
+    try {
+        const refreshToken = req.cookies.refreshToken;
+
+        if (!refreshToken) {
+            return res.status(401).json({ error: "No refresh token provided" });
+        }
+
+        const decoded = jwt.verify(refreshToken, process.env.JWT_REFRESH_SECRET || process.env.JWT_SECRET);
+        const user = await Developer.findById(decoded._id);
+
+        if (!user || user.refreshToken !== refreshToken) {
+            return res.status(403).json({ error: "Invalid refresh token" });
+        }
+
+        await sendTokenResponse(user, 200, res);
+    } catch (err) {
+        console.error(err);
+        res.status(403).json({ error: "Invalid or expired refresh token" });
+    }
+};
+
+// GET ME
+module.exports.getMe = async (req, res) => {
+    try {
+        const user = await Developer.findById(req.user._id).select("-password -refreshToken");
+        if (!user) return res.status(404).json({ error: "User not found" });
+        res.json({ success: true, user });
+    } catch (err) {
+        console.error(err);
+        res.status(500).json({ error: "Internal Server Error" });
+    }
+};

apps/dashboard-api/src/middlewares/authMiddleware.js

@@ -1,21 +1,20 @@
 const jwt = require('jsonwebtoken');
 
 module.exports = function (req, res, next) {
-    // Retrieve the Authorization header from the request
-    const authHeader = req.header('Authorization');
+    // Check for token in cookies (Primary for Web)
+    let token = req.cookies && req.cookies.accessToken;
 
-    // Check if the Authorization header exists
-    if (!authHeader) {
-        return res.status(401).send('Access Denied: No Token Provided');
+    // Fallback to Authorization header (For CLI/API)
+    if (!token) {
+        const authHeader = req.header('Authorization');
+        if (authHeader && authHeader.startsWith('Bearer ')) {
+            token = authHeader.split(' ')[1];
+        }
     }
 
-    // Extract the actual token by removing the "Bearer " prefix
-    // spliting the header value by space and take the second part
-    const token = authHeader.split(' ')[1];
-
-    // If token is missing after splitting, the format is invalid
+    // Check if any token was provided
     if (!token) {
-        return res.status(401).send('Access Denied: Malformed Token Format');
+        return res.status(401).json({ error: 'Access Denied: No Token Provided' });
     }
 
     try {

apps/dashboard-api/src/routes/auth.js

@@ -9,7 +9,10 @@ const {
     sendOtp,
     verifyOtp,
     forgotPassword,
-    resetPassword
+    resetPassword,
+    logout,
+    refreshToken,
+    getMe
 } = require('../controllers/auth.controller');
 
 
@@ -46,4 +49,11 @@ router.post('/verify-otp', verifyOtp);
 router.post('/forgot-password', forgotPassword);
 router.post('/reset-password', resetPassword);
 
+// REFRESH & LOGOUT
+router.post('/refresh-token', refreshToken);
+router.post('/logout', authorization, logout);
+
+// GET ME
+router.get('/me', authorization, getMe);
+
 module.exports = router;

apps/web-dashboard/src/components/ProtectedRoute.jsx

@@ -3,7 +3,22 @@ import { useAuth } from '../context/AuthContext';
 
 // This component takes other components as children
 const ProtectedRoute = ({ children }) => {
-    const { isAuthenticated } = useAuth();
+    const { isAuthenticated, isLoading } = useAuth();
+
+    if (isLoading) {
+        return (
+            <div style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: '100vh',
+                backgroundColor: 'var(--color-bg-main)',
+                color: 'var(--color-text-main)'
+            }}>
+                <div className="loader">Loading Session...</div>
+            </div>
+        );
+    }
 
     // If not authenticated, redirect to login page
     if (!isAuthenticated) {

apps/web-dashboard/src/context/AuthContext.jsx

@@ -1,34 +1,44 @@
-import { createContext, useState, useContext } from 'react';
+import { createContext, useState, useContext, useEffect } from 'react';
+import api from '../utils/api';
 
 const AuthContext = createContext(null);
 
 export const AuthProvider = ({ children }) => {
-    const [token, setToken] = useState(localStorage.getItem('devToken') || null);
-    const [user, setUser] = useState(() => {
+    const [user, setUser] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        const checkAuth = async () => {
+            try {
+                const response = await api.get('/api/auth/me');
+                if (response.data.success) {
+                    setUser(response.data.user);
+                }
+            } catch (err) {
+                console.error("Not authenticated:", err.message);
+                setUser(null);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+        checkAuth();
+    }, []);
+
+    const logout = async () => {
         try {
-            const storedUser = localStorage.getItem('devUser');
-            return storedUser ? JSON.parse(storedUser) : null;
-        } catch {
-            return null;
+            await api.post('/api/auth/logout');
+        } catch (err) {
+            console.error("Logout failed:", err);
+        } finally {
+            setUser(null);
         }
-    });
-
-    // 1. Move logout here (before useEffect)
-    const logout = () => {
-        setUser(null);
-        setToken(null);
-        localStorage.removeItem('devToken');
-        localStorage.removeItem('devUser');
     };
 
-    const login = (userData, authToken) => {
+    const login = (userData) => {
         setUser(userData);
-        setToken(authToken);
-        localStorage.setItem('devToken', authToken);
-        localStorage.setItem('devUser', JSON.stringify(userData));
     };
 
-    const value = { user, token, login, logout, isAuthenticated: !!token };
+    const value = { user, login, logout, isAuthenticated: !!user, isLoading };
 
 
     return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;

apps/web-dashboard/src/pages/AdminCreateRelease.jsx

@@ -1,13 +1,13 @@
 import { useState, useEffect } from 'react';
-import axios from 'axios';
-import { API_URL, ADMIN_EMAIL } from '../config';
+import api from '../utils/api';
+import { ADMIN_EMAIL } from '../config';
 import { useAuth } from '../context/AuthContext';
 import { useNavigate } from 'react-router-dom';
 import toast from 'react-hot-toast';
 import { Send, ArrowLeft, AlertCircle } from 'lucide-react';
 
 export default function AdminCreateRelease() {
-    const { user, token } = useAuth();
+    const { user } = useAuth();
     const navigate = useNavigate();
     const [loading, setLoading] = useState(false);
     const [formData, setFormData] = useState({
@@ -35,9 +35,7 @@ export default function AdminCreateRelease() {
         const loadToast = toast.loading("Publishing release and queuing emails...");
 
         try {
-            const res = await axios.post(`${API_URL}/api/releases`, formData, {
-                headers: { Authorization: `Bearer ${token}` }
-            });
+            const res = await api.post(`/api/releases`, formData);
             toast.dismiss(loadToast);
             toast.success(res.data.message);
             navigate('/releases');