<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Manas Uniyal</title>
    <description>The latest articles on Forem by Manas Uniyal (@uniyalmanas).</description>
    <link>https://forem.com/uniyalmanas</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F848304%2F5e97d303-accf-470b-a524-1b5ac036f68f.jpeg</url>
      <title>Forem: Manas Uniyal</title>
      <link>https://forem.com/uniyalmanas</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/uniyalmanas"/>
    <language>en</language>
    <item>
      <title>🧠 Google Just Solved a Big Problem for AI Coding Assistants (Explained Simply)</title>
      <dc:creator>Manas Uniyal</dc:creator>
      <pubDate>Fri, 27 Feb 2026 07:30:17 +0000</pubDate>
      <link>https://forem.com/uniyalmanas/google-just-solved-a-big-problem-for-ai-coding-assistants-explained-simply-1g1m</link>
      <guid>https://forem.com/uniyalmanas/google-just-solved-a-big-problem-for-ai-coding-assistants-explained-simply-1g1m</guid>
      <description>&lt;p&gt;FEB 2026 — Google announced something that could quietly change how developers use AI tools.&lt;/p&gt;

&lt;p&gt;If you’ve ever asked an AI assistant about Firebase, Android, or Google Cloud and received a confusing or outdated answer… this is exactly what Google is trying to fix.&lt;/p&gt;

&lt;p&gt;🤔 The Problem: AI Doesn’t Always Know the Latest Docs&lt;/p&gt;

&lt;p&gt;AI tools (like coding assistants, CLIs, or agent platforms) rely on the data they were trained on.&lt;/p&gt;

&lt;p&gt;That means:&lt;/p&gt;

&lt;p&gt;They might not know new features&lt;/p&gt;

&lt;p&gt;They might give outdated solutions&lt;/p&gt;

&lt;p&gt;They might guess incorrectly&lt;/p&gt;

&lt;p&gt;Example:&lt;/p&gt;

&lt;p&gt;You ask:&lt;/p&gt;

&lt;p&gt;“How do I implement push notifications in Firebase?”&lt;/p&gt;

&lt;p&gt;AI might respond using old methods.&lt;/p&gt;

&lt;p&gt;Not ideal.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsy0rt2wu4c3zc9ryg1w7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsy0rt2wu4c3zc9ryg1w7.png" alt=" " width="800" height="533"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/..." class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/..." alt="Uploading image" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💡 Google’s Solution: Let AI Read Official Docs Directly&lt;/p&gt;

&lt;p&gt;Google introduced two tools that allow AI systems to access official developer documentation in real time.&lt;/p&gt;

&lt;p&gt;Instead of guessing…&lt;/p&gt;

&lt;p&gt;👉 AI can now check the source.&lt;/p&gt;

&lt;p&gt;🛠️ Tool #1 — Developer Knowledge API&lt;/p&gt;

&lt;p&gt;Think of this as a search engine for Google’s developer documentation.&lt;/p&gt;

&lt;p&gt;Developers and AI tools can:&lt;/p&gt;

&lt;p&gt;Search official docs&lt;/p&gt;

&lt;p&gt;Retrieve full documentation pages&lt;/p&gt;

&lt;p&gt;Get information in a clean format&lt;/p&gt;

&lt;p&gt;It covers sources like:&lt;/p&gt;

&lt;p&gt;Firebase docs&lt;/p&gt;

&lt;p&gt;Android developer docs&lt;/p&gt;

&lt;p&gt;Google Cloud docs&lt;/p&gt;

&lt;p&gt;And the content is updated within about a day of any changes.&lt;/p&gt;

&lt;p&gt;So tools stay current.&lt;/p&gt;

&lt;p&gt;🤖 Tool #2 — MCP Server (Model Context Protocol Server)&lt;/p&gt;

&lt;p&gt;This is where it gets really interesting.&lt;/p&gt;

&lt;p&gt;The MCP server lets AI assistants connect directly to Google documentation.&lt;/p&gt;

&lt;p&gt;So your AI tool can:&lt;/p&gt;

&lt;p&gt;📖 Read docs before answering you&lt;/p&gt;

&lt;p&gt;Like giving the AI an open book during an exam.&lt;/p&gt;

&lt;p&gt;🌍 What This Means in Real Life&lt;/p&gt;

&lt;p&gt;Before:&lt;/p&gt;

&lt;p&gt;AI answers from memory ❌&lt;/p&gt;

&lt;p&gt;Now:&lt;/p&gt;

&lt;p&gt;AI checks official docs first ✅&lt;/p&gt;

&lt;p&gt;Example questions AI can answer better:&lt;/p&gt;

&lt;p&gt;“What’s the best way to implement Firebase push notifications?”&lt;/p&gt;

&lt;p&gt;“How do I fix this Google Maps API error?”&lt;/p&gt;

&lt;p&gt;“Should I use Cloud Run or Cloud Functions?”&lt;/p&gt;

&lt;p&gt;🚀 Why This Matters for Developers&lt;/p&gt;

&lt;p&gt;This could make AI coding tools:&lt;/p&gt;

&lt;p&gt;More accurate&lt;/p&gt;

&lt;p&gt;More reliable&lt;/p&gt;

&lt;p&gt;More useful for debugging&lt;/p&gt;

&lt;p&gt;Better for learning new technologies&lt;/p&gt;

&lt;p&gt;In the future, developers might rely less on manual documentation searching and more on AI that reads docs for them.&lt;/p&gt;

&lt;p&gt;🧾 In Simple Words&lt;/p&gt;

&lt;p&gt;Google built a system that allows AI assistants to read official documentation in real time, so developers get correct and up-to-date help instead of outdated guesses.&lt;/p&gt;

&lt;p&gt;🌱 Final Thoughts&lt;/p&gt;

&lt;p&gt;This is one of those updates that doesn’t look flashy but could significantly improve developer workflows — especially as AI tools become part of everyday coding.&lt;/p&gt;

&lt;p&gt;If you use Google technologies, expect your AI assistants to become smarter and more trustworthy soon.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>🌩️ How to Get AWS Certifications for Free in 2025 💸</title>
      <dc:creator>Manas Uniyal</dc:creator>
      <pubDate>Sat, 05 Apr 2025 16:56:22 +0000</pubDate>
      <link>https://forem.com/uniyalmanas/how-to-get-aws-certifications-for-free-in-2025-554c</link>
      <guid>https://forem.com/uniyalmanas/how-to-get-aws-certifications-for-free-in-2025-554c</guid>
      <description>&lt;p&gt;(Yes, totally free — no sketchy tricks!)&lt;/p&gt;

&lt;p&gt;So here’s the deal — AWS certifications are a big deal in the tech world right now. Whether you're a student 👨‍🎓 trying to land your first internship, a developer 👩‍💻 looking to level up, or someone exploring cloud for fun — getting certified can really boost your career.&lt;/p&gt;

&lt;p&gt;But yeah... those exams? Kinda pricey.&lt;br&gt;
So let me show you how to get those AWS certifications for FREE in 2025 — using legit ways that actually work. Ready? Let’s go. 🚀&lt;/p&gt;

&lt;p&gt;🌟 1. Use AWS Skill Builder — the Official Free Learning Hub&lt;br&gt;
AWS Skill Builder is like the Netflix of cloud courses — except it’s official and many parts are totally free.&lt;br&gt;
`&lt;/p&gt;

&lt;h2&gt;
  
  
  Here’s what’s cool about it:
&lt;/h2&gt;

&lt;p&gt;📚 Certification prep courses for every level&lt;/p&gt;

&lt;p&gt;🧠 Cloud Quest — a super fun, game-like way to learn cloud&lt;/p&gt;

&lt;p&gt;💬 Practice questions + learning badges&lt;/p&gt;

&lt;p&gt;🎁 Sometimes they give out free exam vouchers just for completing stuff`&lt;/p&gt;

&lt;p&gt;💡 Pro tip: Sign up, explore the learning paths, and turn on email notifications — AWS sends voucher links from time to time!&lt;/p&gt;

&lt;p&gt;🎓 2. If You’re a Student, Don’t Miss AWS Educate&lt;br&gt;
AWS Educate is specifically for students and beginners, and it's pretty generous.&lt;/p&gt;

&lt;h2&gt;
  
  
  What you get:
&lt;/h2&gt;

&lt;p&gt;🆓 Foundational cloud learning (no prior experience needed)&lt;/p&gt;

&lt;p&gt;⚡ Free AWS credits to practice on real cloud services&lt;/p&gt;

&lt;p&gt;🎯 Sometimes even certification vouchers pop up&lt;/p&gt;

&lt;p&gt;Just use your .edu or college email to register — it helps you get verified faster. If you're in college right now, this one’s a no-brainer.&lt;/p&gt;

&lt;p&gt;🎉 3. Join AWS Events — They Love Giving Out Freebies&lt;br&gt;
This is a fun one!&lt;br&gt;
AWS runs events all year long, both online and offline. Some examples:&lt;/p&gt;

&lt;p&gt;🌐 AWSome Day&lt;/p&gt;

&lt;p&gt;🔥 re:Invent&lt;/p&gt;

&lt;p&gt;🇮🇳 India-specific events like Build On India&lt;/p&gt;

&lt;p&gt;These usually include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🧑‍🏫 Free workshops and learning sessions&lt;/li&gt;
&lt;li&gt;🎟️ Vouchers or discounts on certifications&lt;/li&gt;
&lt;li&gt;🧪 Early access to beta exams (sometimes 100% free!)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;📌 Keep checking the AWS Events Page or follow them on LinkedIn to stay in the loop.&lt;/p&gt;

&lt;p&gt;🏫 4. Ask Your College About AWS Academy&lt;br&gt;
If your college is part of AWS Academy, you're in luck.&lt;/p&gt;

&lt;p&gt;What it means:&lt;/p&gt;

&lt;p&gt;You’ll get trained using AWS’s official curriculum&lt;/p&gt;

