feat: email/password auth + QR-based developer profile sharing (#Dev-Card)

## Summary
Implements full user authentication and dynamic QR-based developer profile
sharing for the DevCard platform.

## What's new

### Backend
- **Password auth** — `POST /auth/signup` and `POST /auth/login` using
  Node.js built-in `crypto.scrypt` (zero new dependencies)
- **Zod validation** — email normalised to lowercase, username regex
  `[A-Za-z0-9_-]{3,50}`, password min 8 chars
- **Atomic signup** — user + default Card created in a single Prisma
  transaction; existing OAuth users unaffected (nullable `password_hash`)
- **Security** — `passwordHash` stripped from every API response
- **Migration** — `20260611120000_password_auth` adds nullable
  `password_hash` column
- **Unit tests** — 4 tests: signup, login, duplicate-email 409,
  wrong-password 401 (all pass)

### Frontend (SvelteKit)
- **`/signup`** — real-time username format hint, password strength bar
  (Weak/Fair/Strong), red/green field borders, spinner on submit
- **`/login`** — friendly 'Email or password is incorrect' message
- **`/dashboard`** — JWT-authenticated page: edit display name, username,
  bio, role, company, accent colour; add/edit/delete platform links (GitHub,
  LinkedIn, Twitter/X, etc.); live QR code preview; one-click copy URL
- **Landing page** — Log in / Create card CTAs in nav
- **Public profile** (`/u/:username`) — display name now pure white with
  accent-colour glow, @username handle shown, role badge and bio lifted
- **Vite dev proxy** — `/auth` and `/api` forwarded to backend; browser
  uses relative URLs so no CORS issues
- **Bug fix** — `devcard/[id]/+page.server.ts`: catch variable was shadowing
  the imported SvelteKit `error` helper
- **Bug fix** — Svelte 5 reactivity: `$derived` for profile/error props
- **Bug fix** — `apiClient.ts` extracts `details.fieldErrors` from zod
  responses so users see exact field messages instead of 'Validation failed'
- **Bug fix** — signup submit was immediately returning because `canSubmit`
  included `!loading`; fixed by separating `formValid` from loading state

## Test plan
- All 4 backend auth unit tests pass (`pnpm --filter @devcard/backend test`)
- `svelte-check` — 0 errors
- Manual E2E: signup → login → add links → public profile → QR code all work

Closes: email-auth, profile-management, QR-sharing

Author: Amrit

apps/backend/prisma/migrations/20260611120000_password_auth/migration.sql

@@ -0,0 +1,3 @@
+-- Add nullable password storage for email/password accounts.
+-- Existing OAuth and seeded users keep working without a password hash.
+ALTER TABLE "users" ADD COLUMN "password_hash" TEXT;

apps/backend/prisma/schema.prisma

@@ -20,6 +20,7 @@ model User {
   accentColor String   @default("#6366f1") @map("accent_color")
   provider    String
   providerId  String   @map("provider_id")
+  passwordHash String? @map("password_hash")
   createdAt   DateTime @default(now()) @map("created_at")
   updatedAt   DateTime @updatedAt @map("updated_at")
 
@@ -194,4 +195,4 @@ model TeamMember{
   @@unique([userId, teamId])
   @@index([userId])
   @@map("team_members")
-}
+}

apps/backend/src/__tests__/auth.test.ts

@@ -0,0 +1,153 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import Fastify from 'fastify';
+import cookie from '@fastify/cookie';
+import jwt from '@fastify/jwt';
+import { authRoutes } from '../routes/auth.js';
+import type { PrismaClient } from '@prisma/client';
+
+const mockSafeUser = {
+  id: 'user-123',
+  email: 'test@example.com',
+  username: 'testuser',
+  displayName: 'Test User',
+  bio: null,
+  pronouns: null,
+  role: null,
+  company: null,
+  avatarUrl: null,
+  accentColor: '#6366f1',
+  createdAt: new Date('2026-01-01T00:00:00.000Z'),
+};
+
+const mockPrisma = {
+  user: {
+    findFirst: vi.fn(),
+    findUnique: vi.fn(),
+    create: vi.fn(),
+  },
+  card: {
+    create: vi.fn(),
+  },
+  $transaction: vi.fn(async (callback: (tx: any) => Promise<unknown>) => callback(mockPrisma)),
+};
+
+async function buildApp() {
+  const app = Fastify();
+  await app.register(cookie);
+  await app.register(jwt, { secret: 'test-secret-for-unit-tests-only' });
+  app.decorate('prisma', mockPrisma as unknown as PrismaClient);
+  await app.register(authRoutes, { prefix: '/auth' });
+  await app.ready();
+  return app;
+}
+
+describe('email/password auth', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockPrisma.$transaction.mockImplementation(async (callback: (tx: any) => Promise<unknown>) => callback(mockPrisma));
+  });
+
+  it('registers a user, creates a default card, and returns a token', async () => {
+    mockPrisma.user.findFirst.mockResolvedValue(null);
+    mockPrisma.user.create.mockResolvedValue(mockSafeUser);
+    mockPrisma.card.create.mockResolvedValue({ id: 'card-123' });
+
+    const app = await buildApp();
+    const res = await app.inject({
+      method: 'POST',
+      url: '/auth/signup',
+      payload: {
+        email: 'Test@Example.com',
+        password: 'strong-password',
+        username: 'testuser',
+        displayName: 'Test User',
+      },
+    });
+
+    expect(res.statusCode).toBe(201);
+    const body = res.json();
+    expect(body.token).toEqual(expect.any(String));
+    expect(body.user.email).toBe('test@example.com');
+    expect(body.user.passwordHash).toBeUndefined();
+    expect(mockPrisma.user.create).toHaveBeenCalledWith(expect.objectContaining({
+      data: expect.objectContaining({
+        email: 'test@example.com',
+        provider: 'password',
+        passwordHash: expect.stringMatching(/^scrypt:/),
+      }),
+    }));
+    expect(mockPrisma.card.create).toHaveBeenCalledWith(expect.objectContaining({
+      data: expect.objectContaining({
+        userId: 'user-123',
+        title: 'Main DevCard',
+        isDefault: true,
+      }),
+    }));
+  });
+
+  it('rejects duplicate usernames during signup', async () => {
+    mockPrisma.user.findFirst.mockResolvedValue({ email: 'other@example.com', username: 'testuser' });
+
+    const app = await buildApp();
+    const res = await app.inject({
+      method: 'POST',
+      url: '/auth/signup',
+      payload: {
+        email: 'test@example.com',
+        password: 'strong-password',
+        username: 'testuser',
+        displayName: 'Test User',
+      },
+    });
+
+    expect(res.statusCode).toBe(409);
+    expect(res.json().error).toBe('Username already taken');
+    expect(mockPrisma.user.create).not.toHaveBeenCalled();
+  });
+
+  it('logs in with valid credentials', async () => {
+    mockPrisma.user.findFirst.mockResolvedValue(null);
+    mockPrisma.user.create.mockResolvedValue(mockSafeUser);
+    mockPrisma.card.create.mockResolvedValue({ id: 'card-123' });
+
+    const app = await buildApp();
+    const signup = await app.inject({
+      method: 'POST',
+      url: '/auth/signup',
+      payload: {
+        email: 'test@example.com',
+        password: 'strong-password',
+        username: 'testuser',
+        displayName: 'Test User',
+      },
+    });
+    const createdHash = mockPrisma.user.create.mock.calls[0][0].data.passwordHash;
+
+    mockPrisma.user.findUnique.mockResolvedValue({ ...mockSafeUser, passwordHash: createdHash });
+
+    const login = await app.inject({
+      method: 'POST',
+      url: '/auth/login',
+      payload: { email: 'test@example.com', password: 'strong-password' },
+    });
+
+    expect(signup.statusCode).toBe(201);
+    expect(login.statusCode).toBe(200);
+    expect(login.json().token).toEqual(expect.any(String));
+    expect(login.json().user.passwordHash).toBeUndefined();
+  });
+
+  it('rejects invalid login credentials', async () => {
+    mockPrisma.user.findUnique.mockResolvedValue(null);
+
+    const app = await buildApp();
+    const res = await app.inject({
+      method: 'POST',
+      url: '/auth/login',
+      payload: { email: 'test@example.com', password: 'wrong-password' },
+    });
+
+    expect(res.statusCode).toBe(401);
+    expect(res.json().error).toBe('Invalid email or password');
+  });
+});

