OAuth Authentication: Google, Facebook, GitHub Login via NODE JS (Backend)

OAuth Authentication: Google, Facebook, GitHub Login 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. Diagram : OAuth architecture in Node.js with diagrams and flow How is perplexity made and its architecture? Draw architecture of node based authentication using jwt 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. Why Use OAuth? No need to store passwords: Users authenticate via trusted providers. Faster login: No signup form, just a few clicks. Secure: Reduces risk of password leaks. Setting Up OAuth in a Node.js Application We'll set up OAuth authentication using Passport.js, a popular authentication middleware for Node.js. 1. Install Dependencies npm init -y # Initialize package.json npm install express passport passport-google-oauth20 passport-facebook passport-github2 express-session dotenv 2. Project Structure project-folder/ |-- config/ | |-- passportSetup.js |-- .env |-- server.js 3. Configure Environment Variables Create a .env file to store OAuth credentials (replace with actual keys from the provider's developer console). GOOGLE_CLIENT_ID=your_google_client_id GOOGLE_CLIENT_SECRET=your_google_client_secret FACEBOOK_CLIENT_ID=your_facebook_client_id FACEBOOK_CLIENT_SECRET=your_facebook_client_secret GITHUB_CLIENT_ID=your_github_client_id GITHUB_CLIENT_SECRET=your_github_client_secret SESSION_SECRET=your_session_secret 4. Setting Up Passport Strategies Create config/passportSetup.js: const passport = require('passport'); const GoogleStrategy = require('passport-google-oauth20').Strategy; const FacebookStrategy = require('passport-facebook').Strategy; const GitHubStrategy = require('passport-github2').Strategy; require('dotenv').config(); const callbackHandler = (accessToken, refreshToken, profile, done) => { return done(null, profile); }; passport.use(new GoogleStrategy({ clientID: process.env.GOOGLE_CLIENT_ID, clientSecret: process.env.GOOGLE_CLIENT_SECRET, callbackURL: '/auth/google/callback' }, callbackHandler)); passport.use(new FacebookStrategy({ clientID: process.env.FACEBOOK_CLIENT_ID, clientSecret: process.env.FACEBOOK_CLIENT_SECRET, callbackURL: '/auth/facebook/callback', profileFields: ['id', 'displayName', 'emails'] }, callbackHandler)); passport.use(new GitHubStrategy({ clientID: process.env.GITHUB_CLIENT_ID, clientSecret: process.env.GITHUB_CLIENT_SECRET, callbackURL: '/auth/github/callback' }, callbackHandler)); passport.serializeUser((user, done) => { done(null, user); }); passport.deserializeUser((user, done) => { done(null, user); }); 5. Setting Up Express Server Create server.js: const express = require('express'); const passport = require('passport'); const session = require('express-session'); require('./config/passportSetup'); require('dotenv').config(); const app = express(); app.use(session({ secret: process.env.SESSION_SECRET, resave: false, saveUninitialized: true })); app.use(passport.initialize()); app.use(passport.session()); // Google Auth Routes app.get('/auth/google', passport.authenticate('google', { scope: ['profile', 'email'] })); app.get('/auth/google/callback', passport.authenticate('google', { successRedirect: '/dashboard', failureRedirect: '/' })); // Facebook Auth Routes app.get('/auth/facebook', passport.authenticate('facebook')); app.get('/auth/facebook/callback', passport.authenticate('facebook', { successRedirect: '/dashboard', failureRedirect: '/' })); // GitHub Auth Routes app.get('/auth/github', passport.authenticate('github', { scope: ['user:email'] })); app.get('/auth/github/callback', passport.authenticate('github', { successRedirect: '/dashboard', failureRedirect: '/' })); // Dashboard Route app.get('/dashboard', (req, res) => { res.send(`Hello, ${req.user.displayName}`); }); // Logout Route app.get('/logout', (req, res) => { req.logout(err => { if (err) return next(err); res.redirect('/'); }); }); app.listen(3000, () => console.log('Server running on http://localhost:3000')); Architecture is : Understanding OAuth Architecture OAuth authentication follows a structured flow involving key components: Core Components: Resource Owner: The user who owns the protected resources (e.g., Google account holder). Resource Server: The server hosting the protected resources (e.g., Google's servers). Client: Your Node.js application requesting access. Authorization Server: The server that authenticates the user and issues

Mar 29, 2025 - 17:09

OAuth Authentication: Google, Facebook, GitHub Login

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.

Diagram :

OAuth architecture in Node.js with diagrams and flow
How is perplexity made and its architecture?
Draw architecture of node based authentication using jwt

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.

Why Use OAuth?

