Tuesday 2 January 2024

Create a Secure Login with JWT Tokens in PHP: A Comprehensive Tutorial

In the world of web development, security is paramount, especially when it comes to user authentication. One effective way to enhance the security of your PHP applications is by implementing JWT (JSON Web Token) based login systems. In this comprehensive tutorial, we will guide you through the process of creating a secure login mechanism using JWT Tokens in PHP.

Create a Secure Login with JWT Tokens in PHP: A Comprehensive Tutorial

Why Choose JWT Tokens?


JWT Tokens offer a robust and efficient method for handling user authentication. They are compact, self-contained, and can be easily transmitted between parties. By leveraging JWT Tokens, you can ensure a secure and scalable login system for your PHP applications.

Prerequisites


Before we dive into the tutorial, make sure you have the following prerequisites in place:

  • Basic understanding of PHP programming.
  • A web server with PHP support.
  • A text editor for code editing.

Step 1: Setting Up Your PHP Environment


Begin by setting up your PHP environment. Ensure that you have PHP installed on your server, and create a new directory for your project. This will be the foundation for our secure login system.


// Sample PHP code for directory structure
/project-root
|-- index.php
|-- welcome.php
|-- logout.php
    |-- Before we dive into the tutorial, make sure you have the following prerequisites in place:





Step 2: Installing Dependencies


We will need a library to handle JWT operations. For this tutorial, we will use the popular `firebase/php-jwt` library. Install it using Composer:


composer require firebase/php-jwt


This library will simplify the creation, validation, and decoding of JWT Tokens in your PHP application.

Step 3: Creating the User Database


For our tutorial, let's assume you have a MySQL database named testing with a table named user. This table should contain fields like user_id, user_email, user_password, user_name and any other user-related information you need.


