Kamran Ahmed
2 years ago
parent
430b78f8ae
commit
9727a3daae
4 changed files with 218 additions and 3 deletions
@ -0,0 +1,199 @@ |
|||||||
|
HTTP is the internet protocol that standardizes how clients and servers interact with each other. When you open a website, among other things, HTTP is the protocol that helps load the website in the browser. |
||||||
|
|
||||||
|
## HTTP is Stateless |
||||||
|
HTTP is a stateless protocol which means that each request made from the client to the server is treated as a standalone request; neither the client nor the server keeps track of the subsequent requests. Sessions allow you to change that; with sessions, the server has a way to associate some information with the client so that when the same client requests the server, it can retrieve that information. |
||||||
|
|
||||||
|
In this guide, we will learn what is Session-Based Authentication and how to implement it in Node.js. We also have a separate [visual guide on Session-Based Authentication](/guides/session-authentication) as well that explains the topic visually. |
||||||
|
|
||||||
|
## What is Session-Based Authentication? |
||||||
|
Session-based authentication is a stateful authentication technique where we use sessions to keep track of the authenticated user. Here is how Session Based Authentication works: |
||||||
|
|
||||||
|
* User submits the login request for authentication. |
||||||
|
* Server validates the credentials. If the credentials are valid, the server initiates a session and stores some information about the client. This information can be stored in memory, file system, or database. The server also generates a unique identifier that it can later use to retrieve this session information from the storage. Server sends this unique session identifier to the client. |
||||||
|
* Client saves the session id in a cookie and this cookie is sent to the server in each request made after the authentication. |
||||||
|
* Server, upon receiving a request, checks if the session id is present in the request and uses this session id to get information about the client. |
||||||
|
|
||||||
|
And that is how session-based authentication works. |
||||||
|
|
||||||
|
## Session-Based Authentication in Node.js |
||||||
|
Now that we know what session-based authentication is, let's see how we can implement session-based authentication in Node.js. |
||||||
|
|
||||||
|
Please note that, for the sake of simplicity, I have intentionally kept the project strictly relevant to the Session Based Authentication and have left out a lot of details that a production-ready application may require. Also, if you don't want to follow along, project [codebase can be found on GitHub](https://github.com/kamranahmedse/node-session-auth-example). |
||||||
|
|
||||||
|
First things first, create an empty directory that will be holding our application. |
||||||
|
|
||||||
|
```shell |
||||||
|
mkdir session-auth-example |
||||||
|
``` |
||||||
|
Now run the following command to setup a sample `package.json` file: |
||||||
|
```shell |
||||||
|
npm init -y |
||||||
|
``` |
||||||
|
Next, we need to install the dependencies: |
||||||
|
```shell |
||||||
|
npm install express express-session |
||||||
|
``` |
||||||
|
`Express` is the application framework, and `express-session` is the package that helps work with sessions easily. |
||||||
|
|
||||||
|
### Setting up the server |
||||||
|
Now create an `index.js` file at the root of the project with the following content: |
||||||
|
|
||||||
|
```javascript |
||||||
|
const express = require('express'); |
||||||
|
const sessions = require('express-session'); |
||||||
|
|
||||||
|
const app = express(); |
||||||
|
|
||||||
|
app.use(sessions({ |
||||||
|
secret: "some secret", |
||||||
|
cookie: { |
||||||
|
maxAge: 1000 * 60 * 60 * 24 // 24 hours |
||||||
|
}, |
||||||
|
resave: true, |
||||||
|
saveUninitialized: false, |
||||||
|
})); |
||||||
|
|
||||||
|
app.use(express.json()); |
||||||
|
app.use(express.urlencoded({extended: true})); |
||||||
|
|
||||||
|
// @todo register routes |
||||||
|
|
||||||
|
app.listen(3000, () => { |
||||||
|
console.log(`Server Running at port 3000`); |
||||||
|
}); |
||||||
|
``` |
||||||
|
The important piece to note here is the `express-session` middleware registration which automatically handles the session initialization, cooking parsing and session data retrieval, and so on. In our example here, we are passing the following configuration options: |
||||||
|
* `secret`: This is used to sign the session ID cookie. Using a secret that cannot be guessed will reduce the ability to hijack a session. |
||||||
|
* `cookie`: Object containing the configuration for session id cookie. |
||||||
|
* `resave`: Forces the session to be saved back to the session store, even if the session data was never modified during the request. |
||||||
|
* `saveUninitialized`: Forces an "uninitialized" session to be saved to the store, i.e., saves a session to the store even if the session was not initiated. |
||||||
|
|
||||||
|
Another important option is `store` which we can configure to change how/where the session data is stored on the server. By default, this data is stored in the memory, i.e., `MemoryStore`. |
||||||
|
|
||||||
|
Look at the [express-session documentation](https://github.com/expressjs/session) to learn more about the available options. |
||||||
|
|
||||||
|
### Creating Handlers |
||||||
|
Create a directory called the `handlers` at the project's root. This is the directory where we will be placing all the route-handling functions. |
||||||
|
|
||||||
|
Now let's create the homepage route, which will show the welcome message and a link to log out for the logged-in users and redirect to the login screen for the logged-out users. Create a file at `handlers/home.js` with the following content. |
||||||
|
|
||||||
|
```javascript |
||||||
|
module.exports = function HomeHandler(req, res) { |
||||||
|
if (!req.session.userid) { |
||||||
|
return res.redirect('/login'); |
||||||
|
} |
||||||
|
|
||||||
|
res.setHeader('Content-Type', 'text/HTML) |
||||||
|
res.write(` |
||||||
|
<h1>Welcome back ${req.session.userid}</h1> |
||||||
|
<a href="/logout">Logout</a> |
||||||
|
`); |
||||||
|
|
||||||
|
res.end() |
||||||
|
} |
||||||
|
``` |
||||||
|
|
||||||
|
At the top of this function, you will notice the check `req.session.userid`. `req.session` is automatically populated using the session cookie by the `express-session` middleware that we registered earlier. `req.session.userid` is one of the data fields that we will set to store the `userid` of the logged in user. |
||||||
|
|
||||||
|
Next, we need to register this handler with a route. Open the `index.js` file at the root of the project and register the following route: |
||||||
|
|
||||||
|
```javascript |
||||||
|
const HomeHandler = require('./handlers/home.js'); |
||||||
|
|
||||||
|
app.get('/', HomeHandler); |
||||||
|
``` |
||||||
|
|
||||||
|
Next, we have the login page, redirecting the user to the home screen if the user is logged in or showing the login form. Create a file at `handlers/login.js` with the following content: |
||||||
|
|
||||||
|
```javascript |
||||||
|
module.exports = function LoginHandler(req, res) { |
||||||
|
if (req.session.userid) { |
||||||
|
return res.redirect('/'); |
||||||
|
} |
||||||
|
|
||||||
|
res.setHeader('Content-Type', 'text/HTML) |
||||||
|
res.write(` |
||||||
|
<h1>Login</h1> |
||||||
|
<form method="post" action="/process-login"> |
||||||
|
<input type="text" name="username" placeholder="Username" /> <br> |
||||||
|
<input type="password" name="password" placeholder="Password" /> <br> |
||||||
|
<button type="submit">Login</button> |
||||||
|
</form> |
||||||
|
`); |
||||||
|
|
||||||
|
res.end(); |
||||||
|
} |
||||||
|
``` |
||||||
|
Again, at the top of the function, we are simply checking if we have `userid` in the session (which means the user is logged in). If the user is logged in, we redirect them to the homepage; if not, we show the login screen. In the login form, we have the method of `post`, and we submit the form to `/process-login`. Please note that, for the sake of simplicity, we have a simple HTML string returned in the response, but in a real-world application, you will probably have a separate view file. |
||||||
|
|
||||||
|
Let's first register this page and then implement `/process-login` endpoint. Open the `index.js` file from the root of the project and register the following route: |
||||||
|
|
||||||
|
```javascript |
||||||
|
const LoginHandler = require('./handlers/login.js'); |
||||||
|
|
||||||
|
app.get('/login', LoginHandler); |
||||||
|
``` |
||||||
|
|
||||||
|
Next, we have to implement the functionality to process the login form submissions. Create a file at `handlers/process-login.js` with the following content: |
||||||
|
|
||||||
|
```javascript |
||||||
|
module.exports = function processLogin(req, res) { |
||||||
|
if (req.body.username !== 'admin' || req.body.password !== 'admin') { |
||||||
|
return res.send('Invalid username or password); |
||||||
|
} |
||||||
|
|
||||||
|
req.session.userid = req.body.username; |
||||||
|
|
||||||
|
res.redirect('/'); |
||||||
|
} |
||||||
|
``` |
||||||
|
|
||||||
|
As you can see, we are simply checking that the username and password should both be `admin` and `admin` for a user to authenticate successfully. Upon finding valid credentials, we set the `userid` in the session by updating `req.session.userid`. Similarly, you can set any data in the session. For example, if we wanted to store the user role, we would do the following: |
||||||
|
|
||||||
|
```javascript |
||||||
|
req.session.role = 'admin' |
||||||
|
``` |
||||||
|
|
||||||
|
And later access this value out of the session anywhere in the subsequent requests. |
||||||
|
|
||||||
|
Register this route in the `index.js` file at the root of the project: |
||||||
|
|
||||||
|
```javascript |
||||||
|
const ProcessLoginHandler = require('./handlers/process-login.js'); |
||||||
|
|
||||||
|
app.post('/process-login', ProcessLoginHandler); |
||||||
|
``` |
||||||
|
|
||||||
|
Finally, we have the logout functionality. Create a file at `handlers/logout.js` with the following content: |
||||||
|
|
||||||
|
```javascript |
||||||
|
module.exports = function Logout(req, res) { |
||||||
|
req.session.destroy(); |
||||||
|
res.redirect('/'); |
||||||
|
} |
||||||
|
``` |
||||||
|
|
||||||
|
We reset the session by calling `req.session.destroy()` and then redirecting the user to the homepage. Register the logout handler in the `index.js` file using the following: |
||||||
|
|
||||||
|
```javascript |
||||||
|
const LogoutHandler = require('./handlers/logout.js'); |
||||||
|
|
||||||
|
app.get('/logout', LogoutHandler); |
||||||
|
``` |
||||||
|
|
||||||
|
## Running the Application |
||||||
|
Open the `package.json` file and register the `start` script as follows: |
||||||
|
|
||||||
|
```javascript |
||||||
|
"scripts": { |
||||||
|
"start": "node index.js" |
||||||
|
}, |
||||||
|
``` |
||||||
|
|
||||||
|
Now you can start the application by running the following command: |
||||||
|
|
||||||
|
```shell |
||||||
|
npm run start |
||||||
|
``` |
||||||
|
|
||||||
|
Now, if you open up your browser and visit the project at `http://localhost:3000` you will be able to see the Session-Based Authentication in action. |
||||||
Loading…
Reference in new issue