title: "Step 9 — Authentication" active_step: 9

Step 9 — Authentication

JWT auth, role-based access control, all declared in HTML.

How auth works

wwwhat uses JWT tokens stored in a cookie. When a user logs in via POST /w-auth/login, the server issues a JWT containing their user_id, email, full_name, and role. Every subsequent request is verified against this token.

JWT Cookie contents
{
  "user_id": 42,
  "email": "jane@example.com",
  "full_name": "Jane Smith",
  "role": "admin"
}

Configuring auth in wwwhat.toml

[auth]
enabled = true
jwt_secret = "your-secret-key-here"
cookie_name = "w_auth"
expiry_days = 7

User variables in templates

When a user is logged in, these variables are available in all templates:

Variable Value
#user.authenticated# true or empty
#user.email# jane@example.com
#user.full_name# Jane Smith
#user.role# admin, editor, user, etc.

Conditional UI based on auth

Show and hide content based on whether the user is logged in or their role. 

<if user.authenticated>
  Welcome, #user.full_name#!
  <a href="/dashboard">Dashboard</a>
  <else/>
  <a href="/login">Log in</a>
</if>

<if user.role == admin>
  <a href="/admin">Admin Panel</a>
</if>
Live example (your current auth state)
Logged in as #user.full_name# (#user.email#) — role: #user.role|default:"user"#
Not logged in. Auth is not configured in this tutorial project.

Protecting pages with auth directives

Set auth: in the page's <what> block to restrict access. Unauthenticated requests redirect to /login. 

<!-- Public page -->
<what>
auth: all
</what>

<!-- Any logged-in user -->
<what>
auth: user
</what>

<!-- Admin or editor only -->
<what>
auth: admin, editor
</what>

You can also set auth: user in application.what to protect an entire directory at once.

Login and logout

<!-- Login form -->
<form method="post" action="/w-auth/login">
  <input name="email" type="email" w-required>
  <input name="password" type="password" w-required>
  <button type="submit">Log in</button>
</form>

<!-- Logout button -->
<form method="post" action="/w-auth/logout">
  <button type="submit">Log out</button>
</form>

Successful login redirects to the redirect form field value, or / by default.

What you learned