Introduction to JWTs: Authenticate and Access Protected Endpoints Using JavaScript

Introduction to JWTs: Authenticate and Access Protected Endpoints

Welcome to this lesson on JWT Authentication . Building on what we learned about session-based authentication, where the server retained user sessions, we now delve into a more stateless form of authentication using JSON Web Tokens (JWTs). JWT authentication is popular because it offers a decentralized and scalable approach, which is crucial for modern applications needing to handle numerous requests efficiently. By the end of this lesson, you will understand how JWTs work and how to use them to securely authenticate API requests, enhancing your capability in managing API interactions. Let's dive into JWT authentication and explore its significance in securing endpoints.

How JWT Works: A Client-Side Perspective

From a client-side perspective, using JWTs involves a series of steps to ensure secure and authenticated interactions with the API. Here’s a simplified breakdown of the JWT process: User Authentication : The first step is authenticating the user through a login request. The client sends a POST request with the user’s credentials (username and password) to the API's login endpoint. Token Issuance : Upon successful authentication, the API responds with two tokens: Access Token : This token is a short-lived credential used to access protected API endpoints. It contains encoded information such as the user ID and expiration timestamp. Refresh Token : This is a longer-lived token designed to obtain a new access token without requiring the user to log in again. Token Utilization : The client stores these tokens and uses the access token to make requests to protected resources. To do this, the access token is added to the HTTP request headers under the key "Authorization." It is usually included as a "Bearer" token, which simply means the token is presented as proof of authentication. So, the header looks like this: Authorization: Bearer YOUR_ACCESS_TOKEN_HERE . This tells the server that the request is authorized and should be granted access to the protected resource. Access Token Expiration : Once the access token expires, the client can use the refresh token to request a new access token, maintaining a smooth user experience without frequent logins. In this unit, we'll focus on the access token, understanding its role in securing requests to protected endpoints. Later in this course, we will delve into managing the refresh token, which plays a critical part in sustaining sessions when access tokens expire. By grasping the client-side workflow of JWTs, you can efficiently manage authenticated API interactions in a secure, scalable manner.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Signup Recap

Before diving into JWT-based authentication, let's revisit the signup process we covered in the previous lesson on session-based authentication. Here, we're registering a user with the API using a simple POST request, adding the user to the system without engaging in authentication yet. This familiar process sets the stage for our JWT authentication exploration. Here's a quick example:

JavaScript

// Base URL for the API
const baseUrl = "http://localhost:8000";

// User signup details
const signupDetails = {
    username: "testuser",
    password: "testpass123"
};

