Signup and login end to end

Two new words: authentication and session

Authentication means proving who you are. In the Notes app you prove it with an email and a password. After that, the server must remember you, so you do not type the password on every click.

A session is that memory. The server makes a long random id (the session id), saves "this id belongs to user 7", and gives the id to the browser inside a cookie. A cookie is a small piece of text the browser stores and sends back to the same website automatically.

Signup, step by step

1. The user fills a form: name, email and a password of at least 8 characters.
2. The browser checks the fields for quick feedback, then sends POST /api/auth/signup with JSON.
3. The server checks the same rules again (the browser checks can be skipped by anyone).
4. The server hashes the password with Argon2id or bcrypt and saves name, email and password_hash in the users table.
5. If the email already exists, the server answers 409 Conflict. Otherwise it answers 201 Created (and often logs the user in straight away).

import argon2 from 'argon2';

app.post('/api/auth/signup', async (req, res) => {
  const name = String(req.body.name || '').trim();
  const email = String(req.body.email || '').trim().toLowerCase();
  const password = String(req.body.password || '');
  if (!name || password.length < 8) {
    return res.status(400).json({ error: 'Name and a password of 8+ characters are required' });
  }
  const passwordHash = await argon2.hash(password); // Argon2id by default
  const existing = await db.findUserByEmail(email);
  if (existing) return res.status(409).json({ error: 'Email already registered' });
  const user = await db.createUser({ name, email, passwordHash });
  return res.status(201).json({ id: user.id, name: user.name });
});

Login, the cookie and GET /api/me

Set-Cookie: sid=Jx8f...long-random-id; HttpOnly; Secure; SameSite=Lax; Path=/; Max-Age=604800

const res = await fetch('/api/auth/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ email, password }),
});
if (res.status === 401) showError('Wrong email or password');
else if (res.ok) location.href = '/notes';

Session or JWT? A JWT (JSON Web Token) is a signed token that holds the user id itself, so the server does not need a session table. But a JWT is hard to cancel before it expires. For a normal web app like Notes, a session cookie is simpler and safer. JWTs fit better when many separate services or mobile apps must check the same login.

Build it yourself or use a library?

Email verification and password reset

• Both use a one-time token: a long random string, saved (better: saved as a hash) with the user id and a short expiry, such as 30 minutes.
• The server emails a link like /reset?token=..., the user clicks it, and the server checks the token is real, unused and not expired.
• After use, delete the token so the link cannot work twice. After a password reset, also end the old sessions.
• On "forgot password", always reply "If this email exists, we sent a link", so nobody can test which emails are registered.