create-stackr 0.2.0

package/templates/base/web/src/lib/auth/sessions.ts.ejs

@@ -0,0 +1,135 @@
+'use server';
+
+import { revalidatePath } from 'next/cache';
+import { getSessionToken } from './cookies';
+import { buildAuthHeaders } from './actions';
+import { AUTH_CONFIG } from './config';
+
+export interface SessionInfo {
+  id: string;
+  userId: string;
+  token: string;
+  expiresAt: string;
+  createdAt: string;
+  updatedAt: string;
+  ipAddress?: string;
+  userAgent?: string;
+}
+
+/**
+ * List all active sessions for the current user
+ */
+export async function listSessions(): Promise<{
+  sessions: SessionInfo[];
+}> {
+  const sessionToken = await getSessionToken();
+
+  if (!sessionToken) {
+    return { sessions: [] };
+  }
+
+  try {
+    const response = await fetch(`${AUTH_CONFIG.backendUrl}/api/auth/list-sessions`, {
+      method: 'GET',
+      headers: await buildAuthHeaders(),
+      cache: 'no-store',
+    });
+
+    if (!response.ok) {
+      console.error('Failed to list sessions:', response.status);
+      return { sessions: [] };
+    }
+
+    const data = await response.json();
+
+    // Better Auth returns sessions array
+    return {
+      sessions: data.sessions || data || [],
+    };
+  } catch (error) {
+    console.error('List sessions error:', error);
+    return { sessions: [] };
+  }
+}
+
+/**
+ * Revoke a specific session by its ID
+ * Uses BFF endpoint that looks up the token and calls Better Auth natively
+ */
+export async function revokeSession(sessionId: string): Promise<{
+  success: boolean;
+  error?: string;
+}> {
+  const sessionToken = await getSessionToken();
+
+  if (!sessionToken) {
+    return { success: false, error: 'Not authenticated' };
+  }
+
+  try {
+    const response = await fetch(`${AUTH_CONFIG.backendUrl}/api/auth/revoke-session-by-id`, {
+      method: 'POST',
+      headers: await buildAuthHeaders(),
+      body: JSON.stringify({ sessionId }),
+      cache: 'no-store',
+    });
+
+    const responseData = await response.json().catch(() => ({}));
+
+    if (!response.ok) {
+      return {
+        success: false,
+        error: responseData.message || responseData.error || 'Failed to revoke session',
+      };
+    }
+
+    // Revalidate the sessions page to reflect the change
+    revalidatePath('/settings/sessions');
+
+    return { success: true };
+  } catch (error) {
+    console.error('Revoke session error:', error);
+    return { success: false, error: 'An error occurred' };
+  }
+}
+
+/**
+ * Revoke all other sessions (keep current session active)
+ */
+export async function revokeOtherSessions(): Promise<{
+  success: boolean;
+  revokedCount?: number;
+  error?: string;
+}> {
+  const sessionToken = await getSessionToken();
+
+  if (!sessionToken) {
+    return { success: false, error: 'Not authenticated' };
+  }
+
+  try {
+    const response = await fetch(`${AUTH_CONFIG.backendUrl}/api/auth/revoke-other-sessions`, {
+      method: 'POST',
+      headers: await buildAuthHeaders(),
+      cache: 'no-store',
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      return {
+        success: false,
+        error: error.message || 'Failed to revoke sessions',
+      };
+    }
+
+    const data = await response.json();
+
+    // Revalidate the sessions page to reflect the change
+    revalidatePath('/settings/sessions');
+
+    return { success: true, revokedCount: data.revokedCount || 0 };
+  } catch (error) {
+    console.error('Revoke other sessions error:', error);
+    return { success: false, error: 'An error occurred' };
+  }
+}

package/templates/base/web/src/lib/auth/user-agent.ts.ejs

@@ -0,0 +1,47 @@
+/**
+ * Parse user agent string to get browser and OS info
+ */
+export function parseUserAgent(userAgent?: string): {
+  browser: string;
+  os: string;
+  device: string;
+} {
+  if (!userAgent) {
+    return { browser: 'Unknown', os: 'Unknown', device: 'Unknown' };
+  }
+
+  // Simple user agent parsing
+  let browser = 'Unknown';
+  let os = 'Unknown';
+  let device = 'Desktop';
+
+  // Detect browser
+  if (userAgent.includes('Firefox')) {
+    browser = 'Firefox';
+  } else if (userAgent.includes('Edg')) {
+    browser = 'Edge';
+  } else if (userAgent.includes('Chrome')) {
+    browser = 'Chrome';
+  } else if (userAgent.includes('Safari')) {
+    browser = 'Safari';
+  } else if (userAgent.includes('Opera') || userAgent.includes('OPR')) {
+    browser = 'Opera';
+  }
+
+  // Detect OS
+  if (userAgent.includes('Windows')) {
+    os = 'Windows';
+  } else if (userAgent.includes('Mac OS')) {
+    os = 'macOS';
+  } else if (userAgent.includes('Linux')) {
+    os = 'Linux';
+  } else if (userAgent.includes('Android')) {
+    os = 'Android';
+    device = 'Mobile';
+  } else if (userAgent.includes('iPhone') || userAgent.includes('iPad')) {
+    os = 'iOS';
+    device = userAgent.includes('iPad') ? 'Tablet' : 'Mobile';
+  }
+
+  return { browser, os, device };
+}

package/templates/base/web/src/lib/device/actions.ts.ejs

@@ -0,0 +1,148 @@
+'use server';
+
+import {
+  setDeviceSessionCookie,
+  getDeviceSessionToken,
+  clearDeviceSessionCookie,
+} from '../auth/cookies';
+import { AUTH_CONFIG } from '../auth/config';
+
+export interface DeviceSession {
+  id: string;
+  deviceId: string;
+  sessionToken: string;
+  createdAt: string;
+  lastActiveAt: string;
+  migrated: boolean;
+  migratedToUserId: string | null;
+  preferredCurrency: string;
+}
+
+/**
+ * Create a new device session
+ *
+ * Called on first visit when no device session exists.
+ * The device ID should be generated client-side and stored in localStorage.
+ */
+export async function createDeviceSession(deviceId: string): Promise<{
+  success: boolean;
+  session?: DeviceSession;
+  error?: string;
+}> {
+  try {
+    const response = await fetch(`${AUTH_CONFIG.backendUrl}/device-sessions`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ deviceId }),
+      cache: 'no-store',
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      return {
+        success: false,
+        error: error.message || 'Failed to create device session',
+      };
+    }
+
+    const data = await response.json();
+
+    // Set device session cookie
+    await setDeviceSessionCookie(data.sessionToken);
+
+    return { success: true, session: data.session };
+  } catch (error) {
+    console.error('Create device session error:', error);
+    return { success: false, error: 'An error occurred' };
+  }
+}
+
+/**
+ * Validate existing device session
+ *
+ * Called on page load to check if the existing device session is still valid.
+ */
+export async function validateDeviceSession(): Promise<{
+  valid: boolean;
+  session?: DeviceSession;
+}> {
+  const token = await getDeviceSessionToken();
+
+  if (!token) {
+    return { valid: false };
+  }
+
+  try {
+    const response = await fetch(`${AUTH_CONFIG.backendUrl}/device-sessions/validate`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ sessionToken: token }),
+      cache: 'no-store',
+    });
+
+    if (!response.ok) {
+      await clearDeviceSessionCookie();
+      return { valid: false };
+    }
+
+    const data = await response.json();
+    return { valid: true, session: data.session };
+  } catch (error) {
+    console.error('Validate device session error:', error);
+    return { valid: false };
+  }
+}
+
+/**
+ * Update device session activity (heartbeat)
+ *
+ * Called periodically while the user is active to prevent session expiry.
+ * This is a fire-and-forget operation - errors are logged but not thrown.
+ */
+export async function updateDeviceActivity(): Promise<void> {
+  const token = await getDeviceSessionToken();
+
+  if (!token) return;
+
+  try {
+    await fetch(`${AUTH_CONFIG.backendUrl}/device-sessions/activity`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ sessionToken: token }),
+      cache: 'no-store',
+    });
+  } catch (error) {
+    // Silently fail - heartbeat is non-critical
+    console.error('Device activity update error:', error);
+  }
+}
+
+/**
+ * Get device session info
+ */
+export async function getDeviceSessionInfo(): Promise<DeviceSession | null> {
+  const token = await getDeviceSessionToken();
+
+  if (!token) return null;
+
+  try {
+    const response = await fetch(`${AUTH_CONFIG.backendUrl}/device-sessions/info`, {
+      method: 'GET',
+      headers: {
+        'X-Device-Session-Token': token,
+      },
+      cache: 'no-store',
+    });
+
+    if (!response.ok) {
+      return null;
+    }
+
+    return response.json();
+  } catch (error) {
+    console.error('Get device session info error:', error);
+    return null;
+  }
+}

