ExpressWebJS

# Social Authentication

# Introduction

Along with the standard JWT authentication, ExpressWebJs also helps you implement social authentication with OAuth providers like Facebook, Google, Twitter, LinkedIn, and Microsoft out of the box.

# Configuration

To get started with social authentication, uncomment SocialServiceProvider in Config/app.ts providers section.

  providers: [
    /*
     * ExpressWebJS Framework Service Providers...
     */
    "Elucidate/Route/RouteConfigServiceProvider::class",
    "Elucidate/Database/DatabaseServiceProvider::class",
    //"Elucidate/Social/SocialServiceProvider::class",  👈 uncomment SocialServiceProvider
  ],

Once that is done, we now move over to social authentication configuration which is located at Config/socials.ts file to configure our drivers.

import { env } from "expresswebcorets/lib/Env";

export default {
  /*
    |--------------------------------------------------------------------------
    | Social Connection Drivers
    |--------------------------------------------------------------------------
    |
    | ExpressWebJs social API supports so many authenication services,
    | giving you the flexibility to use single sign-on using an OAuth provider such as
    | Facebook,Twitter,LinkedIn,Slack,Google, Microsoft, Github, and GitLab.
    | 
    | You can set up social connection drivers like so:
    | social_connections: ["facebook","twitter","linkedIn"]
    |
    */

  social_connections: ["facebook"], // ["facebook","twitter","linkedIn"]

  /*
    |--------------------------------------------------------------------------
    | Social connections
    |--------------------------------------------------------------------------
    |
    | Here you can configure your social connection information 
    | for any of the drivers you choose.
    |
    */

  connections: {
    facebook: {
      driver: "facebook",
      clientID: env("FACEBOOK_CLIENT_ID"),
      clientSecret: env("FACEBOOK_CLIENT_SECRET"),
      callbackURL: "http://localhost:5000/api/facebook/secrets",
    },
    google: {
      driver: "google",
      clientID: env("GOOGLE_CLIENT_ID"),
      clientSecret: env("GOOGLE_CLIENT_SECRET"),
      callbackURL: "http://localhost:5000/api/auth/google/callback",
    },
    twitter: {
      driver: "twitter",
      consumerKey: env("TWITTER_CONSUMER_KEY"),
      consumerSecret: env("TWITTER_CONSUMER_SECRET"),
      callbackURL: "http://localhost:5000/api/auth/twitter/callback",
    },
    linkedin: {
      driver: "linkedin",
      clientID: env("LINKEDIN_CLIENT_ID"),
      clientSecret: env("LINKEDIN_CLIENT_SECRET"),
      callbackURL: "http://localhost:5000/api/auth/linkedin/callback",
      scope: ["r_emailaddress", "r_liteprofile"],
    },
    microsoft: {
      driver: "microsoft",
      clientID: env("MICROSOFT_CLIENT_ID"),
      clientSecret: env("MICROSOFT_CLIENT_SECRET"),
      callbackURL: "http://localhost:5000/api/auth/microsoft/callback",
      scope: ["user.read"],
    },
  },
};

# driver

Name of the driver to use. It must always be one of the following available drivers.

  • facebook
  • twitter
  • google
  • linkedin
  • microsoft

# clientID

The OAuth provider's client id. This must be securely kept inside the environment variables.

# clientSecret

The OAuth provider's client secret. This must be securely kept inside the environment variables.

# callbackURL

The callback URL to handle the post redirect response from the OAuth provider. You must register the same URL with the OAuth provider as well.

# Authenticate requests

After the setup process, you can now access your Social object inside your route handlers using the Social.use() method and specifying your driver e.g: facebook, twitter etc which redirects the user to the OAuth provider website.

import Route from "Elucidate/Route/manager";
import { Request, Response, NextFunction } from "Elucidate/HttpContext";
import Social from "Elucidate/Social";

Route.get("/auth/facebook", Social.use("facebook"));

# Handling the callback request

Once the user decides to approve or rejects the login request, the OAuth provider will redirect the user back to the callbackUrl where you can now access the user with Social.authenticate() method.

import Route from "Elucidate/Route/manager";
import { Request, Response } from "Config/http";
import Social from "Elucidate/Social";

Route.get("/auth/facebook", Social.use("facebook"));

Route.get("/facebook/callback", function (req: Request, res: Response) {
  Social.authenticate("facebook", req, res)
    .then((facebook: { profile: object; info: object }) => {
      let user = facebook.profile;
      // Process user data
      console.log(user);
    })
    .catch((err: any) => {
      //Handle error is any
      console.log(err);
    });

  res.redirect("/api/");
});

You can also decide to handle it in a controller.

import Route from "Elucidate/Route/manager";
import { Request, Response } from "Config/http";
import Social from "Elucidate/Social";

Route.get("/auth/facebook", Social.use("facebook"));

// Handle callback in FacebookController
Route.get("/facebook/callback", "FacebookController@facebookCallback");

FacebookController

import Social from "Elucidate/Social";
import { Request, Response } from "Config/http";

export class FacebookController {
  facebookCallback = async (req: Request, res: Response) => {
    const facebook: { profile: object; info: object } = await Social.authenticate("facebook", req, res);
    console.log(facebook);

    res.redirect("/api/");
  };
}

← Authorization →