&lt;p&gt;You may get a voucher to take the exam for free&lt;/p&gt;

&lt;p&gt;You can add a shiny badge to your resume at no cost 😍&lt;/p&gt;

&lt;p&gt;👉 Just ask your college placement cell or IT department — “Are we enrolled in AWS Academy?” Simple.&lt;/p&gt;

&lt;p&gt;🥇 5. Join AWS Certification Challenges&lt;br&gt;
Every few months, AWS runs fun challenges where you can:&lt;/p&gt;

&lt;p&gt;🔐 Complete a set of learning tasks&lt;/p&gt;

&lt;p&gt;🧠 Pass knowledge checks&lt;/p&gt;

&lt;p&gt;🎁 Get a free exam voucher at the end&lt;/p&gt;

&lt;p&gt;Some examples:&lt;/p&gt;

&lt;p&gt;Get AWS Certified Challenge&lt;/p&gt;

&lt;p&gt;She Builds CloudU (focused on empowering women in cloud)&lt;/p&gt;

&lt;p&gt;Build On India (region-specific opportunities)&lt;/p&gt;

&lt;p&gt;They’re limited-time, so keep an eye on the AWS Community or their newsletters.&lt;/p&gt;

&lt;p&gt;🧰 6. GitHub Student Developer Pack = Free Credits&lt;br&gt;
If you're a student developer and not using the GitHub Student Pack yet... what are you doing? 😅&lt;/p&gt;

&lt;p&gt;Here’s what you get:&lt;/p&gt;

&lt;p&gt;💵 Free AWS credits to try services&lt;/p&gt;

&lt;p&gt;🛠️ Tools like GitHub Copilot, Namecheap domains, and more&lt;/p&gt;

&lt;p&gt;Okay, it doesn’t give you cert vouchers, but it does give you what you need to practice for the exam — and that’s half the battle.&lt;/p&gt;

&lt;p&gt;🧑‍💼 7. Already Working Somewhere? Ask Your Company to Cover It&lt;br&gt;
This might surprise you, but tons of companies are willing to pay for your AWS cert if you ask.&lt;/p&gt;

&lt;p&gt;Here’s what to do:&lt;/p&gt;

&lt;p&gt;Ask HR if there’s a learning or certification budget&lt;/p&gt;

&lt;p&gt;Join an internal cloud upskilling program if they have one&lt;/p&gt;

&lt;p&gt;Pass the exam and show the bill — many companies will reimburse&lt;/p&gt;

&lt;p&gt;Trust me, companies love when employees grow — and AWS certs are great bragging rights for them too 😄&lt;/p&gt;

&lt;p&gt;🔍 8. Look Out for Coursera &amp;amp; LinkedIn Campaigns&lt;br&gt;
Sometimes AWS partners with platforms like:&lt;/p&gt;

&lt;p&gt;Coursera&lt;/p&gt;

&lt;p&gt;LinkedIn Learning&lt;/p&gt;

&lt;p&gt;FutureLearn&lt;/p&gt;

&lt;h2&gt;
  
  
  During special campaigns, they offer:
&lt;/h2&gt;

&lt;p&gt;📘 Free AWS courses&lt;/p&gt;

&lt;p&gt;🎓 Completion-based vouchers or discounts&lt;/p&gt;

&lt;p&gt;📲 Follow AWS on LinkedIn and keep checking your email for these surprise opportunities — they pop up a few times a year.&lt;/p&gt;

&lt;p&gt;🧠 Bonus: Free Resources to Help You Pass&lt;br&gt;
Once you get your voucher, don’t just wing it.&lt;br&gt;
Here are some amazing (and free!) prep resources:&lt;/p&gt;

&lt;p&gt;✅ Tutorials Dojo – practice tests that feel real&lt;/p&gt;

&lt;p&gt;✅ ExamTopics – community-driven Q&amp;amp;A&lt;/p&gt;

&lt;p&gt;✅ YouTube channels like freeCodeCamp, Tech with Lucy, and AWS with Vishal&lt;/p&gt;

&lt;p&gt;🧩 Combine real practice + learning paths + mock exams = you’re ready to crush it 💪&lt;/p&gt;

