Session-Based Authentication with JavaScript

Introduction to Session-Based Authentication

Welcome to this lesson on Session-Based Authentication. In the previous lesson, we explored API authentication using API keys, which are stateless. Now, we will focus on session-based authentication in Node.js, where the server maintains user session information. This enables a user-friendly way to manage active sessions and access protected resources. By the end of this lesson, you will be able to: Sign up, log in, and establish a session. Maintain session persistence using cookies in a Node.js environment. Access protected API endpoints securely using stored session cookies. Log out and terminate the session.

Understanding Session-Based Authentication

Session-based authentication allows users to stay logged in while interacting with different API endpoints. Unlike API keys, which require sending credentials in every request, session authentication uses cookies to maintain user state across requests. How It Works: Session Creation (Login): The user logs in with their credentials (e.g., username and password). The server responds with a session ID stored in a cookie. Maintaining the Session: The client must store and manually send this session cookie with subsequent requests, allowing access to protected resources. Session Termination (Logout): The user logs out, and the session is invalidated on the server, preventing further access with the old session ID. Session-Based Authentication Flow in Node.js: Unlike browsers, Node.js does not automatically manage cookies. Therefore, we must manually store and send session cookies using tools like tough-cookie .

Managing Sessions in Node.js (Manual Cookie Management Required)

Node.js does not automatically store and send cookies. Instead, we use tough-cookie to manage sessions manually. To install the necessary packages, run the following command: Shell npm install tough-cookie node-fetch@2 Then, set up the required modules in your JavaScript file: JavaScript const fetch = require('node-fetch'); const { CookieJar } = require('tough-cookie'); const cookieJar = new CookieJar(); const fetch = require('node-fetch'); const { CookieJar } = require('tough-cookie'); const cookieJar = new CookieJar();

Understanding Session IDs and Cookies

Session IDs are unique identifiers assigned by the server to track a user's session. When a user logs in, the server generates a session ID and sends it back to the client in a Set-Cookie header. This session ID is stored in a cookie on the client-side and is sent with subsequent requests to maintain the session.

Join the 1M+ learners on CodeSignal

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

JavaScript

const fetch = require('node-fetch');
const { CookieJar } = require('tough-cookie');
const cookieJar = new CookieJar();

JavaScript

const cookies = loginResponse.headers.raw()['set-cookie'];
if (!cookies) {
    throw new Error('No session cookie received');
}

const cookies = loginResponse.headers.raw()['set-cookie'];
if (!cookies) {
    throw new Error('No session cookie received');
}

JavaScript

cookies.forEach(cookie => cookieJar.setCookieSync(cookie, baseUrl));

cookies.forEach(cookie => cookieJar.setCookieSync(cookie, baseUrl));

JavaScript

const cookieHeader = await cookieJar.getCookieString(baseUrl);
const response = await fetch(`${baseUrl}/protected-endpoint`, {
    method: 'GET',
    headers: {
        'Cookie': cookieHeader
    }
});

const cookieHeader = await cookieJar.getCookieString(baseUrl);
const response = await fetch(`${baseUrl}/protected-endpoint`, {
    method: 'GET',
    headers: {
        'Cookie': cookieHeader
    }
});

JavaScript

const loginResponse = await fetch(`${baseUrl}/auth/login`, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(authDetails)
});

const cookies = loginResponse.headers.raw()['set-cookie'];
if (!cookies) {
    throw new Error('No session cookie received');
}
cookies.forEach(cookie => cookieJar.setCookieSync(cookie, baseUrl));

const loginResponse = await fetch(`${baseUrl}/auth/login`, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(authDetails)
});

const cookies = loginResponse.headers.raw()['set-cookie'];
if (!cookies) {
    throw new Error('No session cookie received');
}
cookies.forEach(cookie => cookieJar.setCookieSync(cookie, baseUrl));

JavaScript

const cookieHeader = await cookieJar.getCookieString(baseUrl);
const todosResponse = await fetch(`${baseUrl}/todos`, {
    method: 'GET',
    headers: {
        'Cookie': cookieHeader // Attach the session cookie
    }
});

const cookieHeader = await cookieJar.getCookieString(baseUrl);
const todosResponse = await fetch(`${baseUrl}/todos`, {
    method: 'GET',
    headers: {
        'Cookie': cookieHeader // Attach the session cookie
    }
});

JavaScript

fetch(`${baseUrl}/auth/signup`, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(authDetails)
})
.then(response => response.json())
.then(data => console.log('Signed up successfully!', data))
.catch(error => console.error('Signup error:', error));

fetch(`${baseUrl}/auth/signup`, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(authDetails)
})
.then(response => response.json())
.then(data => console.log('Signed up successfully!', data))
.catch(error => console.error('Signup error:', error));

