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

- Auth uses JWT cookies — configure in `wwwhat.toml` under `[auth]`
- User variables: `#user.authenticated#`, `#user.email#`, `#user.full_name#`, `#user.role#`
- `<if user.authenticated>` for conditional UI
- `auth: user` / `auth: admin, editor` in `<what>` blocks protects pages
- Login: `POST /w-auth/login` — Logout: `POST /w-auth/logout`
- Set `auth:` in `application.what` to protect entire directories