&lt;p&gt;✨ Final Words (from someone who's been there)&lt;br&gt;
Getting an AWS cert in 2025 doesn’t have to be expensive. In fact, you can totally do it for free if you plan smart and grab the right opportunities.&lt;/p&gt;

&lt;p&gt;So, whether you’re going for:&lt;/p&gt;

&lt;p&gt;Cloud Practitioner (great for beginners)&lt;/p&gt;

&lt;p&gt;Solutions Architect (for builders and devs)&lt;/p&gt;

&lt;p&gt;or anything in between...&lt;/p&gt;

&lt;p&gt;Just start.&lt;br&gt;
💻 Sign up, learn at your own pace, look out for vouchers, and keep building.&lt;/p&gt;

&lt;p&gt;You’ve got this. ☁️🔥&lt;/p&gt;

</description>
      <category>aws</category>
      <category>freecertificates</category>
      <category>cloud</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Building a Robust Backend: From Fundamentals to Deployment</title>
      <dc:creator>Manas Uniyal</dc:creator>
      <pubDate>Wed, 02 Apr 2025 16:00:50 +0000</pubDate>
      <link>https://forem.com/uniyalmanas/building-a-robust-backend-from-fundamentals-to-deployment-1np4</link>
      <guid>https://forem.com/uniyalmanas/building-a-robust-backend-from-fundamentals-to-deployment-1np4</guid>
      <description>&lt;p&gt;Building a Robust Backend: From Fundamentals to Deployment&lt;/p&gt;

&lt;p&gt;Introduction&lt;/p&gt;

&lt;p&gt;Welcome to the world of backend development! Behind every sleek website or app lies a powerful backend, the unsung hero handling data, logic, and user interactions. This guide will walk you through the essential concepts and practical steps to build a robust backend, from understanding the basics to deploying your application.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;HTTP, DNS, IPs &amp;amp; Networks&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyrkmglf469x4f0xvhetl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyrkmglf469x4f0xvhetl.png" alt="Image description" width="656" height="499"&gt;&lt;/a&gt;&lt;br&gt;
The foundation of web communication is HTTP (Hypertext Transfer Protocol). DNS (Domain Name System) translates human-readable domain names into IP addresses, which are numerical labels assigned to devices on a network.&lt;/p&gt;

&lt;p&gt;JavaScript&lt;/p&gt;

&lt;p&gt;// Example: Making an HTTP GET and POST request using Node.js (axios)&lt;br&gt;
const axios = require('axios');&lt;/p&gt;

&lt;p&gt;axios.get('&lt;a href="https://api.example.com/data'" rel="noopener noreferrer"&gt;https://api.example.com/data'&lt;/a&gt;)&lt;br&gt;
  .then(response =&amp;gt; {&lt;br&gt;
    console.log("GET Response:", response.data);&lt;br&gt;
  })&lt;br&gt;
  .catch(error =&amp;gt; {&lt;br&gt;
    console.error("GET Error:", error);&lt;br&gt;
  });&lt;/p&gt;

&lt;p&gt;axios.post('&lt;a href="https://api.example.com/data" rel="noopener noreferrer"&gt;https://api.example.com/data&lt;/a&gt;', { item: 'new item' })&lt;br&gt;
  .then(response =&amp;gt; {&lt;br&gt;
    console.log("POST Response:", response.data);&lt;br&gt;
  })&lt;br&gt;
  .catch(error =&amp;gt; {&lt;br&gt;
    console.error("POST Error:", error);&lt;br&gt;
  });&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;APIs: The Backend’s Messenger&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;APIs (Application Programming Interfaces) enable communication between different software applications. They define how requests and responses are structured.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Types of APIs&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn1i6p90j9lg86q0d3jpq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn1i6p90j9lg86q0d3jpq.png" alt="Image description" width="582" height="353"&gt;&lt;/a&gt;&lt;br&gt;
REST (Representational State Transfer): Uses standard HTTP methods (GET, POST, PUT, DELETE).&lt;br&gt;
GraphQL: Allows clients to request specific data.&lt;br&gt;
JavaScript&lt;/p&gt;

&lt;p&gt;// Example: Basic REST API endpoint (Express.js) with POST route&lt;br&gt;
const express = require('express');&lt;br&gt;
const app = express();&lt;/p&gt;

&lt;p&gt;let users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];&lt;/p&gt;

&lt;p&gt;app.get('/api/users', (req, res) =&amp;gt; {&lt;br&gt;
  res.json(users);&lt;br&gt;
});&lt;/p&gt;

&lt;p&gt;app.post('/api/users', express.json(), (req, res) =&amp;gt; {&lt;br&gt;
  const newUser = { id: users.length + 1, ...req.body };&lt;br&gt;
  users.push(newUser);&lt;br&gt;
  res.status(201).json(newUser);&lt;br&gt;
});&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Backend Languages&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs63xnu3u03e83o8turlw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs63xnu3u03e83o8turlw.png" alt="Image description" width="800" height="364"&gt;&lt;/a&gt;&lt;br&gt;
Popular backend languages include Node.js, Python, Java, Ruby, and Go. Each has its strengths and weaknesses.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Databases: The Backbone of Your Backend&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Databases store and manage data. Options include relational databases (MySQL, PostgreSQL) and NoSQL databases (MongoDB).&lt;/p&gt;

&lt;p&gt;JavaScript&lt;/p&gt;

&lt;p&gt;// Example: Connecting to MongoDB (Mongoose) and creating a document&lt;br&gt;
const mongoose = require('mongoose');&lt;/p&gt;

&lt;p&gt;mongoose.connect('mongodb://localhost:27017/mydatabase', {&lt;br&gt;
  useNewUrlParser: true,&lt;br&gt;
  useUnifiedTopology: true,&lt;br&gt;
})&lt;br&gt;
.then(() =&amp;gt; console.log('MongoDB Connected'))&lt;br&gt;
.catch(err =&amp;gt; console.log(err));&lt;/p&gt;

&lt;p&gt;const userSchema = new mongoose.Schema({&lt;br&gt;
  name: String,&lt;br&gt;
  email: String,&lt;br&gt;
});&lt;/p&gt;

&lt;p&gt;const User = mongoose.model('User', userSchema);&lt;/p&gt;

&lt;p&gt;async function createUser(name, email) {&lt;br&gt;
  const user = new User({ name, email });&lt;br&gt;
  await user.save();&lt;br&gt;
  console.log("User Saved");&lt;br&gt;
}&lt;/p&gt;

&lt;p&gt;createUser("Charlie", "&lt;a href="mailto:Charlie@email.com"&gt;Charlie@email.com&lt;/a&gt;");&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Backend Architectures&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Monolithic: All components are tightly coupled.&lt;br&gt;
Microservices: Independent services communicate via APIs.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Demo and Setup Tools &amp;amp; 8. Setup&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This typically involves installing Node.js, npm, a code editor (VS Code), and MongoDB.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Create Express Server&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;JavaScript&lt;/p&gt;

&lt;p&gt;// Example: Creating an Express server and adding middleware&lt;br&gt;
const express = require('express');&lt;br&gt;
const app = express();&lt;br&gt;
const bodyParser = require('body-parser');&lt;/p&gt;

&lt;p&gt;app.use(bodyParser.json()); // for parsing application/json&lt;/p&gt;

&lt;p&gt;app.listen(3000, () =&amp;gt; {&lt;br&gt;
  console.log('Server listening on port 3000');&lt;br&gt;
});&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Config&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Configuration files store environment-specific settings.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Routes&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Routes define how the server responds to different HTTP requests.&lt;/p&gt;

&lt;p&gt;JavaScript&lt;/p&gt;

&lt;p&gt;// Example: POST route to create a user with validation&lt;br&gt;
app.post('/api/users', express.json(), (req, res) =&amp;gt; {&lt;br&gt;
  const { name, email } = req.body;&lt;br&gt;
  if (!name || !email) {&lt;br&gt;
    return res.status(400).json({ error: 'Name and email are required' });&lt;br&gt;
  }&lt;br&gt;
  // Save to database...&lt;br&gt;
  res.status(201).json({name, email});&lt;br&gt;
});&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;MongoDB&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;MongoDB is a NoSQL database that stores data in JSON-like documents.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Models&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Models define the structure of data in the database.&lt;/p&gt;

&lt;p&gt;JavaScript&lt;/p&gt;

&lt;p&gt;// Example: Mongoose model with validation&lt;br&gt;
const mongoose = require('mongoose');&lt;/p&gt;

&lt;p&gt;const userSchema = new mongoose.Schema({&lt;br&gt;
  name: { type: String, required: true },&lt;br&gt;
  email: { type: String, required: true, unique: true },&lt;br&gt;
});&lt;/p&gt;

&lt;p&gt;const User = mongoose.model('User', userSchema);&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Error Handler&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Centralized error handling ensures consistent error responses.&lt;/p&gt;

&lt;p&gt;JavaScript&lt;/p&gt;

&lt;p&gt;//Example Error Handler&lt;br&gt;
app.use((err, req, res, next) =&amp;gt; {&lt;br&gt;
  console.error(err.stack);&lt;br&gt;
  res.status(500).json({error: 'Something broke!'});&lt;br&gt;
});&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Authentication&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Verifying user identities (e.g., using JWT).&lt;/p&gt;

&lt;p&gt;JavaScript&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn3ynldhrd7g41nmskx58.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn3ynldhrd7g41nmskx58.png" alt="Image description" width="579" height="219"&gt;&lt;/a&gt;&lt;br&gt;
// Example: JWT authentication with middleware&lt;br&gt;
const jwt = require('jsonwebtoken');&lt;/p&gt;

&lt;p&gt;function authenticateToken(req, res, next) {&lt;br&gt;
  const authHeader = req.headers['authorization'];&lt;br&gt;
  const token = authHeader &amp;amp;&amp;amp; authHeader.split(' ')[1];&lt;br&gt;
  if (token == null) return res.sendStatus(401);&lt;/p&gt;

&lt;p&gt;jwt.verify(token, 'secretkey', (err, user) =&amp;gt; {&lt;br&gt;
    if (err) return res.sendStatus(403);&lt;br&gt;
    req.user = user;&lt;br&gt;
    next();&lt;br&gt;
  });&lt;br&gt;
}&lt;/p&gt;

&lt;p&gt;app.get('/protected', authenticateToken, (req, res) =&amp;gt; {&lt;br&gt;
  res.json({ message: 'Protected route accessed by user', user: req.user });&lt;br&gt;
});&lt;/p&gt;

&lt;p&gt;const token = jwt.sign({ userId: 123 }, 'secretkey');&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Authorization&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Controlling user access to resources based on roles.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Arcjet&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Arcjet helps protect APIs from abuse and bots.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Subscriptions&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Implementing subscription-based features.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Reminder Workflow&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Automating tasks and sending reminders using tools like cron jobs or message queues.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Send Emails&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Integrating email functionality using libraries like Nodemailer.&lt;/p&gt;

&lt;p&gt;JavaScript&lt;/p&gt;

&lt;p&gt;// Example: Sending an email using Nodemailer with HTML content&lt;br&gt;
const nodemailer = require('nodemailer');&lt;/p&gt;

&lt;p&gt;const transporter = nodemailer.createTransport({&lt;br&gt;
  service: 'gmail',&lt;br&gt;
  auth: {&lt;br&gt;
    user: '&lt;a href="mailto:your_email@gmail.com"&gt;your_email@gmail.com&lt;/a&gt;',&lt;br&gt;
    pass: 'your_password',&lt;br&gt;
  },&lt;br&gt;
});&lt;/p&gt;

&lt;p&gt;const mailOptions = {&lt;br&gt;
  from: '&lt;a href="mailto:your_email@gmail.com"&gt;your_email@gmail.com&lt;/a&gt;',&lt;br&gt;
  to: '&lt;a href="mailto:recipient@example.com"&gt;recipient@example.com&lt;/a&gt;',&lt;br&gt;
  subject: 'Hello from Node.js',&lt;br&gt;
  html: '&lt;b&gt;This is a test email with HTML!&lt;/b&gt;',&lt;br&gt;
};&lt;/p&gt;

&lt;p&gt;transporter.sendMail(mailOptions, (error, info) =&amp;gt; {&lt;br&gt;
  if (error) {&lt;br&gt;
    console.error(error);&lt;br&gt;
  } else {&lt;br&gt;
    console.log('Email sent: ' + info.response);&lt;br&gt;
  }&lt;br&gt;
});&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;VPS Hosting &amp;amp; Deployment&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Deploying the backend to a VPS (e.g., AWS EC2, DigitalOcean Droplets).&lt;/p&gt;

&lt;p&gt;This post provides a foundational overview of backend development. Each topic can be explored in much greater depth. Remember to adapt code examples to your specific needs and technologies.&lt;/p&gt;

</description>
      <category>backenddevelopment</category>
      <category>webdev</category>
      <category>programming</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Caching &amp; Performance Optimization in Node.js &amp; React</title>
      <dc:creator>Manas Uniyal</dc:creator>
      <pubDate>Sat, 29 Mar 2025 16:13:44 +0000</pubDate>
      <link>https://forem.com/uniyalmanas/caching-performance-optimization-in-nodejs-react-4gi9</link>
      <guid>https://forem.com/uniyalmanas/caching-performance-optimization-in-nodejs-react-4gi9</guid>
      <description>&lt;h1&gt;
  
  
  Caching &amp;amp; Performance Optimization in Node.js &amp;amp; React
&lt;/h1&gt;

&lt;p&gt;Optimizing performance is crucial for modern applications to ensure fast load times and smooth user experiences. This post explores three key techniques for improving performance:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Caching with Redis&lt;/strong&gt; – Reducing database load and speeding up responses.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Compression (Middleware)&lt;/strong&gt; – Decreasing response size for faster transmission.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Lazy Loading &amp;amp; Code Splitting&lt;/strong&gt; – Enhancing front-end performance by loading resources efficiently.&lt;/li&gt;
&lt;/ol&gt;




&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm1ebt94m5uomvme8ztg8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm1ebt94m5uomvme8ztg8.png" alt="Image description" width="800" height="617"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Caching Responses with Redis
&lt;/h2&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Architecture:&lt;/strong&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;User Request → Node.js Server → Check Redis Cache → (Cache Hit? Serve Data) : (Cache Miss? Fetch from DB &amp;amp; Store in Cache)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Cache Hit&lt;/strong&gt;: If the requested data is already cached in Redis, it is served directly, reducing latency and database load.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cache Miss&lt;/strong&gt;: If the data is not found in Redis, the server fetches it from the database, caches it for future use, and sends the response.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Why Use Caching?&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Reduces database queries and computation time.&lt;/li&gt;
&lt;li&gt;Speeds up response times significantly.&lt;/li&gt;
&lt;li&gt;Enhances scalability by offloading traffic from the database.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Setting Up Redis in Node.js&lt;/strong&gt;
&lt;/h3&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Step 1: Install Redis &amp;amp; Node.js Client&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install &lt;/span&gt;redis
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  &lt;strong&gt;Step 2: Connect Redis to Node.js&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;redis&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;redis&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;client&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;redis&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createClient&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="nx"&gt;client&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;on&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;error&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Redis Error:&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

&lt;span class="nx"&gt;client&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;connect&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Connected to Redis&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  &lt;strong&gt;Step 3: Implement Caching&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;express&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;express&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/data&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;cacheKey&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;myData&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;cachedData&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;client&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cacheKey&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cachedData&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;parse&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cachedData&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="c1"&gt;// Simulating DB fetch&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Fetched from DB&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;timestamp&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;now&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;client&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setEx&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cacheKey&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3600&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stringify&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// Store for 1 hour&lt;/span&gt;
    &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;listen&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;3000&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Server running on port 3000&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;strong&gt;Best Practices for Redis Caching&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Set an &lt;strong&gt;expiration time (TTL)&lt;/strong&gt; for cached data to prevent stale responses.&lt;/li&gt;
&lt;li&gt;Use &lt;strong&gt;consistent cache keys&lt;/strong&gt; for structured retrieval.&lt;/li&gt;
&lt;li&gt;Implement &lt;strong&gt;cache invalidation&lt;/strong&gt; when data updates to avoid serving outdated information.&lt;/li&gt;
&lt;li&gt;Monitor Redis usage to prevent memory overflows.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  2. Compression Middleware for Faster Responses
&lt;/h2&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Architecture:&lt;/strong&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;User Request → Express Middleware (Compression) → Compressed Response Sent → Faster Load Time
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;strong&gt;Why Use Compression?&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Reduces response size significantly.&lt;/li&gt;
&lt;li&gt;Decreases bandwidth usage.&lt;/li&gt;
&lt;li&gt;Improves page load speed by minimizing payload size.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Setting Up Compression in Express&lt;/strong&gt;
&lt;/h3&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Step 1: Install Compression Middleware&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install &lt;/span&gt;compression
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  &lt;strong&gt;Step 2: Integrate Compression&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;compression&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;compression&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;use&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;compression&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;strong&gt;How It Works?&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;The middleware &lt;strong&gt;automatically compresses&lt;/strong&gt; responses using GZIP.&lt;/li&gt;
&lt;li&gt;Compresses JSON, HTML, CSS, and JavaScript before sending to the client.&lt;/li&gt;
&lt;li&gt;Reduces response payload size by up to &lt;strong&gt;70%&lt;/strong&gt;, leading to faster page rendering.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Best Practices for Compression&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Enable &lt;strong&gt;Brotli compression&lt;/strong&gt;, which is more efficient than GZIP.&lt;/li&gt;
&lt;li&gt;Compress &lt;strong&gt;static assets&lt;/strong&gt; using tools like Webpack or Gzip.&lt;/li&gt;
&lt;li&gt;Use &lt;strong&gt;Content-Encoding headers&lt;/strong&gt; to ensure proper decompression by clients.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  3. Lazy Loading &amp;amp; Code Splitting (React)
&lt;/h2&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Architecture:&lt;/strong&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Initial Load → Load Only Essential Code → User Navigates → Dynamically Fetch Remaining Components
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;strong&gt;Why Use Lazy Loading?&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Reduces initial page load time.&lt;/li&gt;
&lt;li&gt;Loads components only when needed.&lt;/li&gt;
&lt;li&gt;Optimizes performance for large applications.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Using React Lazy Loading&lt;/strong&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;lazy&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Suspense&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Dashboard&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;lazy&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="k"&gt;import&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./Dashboard&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;App&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Suspense&lt;/span&gt; &lt;span class="nx"&gt;fallback&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Loading&lt;/span&gt;&lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&amp;gt;}&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Dashboard&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Suspense&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;strong&gt;Using Code Splitting with React Router&lt;/strong&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;BrowserRouter&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nx"&gt;Router&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Route&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Routes&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react-router-dom&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;lazy&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Suspense&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Home&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;lazy&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="k"&gt;import&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./Home&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Profile&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;lazy&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="k"&gt;import&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./Profile&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;App&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Router&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Suspense&lt;/span&gt; &lt;span class="nx"&gt;fallback&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Loading&lt;/span&gt;&lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&amp;gt;}&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;                &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Routes&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
                    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Route&lt;/span&gt; &lt;span class="nx"&gt;path&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Home&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;                    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Route&lt;/span&gt; &lt;span class="nx"&gt;path&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/profile&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Profile&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;                &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Routes&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Suspense&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Router&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;strong&gt;Best Practices for Lazy Loading &amp;amp; Code Splitting&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Split &lt;strong&gt;large bundles&lt;/strong&gt; using dynamic imports.&lt;/li&gt;