// Function to handle user signup
async function signupUser() {
    try {
        const response = await fetch(`${baseUrl}/auth/signup`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(signupDetails)
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        console.log("Signed up successfully!");
        console.log(data, "\n");
    } catch (error) {
        console.error("An error occurred during signup:", error);
    }
}

signupUser();

// Base URL for the API
const baseUrl = "http://localhost:8000";

// User signup details
const signupDetails = {
    username: "testuser",
    password: "testpass123"
};

// Function to handle user signup
async function signupUser() {
    try {
        const response = await fetch(`${baseUrl}/auth/signup`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(signupDetails)
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        console.log("Signed up successfully!");
        console.log(data, "\n");
    } catch (error) {
        console.error("An error occurred during signup:", error);
    }
}

signupUser();

In this code, we're making a POST request to our API's signup endpoint to register a new user. This step mirrors the session-based signup approach where user data is added to the system but doesn't directly engage in authentication processes. With the user now registered, we're ready to proceed to the login step and obtain JWT tokens.

With the user now registered, the next crucial step is to log in with these credentials and begin the JWT retrieval. This process involves sending another POST request to the API:

JavaScript

// User login details (same as signup details)
const loginDetails = {
    username: "testuser",
    password: "testpass123"
};

// Function to handle user login
async function loginUser() {
    try {
        const response = await fetch(`${baseUrl}/auth/login`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(loginDetails)
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        console.log("Logged in successfully!");
        console.log(data, "\n");
    } catch (error) {
        console.error("An error occurred during login:", error);
    }
}

loginUser();

// User login details (same as signup details)
const loginDetails = {
    username: "testuser",
    password: "testpass123"
};

// Function to handle user login
async function loginUser() {
    try {
        const response = await fetch(`${baseUrl}/auth/login`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(loginDetails)
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        console.log("Logged in successfully!");
        console.log(data, "\n");
    } catch (error) {
        console.error("An error occurred during login:", error);
    }
}

loginUser();

In this login step, we submit a POST request that includes the user credentials. Unlike the session-based method, which used cookies to maintain sessions, this server returns JWTs that provide secure and efficient access to API resources.

Here's how the output might look like after a successful login:

text

Logged in successfully!
{
    "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ0ZXN0dXNlciIsImlhdCI6MTczNzcyNzM5NSwiZXhwIjoxNzM3NzI4Mjk1fQ.3Rl8910TwYHjUPsjx4ql7XLfSHuzsQzCPYyzPe204po",
    "refresh_token": "15c8cbda2d99307391c160de1b8f2f687c620dc7626c7f7b80ef10ca72ceab80",
    "message": "Login successful"
}

Logged in successfully!
{
    "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ0ZXN0dXNlciIsImlhdCI6MTczNzcyNzM5NSwiZXhwIjoxNzM3NzI4Mjk1fQ.3Rl8910TwYHjUPsjx4ql7XLfSHuzsQzCPYyzPe204po",
    "refresh_token": "15c8cbda2d99307391c160de1b8f2f687c620dc7626c7f7b80ef10ca72ceab80",
    "message": "Login successful"
}

In this response, the access_token is a JWT utilized for authorizing requests, containing encoded information such as the user ID and token timestamps. The refresh_token, on the other hand, serves as a secure token to renew the access token without requiring the user to log in again. Lastly, the message confirms the successful login and issuance of the tokens.

Extracting Access and Refresh Tokens

Once you've successfully logged in, it's essential to extract the JWT tokens from the login response to use them in your application:

JavaScript

// Function to extract tokens from login response
async function extractTokens() {
    try {
        const response = await fetch(`${baseUrl}/auth/login`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(loginDetails)
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        const accessToken = data.access_token;
        const refreshToken = data.refresh_token;

        console.log("Access Token:", accessToken);
        console.log("Refresh Token:", refreshToken);
    } catch (error) {
        console.error("An error occurred during token extraction:", error);
    }
}

extractTokens();

// Function to extract tokens from login response
async function extractTokens() {
    try {
        const response = await fetch(`${baseUrl}/auth/login`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(loginDetails)
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        const accessToken = data.access_token;
        const refreshToken = data.refresh_token;

        console.log("Access Token:", accessToken);
        console.log("Refresh Token:", refreshToken);
    } catch (error) {
        console.error("An error occurred during token extraction:", error);
    }
}

extractTokens();

In this final code snippet, we pull out the access_token and refresh_token from the server's response. These tokens enable you to authenticate API requests and manage sessions in a stateless manner. The access token facilitates immediate request authentication, while the refresh token ensures the continuity of the session by allowing the renewal of access tokens without requiring user reauthentication. By efficiently handling these tokens, we embrace a scalable and secure method for managing authenticated interactions with the API.

Making Requests to Protected Endpoints with JWT

With the access token in hand, we can now authenticate requests to protected API endpoints. This is done by including the JWT in the HTTP request headers, ensuring that the API recognizes and allows the request. Here’s how you can make a request to a secured endpoint using the access token:

JavaScript

// Function to access protected endpoint
async function accessProtectedEndpoint(accessToken) {
    const headers = {
        "Authorization": `Bearer ${accessToken}`
    };

    try {
        const response = await fetch(`${baseUrl}/todos`, {
            method: 'GET',
            headers: headers
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        console.log("Accessed todos successfully!");
        console.log(data, "\n");
    } catch (error) {
        console.error("An error occurred while accessing protected endpoint:", error);
    }
}

// Example usage
extractTokens().then(tokens => {
    accessProtectedEndpoint(tokens.accessToken);
});

// Function to access protected endpoint
async function accessProtectedEndpoint(accessToken) {
    const headers = {
        "Authorization": `Bearer ${accessToken}`
    };

    try {
        const response = await fetch(`${baseUrl}/todos`, {
            method: 'GET',
            headers: headers
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        console.log("Accessed todos successfully!");
        console.log(data, "\n");
    } catch (error) {
        console.error("An error occurred while accessing protected endpoint:", error);
    }
}

// Example usage
extractTokens().then(tokens => {
    accessProtectedEndpoint(tokens.accessToken);
});

In this code, the access token is included in the "Authorization" header as a Bearer token. This header is crucial, as it signals to the API that the request is properly authenticated, granting access to the protected resources. For example, the /todos endpoint in this snippet is accessed securely, and if successful, the protected data is printed in the output.

By making requests in this manner, you ensure that sensitive operations and data retrievals are secure, leveraging the JWT approach for stateless, scalable, and flexible interaction with the API.