No need to store passwords: Users authenticate via trusted providers.
Faster login: No signup form, just a few clicks.
Secure: Reduces risk of password leaks.

Setting Up OAuth in a Node.js Application

We'll set up OAuth authentication using Passport.js, a popular authentication middleware for Node.js.

1. Install Dependencies

npm init -y  # Initialize package.json
npm install express passport passport-google-oauth20 passport-facebook passport-github2 express-session dotenv

2. Project Structure

project-folder/
|-- config/
|   |-- passportSetup.js
|-- .env
|-- server.js

3. Configure Environment Variables

Create a .env file to store OAuth credentials (replace with actual keys from the provider's developer console).

GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
FACEBOOK_CLIENT_ID=your_facebook_client_id
FACEBOOK_CLIENT_SECRET=your_facebook_client_secret
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret
SESSION_SECRET=your_session_secret

4. Setting Up Passport Strategies

Create config/passportSetup.js:

const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;
const FacebookStrategy = require('passport-facebook').Strategy;
const GitHubStrategy = require('passport-github2').Strategy;
require('dotenv').config();

const callbackHandler = (accessToken, refreshToken, profile, done) => {
    return done(null, profile);
};

passport.use(new GoogleStrategy({
    clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: '/auth/google/callback'
}, callbackHandler));

passport.use(new FacebookStrategy({
    clientID: process.env.FACEBOOK_CLIENT_ID,
    clientSecret: process.env.FACEBOOK_CLIENT_SECRET,
    callbackURL: '/auth/facebook/callback',
    profileFields: ['id', 'displayName', 'emails']
}, callbackHandler));

passport.use(new GitHubStrategy({
    clientID: process.env.GITHUB_CLIENT_ID,
    clientSecret: process.env.GITHUB_CLIENT_SECRET,
    callbackURL: '/auth/github/callback'
}, callbackHandler));

passport.serializeUser((user, done) => {
    done(null, user);
});

passport.deserializeUser((user, done) => {
    done(null, user);
});

5. Setting Up Express Server

Create server.js:

const express = require('express');
const passport = require('passport');
const session = require('express-session');
require('./config/passportSetup');
require('dotenv').config();

const app = express();

app.use(session({ secret: process.env.SESSION_SECRET, resave: false, saveUninitialized: true }));
app.use(passport.initialize());
app.use(passport.session());

// Google Auth Routes
app.get('/auth/google', passport.authenticate('google', { scope: ['profile', 'email'] }));
app.get('/auth/google/callback', passport.authenticate('google', { successRedirect: '/dashboard', failureRedirect: '/' }));

// Facebook Auth Routes
app.get('/auth/facebook', passport.authenticate('facebook'));
app.get('/auth/facebook/callback', passport.authenticate('facebook', { successRedirect: '/dashboard', failureRedirect: '/' }));

// GitHub Auth Routes
app.get('/auth/github', passport.authenticate('github', { scope: ['user:email'] }));
app.get('/auth/github/callback', passport.authenticate('github', { successRedirect: '/dashboard', failureRedirect: '/' }));

// Dashboard Route
app.get('/dashboard', (req, res) => {
    res.send(`Hello, ${req.user.displayName}`);
});

// Logout Route
app.get('/logout', (req, res) => {
    req.logout(err => {
        if (err) return next(err);
        res.redirect('/');
    });
});

app.listen(3000, () => console.log('Server running on http://localhost:3000'));

Architecture is :

Understanding OAuth Architecture

OAuth authentication follows a structured flow involving key components:

Core Components:

Resource Owner: The user who owns the protected resources (e.g., Google account holder).

Resource Server: The server hosting the protected resources (e.g., Google's servers).

Client: Your Node.js application requesting access.

Authorization Server: The server that authenticates the user and issues tokens.

Key Elements of Authorization Flow:

Initial Redirect:

When the user clicks the login button, your Node.js app redirects them to the authorization server with:

client_id: Identifies your application.

response_type=code: Requests an authorization code.

redirect_uri: Where the auth server will send the user back after authorization.

Token Exchange:

After receiving the authorization code, your app makes a POST request to exchange it for an access token.

This happens server-side, keeping your credentials secure.

Resource Access:

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

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.

6. Run the Application

node server.js

Visit http://localhost:3000/auth/google to test Google login.
Visit http://localhost:3000/auth/facebook to test Facebook login.
Visit http://localhost:3000/auth/github to test GitHub login.

Conclusion

OAuth authentication simplifies user login and improves security. Using Passport.js, we easily integrated Google, Facebook, and GitHub login into our Node.js application.

Feel free to ask if you have any questions!