package/templates/base/web/src/lib/device/id.ts.ejs

@@ -0,0 +1,74 @@
+/**
+ * Device ID utilities for web
+ *
+ * Generates and stores a unique device identifier in localStorage.
+ * This follows the same pattern as mobile but adapted for web.
+ *
+ * The device ID is used to create anonymous device sessions that persist
+ * across browser sessions until the user creates an account.
+ */
+
+const DEVICE_ID_KEY = 'device_id';
+
+/**
+ * Generate a unique device ID
+ *
+ * Format: web-{timestamp_base36}-{random_base36}
+ * Example: web-lq2abc5-k8m4n2p1x3
+ */
+function generateDeviceId(): string {
+  const timestamp = Date.now().toString(36);
+  const random = Math.random().toString(36).substring(2, 15);
+  return `web-${timestamp}-${random}`;
+}
+
+/**
+ * Get or create device ID
+ *
+ * Stores in localStorage for persistence across browser sessions.
+ * Returns a temporary ID on the server (will be replaced on client hydration).
+ */
+export function getOrCreateDeviceId(): string {
+  if (typeof window === 'undefined') {
+    // Server-side: return temporary ID
+    // This will be replaced when the client hydrates
+    return `temp-${Date.now()}`;
+  }
+
+  let deviceId = localStorage.getItem(DEVICE_ID_KEY);
+
+  if (!deviceId) {
+    deviceId = generateDeviceId();
+    localStorage.setItem(DEVICE_ID_KEY, deviceId);
+  }
+
+  return deviceId;
+}
+
+/**
+ * Check if device ID exists in localStorage
+ */
+export function hasDeviceId(): boolean {
+  if (typeof window === 'undefined') return false;
+  return localStorage.getItem(DEVICE_ID_KEY) !== null;
+}
+
+/**
+ * Clear device ID from localStorage
+ *
+ * Useful for testing or when user wants to reset their device identity.
+ */
+export function clearDeviceId(): void {
+  if (typeof window === 'undefined') return;
+  localStorage.removeItem(DEVICE_ID_KEY);
+}
+
+/**
+ * Get existing device ID (does not create new one)
+ *
+ * Returns null if no device ID exists.
+ */
+export function getDeviceId(): string | null {
+  if (typeof window === 'undefined') return null;
+  return localStorage.getItem(DEVICE_ID_KEY);
+}

