Forem: CoddingAddicts

Welcome, Passport and JWTicket please!

CoddingAddicts — Thu, 03 Mar 2022 13:12:39 +0000

Web development is all about building apps and ecosystems around causes and needs that bring people from similar and even different backgrounds together. The evolution of such space rest on its user being able to maintain identities. These are tied to their content and contributions within the network.

The process of identification or authentication is core to any application and the security at this level is quite important. Yet, what we are here to speak about today is to make the process of creating an identity less of a chore.

Think of the web as big continent where apps and subnetworks are like countries which come in touch and sometimes even overlap. Wouldn’t be nice to be able to port identities from one land to another? For that you need Passport.js.

From their main website,

Passport is authentication middleware for Node.js. Extremely flexible and modular, Passport can be unobtrusively dropped in to any Express-based web application.

This package come with 500+ authentication strategies to suit almost all needs. Whether your users comes from google, facebook or any other platform, there is a strategy you can implement to make their entry to your network easier than having to fill a form all over again.

The workflow has two phases in general, (1) define your strategy and (2) place it within your scheme. To do that, we have the following functions at our disposal.

passport.use(
    // Configure an Authentication Strategy
)

passport.initialize() // Initialize the Strategy

passport.authenticate(
    // Handle the Authentication Request
)

We will detail how to use these within a working example right below. Before that, we point out that our choice of an authentication medium landed on an interesting piece of technology called JWT, or JSON Web Token. In contrast to a more classic way to store identification data, JWT offers flexible security in addition to the possibility to be employed in more complex schemes.

If you have never heard about JWT, well

JWT, is an open standard used to share security information between two parties — a client and a server. Each JWT contains encoded JSON objects, including a set of claims. JWTs are signed using a cryptographic algorithm to ensure that the claims cannot be altered after the token is issued.

A JWT is a string made up of three parts, separated by dots (.), and serialized using base64. The JWT looks something like this: xxxxx.yyyyy.zzzzz. And once decoded it gives us two JSON strings, header+payload and signature.

The header indicates the type of token and the signing algorithm. The payload contains the claims which technically are optional but certain fields are necessary for certain standards. And finally, the signature which works as a hash and helps us check the integrity of the payload against potenetial alteration.

To sum it up, JWT can be used as tickets to cross borders between platforms as the same entity and naturally, they have to be signed by the embassy!

Now time for some application. We will build the simplest working code that uses Google’s OAuth2 scheme. In a nutshell, it is a technology that employs two tokens, the access and refresh token. The first is meant for access and is short-lived while the second is used to refresh the access when the first expires.

What you need to keep in mind is that the Refresh Token, or RT, is the most important piece in this whole scheme.

Enough chatter, let’s get to the code.

Beside passport.js we will use the following packages, express.js, mongoose.js and jsonwebtoken.js and passport-google-oauth2. Make sure to have them installed.

We will build a simple express app which contains a route that implements authentication through Google using OAuth2. The tokens will naturally be JWT. We assume that you know how to set up mongoose as we will use it to store the pair of tokens related to a certain user.

The outline of the work is as follow,

Construct a token schema.
Define the refresh token middleware
Specify our strategy.
Make a route for Google authentication

1. Token Schema

/* filename: ***tokenSchema.js*** */
const jwt = require("jsonwebtoken")
const mongoose = require("mongoose")

// The Schema
const jwtSchema = new mongoose.Schema({
  userId: { type: mongoose.Schema.Types.ObjectId, ref: "users" },
  Token: { type: String },
  expAt: Date,
});

// Token Creation
jwtSchema.statics.CreateToken = async function (_id) {
  let expiredAt = new Date()
  expiredAt.setSeconds(expiredAt.getSeconds() + 60);
  let _token = jwt.sign({ id: _id }, JWTREFRESHTOKENSECRET);
  let _object = new this({
    userId: _id,
    Token: _token,
    expAt: expiredAt.getTime(),
  })
  let refreshToken = await _object.save()
  return refreshToken
}

