7/8/24, 11:32 PM DailyCode
What is authentication?
Authentication is the process of letting users signup/signin into websites via username /
password or using SSO (single sign on)
https://projects.100xdevs.com/pdf/Auth/auth-1 1/13
7/8/24, 11:32 PM DailyCode
Authentication using jwt +
localstorage
Signup
Signin
Auth requests
https://projects.100xdevs.com/pdf/Auth/auth-1 2/13
7/8/24, 11:32 PM DailyCode
Authentication using cookies (Part 1)
What are cookies
Cookies in web development are small pieces of data sent from a website and stored on the
user's computer by the user's web browser while the user is browsing. They are designed to be a
reliable mechanism for websites to remember things (very similar to local storage)
1. Session Management: Cookies allow websites to identify users and track their individual
session states across multiple pages or visits.
2. Personalization: Websites use cookies to personalize content and ads. For instance, cookies
might store information about a user's preferences, allowing the site to tailor content or
advertisements to those interests.
3. Tracking: Cookies can track users across websites, providing insights into browsing behavior.
This information can be used for analytics purposes, to improve website functionality, or for
advertising targeting.
4. Security: Secure cookies can be used to enhance the security of a website by ensuring that
the transmission of information is only done over an encrypted connection, helping to
prevent unauthorized access to user data.
We will be focussing on point 4
Why not local storage?
Cookies and LocalStorage both provide ways to store data on the client-side, but they serve
different purposes and have different characteristics.
1. Cookies are send with every request to the website (by the browser) (you don’t have to
explicitly add a header to the fetch call)
This point becomes super important in Next.js, we’ll see later why
💡 Ref - https://github.com/100xdevs-cohort-2/paytm/blob/complete-
solution/frontend/src/pages/SendMoney.jsx#L45
https://projects.100xdevs.com/pdf/Auth/auth-1 3/13
7/8/24, 11:32 PM DailyCode
1. Cookies can have an expiry attached to them
2. Cookies can be be restricted to only https and to certain domains
Authentication with cookies (Part 2)
Signup
Signin
https://projects.100xdevs.com/pdf/Auth/auth-1 4/13
7/8/24, 11:32 PM DailyCode
Auth endpoints
You don’t need to explicitly set the cookie header in the browser. It’s automatically set by the
browser in every request
Properties of cookies
Types of cookies
1. Persistent - Stay even if u close the window
2. Session - Go away after the window closes
3. Secure - Sent only over secure, encrypted connections (HTTPS).
Properties of cookies
HttpOnly - Can not be accessed by client side scripts
SameSite - Ensures cookies are not send on cross origin requests
1. Strict
2. Lax - Only GET requests and on top level navigation
3. None
Ref - https://portswigger.net/web-security/csrf/bypassing-samesite-
restrictions#:~:text=SameSite is a browser security,leaks%2C and some CORS exploits.
https://projects.100xdevs.com/pdf/Auth/auth-1 5/13
7/8/24, 11:32 PM DailyCode
Domains - You can also specify what all domains should the cookie be sent from
CSRF attacks
Cross site request forgery attacks were super common because of cookies and hence the
SameSite attribute was introduced
Let’s see a few cases
SameSite: none
SameSite: Strict
https://projects.100xdevs.com/pdf/Auth/auth-1 6/13
7/8/24, 11:32 PM DailyCode
But there’s a problem -
SameSite: Lax
https://projects.100xdevs.com/pdf/Auth/auth-1 7/13
7/8/24, 11:32 PM DailyCode
Example in express (Backend)
1. Initialize an empty TS project
npm init -y Copy
npx tsc --init
1. Update rootDir and outDir
"roodDir": "./src" Copy
"outDir": "./dist"
1. Add required libraries
import express from "express"; Copy
import cookieParser from "cookie-parser";
import cors from "cors";
import jwt, { JwtPayload } from "jsonwebtoken";
import path from "path";
1. Initialize express app, add middlewares
const app = express(); Copy
app.use(cookieParser());
app.use(express.json());
app.use(cors({
credentials: true,
origin: "http://localhost:5173"
}));
1. Add a dummy signin endpoint
app.post("/signin", (req, res) => { Copy
const email = req.body.email;
const password = req.body.password;
https://projects.100xdevs.com/pdf/Auth/auth-1 8/13
7/8/24, 11:32 PM DailyCode
// do db validations, fetch id of user from db
const token = jwt.sign({
id: 1
}, JWT_SECRET);
res.cookie("token", token);
res.send("Logged in!");
});
1. Add a protected backend route
app.get("/user", (req, res) => { Copy
const token = req.cookies.token;
const decoded = jwt.verify(token, JWT_SECRET) as JwtPayload;
// Get email of the user from the database
res.send({
userId: decoded.id
})
});
1. Add a logout route
Copy
app.post("/logout", (req, res) => {
res.cookie("token", "ads");
res.json({
message: "Logged out!"
})
});
1. Listen on port 3000
Copy
app.listen(3000);
Code - https://github.com/100xdevs-cohort-2/week-16-auth-1
Frontend in React
Initialize an empty react project
https://projects.100xdevs.com/pdf/Auth/auth-1 9/13
7/8/24, 11:32 PM DailyCode
Add a signin page
import { useState } from "react" Copy
import { BACKEND_URL } from "../config"
import axios from "axios"
export const Signin = () => {
const [username, setUsername] = useState("")
const [password, setPassword] = useState("")
return <div>
<input onChange={(e) => {
setUsername(e.target.value);
}} type="text" placeholder="username" />
<input onChange={(e) => {
setPassword(e.target.value);
}} type="password" placeholder="password" />
<button onClick={async () => {
await axios.post(`${BACKEND_URL}/signin`, {
username,
password
}, {
withCredentials: true,
});
alert("you are logged in")
}}>Submit</button>
</div>
}
Add a user page
import axios from "axios"; Copy
import { useEffect, useState } from "react"
import { BACKEND_URL } from "../config";
export const User = () => {
const [userData, setUserData] = useState();
useEffect(() => {
axios.get(`${BACKEND_URL}/user`, {
withCredentials: true,
})
.then(res => {
setUserData(res.data);
})
}, []);
return <div>
You're id is {userData?.userId}
<br /><br />
<button onClick={() => {
https://projects.100xdevs.com/pdf/Auth/auth-1 10/13
7/8/24, 11:32 PM DailyCode
axios.post(`${BACKEND_URL}/logout`, {}, {
withCredentials: true,
})
}}>Logout</button>
</div>
}
Add routing
import './App.css' Copy
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Signup } from './components/Signup';
import { Signin } from './components/Signin';
import { User } from './components/User';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path={"/signup"} element={<Signup />} />
<Route path={"/signin"} element={<Signin />} />
<Route path={"/user"} element={<User />} />
</Routes>
</BrowserRouter>
)
}
export default App
Code - https://github.com/100xdevs-cohort-2/week-16-auth-1
Frontend from express
1. Add an index.html file in src folder of backend
<!DOCTYPE html> Co
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
https://projects.100xdevs.com/pdf/Auth/auth-1 11/13
7/8/24, 11:32 PM DailyCode
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<input id="username" type="text" placeholder="username" />
<input id="password" type="password" placeholder="password" />
<button id="loginButton">Submit</button>
<button id="logoutButton">Logout</button>
<div id="userData"></div>
<script>
document.getElementById('loginButton').addEventListener('click', async () => {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
try {
await axios.post(`/signin`, {
username,
password
});
alert("You are logged in");
} catch (error) {
console.error('Login failed:', error);
alert("Login failed");
}
});
document.getElementById('logoutButton').addEventListener('click', () => {
axios.post(`/logout`, {}, {
withCredentials: true,
}).then(() => {
console.log('Logged out successfully.');
}).catch(error => {
console.error('Logout failed:', error);
});
});
function fetchUserData() {
axios.get(`/user`, {
withCredentials: true,
}).then(response => {
const userData = response.data;
displayUserData(userData);
}).catch(error => {
console.error('Failed to fetch user data:', error);
});
}
function displayUserData(userData) {
const userDataDiv = document.getElementById('userData');
https://projects.100xdevs.com/pdf/Auth/auth-1 12/13
7/8/24, 11:32 PM DailyCode
// Example: Assumes userData contains a 'name' and 'email'. Adapt based on yo
userDataDiv.innerHTML = `<p>Your id is: ${userData.userId}</p>`;
}
fetchUserData();
</script>
</body>
</html>
1. Add a route that sends this html file
app.get("/", (req, res) => { Copy
res.sendFile(path.join(__dirname, "../src/index.html"))
})
1. Remove credentials from cors
app.use(cors()); Copy
Link - https://github.com/100xdevs-cohort-2/week-16-auth-1
https://projects.100xdevs.com/pdf/Auth/auth-1 13/13
