Authentication in the Real World: Lessons from Nuxt 3, Laravel, React, and Express

Why I'm Writing This

I've worked on survey tools, health trackers, and account dashboards. The common friction point was authentication. Here are the approaches that held up in practice, with working snippets.

The Pain Points I Ran Into

• LocalStorage tokens broke under SSR and subdomains.
• CORS misconfigurations silently blocked cookies.
• Safari’s cookie rules exposed bugs Chrome hid.
• Service-to-service trust needed signed requests, not user cookies.
• Public forms attracted bots until I hardened them.

Nuxt 3 (Vue)

export function useAuth() {
  const user = useState('user', () => null as any);

  async function login(email: string, password: string) {
    await $fetch('/api/login', {
      method: 'POST',
      body: { email, password },
      credentials: 'include',
    });
    await refreshUser();
  }

  async function refreshUser() {
    user.value = await $fetch('/api/me', { credentials: 'include' }).catch(() => null);
  }

  return { user, login, refreshUser };
}

Fact learned: Cookies work naturally with SSR. Avoid storing tokens in LocalStorage: they cause hydration bugs and add XSS risk.

Laravel 10

Route::post('/login', function (Request $request) {{
  $credentials = $request->validate([
      'email' => 'required|email',
      'password' => 'required|string|min:6',
  ]);

  if (! Auth::attempt($credentials, true)) {{
      return response()->json(['message' => 'Invalid credentials'], 422);
  }}

  $request->session()->regenerate();
  return response()->noContent();
}});

Route::get('/me', fn (Request $r) => $r->user())->middleware('auth:sanctum');

Fact learned: Sanctum is built for SPAs/SSR. Regenerate sessions on login/logout to prevent fixation.

Express.js

import crypto from 'crypto';

function sign(body, secret) {{
  return crypto.createHmac('sha256', secret).update(body).digest('hex');
}}

function verify(req, res, next) {{
  const sig = req.header('x-signature');
  const expected = sign(req.rawBody, process.env.S2S_SECRET);
  if (sig !== expected) return res.status(401).send('Invalid signature');
  next();
}}

Fact learned: Don’t pass user cookies between services. Use HMAC or short-lived JWTs; rotate secrets.

React

async function login(email, password) {{
  await fetch('/api/login', {{
    method: 'POST',
    credentials: 'include',
    headers: {{ 'Content-Type': 'application/json' }},
    body: JSON.stringify({{ email, password }}),
  }});
}}

Fact learned: Cookies still win for browser apps. With Next.js, SSR can read the cookie server-side.

Controls That Actually Worked

• Rate limiting for login/signup endpoints.
• Honeypot fields that bots fill but humans ignore.
• Analytics on failed logins to surface UX issues early.
• SameSite=Lax + Secure cookies to avoid silent drops in Safari.

Final Thoughts

• Nuxt / React: Cookie sessions are safer and SSR-friendly than LocalStorage tokens.
• Laravel: Sanctum + sessions is the simplest, reliable path for SPA/SSR.
• Express: Prefer HMAC/JWT for service-to-service; never forward user cookies.
• Browsers: Test in Safari early; its stricter rules expose hidden bugs.
• Security + UX: Pair rate limits + honeypots with analytics; passwords alone aren’t “secure.”