// Token Verification
jwtSchema.statics.VerifyToken = async function (token) {
  return (await token.expAt.getTime()) < new Date().getTime();
};

const RefreshToken = mongoose.model("JwtCollection", jwtSchema);

module.exports = { RefreshToken };

2. RT Middleware

/* Refresh Token */

const jwt = require("jsonwebtoken");
const RefreshToken = require(/* path to tokenSchema.js */);

const RTMiddleware = async (req, res, next) => {

  const { refreshToken: requestToken } = req.body

  if (requestToken == null) {
    return res.status(403).json({ message: "Refresh Token is required!" })
  }

  try {
    let refreshToken = await RefreshToken.findOne({ Token: requestToken });
    console.log(refreshToken)
    if (!refreshToken) {
      res.status(403).json({ message: "Refresh Token is not in database!" });
      return;
    }

    const isValid = await RefreshToken.VerifyToken(refreshToken)

    if (isValid) {
      RefreshToken.findByIdAndRemove(refreshToken._id, {
        useFindAndModify: false,
      }).exec()
      res.status(403).json({
        message: "Refresh Token expired. Please make a new sign-in request!",
      })
      return;
    }

    let newAccessToken = jwt.sign(
      { id: refreshToken.userId },
      JWTSECRET,
      {
        expiresIn: JWT_ACC_EXP_TIME,
      }
    )
    return res.status(200).json({
      accessToken: newAccessToken,
      refreshToken: refreshToken.Token,
    })
  } catch (err) {
    return res.status(500).send({ message: err })
  }
}

module.exports = { RTMiddleware }

3. Strategy Definition

/* filename: authentication.js */

const passport = require("passport")
/*
    It is assumed that you have a userSchema.js file with the following fields:
    name, email, password, verified and picture.
*/
const userModel = require(/* path to the userSchema.js */) 

passport.use(
  new GoogleStrategy(
    {
      clientID: CLIENTID,
      clientSecret: SECRETID,
      callbackURL: "http://localhost:5000/auth/google/redirect",
    },
    async (accessToken, refreshToken, profile, done) => {

            // Deconstruct the data 
      const { email, name, email_verified, picture } = profile._json

      // Verify if user exists
      const userExists = await userModel.findOne({ email })

      // True: redirect user
      if (userExists) {
        return done(null, User)
      }
      // False: create new user, then redirect
      const newUser = await UserModel.create({
        email,
        name,
        verified: email_verified,
        picture,
      });
      done(null, newUser)
    }
  )
)

4. Route Definition

/* filename: ***index.js*** */

const express = require("express")
const jwt = require("jsonwebtoken")
const passport = require(/* path to authentication.js */)
const { RefreshToken } = require(/* pathe to tokenSchema.js */);

const App = express()

App.get(
  "/auth/google",
  passport.authenticate("google", { scope: ["email", "profile"] })
);

App.get(
  "/auth/google/redirect",
  passport.authenticate("google", { failureRedirect: "/", session: false }),
  async (req, res) => {

    const { _id } = req.user;
    try {
      //AT = accses Token
      //RT = refresh Token
      const AT = jwt.sign({ id: _id }, JWTACSESSTOKENSECRET, {
        ACSESSTOKENTIME,
      });
      const RT = await RefreshToken.CreateToken(_id);
      res.status(200).json({ AT, RT });
    } catch (error) {
      res.status(500).json({ msg: "Something went wrong!" })
      console.log(error);
    }
  }
)

// ... define other routes and start the server.

Explanation

To use Google sign-up, the user will visit the route /auth/google that we configured as shown above. Upon doing the following page will prompted.

It is configured by passport and the Google API console

After filling the form and clicking next. There is verification process — detailed in the strategy specification — which checks if the user is already in our database or not and performs the action coded in authentication.js .

If the user exist, they will be logged in. If not, we add them to the database and then redirect them to the callback URL that we specified in Google console to start our JWT Process.

In the callback URL, we will craft the two tokens we spoke about before. The RT will be saved in the database and we will send both the AT and RT to the client.

