@stevederico/skateboard-ui 1.2.17 → 1.2.18

package/CHANGELOG.md

@@ -1,4 +1,11 @@
 # CHANGELOG
+1.2.18
+
+  Add authentication documentation
+  Add JSDoc comments
+  Update README configuration
+  Create docs folder
+
 1.2.17
 
   Fix SignIn layout positioning

package/Context.jsx

@@ -5,6 +5,22 @@ const context = createContext();
 // Store dispatch reference for programmatic access outside components
 let _dispatch = null;
 
+/**
+ * Get dispatch function for programmatic state updates outside components.
+ *
+ * Useful for updating state from non-React code (event handlers, utilities).
+ * Returns null if ContextProvider hasn't mounted yet.
+ *
+ * @returns {Function|null} Dispatch function or null
+ *
+ * @example
+ * import { getDispatch } from '@stevederico/skateboard-ui/Context';
+ *
+ * const dispatch = getDispatch();
+ * if (dispatch) {
+ *   dispatch({ type: 'CLEAR_USER' });
+ * }
+ */
 export function getDispatch() {
   return _dispatch;
 }
@@ -58,6 +74,24 @@ function safeLSRemoveItem(key) {
   }
 }
 
+/**
+ * Global state provider for skateboard-ui.
+ *
+ * Manages user authentication state and UI visibility (sidebar, tabbar).
+ * Persists user data to localStorage using app-specific keys.
+ *
+ * @param {Object} props
+ * @param {Object} props.constants - App configuration
+ * @param {string} props.constants.appName - Used for localStorage key namespacing
+ * @param {React.ReactNode} props.children - Child components
+ *
+ * @example
+ * import { ContextProvider } from '@stevederico/skateboard-ui/Context';
+ *
+ * <ContextProvider constants={constants}>
+ *   <App />
+ * </ContextProvider>
+ */
 export function ContextProvider({ children, constants }) {
   const getStorageKey = () => {
     const appName = constants.appName || 'skateboard';
@@ -133,6 +167,24 @@ export function ContextProvider({ children, constants }) {
   );
 }
 
+/**
+ * Hook to access skateboard-ui state.
+ *
+ * Returns { state, dispatch } where state contains:
+ * - user: Current user object or null
+ * - ui: { sidebarVisible, tabBarVisible }
+ *
+ * @returns {{ state: Object, dispatch: Function }}
+ *
+ * @example
+ * import { getState } from '@stevederico/skateboard-ui/Context';
+ *
+ * function MyComponent() {
+ *   const { state, dispatch } = getState();
+ *   console.log(state.user);
+ *   dispatch({ type: 'SET_USER', payload: userData });
+ * }
+ */
 export function getState() {
   return useContext(context);
 }

package/README.md

@@ -25,6 +25,92 @@ createSkateboardApp({ constants, appRoutes });
 
 That's it! You get routing, auth, layout, landing page, settings, and payments.
 
+## Configuration
+
+skateboard-ui requires a `constants` object that configures your application:
+
+```javascript
+// constants.json or constants.js
+const constants = {
+  // Required: Backend URLs (include /api prefix)
+  devBackendURL: "http://localhost:8000/api",
+  backendURL: "https://api.myapp.com/api",
+
+  // Required: App identity
+  appName: "MyApp",
+  appIcon: "🛹",
+
+  // Required: Landing page content
+  tagline: "Build apps faster with skateboard-ui",
+  cta: "Get Started",
+
+  // Required: Features section
+  features: {
+    title: "Everything you need",
+    items: [
+      { icon: "Zap", title: "Fast", description: "Built for speed" },
+      { icon: "Shield", title: "Secure", description: "Authentication included" }
+    ]
+  },
+
+  // Required: Company information
+  companyName: "Your Company",
+  companyWebsite: "https://yourcompany.com",
+  companyEmail: "hello@yourcompany.com",
+
+  // Optional: Authentication
+  noLogin: false,  // Set true to disable authentication
+
+  // Optional: Payments (Stripe)
+  stripeProducts: [
+    {
+      name: "Pro Plan",
+      priceId: "price_123",
+      price: "$10/month",
+      lookup_key: "pro_plan"
+    }
+  ],
+
+  // Optional: Legal documents
+  termsOfService: "Your terms of service...",
+  privacyPolicy: "Your privacy policy...",
+
+  // Optional: UI visibility
+  hideSidebar: false,
+  hideTabBar: false
+}
+```
+
+### Backend URL Pattern
+
+The `devBackendURL` and `backendURL` should include your full API base path (including the `/api` prefix):
+
+```javascript
+const constants = {
+  devBackendURL: "http://localhost:8000/api",  // Include /api prefix
+  backendURL: "https://api.myapp.com/api",
+}
+```
+
+Endpoints are relative to this base URL:
+- `${getBackendURL()}/signup` → `http://localhost:8000/api/signup`
+- `${getBackendURL()}/me` → `http://localhost:8000/api/me`
+- `${getBackendURL()}/deals` → `http://localhost:8000/api/deals`
+
+**Tip:** Include API versioning in the base URL (e.g., `/api/v2`) rather than in each endpoint path.
+
+### Authentication Setup
+
+skateboard-ui uses a hybrid cookie + localStorage authentication system. Your backend must implement specific endpoints and cookie handling.
+
+**See [AUTHENTICATION.md](./docs/AUTHENTICATION.md) for complete backend setup requirements.**
+
+Quick overview:
+- Session token stored in HttpOnly cookie for security
+- CSRF token in localStorage for request validation
+- Backend validates cookies on protected endpoints
+- Client-side `isAuthenticated()` checks localStorage for fast validation
+
 ## Components
 
 ### Core Components
@@ -253,6 +339,10 @@ import ProtectedRoute from '@stevederico/skateboard-ui/ProtectedRoute';
 
 Used internally by createSkateboardApp. Redirects to /signin if not authenticated.
 
+## Documentation
+
+- **[Authentication Guide](./docs/AUTHENTICATION.md)** - Complete guide to the hybrid cookie + localStorage authentication system, including backend requirements, security considerations, and Express.js implementation examples
+
 ## Dependencies
 
 - React 19.1+

package/Utilities.js

@@ -65,6 +65,27 @@ function safeRemoveItem(key) {
     }
 }
 