apps/backend/src/__tests__/profiles.test.ts

@@ -18,6 +18,7 @@ const mockUser = {
   cards: [],
   provider: 'github',
   providerId: 'gh-123',
+  passwordHash: 'scrypt:salt:hash',
 };
 
 const mockPrisma: Pick<PrismaClient, 'user'> = {
@@ -52,6 +53,7 @@ describe('GET /api/profiles/me', () => {
     expect(body.email).toBe('test@example.com');
     expect(body.provider).toBeUndefined();
     expect(body.providerId).toBeUndefined();
+    expect(body.passwordHash).toBeUndefined();
   });
 
   it('should return 404 if user not found', async () => {
@@ -147,4 +149,4 @@ describe('PUT /api/profiles/me', () => {
     expect(res.statusCode).toBe(200);
     expect(mockPrisma.user.findFirst).not.toHaveBeenCalled();
   });
-});
+});

apps/backend/src/routes/auth.ts

@@ -1,6 +1,8 @@
 import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify';
 import { encrypt } from '../utils/encryption.js';
 import { buildOAuthState, getMobileRedirectUri } from '../services/authService.js';
+import { loginSchema, signupSchema } from '../utils/validators.js';
+import { hashPassword, verifyPassword } from '../utils/password.js';
 
 const GITHUB_AUTH_URL = 'https://github.com/login/oauth/authorize';
 const GITHUB_TOKEN_URL = 'https://github.com/login/oauth/access_token';
@@ -14,7 +16,124 @@ interface OAuthCallbackQuery {
   state?: string;
 }
 