The final piece to this strategy is the middleware which checks if there is a token attached to the request when the client tries to access private service or resource and refreshes the token if its the AT dead. If the RT expires then the client is required to login again.

Below you will find a typical response we would get from calling the /auth/google and then going through the callback URL

Database entries for,

(1) Tokens

(2) Users

This concludes our short exposition of this quite rich and indispensable tool for anything identity. For those of you who might interested in the full code, here is the repo. The usage can be extended for things like API access or anything similar.

As we said at the beginning this package comes with a lot of strategies. Each has its specificities and that is too much to cover in a single article. There is an interesting in-depth guide by Zach Gollwitze, so feel free to check it if you hungry for more.

As always this was the Codding Addicts, peace out!

The One Hash Function You Need, BCrypt

CoddingAddicts — Fri, 18 Feb 2022 14:23:38 +0000

Whether you are building authentication for your app or designing a communication scheme, one thing is sure, you need hashes. And we got you the best kind. The scalable kind with a pinch of salt!.

bcrypt is a password-hashing function designed by Niels Provos and David Mazières, based on the Blowfish cipher and presented at USENIX in 1999.

Technicalities aside, this algorithm has two very important properties.

One, it employs a salt-mechanism to mitigate Rainbow Table attacks. And two, it introduces control over computation-time cost to scale with processing power and keep Dictionary attacks within practically-infeasable range.

This exposition targets JS users. But keep in mind that there is a Python implementation.

To get you started, you can install the package by typing,

npm install bcrypt

From there you can import the library using,

// ES5 syntax
const bcrypt = require('bcrypt')
// ES6 syntax
import bcrypt from 'bcrypt'

The package is relatively small and has only essential features. Exposed to us in two flavor, both synchronous and asynchronous, these are,

1. Salt Generation

// Sync
const salt = bcrypt.genSaltSync(rounds)

// Async
bcrypt.genSalt(rounds).then(function(salt){
        // Use the salt
})

2. Hashing

// Sync
const hash = bcrypt.hashSync(plainMessage, salt)
/* Hash with auto-generated salt */
const hash = bcrypt.hashSync(plainMessage, saltRounds)

// Async
bcrypt.hash(plainMessage, saltRounds).then(function(hash) {
    // Use the hash
})

3. Verification

// Sync
bcrypt.compareSync(testMessage, hash)

// Async
bcrypt.compare(testMessage, hash).then(function(result) {
    // result == true or false
})

It might be surprising but this is all there is to Bcrypt.js. Pretty simple, huh!

Now to help you better see this in action. Here is a quick example of how a simple authentication scheme using Express.js and Mongoose.js would look like.

We will make a simple Node.JS backend. Express will handle the requests while, Mongoose will be used to store the user data. And before any of that, make sure you created a npm project and have both packages installed along with Bcrypt(as shown above).

From here, it is a 3+0-step work.

Step ZERO

We lay the structure of our app, by setting up an Express server with two POST routes to handle both register and login actions.

/* filename: ./index.js */

const Express = require("express");
const bcrypt = require("bcrypt");

// Import our User Model
const User = require("./model");

// Connection to Mongo DB
const Connect = require("./Connectdb");

const app = Express();

// CONSTANTS (these can be put in a .env file)
const SALT_ROUNDS = 10
const PORT = 3000

// Middleware for sending JSON type messages
app.use(express.json());

// Handling Registration for New Users
app.post('/register',(req, res)=>{
  // CODE for handling Registration will go here ...
})

// Handling Login 
app.post('/login',(req, res)=>{
  // CODE for handling Login will go here ...
})

// Server Launch
app.listen(PORT, () => {
  console.log(`Sever online and accessible via localhost:${PORT}.`);
});

Note: for more information on how to use the .env utility, see this article.

Step ONE

For this step we need to make two things. One, is to write the code that will enable the connection to our Mongo DB.

const mongoose = require("mongoose");

const ConnectDb = (url) => {
  return mongoose.connect(url, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  });
};