package/templates/base/web/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/templates/base/web/src/proxy.ts.ejs

@@ -0,0 +1,66 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+import { COOKIE_NAMES } from "./lib/auth/config";
+
+/**
+ * Authentication proxy (Next.js 16+)
+ *
+ * Protects routes by checking for session cookie presence.
+ * Note: This only checks cookie existence, not validity.
+ * Full session validation happens in server components/actions.
+ *
+ * Routes:
+ * - Protected routes: Redirect to /login if no session
+ * - Auth routes: Redirect to /dashboard if already authenticated
+ * - Public routes: Pass through
+ */
+
+// Routes that require authentication
+const protectedRoutes = ["/dashboard", "/settings", "/profile"];
+
+// Routes that should redirect to dashboard if already authenticated
+const authRoutes = ["/login", "/register", "/forgot-password"];
+
+// Routes that are always public
+const publicRoutes = ["/", "/auth/callback", "/reset-password", "/verify-email"];
+
+export function proxy(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+  const sessionToken = request.cookies.get(COOKIE_NAMES.SESSION)?.value;
+
+  // Check if current path matches any protected routes
+  const isProtectedRoute = protectedRoutes.some(
+    (route) => pathname === route || pathname.startsWith(`${route}/`)
+  );
+
+  // Check if current path matches any auth routes
+  const isAuthRoute = authRoutes.some(
+    (route) => pathname === route || pathname.startsWith(`${route}/`)
+  );
+
+  // Redirect unauthenticated users from protected routes
+  if (isProtectedRoute && !sessionToken) {
+    const loginUrl = new URL("/login", request.url);
+    loginUrl.searchParams.set("redirect", pathname);
+    return NextResponse.redirect(loginUrl);
+  }
+
+  // Redirect authenticated users from auth routes to dashboard
+  if (isAuthRoute && sessionToken) {
+    return NextResponse.redirect(new URL("/dashboard", request.url));
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  /*
+   * Match all routes except:
+   * - API routes (/api/*)
+   * - Static files (/_next/static/*, /favicon.ico, etc.)
+   * - Public assets (/images/*, /fonts/*, etc.)
+   */
+  matcher: [
+    "/((?!api|_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
+  ],
+};

package/templates/base/web/src/store/auth.store.ts.ejs

@@ -0,0 +1,89 @@
+"use client";
+
+import { create } from "zustand";
+import { useShallow } from "zustand/react/shallow";
+import { signOut as signOutAction, type AuthSession } from "@/lib/auth/actions";
+
+interface AuthState {
+  // State
+  session: AuthSession | null;
+  isLoading: boolean;
+  error: string | null;
+  _isHydrated: boolean;
+
+  // Actions
+  setSession: (session: AuthSession | null) => void;
+  signOut: () => Promise<void>;
+  hydrate: (initialSession: AuthSession | null) => void;
+  clearError: () => void;
+
+  // Called when a server action returns auth error (401)
+  handleAuthError: () => void;
+}
+
+export const useAuthStore = create<AuthState>((set, get) => ({
+  session: null,
+  isLoading: true,
+  error: null,
+  _isHydrated: false,
+
+  // Hydrate from RSC (runs once on initial load)
+  hydrate: (initialSession) => {
+    if (get()._isHydrated) return;
+    set({ session: initialSession, isLoading: false, _isHydrated: true });
+  },
+
+  // Update session (after sign-in, profile update, etc.)
+  setSession: (session) => set({ session, error: null }),
+
+  // Sign out
+  signOut: async () => {
+    try {
+      set({ isLoading: true, error: null });
+      await signOutAction();
+      set({ session: null });
+    } catch (error) {
+      set({ error: error instanceof Error ? error.message : "Sign out failed" });
+    } finally {
+      set({ isLoading: false });
+    }
+  },
+
+  // Called when any server action returns 401/auth error
+  handleAuthError: () => {
+    set({ session: null, error: "Session expired" });
+  },
+
+  clearError: () => set({ error: null }),
+}));
+
+// ============================================================================
+// Selector Hooks (using useShallow for React 19 compatibility)
+// ============================================================================
+
+/**
+ * Session data and status - use for reading auth state
+ */
+export const useAuth = () =>
+  useAuthStore(
+    useShallow((s) => ({
+      session: s.session,
+      user: s.session?.user ?? null,
+      isLoading: s.isLoading,
+      isAuthenticated: !!s.session?.user,
+      error: s.error,
+    }))
+  );
+
+/**
+ * Auth actions - use for triggering auth operations
+ */
+export const useAuthActions = () =>
+  useAuthStore(
+    useShallow((s) => ({
+      setSession: s.setSession,
+      signOut: s.signOut,
+      handleAuthError: s.handleAuthError,
+      clearError: s.clearError,
+    }))
+  );

package/templates/base/web/src/store/deviceSession.store.ts.ejs

@@ -0,0 +1,141 @@
+"use client";
+
+import { create } from "zustand";
+import { useShallow } from "zustand/react/shallow";
+import { getOrCreateDeviceId, getDeviceId } from "@/lib/device/id";
+import {
+  createDeviceSession,
+  validateDeviceSession,
+  updateDeviceActivity,
+  type DeviceSession,
+} from "@/lib/device/actions";
+
+interface DeviceSessionState {
+  // State
+  deviceSession: DeviceSession | null;
+  deviceId: string | null;
+  isLoading: boolean;
+  isInitialized: boolean;
+  error: string | null;
+
+  // Actions
+  initializeSession: () => Promise<void>;
+  refreshSession: () => Promise<void>;
+  sendHeartbeat: () => Promise<void>;
+  setDeviceSession: (session: DeviceSession | null) => void;
+  clearError: () => void;
+}
+
+export const useDeviceSessionStore = create<DeviceSessionState>((set, get) => ({
+  deviceSession: null,
+  deviceId: null,
+  isLoading: true,
+  isInitialized: false,
+  error: null,
+
+  // Initialize device session (called once on mount)
+  initializeSession: async () => {
+    if (get().isInitialized) return;
+
+    try {
+      set({ isLoading: true, error: null });
+
+      // Get or create device ID from localStorage
+      const id = getOrCreateDeviceId();
+      set({ deviceId: id });
+
+      // Skip initialization with temp IDs (server-side rendering)
+      if (id.startsWith("temp-")) {
+        set({ isLoading: false, isInitialized: true });
+        return;
+      }
+
+      // Try to validate existing session
+      const { valid, session } = await validateDeviceSession();
+
+      if (valid && session) {
+        set({ deviceSession: session });
+      } else {
+        // Create new device session
+        const result = await createDeviceSession(id);
+        if (result.success && result.session) {
+          set({ deviceSession: result.session });
+        } else if (result.error) {
+          set({ error: result.error });
+        }
+      }
+    } catch (error) {
+      console.error("Device session initialization error:", error);
+      set({ error: error instanceof Error ? error.message : "Initialization failed" });
+    } finally {
+      set({ isLoading: false, isInitialized: true });
+    }
+  },
+
+  // Refresh session (re-validate or create new)
+  refreshSession: async () => {
+    const deviceId = get().deviceId || getDeviceId();
+    if (!deviceId || deviceId.startsWith("temp-")) return;
+
+    try {
+      set({ error: null });
+      const { valid, session } = await validateDeviceSession();
+
+      if (valid && session) {
+        set({ deviceSession: session });
+      } else {
+        const result = await createDeviceSession(deviceId);
+        if (result.success && result.session) {
+          set({ deviceSession: result.session });
+        }
+      }
+    } catch (error) {
+      console.error("Device session refresh error:", error);
+    }
+  },
+
+  // Heartbeat - fire and forget
+  sendHeartbeat: async () => {
+    if (!get().deviceSession) return;
+    try {
+      await updateDeviceActivity();
+    } catch (error) {
+      // Silently fail - heartbeat is non-critical
+      console.error("Device activity update error:", error);
+    }
+  },
+
+  setDeviceSession: (deviceSession) => set({ deviceSession }),
+  clearError: () => set({ error: null }),
+}));
+
+// ============================================================================
+// Selector Hooks (using useShallow for React 19 compatibility)
+// ============================================================================
+
+/**
+ * Device session data and status
+ */
+export const useDeviceSession = () =>
+  useDeviceSessionStore(
+    useShallow((s) => ({
+      deviceSession: s.deviceSession,
+      deviceId: s.deviceId,
+      isLoading: s.isLoading,
+      hasSession: !!s.deviceSession,
+      error: s.error,
+    }))
+  );
+
+/**
+ * Device session actions
+ */
+export const useDeviceSessionActions = () =>
+  useDeviceSessionStore(
+    useShallow((s) => ({
+      initializeSession: s.initializeSession,
+      refreshSession: s.refreshSession,
+      sendHeartbeat: s.sendHeartbeat,
+      clearError: s.clearError,
+    }))
+  );