AJAX User Registration and Login with Cookie Autologin

Introduction

In this tutorial, we will learn how to implement a user registration and login system using AJAX and cookies. This system will allow users to register and login to your website without requiring a full page reload. Once a user logs in, a cookie will be set on their browser, allowing them to remain logged in even after closing and reopening their browser.

Prerequisites

Before starting this tutorial, you should have a basic understanding of HTML, CSS, JavaScript, and PHP. You should also have a PHP development environment set up on your computer.

Step 1: Create the Database

First, we need to create a database to store our user information. Create a new database in your PHPMyAdmin and create the following tables:

users

• id (primary key, auto-increment)
• username
• password
• email
• created_at
• updated_at

Step 2: Create the Registration Form

Create a new HTML file called register.html and add the following code:

<form id="register-form">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username"><br><br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <input type="submit" value="Register">
</form>

Step 3: Create the Registration Script

Create a new JavaScript file called register.js and add the following code:

// Get the form and the input fields
var form = document.getElementById('register-form');
var username = document.getElementById('username');
var password = document.getElementById('password');
var email = document.getElementById('email');

// Add an event listener to the form
form.addEventListener('submit', function(event) {
    event.preventDefault();
    // Send the form data to the server using AJAX
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'register.php', true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.send('username=' + username.value + '&password=' + password.value + '&email=' + email.value);
    xhr.onload = function() {
        if (xhr.status === 200) {
            // User has been successfully registered
            alert('You have been successfully registered!');
        } else {
            // Error registering user
            alert('Error registering user!');
        }
    };
});

Step 4: Create the Registration PHP Script

Create a new PHP file called register.php and add the following code:

<?php
// Connect to the database
$conn = mysqli_connect("localhost", "username", "password", "database");

// Check connection
if (!$conn) {
    die("Connection failed: ". mysqli_connect_error());
}

// Get the form data
$username = $_POST['username'];
$password = $_POST['password'];
$email = $_POST['email'];

// Hash the password
$password_hash = password_hash($password, PASSWORD_DEFAULT);

// Insert the user into the database
$query = "INSERT INTO users (username, password, email) VALUES ('$username', '$password_hash', '$email')";
mysqli_query($conn, $query);

// Close the connection
mysqli_close($conn);
?>

Step 5: Create the Login Form

Create a new HTML file called login.html and add the following code:

<form id="login-form">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username"><br><br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password"><br><br>
    <input type="submit" value="Login">
</form>

Step 6: Create the Login Script

Create a new JavaScript file called login.js and add the following code:

// Get the form and the input fields
var form = document.getElementById('login-form');
var username = document.getElementById('username');
var password = document.getElementById('password');

// Add an event listener to the form
form.addEventListener('submit', function(event) {
    event.preventDefault();
    // Send the form data to the server using AJAX
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'login.php', true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.send('username=' + username.value + '&password=' + password.value);
    xhr.onload = function() {
        if (xhr.status === 200) {
            // User has been successfully logged in
            alert('You have been successfully logged in!');
            // Set the cookie to remember the user
            document.cookie = 'username=' + username.value + '; expires=' + new Date(Date.now() + 31536000000).toUTCString();
        } else {
            // Error logging in
            alert('Error logging in!');
        }
    };
});

Step 7: Create the Login PHP Script

Create a new PHP file called login.php and add the following code:

<?php
// Connect to the database
$conn = mysqli_connect("localhost", "username", "password", "database");

// Check connection
if (!$conn) {
    die("Connection failed: ". mysqli_connect_error());
}

// Get the form data
$username = $_POST['username'];
$password = $_POST['password'];

// Check if the user exists and the password is correct
$query = "SELECT * FROM users WHERE username = '$username'";
$result = mysqli_query($conn, $query);
if (mysqli_num_rows($result) > 0) {
    $row = mysqli_fetch_assoc($result);
    if (password_verify($password, $row['password'])) {
        // User has been successfully logged in
        echo 'success';
    } else {
        // Error logging in
        echo 'error';
    }
} else {
    // Error logging in
    echo 'error';
}

// Close the connection
mysqli_close($conn);
?>

Step 8: Create the Autologin Script

Create a new JavaScript file called autologin.js and add the following code:

// Get the cookie
var cookie = document.cookie;

// Check if the cookie exists
if (cookie.includes('username=')) {
    // Get the username from the cookie
    var username = cookie.split('=')[1];

    // Send the username to the server using AJAX
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'autologin.php', true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.send('username=' + username);
    xhr.onload = function() {
        if (xhr.status === 200) {
            // User has been successfully autologged in
            alert('You have been successfully autologged in!');
        } else {
            // Error autologging in
            alert('Error autologging in!');
        }
    };
}

Step 9: Create the Autologin PHP Script

Create a new PHP file called autologin.php and add the following code:

<?php
// Connect to the database
$conn = mysqli_connect("localhost", "username", "password", "database");

// Check connection
if (!$conn) {
    die("Connection failed: ". mysqli_connect_error());
}

// Get the username from the cookie
$username = $_POST['username'];

// Check if the user exists
$query = "SELECT * FROM users WHERE username = '$username'";
$result = mysqli_query($conn, $query);
if (mysqli_num_rows($result) > 0) {
    // User has been successfully autologged in
    echo 'success';
} else {
    // Error autologging in
    echo 'error';
}

// Close the connection
mysqli_close($conn);
?>

That's it! You have now implemented a user registration and login system using AJAX and cookies. Users can register and login to your website without requiring a full page reload, and once logged in, they will remain logged in even after closing and reopening their browser.