+const authUserSelect = {
+  id: true,
+  email: true,
+  username: true,
+  displayName: true,
+  bio: true,
+  pronouns: true,
+  role: true,
+  company: true,
+  avatarUrl: true,
+  accentColor: true,
+  createdAt: true,
+};
+
+function setAuthCookie(reply: FastifyReply, token: string) {
+  reply.setCookie('token', token, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    sameSite: 'lax',
+    path: '/',
+    maxAge: 30 * 24 * 60 * 60,
+  });
+}
+
+function getDuplicateAuthError(error: any): string {
+  const fields = Array.isArray(error?.meta?.target) ? error.meta.target : [];
+  if (fields.includes('username')) {
+    return 'Username already taken';
+  }
+  return 'Email already registered';
+}
+
 export async function authRoutes(app: FastifyInstance) {
+  app.post('/signup', async (request: FastifyRequest, reply: FastifyReply) => {
+    const parsed = signupSchema.safeParse(request.body);
+    if (!parsed.success) {
+      return reply.status(400).send({ error: 'Validation failed', details: parsed.error.flatten() });
+    }
+
+    const { email, password, username, displayName } = parsed.data;
+
+    const existing = await app.prisma.user.findFirst({
+      where: { OR: [{ email }, { username }] },
+      select: { email: true, username: true },
+    });
+
+    if (existing?.email === email) {
+      return reply.status(409).send({ error: 'Email already registered' });
+    }
+
+    if (existing?.username === username) {
+      return reply.status(409).send({ error: 'Username already taken' });
+    }
+
+    try {
+      const passwordHash = await hashPassword(password);
+      const user = await app.prisma.$transaction(async (tx) => {
+        const createdUser = await tx.user.create({
+          data: {
+            email,
+            username,
+            displayName,
+            provider: 'password',
+            providerId: email,
+            passwordHash,
+          },
+          select: authUserSelect,
+        });
+
+        await tx.card.create({
+          data: {
+            userId: createdUser.id,
+            title: 'Main DevCard',
+            isDefault: true,
+          },
+        });
+
+        return createdUser;
+      });
+
+      const token = app.jwt.sign({ id: user.id, username: user.username }, { expiresIn: '30d' });
+      setAuthCookie(reply, token);
+
+      return reply.status(201).send({ token, user });
+    } catch (error: any) {
+      if (error?.code === 'P2002') {
+        return reply.status(409).send({ error: getDuplicateAuthError(error) });
+      }
+
+      app.log.error({ error }, 'Email signup failed');
+      return reply.status(500).send({ error: 'Signup failed' });
+    }
+  });
+
+  app.post('/login', async (request: FastifyRequest, reply: FastifyReply) => {
+    const parsed = loginSchema.safeParse(request.body);
+    if (!parsed.success) {
+      return reply.status(400).send({ error: 'Validation failed', details: parsed.error.flatten() });
+    }
+
+    const { email, password } = parsed.data;
+    const user = await app.prisma.user.findUnique({
+      where: { email },
+      select: { ...authUserSelect, passwordHash: true },
+    });
+
+    const passwordMatches = await verifyPassword(password, user?.passwordHash ?? null);
+    if (!user || !passwordMatches) {
+      return reply.status(401).send({ error: 'Invalid email or password' });
+    }
+
+    const { passwordHash, ...safeUser } = user;
+    const token = app.jwt.sign({ id: user.id, username: user.username }, { expiresIn: '30d' });
+    setAuthCookie(reply, token);
+
+    return { token, user: safeUser };
+  });
+
   // Developer login bypass (development only)
   if (process.env.NODE_ENV !== 'production') {
     app.post('/dev-login', async (request: FastifyRequest, reply: FastifyReply) => {
@@ -136,13 +255,7 @@ export async function authRoutes(app: FastifyInstance) {
         return reply.redirect(`${mobileRedirect}#token=${token}`);
       }
 
-      reply.setCookie('token', token, {
-        httpOnly: true,
-        secure: process.env.NODE_ENV === 'production',
-        sameSite: 'lax',
-        path: '/',
-        maxAge: 30 * 24 * 60 * 60,
-      });
+      setAuthCookie(reply, token);
 
       return reply.redirect(`${process.env.PUBLIC_APP_URL}/dashboard`);
     } catch (error) {
@@ -237,13 +350,7 @@ export async function authRoutes(app: FastifyInstance) {
         return reply.redirect(`${mobileRedirect}#token=${token}`);
       }
 
-      reply.setCookie('token', token, {
-        httpOnly: true,
-        secure: process.env.NODE_ENV === 'production',
-        sameSite: 'lax',
-        path: '/',
-        maxAge: 30 * 24 * 60 * 60,
-      });
+      setAuthCookie(reply, token);
 
       return reply.redirect(`${process.env.PUBLIC_APP_URL}/dashboard`);
     } catch (error) {

apps/backend/src/services/profileService.ts

@@ -14,7 +14,7 @@ export async function getOwnProfile(app: FastifyInstance, userId: string) {
 
   if (!user) return null
 
-  const { provider, providerId, ...profileData } = user as any
+  const { provider, providerId, passwordHash, ...profileData } = user as any
   return { ...profileData, defaultCardId: user.cards[0]?.id || null }
 }