Scribd
Upload
23 views7 pages

User Authentication System

Uploaded by

r180652
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
23 views7 pages

User Authentication System

Uploaded by

r180652
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

User Authentication System

Overview:

This project implements a simple user authentication system where users can sign up, log in, and

access protected routes after logging in. It uses Node.js and Express.js to handle server-side logic,

SQL to store user credentials, and JavaScript for client-side validation and interactions.

Technologies:

- Node.js: Backend runtime environment.

- Express.js: Web framework for handling routes and middleware.

- SQL: To store and manage user data.

- JavaScript: For front-end interactions.

Steps:

1. Initialize the Project:

Set up a new Node.js project:

npm init -y

npm install express mysql body-parser bcryptjs jsonwebtoken

2. Set Up the Server (Express.js):

Create an auth.js file to manage user authentication:

const express = require('express');

const bodyParser = require('body-parser');

const bcrypt = require('bcryptjs');

const jwt = require('jsonwebtoken');


const mysql = require('mysql');

const app = express();

app.use(bodyParser.json());

const secretKey = 'your_secret_key';

// Database connection

const db = mysql.createConnection({

host: 'localhost',

user: 'root',

password: '',

database: 'auth_db'

});

db.connect((err) => {

if (err) throw err;

console.log('Connected to the database');

});

// Register new users

app.post('/register', (req, res) => {

const { username, password } = req.body;

const hashedPassword = bcrypt.hashSync(password, 10);

const sql = 'INSERT INTO users (username, password) VALUES (?, ?)';

db.query(sql, [username, hashedPassword], (err, result) => {


if (err) throw err;

res.send('User registered successfully');

});

});

// Login users

app.post('/login', (req, res) => {

const { username, password } = req.body;

const sql = 'SELECT * FROM users WHERE username = ?';

db.query(sql, [username], (err, result) => {

if (err) throw err;

if (result.length === 0) return res.status(400).send('User not found');

const user = result[0];

const validPassword = bcrypt.compareSync(password, user.password);

if (!validPassword) return res.status(400).send('Invalid password');

const token = jwt.sign({ id: user.id }, secretKey, { expiresIn: '1h' });

res.send({ token });

});

});

// Protected route

app.get('/dashboard', (req, res) => {

const token = req.headers['authorization'];

if (!token) return res.status(401).send('Access denied');


jwt.verify(token, secretKey, (err, decoded) => {

if (err) return res.status(401).send('Invalid token');

res.send('Welcome to the dashboard');

});

});

app.listen(3000, () => {

console.log('Server running on port 3000');

});

3. Set Up the SQL Database:

Create a database auth_db and a table users:

CREATE DATABASE auth_db;

USE auth_db;

CREATE TABLE users (

id INT AUTO_INCREMENT PRIMARY KEY,

username VARCHAR(255) NOT NULL,

password VARCHAR(255) NOT NULL

);

4. Frontend (HTML + JavaScript):

Basic index.html for user registration and login:

<!DOCTYPE html>

<html>
<head>

<title>User Authentication</title>

</head>

<body>

<h1>User Authentication System</h1>

<h2>Register</h2>

<input type="text" id="registerUsername" placeholder="Username">

<input type="password" id="registerPassword" placeholder="Password">

<button onclick="register()">Register</button>

<h2>Login</h2>

<input type="text" id="loginUsername" placeholder="Username">

<input type="password" id="loginPassword" placeholder="Password">

<button onclick="login()">Login</button>

<h2>Dashboard</h2>

<button onclick="accessDashboard()">Access Dashboard</button>

<script>

async function register() {

const username = document.getElementById('registerUsername').value;

const password = document.getElementById('registerPassword').value;

const response = await fetch('/register', {

method: 'POST',

headers: { 'Content-Type': 'application/json' },


body: JSON.stringify({ username, password })

});

const data = await response.text();

alert(data);

async function login() {

const username = document.getElementById('loginUsername').value;

const password = document.getElementById('loginPassword').value;

const response = await fetch('/login', {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({ username, password })

});

const data = await response.json();

localStorage.setItem('token', data.token);

alert('Login successful');

async function accessDashboard() {

const token = localStorage.getItem('token');

const response = await fetch('/dashboard', {

headers: { 'Authorization': token }


});

const data = await response.text();

alert(data);

</script>

</body>

</html>

5. Run the Project:

Start the Node.js server:

node auth.js

Open the browser and visit http://localhost:3000 to interact with the user authentication system.

You might also like