Please Sign In to continue!

PHP User Registration & Login System with Tailwind CSS (Step-by-Step Guide for Beginners)

Prakash Bhandari (PB)

Prakash Bhandari (PB)Loading..

Published , Last updated

 Like 
Bookmark    

Are you just starting with PHP and want to build a complete user registration and login system? You’re in the right place! In this tutorial, you’ll learn how to create a simple authentication system using core PHP, styled beautifully with Tailwind CSS, and designed in a way that's beginner-friendly and easy to understand.

 

📂 Project Directory Structure

Let’s start by organizing our files. Create a project folder like this:

php-auth-app/
│
├── css/
│   └── tailwind.min.css   (Tailwind CSS)
│
├── includes/
│   ├── config.php         (Database connection)
│   └── auth.php           (Session check for dashboard)
│
├── register.php           (Registration form)
├── login.php              (Login form)
├── dashboard.php          (Protected dashboard)
├── logout.php             (To log out the user)
└── db.sql                 (Database schema)

 

Step 1: Create the Database

Create a database named auth_demo and run the following SQL:

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100),
    email VARCHAR(100) UNIQUE,
    password VARCHAR(255),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

 

Step 2: Setup the Database Connection (includes/config.php)

<?php
$host = "localhost";
$user = "root";
$pass = "";
$db = "auth_demo";

$conn = new mysqli($host, $user, $pass, $db);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
?>

 

Step 3: Create Registration Page (register.php)

<?php include 'includes/config.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
    <link href="css/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
    <form method="POST" class="bg-white p-6 rounded shadow-md w-80">
        <h2 class="text-2xl font-bold mb-4">Register</h2>
        <?php
        if ($_SERVER["REQUEST_METHOD"] == "POST") {
            $name = $_POST['name'];
            $email = $_POST['email'];
            $password = password_hash($_POST['password'], PASSWORD_DEFAULT);

            $stmt = $conn->prepare("INSERT INTO users (name, email, password) VALUES (?, ?, ?)");
            $stmt->bind_param("sss", $name, $email, $password);

            if ($stmt->execute()) {
                echo "<p class='text-green-500'>Registration successful. <a href='login.php' class='text-blue-500'>Login</a></p>";
            } else {
                echo "<p class='text-red-500'>Error: Email may already be registered.</p>";
            }
        }
        ?>
        <input type="text" name="name" placeholder="Name" required class="mb-3 w-full p-2 border rounded">
        <input type="email" name="email" placeholder="Email" required class="mb-3 w-full p-2 border rounded">
        <input type="password" name="password" placeholder="Password" required class="mb-3 w-full p-2 border rounded">
        <button type="submit" class="bg-blue-600 text-white py-2 w-full rounded">Register</button>
    </form>
</body>
</html>

 

Step 4: Create Login Page (login.php)

<?php
session_start();
include 'includes/config.php';
?>
<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
    <link href="css/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
    <form method="POST" class="bg-white p-6 rounded shadow-md w-80">
        <h2 class="text-2xl font-bold mb-4">Login</h2>
        <?php
        if ($_SERVER["REQUEST_METHOD"] == "POST") {
            $email = $_POST['email'];
            $password = $_POST['password'];

            $stmt = $conn->prepare("SELECT * FROM users WHERE email = ?");
            $stmt->bind_param("s", $email);
            $stmt->execute();
            $result = $stmt->get_result();

            if ($user = $result->fetch_assoc()) {
                if (password_verify($password, $user['password'])) {
                    $_SESSION['user_id'] = $user['id'];
                    $_SESSION['user_name'] = $user['name'];
                    header("Location: dashboard.php");
                    exit();
                } else {
                    echo "<p class='text-red-500'>Invalid password.</p>";
                }
            } else {
                echo "<p class='text-red-500'>No user found.</p>";
            }
        }
        ?>
        <input type="email" name="email" placeholder="Email" required class="mb-3 w-full p-2 border rounded">
        <input type="password" name="password" placeholder="Password" required class="mb-3 w-full p-2 border rounded">
        <button type="submit" class="bg-green-600 text-white py-2 w-full rounded">Login</button>
    </form>
</body>
</html>

 

Step 5: Protect Dashboard Page (dashboard.php + includes/auth.php)

includes/auth.php

<?php
session_start();
if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit();
}
?>

 

dashboard.php

<?php include 'includes/auth.php'; ?>
<!DOCTYPE html>
<html>
<head>
    <title>Dashboard</title>
    <link href="css/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 h-screen flex items-center justify-center">
    <div class="bg-white p-8 rounded shadow-lg text-center">
        <h1 class="text-3xl font-bold mb-4">Welcome, <?= $_SESSION['user_name']; ?>!</h1>
        <a href="logout.php" class="text-red-500 underline">Logout</a>
    </div>
</body>
</html>

 

Step 6: Logout (logout.php)

<?php
session_start();
session_destroy();
header("Location: login.php");
exit();
?>

 

Final Tips

  • Use prepared statements to prevent SQL injection.
  • Use password_hash() and password_verify() for secure password handling.
  • Protect pages with session checks.
  • You can enhance the design further with Tailwind components or animations.

 

Discussion (0)

Login to Post Comment!