Simple authentication with React and MongoDB

This is a memo of developing simple login/logout application with React with MongoDB. and since I could not find exact the example, I share the code and points. Even though this is pretty much for myself for future development, if this is helpful to someone, I’m happy.

Since I have learned React for a while, I have decided to use React for a couple of my projects. But whenI compare React to Meteor, which I have used and love, React require a lot of work to develop entire application. On the other hand Meteor is super easy and fast to develop entire prototype.

This is understandable because React is a cool library but only for front end and Meteor is a framework for entire web application.

So why do I want to use React instead of Meteor?

Actually this is a tough question. If you’re a single founder or single developer in your startup team, choosing Meteor is smart. Because you can develop prototype and MVP faster. But if you want to work in a team, React seems better. Or if you want to scalable application, React seems better. And if you want native application, React is only option. I know I could develop native application with Meteor, but my 1st impression was not good…

I developed a simple application where user can create accounts and sign in to the application and do simple task. I chose React for front end and prepare express server which connect to MongoDB. So my stack is….

1. React — Front end
2. Node, express — Back end
3. MongoDB — Database

Sounds easy.

I could develop such application with Meteor in a day because Meteor has build-in auth package called account and the account package works just file on both front end and back end.

But in React world, because you can chose whatever auth mechanism you want and whatever datastore you want, it seems like this is my job to create account system.

So I built it and here is github repository.
I can use this as template for future.

By the way what I did is actually mimic Meteor’s account package.

Step 0: Prepare MongoDB

Installing MongoDB is quite easy.

Step 1: Prepare UI with React

Prepare create account and sign in UI. I used semantic UI for design.

Step2: Prepare express server

This is the main part.

// 1. Receive email id and password
let password =  req.body.password;
let email =  req.body.email;
// 2. Create hashes
let password2 = sha256(password)
var bcrypt_hash = bcrypt.hashSync(password2, 10);

// 3. Create login token which we return to client
//  maybe using uuid is better...
let login_token = makeid('4') + parseInt(new Date().getTime()).toString(36);
// 4. create hash of login_token which is stored in mongo
const hashed_token = crypto.createHash('sha256').update(login_token).digest('base64');
// 5. we keep hashed tokens to use at the signin
const token_object = {
  'when':new Date(),
  'hashedToken':hashed_token,
};
// 6. create json and insert into mongodb
let insert_params = {
  createdAt: new Date(),
  services:{
    password : {
      bcrypt : bcrypt_hash
    },
    resume : {
      loginTokens : [token_object]
    },
    email : {
      verificationTokens : [
        {
          // nameHash : nameHash,
          address : email,
          when : new Date(),
        }
      ]
    },
  },
  emails : [
    {
      "address" : email,
      "verified" : false
    }
  ],
  profile : {},
}

Sign in process is here.
Once you signin, you can sign in with token which you get get either from client or session.

// 1. create hash from login token
const hashed_token = crypto.createHash('sha256').update(login_token).digest('base64');
// 2. find user with elemMatch
let find_param = {
  'services.resume.loginTokens':{
    '$elemMatch':{
      'hashedToken':hashed_token
    }
  }
}
// find user
mongoDbHelper.collection("users").findOne(find_param)

Conclusion

I borrowed most of the part from Meteor’s account package. This may not be perfect but I think this is a good starting point. Now I can use this server-side code for my web and native applications.

Thanks!