JavaScript

fetch(`${baseUrl}/auth/login`, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(authDetails)
})
.then(response => {
    if (!response.ok) throw new Error('Login failed');
    return response.json();
})
.then(data => console.log('Logged in successfully!', data))
.catch(error => console.error('Login error:', error));

fetch(`${baseUrl}/auth/login`, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(authDetails)
})
.then(response => {
    if (!response.ok) throw new Error('Login failed');
    return response.json();
})
.then(data => console.log('Logged in successfully!', data))
.catch(error => console.error('Login error:', error));

JavaScript

fetch(`${baseUrl}/todos`, {
    method: 'GET',
    headers: {
        'Cookie': cookieJar.getCookieString(baseUrl) // Attach stored cookies
    }
})
.then(response => response.json())
.then(data => console.log('Protected data:', data))
.catch(error => console.error('Access denied:', error));

fetch(`${baseUrl}/todos`, {
    method: 'GET',
    headers: {
        'Cookie': cookieJar.getCookieString(baseUrl) // Attach stored cookies
    }
})
.then(response => response.json())
.then(data => console.log('Protected data:', data))
.catch(error => console.error('Access denied:', error));

JavaScript

fetch(`${baseUrl}/auth/logout`, {
    method: 'POST',
    headers: {
        'Cookie': cookieJar.getCookieString(baseUrl) // Attach session cookie
    }
})
.then(response => response.json())
.then(data => console.log('Logged out successfully!', data))
.catch(error => console.error('Logout error:', error));

fetch(`${baseUrl}/auth/logout`, {
    method: 'POST',
    headers: {
        'Cookie': cookieJar.getCookieString(baseUrl) // Attach session cookie
    }
})
.then(response => response.json())
.then(data => console.log('Logged out successfully!', data))
.catch(error => console.error('Logout error:', error));

JavaScript

const cookies = loginResponse.headers.raw()['set-cookie'];
if (!cookies) {
    throw new Error('No session cookie received');
}

JavaScript

cookies.forEach(cookie => cookieJar.setCookieSync(cookie, baseUrl));

JavaScript

const cookieHeader = await cookieJar.getCookieString(baseUrl);
const response = await fetch(`${baseUrl}/protected-endpoint`, {
    method: 'GET',
    headers: {
        'Cookie': cookieHeader
    }
});

JavaScript

const loginResponse = await fetch(`${baseUrl}/auth/login`, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(authDetails)
});

const cookies = loginResponse.headers.raw()['set-cookie'];
if (!cookies) {
    throw new Error('No session cookie received');
}
cookies.forEach(cookie => cookieJar.setCookieSync(cookie, baseUrl));

JavaScript

const cookieHeader = await cookieJar.getCookieString(baseUrl);
const todosResponse = await fetch(`${baseUrl}/todos`, {
    method: 'GET',
    headers: {
        'Cookie': cookieHeader // Attach the session cookie
    }
});

JavaScript

fetch(`${baseUrl}/auth/signup`, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(authDetails)
})
.then(response => response.json())
.then(data => console.log('Signed up successfully!', data))
.catch(error => console.error('Signup error:', error));

JavaScript

fetch(`${baseUrl}/auth/login`, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(authDetails)
})
.then(response => {
    if (!response.ok) throw new Error('Login failed');
    return response.json();
})
.then(data => console.log('Logged in successfully!', data))
.catch(error => console.error('Login error:', error));

JavaScript

fetch(`${baseUrl}/todos`, {
    method: 'GET',
    headers: {
        'Cookie': cookieJar.getCookieString(baseUrl) // Attach stored cookies
    }
})
.then(response => response.json())
.then(data => console.log('Protected data:', data))
.catch(error => console.error('Access denied:', error));

JavaScript

fetch(`${baseUrl}/auth/logout`, {
    method: 'POST',
    headers: {
        'Cookie': cookieJar.getCookieString(baseUrl) // Attach session cookie
    }
})
.then(response => response.json())
.then(data => console.log('Logged out successfully!', data))
.catch(error => console.error('Logout error:', error));

Introduction to Session-Based Authentication

Understanding Session-Based Authentication

Managing Sessions in Node.js (Manual Cookie Management Required)

Understanding Session IDs and Cookies

Join the 1M+ learners on CodeSignal

Extracting Cookies from Headers in Node.js

Step-by-Step Authentication Flow in Node.js:

Step 2: Use Cookies for Authenticated Requests

Step-by-Step Guide to Session-Based Authentication

Step 2: Logging In

Step 3: Accessing a Protected Endpoint

Step 4: Logging Out

Handling Edge Cases in Node.js

Summary