CREATE TABLE `user` (
  `user_id` int NOT NULL AUTO_INCREMENT,
  `user_email` varchar(70) DEFAULT NULL,
  `user_password` varchar(45) DEFAULT NULL,
  `user_name` varchar(45) DEFAULT NULL,
  PRIMARY KEY (`user_id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

INSERT INTO `user` VALUES (1,'johnsmith@gmail.com','password','John Smith');


Step 4: Building the Login System


Now, let's create the login system (login.php) that verifies user credentials and generates a JWT Token upon successful authentication.

index.php

<?php

//index.php

require 'vendor/autoload.php';

use Firebase\JWT\JWT;

$error = '';

if(isset($_POST["login"]))
{
	$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "password");

	if(empty($_POST["email"])){
		$error = 'Please Enter Email Details';
	} else if(empty($_POST["password"])){
		$error = 'Please Enter Password Details';
	} else {
		$query = "SELECT * FROM user WHERE user_email = ?";
		$statement = $connect->prepare($query);
		$statement->execute([$_POST["email"]]);
		$data = $statement->fetch(PDO::FETCH_ASSOC);
		if($data){
			if($data['user_password'] ===  $_POST['password']){
				$key = '1a3LM3W966D6QTJ5BJb9opunkUcw_d09NCOIJb9QZTsrneqOICoMoeYUDcd_NfaQyR787PAH98Vhue5g938jdkiyIZyJICytKlbjNBtebaHljIR6-zf3A2h3uy6pCtUFl1UhXWnV6madujY4_3SyUViRwBUOP-UudUL4wnJnKYUGDKsiZePPzBGrF4_gxJMRwF9lIWyUCHSh-PRGfvT7s1mu4-5ByYlFvGDQraP4ZiG5bC1TAKO_CnPyd1hrpdzBzNW4SfjqGKmz7IvLAHmRD-2AMQHpTU-hN2vwoA-iQxwQhfnqjM0nnwtZ0urE6HjKl6GWQW-KLnhtfw5n_84IRQ';
				$token = JWT::encode(
					array(
						'iat'		=>	time(),
						'nbf'		=>	time(),
						'exp'		=>	time() + 3600,
						'data'	=> array(
							'user_id'	=>	$data['user_id'],
							'user_name'	=>	$data['user_name']
						)
					),
					$key,
					'HS256'
				);
				setcookie("token", $token, time() + 3600, "/", "", true, true);
				header('location:welcome.php');

			} else {
				$error = 'Wrong Password';
			}
		} else {
			$error = 'Wrong Email Address';
		}
	}
}

?>


<!doctype html>
<html lang="en">
  	<head>
    	<!-- Required meta tags -->
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1">

    	<!-- Bootstrap CSS -->
    	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    	<title>How to Create Login using JWT Token in PHP</title>
  	</head>
  	<body>
    	<div class="container">
    		<h1 class="text-center mt-5 mb-5">How to Create Login using JWT Token in PHP</h1>
    		<div class="row">
    			<div class="col-md-4">&nbsp;</div>
    			<div class="col-md-4">
    				<?php

    				if($error !== '')
    				{
    					echo '<div class="alert alert-danger">'.$error.'</div>';
    				}

    				?>
		    		<div class="card">
		    			<div class="card-header">Login</div>
		    			<div class="card-body">
		    				<form method="post">
		    					<div class="mb-3">
			    					<label>Email</label>
			    					<input type="email" name="email" class="form-control" />
			    				</div>
			    				<div class="mb-3">
			    					<label>Password</label>
			    					<input type="password" name="password" class="form-control" />
			    				</div>
			    				<div class="text-center">
			    					<input type="submit" name="login" class="btn btn-primary" value="Login" />
			    				</div>
		    				</form>
		    			</div>
		    		</div>
		    	</div>
	    	</div>
    	</div>
  	</body>
</html>


The above code is a PHP script that handles user authentication using JWT (JSON Web Token) in a web application. This above code demonstrates a basic user authentication flow using JWT tokens in PHP, integrating database queries, JWT token generation, and error handling for a secure login system. Make sure to adapt and enhance it according to your specific project requirements and security considerations.

The HTML section contains a simple form for user login. It uses Bootstrap for styling.

welcome.php

<?php

//welcome.php

require 'vendor/autoload.php';

use Firebase\JWT\JWT;
use Firebase\JWT\Key;

$key = '1a3LM3W966D6QTJ5BJb9opunkUcw_d09NCOIJb9QZTsrneqOICoMoeYUDcd_NfaQyR787PAH98Vhue5g938jdkiyIZyJICytKlbjNBtebaHljIR6-zf3A2h3uy6pCtUFl1UhXWnV6madujY4_3SyUViRwBUOP-UudUL4wnJnKYUGDKsiZePPzBGrF4_gxJMRwF9lIWyUCHSh-PRGfvT7s1mu4-5ByYlFvGDQraP4ZiG5bC1TAKO_CnPyd1hrpdzBzNW4SfjqGKmz7IvLAHmRD-2AMQHpTU-hN2vwoA-iQxwQhfnqjM0nnwtZ0urE6HjKl6GWQW-KLnhtfw5n_84IRQ';

if(isset($_COOKIE['token'])){
	$decoded = JWT::decode($_COOKIE['token'], new Key($key, 'HS256'));
} else {
	header('location:index.php');
}

?>

<!doctype html>
<html lang="en">
  	<head>
    	<!-- Required meta tags -->
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1">

    	<!-- Bootstrap CSS -->
    	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    	<title>How to Create Login in PHP using JWT Token</title>
  	</head>
  	<body>
    	<div class="container">
    		<h1 class="text-center mt-5 mb-5">How to Create Login in PHP using JWT Token</h1>
    		<div class="row">
    			<div class="col-md-4">&nbsp;</div>
    			<div class="col-md-4 text-center">
    				<h1>Welcome <b><?php echo $decoded->data->user_name; ?></b></h1>
    				<a href="logout.php">Logout</a>
    				
		    	</div>
	    	</div>
    	</div>
  	</body>
</html>


This PHP script (welcome.php) is responsible for displaying a welcome page for authenticated users.

This script checks for a valid JWT token in the user's cookie. If a token is present, it decodes the token to retrieve user information and displays a welcome message. If no token is found, the user is redirected to the login page. The welcome page includes a logout link, which presumably leads to a logout script (logout.php).

logout.php

<?php

//logout.php

setcookie("token", "", time() - 3600,  "/", "", true, true);

header('location:index.php');

?>





The provided PHP script (logout.php) is responsible for logging out a user from the application.

This script is a simple logout mechanism for a web application. It clears the authentication token stored in the user's browser by deleting the corresponding cookie and then redirects the user to the login page to ensure a logged-out state. This is a common practice to terminate a user's session and enhance security.

Conclusion


Congratulations! You've successfully created a secure login system using JWT Tokens in PHP. This comprehensive tutorial covered setting up your PHP environment, installing dependencies, creating a user database, implementing user registration, building the login system, and securing your application.

By following these steps, you've enhanced the security of your PHP application, providing a robust authentication mechanism for your users. Implementing JWT-based login systems is a crucial step towards creating secure, scalable, and reliable web applications.

Feel free to adapt and expand upon this tutorial to meet the specific requirements of your project. Happy coding!

Remember to regularly update your dependencies, follow best practices, and stay informed about the latest security standards to ensure the ongoing security of your PHP applications.

0 comments:

Post a Comment