How to implement login with Facebook in Node.Js

In this article, we have discussed the whole implementation guide of implementing the FB login with Node JS

Step 1: To implement Facebook Login, you need to create a Facebook app. Follow these steps:

1. Go to the Facebook Developers website (**https://developers.facebook.com/**).
2. Create a new app or select an existing one.
3. In the app dashboard, go to the "Settings" tab and add your website's URL in the "Valid OAuth Redirect URIs" field.
4. Make a note of the "App ID" and "App Secret" values, as we will need them later.

Step 2: Set Up the Node.js Project

Start by setting up a new Node.js project using a package manager like npm or yarn. Run the following command in your terminal:

csharpCopy code
npm init

This will create a package.json file to manage your project's dependencies.

Step 3: Install Required Packages

To implement Facebook Login in Node.js, we need to install the necessary packages. Run the following command in your terminal:

Copy code
npm install express axios

This will install Express.js, a popular Node.js web framework, and the axios package, which we will use to make HTTP requests.

Step 4: Implement the Authentication Routes

Create a new file, authRoutes.js, to define the authentication routes for your application. In this file, implement the routes for initiating the Facebook Login flow, handling the callback URL, and logging out the user.

javascriptCopy code
const express = require('express');
const axios = require('axios');
const router = express.Router();

const APP_ID = 'YOUR_APP_ID';
const APP_SECRET = 'YOUR_APP_SECRET';
const REDIRECT_URI = '<http://localhost:3000/auth/facebook/callback>';

// Initiates the Facebook Login flow
router.get('/auth/facebook', (req, res) => {
  const url = `https://www.facebook.com/v13.0/dialog/oauth?client_id=${APP_ID}&redirect_uri=${REDIRECT_URI}&scope=email`;
  res.redirect(url);
});

// Callback URL for handling the Facebook Login response
router.get('/auth/facebook/callback', async (req, res) => {
  const { code } = req.query;

  try {
    // Exchange authorization code for access token
    const { data } = await axios.get(`https://graph.facebook.com/v13.0/oauth/access_token?client_id=${APP_ID}&client_secret=${APP_SECRET}&code=${code}&redirect_uri=${REDIRECT_URI}`);

    const { access_token } = data;

    // Use access_token to fetch user profile
    const { data: profile } = await axios.get(`https://graph.facebook.com/v13.0/me?fields=name,email&access_token=${access_token}`);

    // Code to handle user authentication and retrieval using the profile data

    res.redirect('/');
  } catch (error) {
    console.error('Error:', error.response.data.error);
    res.redirect('/login');
  }
});

// Logout route
router.get('/logout', (req, res) => {
  // Code to handle user logout
  res.redirect('/login');
});

module.exports = router;

Make sure to replace 'YOUR_APP_ID' and 'YOUR_APP_SECRET' with your own credentials obtained from the Facebook Developer app.

Step 5: Set Up the Express.js Server

In your main server file (e.g., app.js), import the required packages and configure the Express.js server. Include the authentication routes defined in authRoutes.js.

javascriptCopy code
const express = require('express');
const authRoutes = require('./authRoutes');

const app = express();

app.use('/', authRoutes);

// Start the server
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

if you have any questions or suggestions just do let me know on my Instagram or at codeculturepro@gmail.com