&lt;li&gt;Use &lt;strong&gt;React Suspense&lt;/strong&gt; to show loading indicators while fetching components.&lt;/li&gt;
&lt;li&gt;Prefetch critical resources to prevent delays in navigation.&lt;/li&gt;
&lt;li&gt;Utilize &lt;strong&gt;Webpack's code splitting features&lt;/strong&gt; (&lt;code&gt;splitChunks&lt;/code&gt; &amp;amp; &lt;code&gt;dynamic imports&lt;/code&gt;).&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;Conclusion&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Redis Caching&lt;/strong&gt;: Reduces load times and database queries by storing responses in memory.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Compression Middleware&lt;/strong&gt;: Speeds up response times with GZIP/Brotli compression.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Lazy Loading &amp;amp; Code Splitting&lt;/strong&gt;: Optimizes front-end performance by loading only necessary components when needed.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Implement these techniques to make your applications &lt;strong&gt;faster, scalable, and more efficient&lt;/strong&gt;!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
      <category>ai</category>
    </item>
    <item>
      <title>OAuth Authentication: Google, Facebook, GitHub Login via NODE JS (Backend)</title>
      <dc:creator>Manas Uniyal</dc:creator>
      <pubDate>Sat, 29 Mar 2025 15:49:21 +0000</pubDate>
      <link>https://forem.com/uniyalmanas/oauth-authentication-google-facebook-github-login-via-node-js-backend-22fg</link>
      <guid>https://forem.com/uniyalmanas/oauth-authentication-google-facebook-github-login-via-node-js-backend-22fg</guid>
      <description>&lt;h1&gt;
  
  
  OAuth Authentication: Google, Facebook, GitHub Login
&lt;/h1&gt;

&lt;p&gt;OAuth (Open Authorization) is a standard that allows users to log in to your website using third-party accounts like Google, Facebook, or GitHub. It eliminates the need for users to create new accounts, making authentication seamless and secure.&lt;/p&gt;

&lt;p&gt;Diagram : &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feidas00onkr3pq1rkhey.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feidas00onkr3pq1rkhey.png" alt="Image description" width="800" height="845"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;OAuth architecture in Node.js with diagrams and flow&lt;br&gt;
How is perplexity made and its architecture?&lt;br&gt;
Draw architecture of node based authentication using jwt&lt;/p&gt;

&lt;p&gt;OAuth is an open-standard authorization framework that enables secure, delegated access to protected resources geeksforgeeks.org. Let's explore its architecture and implementation in Node.js, starting with the core concepts and visualizing the flow.&lt;/p&gt;
&lt;h2&gt;
  
  
  Why Use OAuth?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;No need to store passwords&lt;/strong&gt;: Users authenticate via trusted providers.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Faster login&lt;/strong&gt;: No signup form, just a few clicks.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Secure&lt;/strong&gt;: Reduces risk of password leaks.&lt;/li&gt;
&lt;/ul&gt;


&lt;h2&gt;
  
  
  Setting Up OAuth in a Node.js Application
&lt;/h2&gt;

&lt;p&gt;We'll set up OAuth authentication using &lt;strong&gt;Passport.js&lt;/strong&gt;, a popular authentication middleware for Node.js.&lt;/p&gt;
&lt;h3&gt;
  
  
  1. Install Dependencies
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm init &lt;span class="nt"&gt;-y&lt;/span&gt;  &lt;span class="c"&gt;# Initialize package.json&lt;/span&gt;
npm &lt;span class="nb"&gt;install &lt;/span&gt;express passport passport-google-oauth20 passport-facebook passport-github2 express-session dotenv
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  2. Project Structure
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;project-folder/
|-- config/
|   |-- passportSetup.js
|-- .env
|-- server.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  3. Configure Environment Variables
&lt;/h3&gt;

&lt;p&gt;Create a &lt;code&gt;.env&lt;/code&gt; file to store OAuth credentials (replace with actual keys from the provider's developer console).&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ini"&gt;&lt;code&gt;&lt;span class="py"&gt;GOOGLE_CLIENT_ID&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;your_google_client_id&lt;/span&gt;
&lt;span class="py"&gt;GOOGLE_CLIENT_SECRET&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;your_google_client_secret&lt;/span&gt;
&lt;span class="py"&gt;FACEBOOK_CLIENT_ID&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;your_facebook_client_id&lt;/span&gt;
&lt;span class="py"&gt;FACEBOOK_CLIENT_SECRET&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;your_facebook_client_secret&lt;/span&gt;
&lt;span class="py"&gt;GITHUB_CLIENT_ID&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;your_github_client_id&lt;/span&gt;
&lt;span class="py"&gt;GITHUB_CLIENT_SECRET&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;your_github_client_secret&lt;/span&gt;
&lt;span class="py"&gt;SESSION_SECRET&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;your_session_secret&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  4. Setting Up Passport Strategies
&lt;/h3&gt;

&lt;p&gt;Create &lt;code&gt;config/passportSetup.js&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;passport&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;passport&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;GoogleStrategy&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;passport-google-oauth20&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;Strategy&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;FacebookStrategy&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;passport-facebook&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;Strategy&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;GitHubStrategy&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;passport-github2&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;Strategy&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;dotenv&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;config&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;callbackHandler&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;accessToken&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;refreshToken&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;profile&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;done&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;done&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;profile&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="nx"&gt;passport&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;use&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;GoogleStrategy&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;clientID&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;GOOGLE_CLIENT_ID&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;clientSecret&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;GOOGLE_CLIENT_SECRET&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;callbackURL&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/auth/google/callback&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="nx"&gt;callbackHandler&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

&lt;span class="nx"&gt;passport&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;use&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;FacebookStrategy&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;clientID&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;FACEBOOK_CLIENT_ID&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;clientSecret&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;FACEBOOK_CLIENT_SECRET&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;callbackURL&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/auth/facebook/callback&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;profileFields&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;displayName&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;emails&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="nx"&gt;callbackHandler&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

&lt;span class="nx"&gt;passport&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;use&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;GitHubStrategy&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;clientID&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;GITHUB_CLIENT_ID&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;clientSecret&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;GITHUB_CLIENT_SECRET&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;callbackURL&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/auth/github/callback&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="nx"&gt;callbackHandler&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

&lt;span class="nx"&gt;passport&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;serializeUser&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;done&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;done&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;passport&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;deserializeUser&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;done&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;done&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  5. Setting Up Express Server
&lt;/h3&gt;

&lt;p&gt;Create &lt;code&gt;server.js&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;express&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;passport&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;passport&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;session&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;express-session&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./config/passportSetup&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;dotenv&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;config&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;express&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;use&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;session&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;secret&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;SESSION_SECRET&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;resave&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;saveUninitialized&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="p"&gt;}));&lt;/span&gt;
&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;use&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;passport&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;initialize&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;use&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;passport&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;session&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;

