Lab 5: User Authentication
1. Requirements
Lab Objectives
- Understand how to use HTML, CSS, and JavaScript to build a basic form-based
system.
- Practice DOM manipulation and event handling with JavaScript.
- Learn how to store and retrieve data using the localStorage API.
- Store multiple user records using arrays and JSON in localStorage.
Design Theme
Students will create a simple 3-page web application:
- Register Page
- Login Page
- Welcome Page
Users can register with a username and password. Data is stored in localStorage as an array
of user objects. Registered users can log in, and upon successful login, they are redirected to
a welcome page.
2. Implementation
Step 1: Create Your Working Folder
Create the following folder structure:
lab-auth-localstorage/
├── [Link]
├── [Link]
├── [Link]
├── [Link]
└── [Link]
Step 2: Register Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<link href="[Link]
family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="[Link]">
</head>
<body>
<!-- form signup -->
<div class="signup">
<div class="signup__container">
<h1>Register</h1>
<form action="">
<h5>Email</h5>
<input type="text" class="input-signup-username" />
<h5>Password</h5>
<input type="password" class="input-signup-password" />
<button type="submit" class="signup__signInButton"
onclick="signup()">Sign Up</button>
</form>
</div>
</div>
<script src="[Link]"></script>
</body>
</html>
Step 3: Login Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>Document</title>
<link rel="stylesheet" href="[Link]" />
<link href="[Link]
family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet" />
</head>
<body>
<!-- from login -->
<div class="login">
<div class="login__container">
<h1>Login</h1>
<form>
<h5>Email</h5>
<input type="text" class="input-login-username" />
<h5>Password</h5>
<input type="password" class="input-login-password" />
<button type="submit" class="login__signInButton"
onclick="login()">Login</button>
</form>
<a href="./[Link]" class="login__registerButton">Create new
account?</a>
</div>
</div>
</body>
<script src="[Link]"></script>
</html>
Step 4: [Link]
// Get references to the input fields from the signup form
const inputUsernameRegister = [Link](".input-signup-
username");
const inputPasswordRegister = [Link](".input-signup-
password");
// Function to handle signup and save user data into localStorage
function signup() {
// Validate if either username or password is empty
if ([Link] === "" || [Link]
=== "") {
alert("Please enter username or password!");
} else {
// Initialize a user object with username (email) and password
attributes
const user = {
email: [Link], // using 'email' to match the
login form logic
password: [Link],
};
// Retrieve the existing user array from localStorage or initialize
an empty array if no data exists
let users = [Link]([Link]("users")) || [];
// Check if the user already exists in the users array based on the
email
let userExists = false;
for (let i = 0; i < [Link]; i++) {
if (users[i].email === [Link]) {
userExists = true;
break; // Exit the loop if a match is found
}
}
// If the user already exists, alert the user and prevent further
signup
if (userExists) {
alert("This account already exists. Please choose another
email.");
} else {
// Add the new user to the users array
[Link](user);
// Convert the updated users array to a JSON string
let json = [Link](users);
// Save the updated array back to localStorage
[Link]("users", json);
alert("Signup successful!");
// Redirect to login page after successful registration
[Link] = "[Link]";
}
}
}
Step 5: [Link]
// Get references to the input fields from the login form
const inputUsernameLogin = [Link](".input-login-
username");
const inputPasswordLogin = [Link](".input-login-
password");
// Function to handle login
function login() {
// Validate if either username or password is empty
if ([Link] === "" || [Link] ===
"") {
alert("Please enter both username and password!");
} else {
// Retrieve the existing users array from localStorage
let users = [Link]([Link]("users")) || [];
// Initialize a flag to track whether the login is successful
let loginSuccess = false;
// Loop through the users array to check if the entered credentials
are correct
for (let i = 0; i < [Link]; i++) {
if (users[i].email === [Link] &&
users[i].password === [Link]) {
loginSuccess = true;
break; // Exit the loop if a match is found
}
}
// If login is successful, redirect to the home page or dashboard
if (loginSuccess) {
alert("Login successful!");
[Link] = "[Link]"; // Redirect to a homepage or
dashboard
} else {
// If the user does not exist or credentials are incorrect, show
an error message
alert("Invalid email or password. Please try again.");
}
}
}
Step 7: Review and Test
- Test user registration by entering a new username and password.
- Test logging in with correct and incorrect credentials.
3. Capstone Project: Student Dashboard
Students can expand this mini-project into a dashboard by:
- Adding email or phone number fields.
- Tracking login history (using timestamps).
- Showing user-specific data after login.
- Validating forms more robustly using regular expressions.