Securing API Calls with Tokens

1. Introduction

Securing API calls is a crucial aspect of modern web applications. This lesson covers how to use tokens, specifically JWT (JSON Web Tokens) and OAuth, to secure API calls in a front-end environment.

2. Key Concepts

2.1 What is a Token?

A token is a piece of data that acts as a digital key, allowing access to resources. Tokens can be used for authentication and authorization.

2.2 Types of Tokens

JWT (JSON Web Token)
OAuth Tokens

3. Implementation Steps

3.1 Obtain a Token

Typically, you will authenticate a user and obtain a token. This can be done via a login endpoint:


fetch('https://api.example.com/login', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({ username: 'user', password: 'pass' })
})
.then(response => response.json())
.then(data => {
    const token = data.token; // Store the token
});

3.2 Use the Token for API Calls

Once you have the token, include it in the headers for subsequent API calls:


fetch('https://api.example.com/protected-resource', {
    method: 'GET',
    headers: {
        'Authorization': 'Bearer ' + token,
    }
})
.then(response => response.json())
.then(data => {
    console.log(data);
});

4. Best Practices

Always use HTTPS to protect token transmission.
Store tokens securely (e.g., in HttpOnly cookies or secure storage).
Implement token expiration and refresh mechanisms.
Limit the scope of the token to specific APIs.

5. FAQ

What is JWT?

JWT is a compact, URL-safe means of representing claims to be transferred between two parties.

How do I refresh a token?

Use a refresh token endpoint to obtain a new access token without requiring the user to log in again.

What happens if a token is leaked?

If a token is leaked, it can allow unauthorized access to APIs. Implement proper token expiration and revocation mechanisms.