+/**
+ * Initialize skateboard-ui utilities with app constants.
+ *
+ * MUST be called before any utility functions are used, including
+ * before React components render. Stores constants in both module-level
+ * variable and window.__SKATEBOARD_CONSTANTS__ to handle Vite module
+ * duplication issues.
+ *
+ * @param {Object} constants - App configuration object
+ * @param {string} constants.appName - Application name
+ * @param {string} constants.devBackendURL - Development API base URL (include /api prefix)
+ * @param {string} constants.backendURL - Production API base URL (include /api prefix)
+ * @throws {Error} If constants is null/undefined
+ *
+ * @example
+ * initializeUtilities({
+ *   appName: "MyApp",
+ *   devBackendURL: "http://localhost:8000/api",
+ *   backendURL: "https://api.myapp.com/api"
+ * });
+ */
 export function initializeUtilities(constants) {
     if (!constants) {
         throw new Error('initializeUtilities called with null/undefined constants');
@@ -102,17 +123,66 @@ export function getCookie(name) {
     return null;
 }
 
+/**
+ * Get CSRF token from localStorage.
+ *
+ * Returns the CSRF token saved during signin/signup. This token
+ * should be sent in the X-CSRF-Token header for state-changing requests.
+ *
+ * @returns {string|null} CSRF token or null if not found
+ *
+ * @example
+ * const csrfToken = getCSRFToken();
+ * fetch('/api/endpoint', {
+ *   headers: { 'X-CSRF-Token': csrfToken }
+ * });
+ */
 export function getCSRFToken() {
     const appName = getConstants().appName || 'skateboard';
     const csrfKey = `${appName.toLowerCase().replace(/\s+/g, '-')}_csrf`;
     return safeGetItem(csrfKey);
 }
 
+/**
+ * Generate app-specific localStorage key.
+ *
+ * Creates namespaced keys using app name: `{appName}_{suffix}`
+ * App name is normalized (lowercase, hyphens replace spaces)
+ *
+ * @param {string} suffix - Key suffix (e.g., 'csrf', 'user', 'theme')
+ * @returns {string} Namespaced key
+ *
+ * @example
+ * getAppKey('csrf')  // "myapp_csrf"
+ * getAppKey('user')  // "myapp_user"
+ * getAppKey('theme') // "myapp_theme"
+ */
 export function getAppKey(suffix) {
     const appName = getConstants().appName || 'skateboard';
     return `${appName.toLowerCase().replace(/\s+/g, '-')}_${suffix}`;
 }
 
+/**
+ * Check if user is authenticated.
+ *
+ * Uses localStorage (NOT cookies) for fast client-side validation.
+ * Checks for both CSRF token and user data in localStorage.
+ * If constants.noLogin is true, always returns true.
+ *
+ * Note: This is a client-side check only. ProtectedRoute performs
+ * additional server-side validation via /me endpoint.
+ *
+ * @returns {boolean} True if authenticated or noLogin mode
+ *
+ * @see {@link ProtectedRoute} for server-side validation
+ *
+ * @example
+ * if (isAuthenticated()) {
+ *   // Show authenticated UI
+ * } else {
+ *   // Redirect to signin
+ * }
+ */
 export function isAuthenticated() {
     if (getConstants().noLogin === true) {
         return true;
@@ -122,6 +192,19 @@ export function isAuthenticated() {
     return Boolean(safeGetItem(csrfKey)) && Boolean(safeGetItem(userKey));
 }
 
+/**
+ * Get the backend API base URL based on environment.
+ *
+ * Returns devBackendURL in development mode, backendURL in production.
+ * Endpoints should be concatenated: `${getBackendURL()}/endpoint`
+ *
+ * @returns {string} Base URL including /api prefix
+ *
+ * @example
+ * const url = `${getBackendURL()}/signup`;
+ * // Dev:  "http://localhost:8000/api/signup"
+ * // Prod: "https://api.myapp.com/api/signup"
+ */
 export function getBackendURL() {
     let result = import.meta.env.DEV ? getConstants().devBackendURL : getConstants().backendURL;
     return result

package/docs/AUTHENTICATION.md

@@ -0,0 +1,533 @@
+# Authentication Guide
+
+## Architecture Overview
+
+skateboard-ui uses a **hybrid cookie + localStorage authentication system** that combines security with performance:
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                         Authentication Flow                      │
+└─────────────────────────────────────────────────────────────────┘
+
+  Frontend                    Backend                   Storage
+  ────────                    ───────                   ───────
+
+1. POST /signin           →  Validate credentials
+   credentials
+                          ←  Set-Cookie: {appName}_token (HttpOnly)
+                          ←  Set-Cookie: csrf_token
+                          ←  Response: { csrfToken, ...user }
+
+2. Extract tokens         →                          localStorage:
+   - CSRF from cookie                                  {appName}_csrf
+   - User from response                                {appName}_user
+
+3. isAuthenticated()      →                          Check localStorage
+   (client-side)                                      (fast, no network)
+
+4. ProtectedRoute         →  GET /me
+   (server validation)       Validate cookies
+                          ←  200 OK or 401 Unauthorized
+
+5. API requests           →  Protected endpoints
+   + cookies (automatic)     Validate {appName}_token
+   + X-CSRF-Token header     Validate CSRF header
+```
+
+## How It Works
+
+### Cookie-Based Session Management
+- **Session token** stored in `{appName}_token` cookie (HttpOnly, Secure, SameSite=Strict)
+- Automatically sent with every request via browser
+- Cannot be accessed by JavaScript (XSS protection)
+- Backend validates cookie on each protected endpoint
+
+### localStorage for Client-Side Validation
+- **CSRF token** and **user data** stored in localStorage
+- Enables instant `isAuthenticated()` checks without network calls
+- Used by client-side routing logic (ProtectedRoute initial check)
+- Not used for actual authentication (cookies handle that)
+
+### CSRF Protection
+- Dual-token system prevents CSRF attacks
+- **CSRF token** sent in `X-CSRF-Token` header with state-changing requests
+- Backend validates header matches stored session CSRF token
+- Separate from session cookie to prevent cookie-based CSRF
+
+## Backend Requirements
+
+### Required Endpoints
+
+#### POST /signup
+Create new user account.
+
+**Request:**
+```json
+{
+  "email": "user@example.com",
+  "password": "securePassword123"
+}
+```
+
+**Response:**
+- Status: 201 Created
+- Headers:
+  - `Set-Cookie: {appName}_token={sessionToken}; HttpOnly; Secure; SameSite=Strict; Path=/`
+  - `Set-Cookie: csrf_token={csrfToken}; Secure; SameSite=Lax; Path=/`
+- Body:
+```json
+{
+  "csrfToken": "csrf_abc123...",
+  "user": {
+    "id": "user123",
+    "email": "user@example.com",
+    "name": "John Doe"
+  }
+}
+```
+
+#### POST /signin
+Authenticate existing user.
+
+**Request:**
+```json
+{
+  "email": "user@example.com",
+  "password": "securePassword123"
+}
+```
+
+**Response:**
+- Status: 200 OK
+- Headers: Same as /signup
+- Body: Same as /signup
+
+#### GET /me
+Validate current session and return user data.
+
+**Request:**
+- Headers: Cookies automatically sent by browser
+
+**Response (authenticated):**
+- Status: 200 OK
+- Body:
+```json
+{
+  "user": {
+    "id": "user123",
+    "email": "user@example.com",
+    "name": "John Doe"
+  }
+}
+```
+
+**Response (not authenticated):**
+- Status: 401 Unauthorized
+
+#### POST /signout
+End current session.
+
+**Request:**
+- Headers:
+  - Cookies automatically sent
+  - `X-CSRF-Token: {csrfToken}`
+
+**Response:**
+- Status: 200 OK
+- Headers:
+  - `Set-Cookie: {appName}_token=; Max-Age=0; Path=/` (clear cookie)
+  - `Set-Cookie: csrf_token=; Max-Age=0; Path=/` (clear cookie)
+
+### Cookie Configuration
+
+**Session Token Cookie:**
+```javascript
+{
+  name: '{appName}_token',
+  httpOnly: true,      // Prevents JavaScript access (XSS protection)
+  secure: true,        // HTTPS only (production)
+  sameSite: 'Strict',  // Strongest CSRF protection
+  path: '/',
+  maxAge: 7 * 24 * 60 * 60 * 1000  // 7 days (configurable)
+}
+```
+
+**CSRF Token Cookie:**
+```javascript
+{
+  name: 'csrf_token',
+  httpOnly: false,     // Must be readable by JavaScript
+  secure: true,        // HTTPS only (production)
+  sameSite: 'Lax',     // Allow top-level navigation
+  path: '/',
+  maxAge: 7 * 24 * 60 * 60 * 1000  // Match session token
+}
+```
+
+### Protected Endpoints
+All authenticated endpoints must:
+1. Validate `{appName}_token` cookie exists and is valid
+2. For state-changing operations (POST, PUT, DELETE), validate `X-CSRF-Token` header
+3. Return 401 if authentication fails
+4. Return 403 if CSRF validation fails
+
+## Frontend Flow
+
+### 1. User Signs In
+```javascript
+// SignInView.jsx
+const response = await fetch(`${getBackendURL()}/signin`, {
+  method: 'POST',
+  credentials: 'include',  // Send and receive cookies
+  headers: { 'Content-Type': 'application/json' },
+  body: JSON.stringify({ email, password })
+});
+
+const data = await response.json();
+// Backend has set cookies automatically
+```
+
+### 2. Store CSRF Token and User Data
+```javascript
+// Extract CSRF token from cookie or response body
+const csrfToken = getCookie('csrf_token') || data.csrfToken;
+
+// Save to localStorage with app-specific keys
+localStorage.setItem(`${appName}_csrf`, csrfToken);
+localStorage.setItem(`${appName}_user`, JSON.stringify(data.user));
+```
+
+### 3. Client-Side Authentication Check
+```javascript
+// Utilities.js:isAuthenticated()
+export function isAuthenticated() {
+  const csrf = localStorage.getItem(getAppKey('csrf'));
+  const user = localStorage.getItem(getAppKey('user'));
+  return !!(csrf && user);
+}
+
+// Usage in components
+if (isAuthenticated()) {
+  // Show authenticated UI
+}
+```
+
+### 4. Server-Side Validation
+```javascript
+// ProtectedRoute.jsx
+useEffect(() => {
+  fetch(`${getBackendURL()}/me`, {
+    credentials: 'include'  // Sends session cookie
+  })
+  .then(response => {
+    if (response.status === 401) {
+      // Not authenticated - redirect to signin
+      navigate('/signin');
+    }
+  });
+}, []);
+```
+
+### 5. Making Authenticated Requests
+```javascript
+// All API requests include cookies and CSRF token
+const response = await fetch(`${getBackendURL()}/protected-endpoint`, {
+  method: 'POST',
+  credentials: 'include',  // Automatically includes cookies
+  headers: {
+    'Content-Type': 'application/json',
+    'X-CSRF-Token': getCSRFToken()  // From localStorage
+  },
+  body: JSON.stringify(data)
+});
+```
+
+## Security Considerations
+
+### XSS Protection
+- **Session token is HttpOnly** - JavaScript cannot access it
+- Even if attacker injects malicious script, they cannot steal session token
+- CSRF token in localStorage is less sensitive (validated server-side)
+
+### CSRF Protection
+- **Dual-token pattern** prevents cookie-based CSRF attacks
+- Attacker cannot forge `X-CSRF-Token` header from external site
+- Cookie's SameSite attribute provides additional protection
+
+### SameSite Cookie Policy
+- **Session token (Strict)** - Never sent on cross-site requests
+- **CSRF token (Lax)** - Sent on top-level navigation (allows direct links)
+- Provides strong CSRF protection at browser level
+
+### LocalStorage Trade-offs
+- **Vulnerable to XSS** - If site has XSS vulnerability, localStorage can be read
+- **Acceptable for CSRF token** - CSRF token alone cannot authenticate requests
+- **Never store session token in localStorage** - Always use HttpOnly cookies
+
+### HTTPS Requirement
+- All cookies marked `Secure` - only sent over HTTPS in production
+- Development mode (HTTP) may need `Secure: false` based on environment
+
+## Example Backend Implementation (Express.js)
+
+```javascript
+import express from 'express';
+import cookieParser from 'cookie-parser';
+import crypto from 'crypto';
+
+const app = express();
+app.use(express.json());
+app.use(cookieParser());
+
+// In-memory session store (use Redis in production)
+const sessions = new Map();
+
+// Generate secure random token
+function generateToken() {
+  return crypto.randomBytes(32).toString('hex');
+}
+
+// Middleware: Validate session token
+function requireAuth(req, res, next) {
+  const sessionToken = req.cookies.myapp_token;
+  const session = sessions.get(sessionToken);
+
+  if (!session) {
+    return res.status(401).json({ error: 'Not authenticated' });
+  }
+
+  req.session = session;
+  next();
+}
+
+// Middleware: Validate CSRF token
+function requireCSRF(req, res, next) {
+  const csrfToken = req.headers['x-csrf-token'];
+
+  if (!req.session || req.session.csrfToken !== csrfToken) {
+    return res.status(403).json({ error: 'Invalid CSRF token' });
+  }
+
+  next();
+}
+
+// POST /api/signup
+app.post('/api/signup', async (req, res) => {
+  const { email, password } = req.body;
+
+  // Validate input
+  if (!email || !password) {
+    return res.status(400).json({ error: 'Email and password required' });
+  }
+
+  // Create user (pseudo-code)
+  const user = await createUser(email, password);
+
+  // Create session
+  const sessionToken = generateToken();
+  const csrfToken = generateToken();
+
+  sessions.set(sessionToken, {
+    userId: user.id,
+    csrfToken,
+    createdAt: Date.now()
+  });
+
+  // Set cookies
+  res.cookie('myapp_token', sessionToken, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    sameSite: 'strict',
+    maxAge: 7 * 24 * 60 * 60 * 1000  // 7 days
+  });
+
+  res.cookie('csrf_token', csrfToken, {
+    httpOnly: false,  // Readable by JavaScript
+    secure: process.env.NODE_ENV === 'production',
+    sameSite: 'lax',
+    maxAge: 7 * 24 * 60 * 60 * 1000
+  });
+
+  // Return user data and CSRF token
+  res.status(201).json({
+    csrfToken,
+    user: {
+      id: user.id,
+      email: user.email,
+      name: user.name
+    }
+  });
+});
+
+// POST /api/signin
+app.post('/api/signin', async (req, res) => {
+  const { email, password } = req.body;
+
+  // Validate credentials (pseudo-code)
+  const user = await validateCredentials(email, password);
+
+  if (!user) {
+    return res.status(401).json({ error: 'Invalid credentials' });
+  }
+
+  // Create session (same as signup)
+  const sessionToken = generateToken();
+  const csrfToken = generateToken();
+
+  sessions.set(sessionToken, {
+    userId: user.id,
+    csrfToken,
+    createdAt: Date.now()
+  });
+
+  // Set cookies (same as signup)
+  res.cookie('myapp_token', sessionToken, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    sameSite: 'strict',
+    maxAge: 7 * 24 * 60 * 60 * 1000
+  });
+
+  res.cookie('csrf_token', csrfToken, {
+    httpOnly: false,
+    secure: process.env.NODE_ENV === 'production',
+    sameSite: 'lax',
+    maxAge: 7 * 24 * 60 * 60 * 1000
+  });
+
+  res.json({
+    csrfToken,
+    user: {
+      id: user.id,
+      email: user.email,
+      name: user.name
+    }
+  });
+});
+
+// GET /api/me
+app.get('/api/me', requireAuth, async (req, res) => {
+  // Get user from session
+  const user = await getUserById(req.session.userId);
+
+  res.json({
+    user: {
+      id: user.id,
+      email: user.email,
+      name: user.name
+    }
+  });
+});
+
+// POST /api/signout
+app.post('/api/signout', requireAuth, requireCSRF, (req, res) => {
+  const sessionToken = req.cookies.myapp_token;
+
+  // Delete session
+  sessions.delete(sessionToken);
+
+  // Clear cookies
+  res.clearCookie('myapp_token');
+  res.clearCookie('csrf_token');
+
+  res.json({ message: 'Signed out successfully' });
+});
+
+// Protected endpoint example
+app.post('/api/protected-action', requireAuth, requireCSRF, (req, res) => {
+  // Handle protected action
+  res.json({ message: 'Action completed' });
+});
+
+app.listen(8000, () => {
+  console.log('Server running on http://localhost:8000');
+});
+```
+
+## Troubleshooting
+
+### "Not authenticated" after signing in
+
+**Symptoms:** User signs in successfully but immediately redirected to signin page.
+
+**Causes:**
+1. Cookies not being sent with requests
+2. Cookie domain/path mismatch
+3. CORS blocking cookies
+
+**Solutions:**
+- Verify `credentials: 'include'` in all fetch calls
+- Check cookie `domain` and `path` settings
+- Ensure CORS allows credentials: `Access-Control-Allow-Credentials: true`
+- Verify `Access-Control-Allow-Origin` is specific origin, not `*`
+
+### CSRF validation failing
+
+**Symptoms:** Protected endpoints return 403 Forbidden.
+
+**Causes:**
+1. CSRF token not in localStorage
+2. Header not being sent
+3. Token mismatch
+
+**Solutions:**
+- Check `localStorage.getItem('{appName}_csrf')` exists
+- Verify `X-CSRF-Token` header is set
+- Ensure CSRF cookie and localStorage token match
+- Check CSRF token not expired (matches session lifetime)
+
+### Cookies not persisting across requests
+
+**Symptoms:** User authenticated on signin but /me returns 401.
+
+**Causes:**
+1. SameSite policy blocking cookies
+2. Secure flag on HTTP (development)
+3. Domain mismatch
+
+**Solutions:**
+- Development: Set `secure: false` when `NODE_ENV !== 'production'`
+- Check frontend and backend on same domain (or use proxy)
+- Verify SameSite policy allows your use case
+
+### LocalStorage cleared unexpectedly
+
+**Symptoms:** `isAuthenticated()` returns false but session cookie exists.
+
+**Causes:**
+1. User cleared browser data
+2. localStorage quota exceeded
+3. Private browsing mode
+
+**Solutions:**
+- Re-fetch user data from `/me` endpoint
+- Implement session restoration from cookie
+- Handle `isAuthenticated()` false as trigger to validate with backend
+
+### Session token stolen (security incident)
+
+**Symptoms:** User receives "already logged in" errors or unauthorized actions.
+
+**Response:**
+1. Revoke all sessions for affected user
+2. Force password reset
+3. Audit recent account activity
+4. Investigate XSS vulnerabilities if token was HttpOnly
+5. Check for MITM attack if token was Secure
+
+## No-Login Mode
+
+For development or public-only apps, disable authentication:
+
+```javascript
+const constants = {
+  noLogin: true,
+  // ... other constants
+};
+```
+
+Effects:
+- `isAuthenticated()` always returns `true`
+- ProtectedRoute allows all access
+- Signin/signup views still render but aren't enforced
+- No authentication state management

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "1.2.17",
+  "version": "1.2.18",
   "type": "module",
   "exports": {
     "./AppSidebar": {