Token authentication flow
#**A shorter way to write fetch calls**
In the Beginner section, every fetch request used two separate `await` lines:
```javascript
const response = await fetch(url);
const data = await response.json();
```
From here you will also see a one-line shorthand using `.then()`:
```javascript
const data = await fetch(url).then(r => r.json());
```
These two forms are equivalent. `.then(r => r.json())` is a callback attached directly to the Promise returned by `fetch()`. When the server responds, `.then()` immediately calls `r.json()` and returns a new Promise. The outer `await` waits for that JSON Promise to resolve.
The shorter form is useful when you do not need to inspect `response.status` or `response.ok` before reading the body. When you do need error checking, use the two-step form -- it gives you access to `response` before consuming the body:
```javascript
const response = await fetch(url);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data = await response.json();
```
---
Token authentication works in two steps: obtain a token once, then include it in every subsequent request.
**Step 1 — Register a new user:**
```javascript
const response = await fetch('https://apilearn.tukas.dev/api/auth/register/', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
username: 'alice42',
email: '[email protected]',
password: 'SecurePass123!',
}),
});
const data = await response.json();
console.log(data.token); // token is returned immediately on registration
```
**Step 2 — Or log in to get a token for an existing account:**
```javascript
const response = await fetch('https://apilearn.tukas.dev/api/auth/token/', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username: 'alice42', password: 'SecurePass123!' }),
});
const { token } = await response.json();
```
**Step 3 — Use the token in the `Authorization` header:**
```javascript
const headers = {
'Authorization': `Token ${token}`,
'Content-Type': 'application/json',
};
const profile = await fetch('https://apilearn.tukas.dev/api/users/profile/', {
headers,
}).then(r => r.json());
console.log(profile.username);
```
The token does not expire — store it and reuse it across requests. The `Authorization` header format is exactly `Token <token>` (with a capital T, space, then the token value).