&lt;span class="c1"&gt;// Google Auth Routes&lt;/span&gt;
&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/auth/google&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;passport&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;authenticate&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;google&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;scope&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;profile&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;email&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="p"&gt;}));&lt;/span&gt;
&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/auth/google/callback&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;passport&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;authenticate&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;google&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;successRedirect&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/dashboard&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;failureRedirect&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;}));&lt;/span&gt;

&lt;span class="c1"&gt;// Facebook Auth Routes&lt;/span&gt;
&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/auth/facebook&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;passport&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;authenticate&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;facebook&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/auth/facebook/callback&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;passport&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;authenticate&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;facebook&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;successRedirect&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/dashboard&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;failureRedirect&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;}));&lt;/span&gt;

&lt;span class="c1"&gt;// GitHub Auth Routes&lt;/span&gt;
&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/auth/github&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;passport&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;authenticate&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;github&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;scope&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;user:email&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="p"&gt;}));&lt;/span&gt;
&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/auth/github/callback&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;passport&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;authenticate&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;github&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;successRedirect&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/dashboard&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;failureRedirect&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;}));&lt;/span&gt;

&lt;span class="c1"&gt;// Dashboard Route&lt;/span&gt;
&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/dashboard&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Hello, &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;displayName&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="c1"&gt;// Logout Route&lt;/span&gt;
&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/logout&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;logout&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;next&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;redirect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;listen&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;3000&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Server running on http://localhost:3000&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Architecture is : &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxnw3kcneo9opz46e4z47.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxnw3kcneo9opz46e4z47.png" alt="Image description" width="800" height="569"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Understanding OAuth Architecture&lt;/p&gt;

&lt;p&gt;OAuth authentication follows a structured flow involving key components:&lt;/p&gt;

&lt;p&gt;Core Components:&lt;/p&gt;

&lt;p&gt;Resource Owner: The user who owns the protected resources (e.g., Google account holder).&lt;/p&gt;