module.exports = ConnectDb;

Two, we create a user model. We keep it simple; our model will only have email, password, and username fields.

const mongoose = require("mongoose");

const UserSchema = new mongoose.Schema({
  username: String,
  password: String,
  email: String,
});

module.exports = mongoose.model("User", UserSchema);

Step TWO

Now that everything is ready, it is time to hash password and add the salt!

To make the register controller, we need to:

- Verify if the user already exists.
- Generate a salt then, hash the password.
- Save the user with the hashed password.
- Return the User object.

//Register Route
app.post("/register", async (req, res) => {

  // deconstruct the body sent via request
  const { username, password, email } = req.body;

  // check if all the information is filled properly
  if (!username || !password || !email) {
    res.status(400).json({ msg: "Please provide valid information." });
  }

  // Generate the salt
  const salt = await bcrypt.genSalt(SALT_ROUNDS);

  // Hash The password
  const passwordHash = await bcrypt.hash(password, salt);

  // Check if the user already exits in our Database
  const IsExist = await User.findOne({ email });
  if (IsExist) {
    res.status(400).json({ msg: "User already exists." });
  }

  try {
    const savedUser = await User.create({
      username,
      email,
      password: passwordHash,
    });

    res.status(200).json({ msg: "Successfully added user:", savedUser });
  } catch (error) {
    res.status(500).json({ error });
  }
});

To test this route, we can use _VS Code'_s extension, Thunder Client. We make an API request to our server with email and username and password in the body like so,

and as you can see, the response contains the hash of our password. It is important to note that the returned hash embeds information about its computation.

$2b$10$nOUIs5kJ7naTuTFkBy1veuK0kSxUFXfuaOKdOKf9xYT0KKIGSJwFa
 |  |  |                     |
 |  |  |                     hash-value = K0kSxUFXfuaOKdOKf9xYT0KKIGSJwFa
 |  |  |
 |  |  salt = nOUIs5kJ7naTuTFkBy1veu
 |  |
 |  cost-factor => 10 = 2^10 rounds
 |
 hash-algorithm identifier => 2b = BCrypt

Taken from the package's official npm page.

Step THREE

The elaboration of the login controller is much more concise than the registration process. All we need to do is,

- Check if the user is actually registered.
- Verify the password.
- Return the User object.

// Login Route
app.post("/login", async (req, res) => {

  // deconstruct the request body
  const { email, password } = req.body;

  // check if all the information is filled properly
  if (!password || !email) {
    res.status(400).json({ msg: "Please provide valid information." });
  }

  // check if user already exists
  const userExists = await User.findOne({ email });
  console.log(userExists);

  if (!userExists) {
    res.status(400).json({ msg: "Please Register." });
  }

  // verify the given password 
  const isPassword = await bcrypt.compare(password, userExists.password);

  // if incorrect
  if (!isPassword) {
    res.status(400).json({ msg: "Email or password incorect." });
  }

  //if correct
  res.status(200).json({ userExists });
});

We again use Thunder to test the route.

The response object do contain the user in our database and since the password is correct, the hash will match and the user can be logged safely without the need of storing sensitive data.

Please acknowledge that this is not a production-ready application. We wrote this article with the aim of showcasing the use of Bcrypt.js in authentication.

If you are a developer who doesn’t want to the headaches of cryptographic technicalities and just wants a default go-to utility. Bcrypt.js is what you need for all your hash matters. Don’t get me wrong, I am saying it is perfect in all regards but at least it mitigates the most obvious attacks.

To back up this claim. We share with you a benchmark test done with our potato PC. It shows computation-time cost per number of rounds.

As you can see, the number of rounds controls how much time is needed for computation. And for data transmission, any choice under 10 rounds wouldn’t put too much strain on the speed of your communications. The implementation wouldn't be too far from the register/login example.

Overall Bcrypt.js is simple and versatile. Let us know in the comment what do you think!

Find the code at CoddingAddicts/BcryptDoc

This was the Codding Addicts and until next time.