Create a web app with user authentication in under 10 minutes

Have you struggled with user authentication before?

Almost every web application we make needs some type of user authentication. Yet, it’s still not trivial to create a standard user authentication flow. I can’t tell you the number of times I’ve created login and signup pages.

The good news is that there are some good JavaScript modules available to facilitate this. Passport is probably the most common npm module to facilitate user authentication.

Yet, even when using Passport, you have to jump through multiple hoops:

• Set up your database tables
• Create middleware
• Setup sessions to store logged in user information
• Get Passport working with your app
• Create login, signup, and reset password pages
• Create a reset password flow
• Add in other oauth providers (Twitter, Facebook, etc.)

I prefer building the guts of my application, and not worrying about the user authentication flow.

So today, I want to share an open-source project called Bedrock. Bedrock sets up a production-ready Node web application with user authentication in under 10 minutes.

Watch the video below to see how I set up a web application from scratch using Bedrock in 4 minutes, or check out the project documentation.

Features

Here are some of the features that Bedrock gives you:

• An Sails (Express) server with user authentication
• Auto-generated REST API for all your models
• Signup, Login, Reset Password Pages
• SMTP Email Support
• Server-side rendered pages
• Client-side rendered components using React
• Communication between React and Server-side API with Flux.
• Client-side routing with React Router
• Incremental builds using Webpack, facilitated through Grunt.
• Migrations to help coordinate database changes
• Production-ready such as API access tokens, CSRF protection, CORS, and more.
• Support for multiple environments (dev, stage, prod)

Getting Started

Here’s the Quick Start guide for Bedrock. First, clone the repository into a new project directory. Then, run npm install.

git clone git@github.com:tilomitra/bedrock.git <project-name>
cd <project-name>
npm install

Then, open config/connections.js and update your database connection details.

Then, run the migrations to create the relevant database tables.

grunt db:migrate:up

Then, build (and watch for changes) in the CSS and JS assets.

grunt build

Finally, start the server. You will be taken to the signup page.

sails lift

That’s it! You’ll get set up with the following pages, along with all the logic to let users login, signup and reset passwords (click to view gallery):

If you liked this post and want to read similar ones, subscribe to my email newsletter below! I post my solutions to common web application problems 2-4 times a month.