&lt;p&gt;Resource Server: The server hosting the protected resources (e.g., Google's servers).&lt;/p&gt;

&lt;p&gt;Client: Your Node.js application requesting access.&lt;/p&gt;

&lt;p&gt;Authorization Server: The server that authenticates the user and issues tokens.&lt;/p&gt;

&lt;p&gt;Key Elements of Authorization Flow:&lt;/p&gt;

&lt;p&gt;Initial Redirect:&lt;/p&gt;

&lt;p&gt;When the user clicks the login button, your Node.js app redirects them to the authorization server with:&lt;/p&gt;

&lt;p&gt;client_id: Identifies your application.&lt;/p&gt;

&lt;p&gt;response_type=code: Requests an authorization code.&lt;/p&gt;

&lt;p&gt;redirect_uri: Where the auth server will send the user back after authorization.&lt;/p&gt;

&lt;p&gt;Token Exchange:&lt;/p&gt;

&lt;p&gt;After receiving the authorization code, your app makes a POST request to exchange it for an access token.&lt;/p&gt;

&lt;p&gt;This happens server-side, keeping your credentials secure.&lt;/p&gt;

&lt;p&gt;Resource Access:&lt;/p&gt;

&lt;p&gt;The final step uses the Bearer token format, meaning the token itself serves as proof of authorization.&lt;br&gt;
Token Expiration: Implement proper token refresh logic&lt;br&gt;
State Validation: Always validate the state parameter to prevent CSRF attacks&lt;br&gt;
Callback URLs: Ensure callback URLs match exactly what's configured in provider settings&lt;br&gt;
Error Handling: Implement proper error handling for failed authentications&lt;/p&gt;

&lt;h2&gt;
  
  
  This implementation provides secure authentication with Google, Facebook, and GitHub while maintaining proper security practices and token management. Remember to handle errors appropriately and implement proper logging for debugging purposes.
&lt;/h2&gt;

&lt;h3&gt;
  
  
  6. Run the Application
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;node server.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Visit &lt;code&gt;http://localhost:3000/auth/google&lt;/code&gt; to test Google login.&lt;br&gt;
Visit &lt;code&gt;http://localhost:3000/auth/facebook&lt;/code&gt; to test Facebook login.&lt;br&gt;
Visit &lt;code&gt;http://localhost:3000/auth/github&lt;/code&gt; to test GitHub login.&lt;/p&gt;




&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;OAuth authentication simplifies user login and improves security. Using Passport.js, we easily integrated Google, Facebook, and GitHub login into our Node.js application.&lt;/p&gt;

&lt;p&gt;Feel free to ask if you have any questions!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>IOT-based Smart Ground water Recharge System</title>
      <dc:creator>Manas Uniyal</dc:creator>
      <pubDate>Thu, 27 Mar 2025 07:48:52 +0000</pubDate>
      <link>https://forem.com/uniyalmanas/iot-based-smart-ground-water-recharge-system-45ma</link>
      <guid>https://forem.com/uniyalmanas/iot-based-smart-ground-water-recharge-system-45ma</guid>
      <description>&lt;h1&gt;
  
  
  🌧️ Smart Rainwater Harvesting System: A Step Towards Sustainable Water Management 💧
&lt;/h1&gt;

&lt;p&gt;Water is the most important commodity for existence of life. In India, the main sources of water are rainwater(monsoon) that fills the rivers with water and underground water. However, we have seen a steady decline in underground water levels across India at an alarming rate that affects the agriculture and daily water needs of the citizens. This paper suggests a smart ground water recharge system that automatically recharges the ground water after rain fall. The system uses smart IOT devices, solar panel, and a filter to filter out unwanted materials that comes along the rainwater. In this paper a fully automatic rainwater harvesting is introduced that collects rainwater and filters out dirt and unwanted materials(trash) that comes along the rain. It also senses acidic content of rain and also filters it out when needed. Later on the filtered water can be directly recharged in ground, or it can also be collected in artificial pools for  irrigation purpose. Polluted water can be very harmful for our environment and food cycle [14].&lt;/p&gt;

&lt;p&gt;Water scarcity is a pressing issue, and efficient water management is the need of the hour! 🌍 That’s why I, along with my research team, developed a &lt;strong&gt;Smart Rainwater Harvesting System&lt;/strong&gt;, which was recently presented at a prestigious conference. 🎤📜 This project leverages cutting-edge &lt;strong&gt;IoT and AI-based technologies&lt;/strong&gt; to optimize water conservation and usage. Let's dive into the technicalities! 🚀&lt;/p&gt;

&lt;h2&gt;
  
  
  🌱 The Motivation Behind This Research
&lt;/h2&gt;

&lt;p&gt;Traditional rainwater harvesting systems often lack &lt;strong&gt;real-time monitoring, predictive analysis, and automated distribution mechanisms&lt;/strong&gt;. Our smart system aims to:&lt;br&gt;
✅ &lt;strong&gt;Maximize water collection efficiency&lt;/strong&gt; 📊&lt;br&gt;
✅ &lt;strong&gt;Reduce water wastage&lt;/strong&gt; 🚱&lt;br&gt;
✅ &lt;strong&gt;Ensure sustainable groundwater recharge&lt;/strong&gt; 🌿&lt;br&gt;
✅ &lt;strong&gt;Use predictive analytics to optimize storage &amp;amp; usage&lt;/strong&gt; 📡&lt;/p&gt;

&lt;h2&gt;
  
  
  🌍 The Role of IoT in Smart Water Management
&lt;/h2&gt;

&lt;p&gt;The Internet of Things (IoT) is at the core of our &lt;strong&gt;Smart Rainwater Harvesting System&lt;/strong&gt;. By integrating &lt;strong&gt;smart sensors, microcontrollers, and cloud-based analytics&lt;/strong&gt;, we ensure seamless automation and remote monitoring. IoT enables:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;📡 &lt;strong&gt;Real-time data acquisition&lt;/strong&gt; from multiple sensors&lt;/li&gt;
&lt;li&gt;⚡ &lt;strong&gt;Automated control&lt;/strong&gt; of valves and pumps&lt;/li&gt;
&lt;li&gt;☁️ &lt;strong&gt;Cloud storage &amp;amp; predictive analytics&lt;/strong&gt; for water usage optimization&lt;/li&gt;
&lt;li&gt;📱 &lt;strong&gt;Remote access&lt;/strong&gt; via web or mobile applications&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  🔧 How Our Smart System Works
&lt;/h2&gt;

&lt;p&gt;Our &lt;strong&gt;IoT-driven Rainwater Harvesting System&lt;/strong&gt; is designed to &lt;strong&gt;autonomously monitor and manage&lt;/strong&gt; rainwater collection using multiple sensors and AI-based decision-making. Here’s how it works:&lt;/p&gt;

&lt;h3&gt;
  
  
  1️⃣ &lt;strong&gt;Data Collection Using Smart Sensors&lt;/strong&gt; 📡
&lt;/h3&gt;

&lt;p&gt;We integrated multiple sensors into the system to &lt;strong&gt;track environmental conditions and water levels in real-time&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🌦️ &lt;strong&gt;Rainfall sensors&lt;/strong&gt; to measure precipitation levels&lt;/li&gt;
&lt;li&gt;📏 &lt;strong&gt;Ultrasonic sensors&lt;/strong&gt; to monitor tank water levels&lt;/li&gt;
&lt;li&gt;🌡️ &lt;strong&gt;Temperature &amp;amp; humidity sensors&lt;/strong&gt; for climate data analysis&lt;/li&gt;
&lt;li&gt;⚡ &lt;strong&gt;pH &amp;amp; TDS sensors&lt;/strong&gt; to ensure water quality&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  2️⃣ &lt;strong&gt;AI-Driven Prediction &amp;amp; Optimization&lt;/strong&gt; 🧠
&lt;/h3&gt;

&lt;p&gt;Using &lt;strong&gt;Machine Learning algorithms&lt;/strong&gt;, the system predicts:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Expected rainfall based on historical data 📅&lt;/li&gt;
&lt;li&gt;Optimal storage strategies to avoid overflow 🌊&lt;/li&gt;
&lt;li&gt;Water usage patterns for efficient distribution 🚰&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fekp60jw1dlj9ut5al9lk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fekp60jw1dlj9ut5al9lk.png" alt="Image description" width="324" height="325"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  3️⃣ &lt;strong&gt;Automated Water Distribution&lt;/strong&gt; 🚿
&lt;/h3&gt;

&lt;p&gt;Our system uses &lt;strong&gt;actuators and smart valves&lt;/strong&gt; to &lt;strong&gt;autonomously distribute collected rainwater&lt;/strong&gt; based on:&lt;br&gt;
✅ Soil moisture levels (for irrigation) 🌾&lt;br&gt;
✅ Household water needs 🏡&lt;br&gt;
✅ Groundwater recharge requirements 🌎&lt;/p&gt;

&lt;h3&gt;
  
  
  4️⃣ &lt;strong&gt;Cloud-Based Monitoring &amp;amp; Control&lt;/strong&gt; ☁️
&lt;/h3&gt;

&lt;p&gt;Users can monitor and control the system remotely via a &lt;strong&gt;web dashboard or mobile app&lt;/strong&gt;. 📱 This provides:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Real-time water level alerts 🚨&lt;/li&gt;
&lt;li&gt;Historical data trends 📈&lt;/li&gt;
&lt;li&gt;Customizable water usage plans 🏗️&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fho76ne5z1381tlvq7gmx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fho76ne5z1381tlvq7gmx.png" alt="Image description" width="312" height="280"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🛠️ NodeMCU-Based IoT Implementation
&lt;/h2&gt;

&lt;p&gt;Our system is built using the &lt;strong&gt;NodeMCU ESP8266&lt;/strong&gt;, which connects various sensors and actuators to the cloud for real-time monitoring and automation.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1y3tkmt5yseaj0omdt0k.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1y3tkmt5yseaj0omdt0k.png" alt="Image description" width="312" height="112"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📌 Sample NodeMCU Code for Water Level Monitoring
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight cpp"&gt;&lt;code&gt;&lt;span class="cp"&gt;#include&lt;/span&gt; &lt;span class="cpf"&gt;&amp;lt;ESP8266WiFi.h&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;
#include&lt;/span&gt; &lt;span class="cpf"&gt;&amp;lt;FirebaseESP8266.h&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;
&lt;/span&gt;
&lt;span class="cp"&gt;#define TRIG D1
#define ECHO D2
#define WIFI_SSID "Your_WiFi_Name"
#define WIFI_PASSWORD "Your_WiFi_Password"
#define FIREBASE_HOST "your-project.firebaseio.com"
#define FIREBASE_AUTH "your-firebase-auth-key"
&lt;/span&gt;
&lt;span class="n"&gt;FirebaseData&lt;/span&gt; &lt;span class="n"&gt;firebaseData&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;setup&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;Serial&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;begin&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;115200&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="n"&gt;pinMode&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;TRIG&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;OUTPUT&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="n"&gt;pinMode&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;ECHO&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;INPUT&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="n"&gt;WiFi&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;begin&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;WIFI_SSID&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;WIFI_PASSWORD&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;while&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;WiFi&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;status&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;!=&lt;/span&gt; &lt;span class="n"&gt;WL_CONNECTED&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="n"&gt;delay&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;500&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="n"&gt;Serial&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"."&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="n"&gt;Firebase&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;begin&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;FIREBASE_HOST&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;FIREBASE_AUTH&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;loop&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;digitalWrite&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;TRIG&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;LOW&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="n"&gt;delayMicroseconds&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="n"&gt;digitalWrite&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;TRIG&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;HIGH&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="n"&gt;delayMicroseconds&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="n"&gt;digitalWrite&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;TRIG&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;LOW&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="kt"&gt;long&lt;/span&gt; &lt;span class="n"&gt;duration&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;pulseIn&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;ECHO&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;HIGH&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="kt"&gt;float&lt;/span&gt; &lt;span class="n"&gt;distance&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;duration&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mf"&gt;0.034&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="n"&gt;Serial&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Water Level: "&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="n"&gt;Serial&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;println&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;distance&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="n"&gt;Firebase&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;setFloat&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;firebaseData&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"water_level"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;distance&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="n"&gt;delay&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;5000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  🌟 Features of This Implementation
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;📶 &lt;strong&gt;Real-time water level data&lt;/strong&gt; sent to Firebase for cloud monitoring&lt;/li&gt;
&lt;li&gt;🔧 &lt;strong&gt;Wireless connectivity&lt;/strong&gt; using ESP8266 WiFi module&lt;/li&gt;
&lt;li&gt;🔄 &lt;strong&gt;Automated alerts&lt;/strong&gt; when water levels are too high or too low&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkr7ch9zvfs0qwv6fe9l7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkr7ch9zvfs0qwv6fe9l7.png" alt="Image description" width="716" height="279"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  📊 Key Findings &amp;amp; Impact
&lt;/h2&gt;

&lt;p&gt;🔬 Our experiments showed that &lt;strong&gt;water utilization efficiency improved by 40%&lt;/strong&gt; compared to traditional methods. &lt;br&gt;
💰 Cost analysis revealed that &lt;strong&gt;integrating smart IoT technology significantly reduces water wastage&lt;/strong&gt; and improves long-term savings.&lt;br&gt;
🌱 The system also helped in &lt;strong&gt;groundwater conservation and improved irrigation planning&lt;/strong&gt; in agricultural areas.&lt;/p&gt;

&lt;h2&gt;
  
  
  🔮 Future Scope &amp;amp; Improvements
&lt;/h2&gt;

&lt;p&gt;Although our prototype performed exceptionally well, we aim to enhance it further by:&lt;br&gt;
🔹 Implementing &lt;strong&gt;edge AI&lt;/strong&gt; for faster real-time processing 🚀&lt;br&gt;
🔹 Expanding the system for &lt;strong&gt;large-scale industrial applications&lt;/strong&gt; 🏭&lt;br&gt;
🔹 Integrating &lt;strong&gt;blockchain for transparent water management records&lt;/strong&gt; 🔗&lt;/p&gt;




&lt;h2&gt;
  
  
  💡 Final Thoughts
&lt;/h2&gt;

&lt;p&gt;This research has been an incredible journey, and seeing our &lt;strong&gt;Smart Rainwater Harvesting System&lt;/strong&gt; recognized at a conference was truly rewarding! 🏆💙 With water scarcity becoming a global crisis, integrating &lt;strong&gt;technology with sustainability&lt;/strong&gt; is the way forward. &lt;/p&gt;

&lt;p&gt;What are your thoughts on smart water management systems? Drop your ideas in the comments! 💬😊&lt;/p&gt;

&lt;h1&gt;
  
  
  SmartWaterManagement #IoT #NodeMCU #ESP8266 #Sustainability #AI #RainwaterHarvesting
&lt;/h1&gt;

</description>
      <category>iot</category>
      <category>cloud</category>
      <category>nodemcu</category>
      <category>arduino</category>
    </item>
    <item>
      <title>When Should TypeScript Be Used Instead of JavaScript?</title>
      <dc:creator>Manas Uniyal</dc:creator>
      <pubDate>Thu, 27 Mar 2025 07:39:13 +0000</pubDate>
      <link>https://forem.com/uniyalmanas/when-should-typescript-be-used-instead-of-javascript-2nlj</link>
      <guid>https://forem.com/uniyalmanas/when-should-typescript-be-used-instead-of-javascript-2nlj</guid>
      <description>&lt;h1&gt;
  
  
  🚀 When Should You Use TypeScript Instead of JavaScript?
&lt;/h1&gt;

&lt;p&gt;JavaScript is the go-to language for web development, but have you ever found yourself struggling with unexpected bugs or messy code? 🤯 That’s where TypeScript comes to the rescue! TypeScript is a superset of JavaScript that adds static typing, making your life as a developer much easier. But when exactly should you choose TypeScript over JavaScript? Let’s dive in! 👇&lt;/p&gt;

&lt;h2&gt;
  
  
  1️⃣ Large-Scale Projects
&lt;/h2&gt;

&lt;p&gt;If you're working on a &lt;strong&gt;huge application with multiple developers&lt;/strong&gt;, TypeScript is a game-changer! 💡 With static typing and better code organization, you can &lt;strong&gt;avoid those nasty runtime errors&lt;/strong&gt; and make collaboration smoother. No more “undefined is not a function” surprises! 😅&lt;/p&gt;

&lt;h2&gt;
  
  
  2️⃣ Strict Type Safety
&lt;/h2&gt;

&lt;p&gt;Ever faced unexpected &lt;code&gt;NaN&lt;/code&gt; or &lt;code&gt;undefined&lt;/code&gt; errors? 🫠 JavaScript’s dynamic typing can be unpredictable. TypeScript &lt;strong&gt;catches errors at compile time&lt;/strong&gt;, saving you from debugging nightmares later. If your project &lt;strong&gt;requires high reliability&lt;/strong&gt;, TypeScript is your best friend. 🛡️&lt;/p&gt;

&lt;h3&gt;
  
  
  Example:
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;addNumbers&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;addNumbers&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;10&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// ❌ Type error at compile time!&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  3️⃣ Enhanced Developer Experience
&lt;/h2&gt;

&lt;p&gt;TypeScript offers &lt;strong&gt;amazing tooling support&lt;/strong&gt;! 🛠️ With autocomplete, inline documentation, and &lt;strong&gt;better refactoring capabilities&lt;/strong&gt;, coding feels smoother and more intuitive. If you use &lt;strong&gt;VS Code&lt;/strong&gt;, you’ll love how TypeScript makes development faster and more enjoyable! 😍&lt;/p&gt;

&lt;h2&gt;
  
  
  4️⃣ Object-Oriented Programming (OOP)
&lt;/h2&gt;

&lt;p&gt;If you love working with &lt;strong&gt;classes, interfaces, and inheritance&lt;/strong&gt;, TypeScript has your back. 🏗️ While JavaScript has basic class support, TypeScript &lt;strong&gt;takes it up a notch&lt;/strong&gt; with stricter rules and better OOP implementation. If you’re into &lt;strong&gt;enterprise-level applications&lt;/strong&gt;, this is a must! 🚀&lt;/p&gt;

&lt;h3&gt;
  
  
  Example:
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Person&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s2"&gt;`Hello, my name is &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; and I am &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; years old.`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;john&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Person&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;john&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  5️⃣ Seamless Third-Party Library Integration
&lt;/h2&gt;

&lt;p&gt;Ever used an external library and &lt;strong&gt;had no clue what parameters to pass?&lt;/strong&gt; 🤨 TypeScript’s type definitions (&lt;code&gt;@types/*&lt;/code&gt; packages) &lt;strong&gt;help you understand function signatures and expected data structures&lt;/strong&gt;, making third-party libraries easier to use and debug. 🔍&lt;/p&gt;

&lt;h2&gt;
  
  
  6️⃣ Better Code Maintainability &amp;amp; Scalability
&lt;/h2&gt;

&lt;p&gt;Working on a long-term project? 📈 Maintaining JavaScript can be a nightmare as the codebase grows. TypeScript &lt;strong&gt;enforces structured and consistent coding practices&lt;/strong&gt;, making it &lt;strong&gt;easier to manage, scale, and refactor&lt;/strong&gt; your project down the line. 💪&lt;/p&gt;

&lt;h2&gt;
  
  
  7️⃣ TypeScript for Backend (Node.js)
&lt;/h2&gt;

&lt;p&gt;Node.js developers, listen up! 👂 TypeScript isn’t just for frontend—it's a &lt;strong&gt;fantastic choice for backend development&lt;/strong&gt; too. It helps &lt;strong&gt;catch async errors, improve code structure, and boost performance&lt;/strong&gt; for large-scale server-side applications. ⚡&lt;/p&gt;

&lt;h3&gt;
  
  
  Example:
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;express&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;express&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello, TypeScript in Node.js!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;listen&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;3000&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Server running on port 3000&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  8️⃣ Migrating &amp;amp; Refactoring Legacy Code
&lt;/h2&gt;

&lt;p&gt;Got an old JavaScript project that's turning into a &lt;strong&gt;spaghetti code disaster&lt;/strong&gt;? 🍝 TypeScript can help &lt;strong&gt;gradually clean up and improve&lt;/strong&gt; your existing codebase without breaking functionality. Perfect for teams looking to enforce better coding practices! 🧹&lt;/p&gt;




&lt;h2&gt;
  
  
  🤔 When Should You Stick with JavaScript?
&lt;/h2&gt;

&lt;p&gt;Even though TypeScript is awesome, &lt;strong&gt;JavaScript is still a great choice&lt;/strong&gt; in some cases:&lt;br&gt;
✅ &lt;strong&gt;Small projects or quick prototypes&lt;/strong&gt; where strict typing isn’t necessary.&lt;br&gt;
✅ &lt;strong&gt;Simple scripts or web pages&lt;/strong&gt; where adding TypeScript would be overkill.&lt;br&gt;
✅ &lt;strong&gt;Performance-sensitive applications&lt;/strong&gt; where avoiding transpilation is crucial.&lt;br&gt;
✅ &lt;strong&gt;Teams unfamiliar with TypeScript&lt;/strong&gt;, as it comes with a learning curve.&lt;/p&gt;




&lt;h2&gt;
  
  
  🎯 Final Thoughts
&lt;/h2&gt;

&lt;p&gt;So, should you switch to TypeScript? If you're working on &lt;strong&gt;a large, scalable, or critical application&lt;/strong&gt;, the answer is &lt;strong&gt;YES&lt;/strong&gt;! ✅ TypeScript helps you &lt;strong&gt;write safer, cleaner, and more maintainable code&lt;/strong&gt; while making development a lot more fun. 🎉&lt;/p&gt;

&lt;p&gt;But if you're just hacking together a quick project, &lt;strong&gt;JavaScript still gets the job done&lt;/strong&gt;! 💡 The key is to choose what works best for your &lt;strong&gt;specific needs and team&lt;/strong&gt;. &lt;/p&gt;

&lt;p&gt;Have you tried TypeScript yet? Let me know your thoughts! 👇😊&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/..." class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/..." alt="Uploading image" width="" height=""&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>typescript</category>
      <category>webdev</category>
      <category>node</category>
      <category>programming</category>
    </item>
    <item>
      <title>Building a Secure Authentication System in Node.js using JWT</title>
      <dc:creator>Manas Uniyal</dc:creator>
      <pubDate>Thu, 27 Mar 2025 07:33:14 +0000</pubDate>
      <link>https://forem.com/uniyalmanas/building-a-secure-authentication-system-in-nodejs-using-jwt-26ng</link>
      <guid>https://forem.com/uniyalmanas/building-a-secure-authentication-system-in-nodejs-using-jwt-26ng</guid>
      <description>&lt;h1&gt;
  
  
  Building a Secure Authentication System in Node.js using JWT
&lt;/h1&gt;

&lt;p&gt;Authentication is a crucial aspect of backend development, ensuring secure access to resources. In this tutorial, we'll build a secure authentication system in Node.js using JSON Web Tokens (JWT).&lt;/p&gt;

&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;📌 Basic knowledge of JavaScript and Node.js&lt;/li&gt;
&lt;li&gt;📌 Node.js installed on your system&lt;/li&gt;
&lt;li&gt;📌 A package manager like npm or yarn&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Step 1: Setting Up the Project
&lt;/h2&gt;

&lt;p&gt;First, create a new Node.js project:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;mkdir &lt;/span&gt;jwt-auth-system
&lt;span class="nb"&gt;cd &lt;/span&gt;jwt-auth-system
npm init &lt;span class="nt"&gt;-y&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This initializes a new Node.js project with a default &lt;code&gt;package.json&lt;/code&gt; file.&lt;/p&gt;

&lt;p&gt;Next, install the required dependencies:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install &lt;/span&gt;express jsonwebtoken bcryptjs dotenv cors mongoose
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Also, install &lt;code&gt;nodemon&lt;/code&gt; for development:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;--save-dev&lt;/span&gt; nodemon
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Step 2: Setting Up Express Server
&lt;/h2&gt;

&lt;p&gt;Create an &lt;code&gt;index.js&lt;/code&gt; file and set up a basic Express server:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;dotenv&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;config&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;express&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;mongoose&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;mongoose&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;cors&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;cors&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;authRoutes&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./routes/auth&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;express&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;use&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;express&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;use&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;cors&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;

&lt;span class="nx"&gt;mongoose&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;connect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;MONGO_URI&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;useNewUrlParser&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;useUnifiedTopology&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;MongoDB Connected&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;use&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/api/auth&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;authRoutes&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;listen&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;5000&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Server running on port 5000&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Step 3: Creating User Model
&lt;/h2&gt;

&lt;p&gt;Create a new folder &lt;code&gt;models&lt;/code&gt; and a file &lt;code&gt;User.js&lt;/code&gt; inside it:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;mongoose&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;mongoose&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;UserSchema&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;mongoose&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Schema&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;username&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;String&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;required&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;unique&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="na"&gt;email&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;String&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;required&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;unique&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="na"&gt;password&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;String&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;required&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;mongoose&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;model&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;User&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;UserSchema&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Step 4: Implementing Authentication Routes
&lt;/h2&gt;

&lt;p&gt;Create a &lt;code&gt;routes&lt;/code&gt; folder and an &lt;code&gt;auth.js&lt;/code&gt; file inside it:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;express&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;bcrypt&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;bcryptjs&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;jwt&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;jsonwebtoken&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;User&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;../models/User&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;router&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Router&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="c1"&gt;// 📝 Register&lt;/span&gt;
&lt;span class="nx"&gt;router&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/register&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;username&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;email&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;password&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;hashedPassword&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;bcrypt&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;hash&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;password&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;newUser&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;User&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;username&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;email&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;password&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;hashedPassword&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;newUser&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;save&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;status&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;201&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;User registered successfully&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;status&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;500&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;error&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="c1"&gt;// 🔑 Login&lt;/span&gt;
&lt;span class="nx"&gt;router&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/login&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;email&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;password&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;User&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;findOne&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;email&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;status&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;404&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;User not found&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;

    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;isMatch&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;bcrypt&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;compare&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;password&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;password&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;isMatch&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;status&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;400&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Invalid credentials&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;

    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;token&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;jwt&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sign&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;_id&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;JWT_SECRET&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;expiresIn&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;1h&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;token&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;status&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;500&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;error&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;router&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Step 5: Protecting Routes
&lt;/h2&gt;

&lt;p&gt;Create a middleware for authentication:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;jwt&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;jsonwebtoken&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;authMiddleware&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;next&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;token&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;header&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Authorization&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;token&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;status&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;401&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Access denied&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;

  &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;verified&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;jwt&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;verify&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;token&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;JWT_SECRET&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;verified&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nf"&gt;next&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;status&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;400&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Invalid token&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;authMiddleware&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Step 6: Testing the API
&lt;/h2&gt;

&lt;p&gt;Use Postman or any API testing tool to test:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;📝 Register a user: &lt;code&gt;POST /api/auth/register&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;🔑 Login a user: &lt;code&gt;POST /api/auth/login&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;🔒 Access protected routes with the received token&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3jiiw4dqgoi0mblgyjb4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3jiiw4dqgoi0mblgyjb4.png" alt="Image description" width="708" height="716"&gt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;✅ You've successfully built a secure authentication system in Node.js using JWT. This setup ensures users can securely authenticate and access protected resources.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>devops</category>
      <category>authentication</category>
    </item>
    <item>
      <title>Role-Based Authentication in MERN Stack: A Complete Guide</title>
      <dc:creator>Manas Uniyal</dc:creator>
      <pubDate>Fri, 10 Jan 2025 12:34:00 +0000</pubDate>
      <link>https://forem.com/uniyalmanas/role-based-authentication-in-mern-stack-a-complete-guide-nao</link>
      <guid>https://forem.com/uniyalmanas/role-based-authentication-in-mern-stack-a-complete-guide-nao</guid>
      <description>&lt;p&gt;Authentication is a crucial aspect of web applications, ensuring that only authorized users can access certain resources. Role-Based Authentication (RBAC) takes this a step further by assigning different permissions to users based on their roles.&lt;/p&gt;

&lt;p&gt;In this post, we'll cover:&lt;br&gt;
✅ What is Role-Based Authentication?&lt;br&gt;
✅ Why Use Role-Based Authentication?&lt;br&gt;
✅ How to Implement RBAC in a MERN Stack Application&lt;/p&gt;

&lt;p&gt;What is Role-Based Authentication?&lt;br&gt;
Role-Based Access Control (RBAC) is a security approach where users are assigned roles, and each role has specific permissions.&lt;/p&gt;

&lt;p&gt;For example, in an e-commerce application:&lt;/p&gt;

&lt;p&gt;Admin can add, edit, or delete products.&lt;br&gt;
Seller can manage their own products.&lt;br&gt;
Customer can only view and purchase products.&lt;br&gt;
This ensures that users can only perform actions relevant to their roles.&lt;/p&gt;

&lt;p&gt;Why Use Role-Based Authentication?&lt;br&gt;
✔ Enhanced Security – Prevents unauthorized access to sensitive operations.&lt;br&gt;
✔ Scalability – Easily add new roles and permissions as the system grows.&lt;br&gt;
✔ Better User Management – Assign permissions without modifying code.&lt;/p&gt;

&lt;p&gt;How to Implement RBAC in a MERN Stack Application?&lt;br&gt;
1️⃣ Setting Up the User Model (MongoDB + Mongoose)&lt;br&gt;
In your models/user.model.js:&lt;/p&gt;

&lt;p&gt;javascript&lt;br&gt;
Copy code&lt;br&gt;
const mongoose = require("mongoose");&lt;/p&gt;

&lt;p&gt;const UserSchema = new mongoose.Schema({&lt;br&gt;
  username: { type: String, required: true, unique: true },&lt;br&gt;
  email: { type: String, required: true, unique: true },&lt;br&gt;
  password: { type: String, required: true },&lt;br&gt;
  role: { &lt;br&gt;
    type: String, &lt;br&gt;
    enum: ["admin", "seller", "customer"], &lt;br&gt;
    default: "customer" &lt;br&gt;
  }&lt;br&gt;
});&lt;/p&gt;

&lt;p&gt;module.exports = mongoose.model("User", UserSchema);&lt;br&gt;
🔹 Here, each user has a role field, which determines their permissions.&lt;/p&gt;

&lt;p&gt;2️⃣ Generating JWT Tokens for Authentication&lt;br&gt;
In your controllers/auth.controller.js:&lt;/p&gt;

&lt;p&gt;javascript&lt;br&gt;
Copy code&lt;br&gt;
const jwt = require("jsonwebtoken");&lt;br&gt;
const User = require("../models/user.model");&lt;/p&gt;

&lt;p&gt;const login = async (req, res) =&amp;gt; {&lt;br&gt;
  const { email, password } = req.body;&lt;br&gt;
  const user = await User.findOne({ email });&lt;/p&gt;

&lt;p&gt;if (!user || user.password !== password) {&lt;br&gt;
    return res.status(401).json({ message: "Invalid credentials" });&lt;br&gt;
  }&lt;/p&gt;

&lt;p&gt;const token = jwt.sign({ userId: user._id, role: user.role }, "SECRET_KEY", { expiresIn: "1h" });&lt;/p&gt;

&lt;p&gt;res.json({ token, role: user.role });&lt;br&gt;
};&lt;/p&gt;

&lt;p&gt;module.exports = { login };&lt;br&gt;
🔹 This function generates a JWT token containing the user's role.&lt;/p&gt;

&lt;p&gt;3️⃣ Creating Middleware to Restrict Access&lt;br&gt;
In middlewares/auth.middleware.js:&lt;/p&gt;

&lt;p&gt;javascript&lt;br&gt;
Copy code&lt;br&gt;
const jwt = require("jsonwebtoken");&lt;/p&gt;

&lt;p&gt;const authenticate = (req, res, next) =&amp;gt; {&lt;br&gt;
  const token = req.header("Authorization")?.split(" ")[1];&lt;/p&gt;

&lt;p&gt;if (!token) return res.status(403).json({ message: "Access denied" });&lt;/p&gt;

&lt;p&gt;try {&lt;br&gt;
    const decoded = jwt.verify(token, "SECRET_KEY");&lt;br&gt;
    req.user = decoded;&lt;br&gt;
    next();&lt;br&gt;
  } catch (err) {&lt;br&gt;
    res.status(401).json({ message: "Invalid token" });&lt;br&gt;
  }&lt;br&gt;
};&lt;/p&gt;

&lt;p&gt;const authorize = (roles) =&amp;gt; {&lt;br&gt;
  return (req, res, next) =&amp;gt; {&lt;br&gt;
    if (!roles.includes(req.user.role)) {&lt;br&gt;
      return res.status(403).json({ message: "Forbidden" });&lt;br&gt;
    }&lt;br&gt;
    next();&lt;br&gt;
  };&lt;br&gt;
};&lt;/p&gt;

&lt;p&gt;module.exports = { authenticate, authorize };&lt;br&gt;
🔹 authenticate – Ensures only logged-in users can access routes.&lt;br&gt;
🔹 authorize – Restricts access based on roles.&lt;/p&gt;

&lt;p&gt;4️⃣ Protecting Routes Based on User Roles&lt;br&gt;
In routes/admin.routes.js:&lt;/p&gt;

&lt;p&gt;javascript&lt;br&gt;
Copy code&lt;br&gt;
const express = require("express");&lt;br&gt;
const { authenticate, authorize } = require("../middlewares/auth.middleware");&lt;/p&gt;

&lt;p&gt;const router = express.Router();&lt;/p&gt;

&lt;p&gt;router.get("/admin-dashboard", authenticate, authorize(["admin"]), (req, res) =&amp;gt; {&lt;br&gt;
  res.json({ message: "Welcome to the Admin Dashboard" });&lt;br&gt;
});&lt;/p&gt;

&lt;p&gt;module.exports = router;&lt;br&gt;
🔹 Only users with the admin role can access /admin-dashboard.&lt;/p&gt;

&lt;p&gt;5️⃣ Implementing Role-Based UI in React&lt;br&gt;
In App.js (Frontend):&lt;/p&gt;

&lt;p&gt;javascript&lt;br&gt;
Copy code&lt;br&gt;
import { useState, useEffect } from "react";&lt;br&gt;
import axios from "axios";&lt;/p&gt;

&lt;p&gt;const App = () =&amp;gt; {&lt;br&gt;
  const [role, setRole] = useState(null);&lt;/p&gt;

&lt;p&gt;useEffect(() =&amp;gt; {&lt;br&gt;
    const token = localStorage.getItem("token");&lt;br&gt;
    if (token) {&lt;br&gt;
      const decoded = JSON.parse(atob(token.split(".")[1]));&lt;br&gt;
      setRole(decoded.role);&lt;br&gt;
    }&lt;br&gt;
  }, []);&lt;/p&gt;

&lt;p&gt;return (&lt;br&gt;
    &lt;/p&gt;
&lt;br&gt;
      &lt;h1&gt;Welcome to MERN Role-Based Authentication&lt;/h1&gt;
&lt;br&gt;
      {role === "admin" &amp;amp;&amp;amp; &lt;a href="/admin-dashboard"&gt;Admin Dashboard&lt;/a&gt;}&lt;br&gt;
      {role === "seller" &amp;amp;&amp;amp; &lt;a href="/seller-dashboard"&gt;Seller Dashboard&lt;/a&gt;}&lt;br&gt;
      {role === "customer" &amp;amp;&amp;amp; &lt;a href="/customer-dashboard"&gt;Customer Dashboard&lt;/a&gt;}&lt;br&gt;
    &lt;br&gt;
  );&lt;br&gt;
};

&lt;p&gt;export default App;&lt;br&gt;
🔹 The UI displays different dashboards based on the user's role.&lt;/p&gt;

&lt;p&gt;Conclusion&lt;br&gt;
Role-Based Authentication is an essential security measure in modern web applications. By implementing RBAC in MERN Stack, you can control user permissions efficiently.&lt;/p&gt;

&lt;p&gt;💡 Next Steps:&lt;br&gt;
🔹 Add a role management panel for admins.&lt;br&gt;
🔹 Implement database encryption for passwords.&lt;br&gt;
🔹 Use Refresh Tokens for better security.&lt;/p&gt;

&lt;p&gt;Want to learn more? Drop your questions in the comments! 🚀&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>programming</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
