Introduction: The Magic Behind "Log In"
Every app you use has a login system. But how does it actually work? In this guide, we'll build the frontend of a login system. Note: For a real production app, you need a backend. But understanding the frontend logic is the first step.
Core Concept: Forms and Validation
We need to capture user input, validate it (e.g., email format), and simulate authentication by storing a session token.
Real Code: The HTML
<form id="loginForm">
<input type="email" id="email" placeholder="Email" required>
<input type="password" id="password" placeholder="Password" required>
<button type="submit">Log In</button>
</form>Real Code: The JavaScript
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
// Simulated check (In real apps, check with a backend)
if (email === 'admin@digisone.com' && password === '123456') {
localStorage.setItem('loggedIn', 'true');
alert('Login successful!');
window.location.href = 'dashboard.html';
} else {
alert('Invalid credentials.');
}
});Step-by-Step Execution
- Create the HTML file with the form.
- Link a JavaScript file.
- Add the script above.
- Open the page and test with the credentials.
Common Mistakes Beginners Make
- Storing plain passwords: Never store passwords in plain text in localStorage. It's insecure.
- No validation: Always validate on the client and server.
- Forgetting to prevent default: The page will reload and lose data.
Practical Exercise
Add a "Remember Me" checkbox that uses localStorage to keep the user logged in even after closing the browser.
Tools & Resources Mentioned
- Firebase Auth - Real authentication.
- MDN localStorage - Docs.
Conclusion & Next Steps
You now understand the basics of a login system. Next, we'll learn how to store user data in a real database.