Grow your SaaS organically with Programmatic SEO.
Try for free →This is Part 1 in the series of guides on creating an authentication system using Passport.js, Node.js and Mongo for your SaaS app.
Authentication is critical in verifying a user's identity. Passport.js makes it easy to set up OAuth2 login strategies from all identity providers.
Basic login screen that allows signing in with a Google account In Part 1, we will:
In order to add the
Sign in with Google
button, we have to create the Google Cloud project which will give us the relevant client key and secret to be able to communicate with Google to authenticate a user.
Google Cloud Console Dashboard
http://localhost:3000/auth/google
and http://localhost:3000/auth/google/callback
Client ID
and Client Secret
keys for project. Create a new file called .env
and add your keys and callback URL in there like so,Our Google Project is all set up and ready to accept requests from our application.
Let's start by creating a new project folder. Add a package.json
{
"name": "auth-basic-nodejs",
"version": "1.0.0",
"author": "sssaini",
"description": "auth-basic",
"main": "app.js",
"scripts": {
"start": "node app.js"
},
"license": "ISC",
"dependencies": {
"bcrypt": "^5.0.1",
"body-parser": "^1.18.2",
"connect-flash": "^0.1.1",
"cookie-parser": "^1.4.5",
"dotenv": "^8.2.0",
"ejs": "^3.1.5",
"express": "^4.17.1",
"express-flash": "0.0.2",
"express-session": "^1.17.1",
"mongoose": "^5.7.1",
"passport": "^0.4.1",
"passport-google-oauth20": "^2.0.0",
"passport-local": "^1.0.0",
"uuid": "^8.3.2"
}
}
Install dependencies by running,
npm install
Create a new file named app.js
require("dotenv").config();
const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const cookieParser = require("cookie-parser");
app.use(bodyParser.json());
app.use(
bodyParser.urlencoded({
extended: true,
})
);
app.engine("html", require("ejs").renderFile);
app.use(express.static(__dirname + "/public"));
app.use(cookieParser());
app.get("/", (req, res) => {
res.render("index.ejs");
});
app.listen(3000, function () {
console.log("SaaSBase Authentication Server listening on port 3000");
});
We will use the public
folder to serve any static files like images, CSS, and JS. We are also using a templating engine called EJS so we can generate a dynamic HTML page by rendering information sent by the server.
Let's add a simple view in the file, views/index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
Launch the app by running,
npm start
The application should be live at http://localhost:3000.
All the basic setup is now done! Let's move on to the meat of the application.
We need a database. MongoDB is a very good choice. Download the community version here. Run,
mongod
A local Mongo instance should start up on mongo://localhost:27017
Add the MongoDB connection to app.js
:
const mongoose = require("mongoose");
const db = "mongodb://localhost:27017/auth";
mongoose.connect(
db,
{
useUnifiedTopology: true,
useNewUrlParser: true,
useFindAndModify: false,
useCreateIndex: true,
},
(error) => {
if (error) console.log(error);
}
);
Create a new file called, src/user/user.model.js
let mongoose = require("mongoose");
let Schema = mongoose.Schema;
const userSchema = new Schema({
id: {
type: String,
default: null,
},
email: {
type: String,
required: [true, "email required"],
unique: [true, "email already registered"],
},
firstName: String,
lastName: String,
profilePhoto: String,
password: String,
source: {
type: String,
required: [true, "source not specified"],
},
lastVisited: {
type: Date,
default: new Date(),
},
});
var userModel = mongoose.model("user", userSchema, "user");
module.exports = userModel;
Create a new file called - src/user/user.service.js
const addGoogleUser =
(User) =>
({ id, email, firstName, lastName, profilePhoto }) => {
const user = new User({
id,
email,
firstName,
lastName,
profilePhoto,
source: "google",
});
return user.save();
};
const getUsers = (User) => () => {
return User.find({});
};
const getUserByEmail =
(User) =>
async ({ email }) => {
return await User.findOne({
email,
});
};
module.exports = (User) => {
return {
addGoogleUser: addGoogleUser(User),
getUsers: getUsers(User),
getUserByEmail: getUserByEmail(User),
};
};
We can now inject the model into the service by adding src/user/index.js
const User = require("./user.model");
const UserService = require("./user.service");
module.exports = UserService(User);
Passport.js is a great NPM package that simplifies adding a social login to a web app. We will use the Google Strategy to authenticate a user with their Gmail account.
Create a file called src/config/google.js
:
const passport = require("passport");
const User = require("../user/user.model");
const GoogleStrategy = require("passport-google-oauth20").Strategy;
passport.use(
new GoogleStrategy(
{
callbackURL: process.env.CALLBACK_URL,
clientID: process.env.CLIENT_ID,
clientSecret: process.env.CLIENT_SECRET,
},
async (accessToken, refreshToken, profile, done) => {
console.log("user profile is: ", profile);
}
)
);
Perfect, let's now add the strategy as part of a GET
route so we can invoke it and trigger the Google Auth flow.
In app.js
:
//...
const passport = require("passport");
require("./src/config/google");
//...
app.use(passport.initialize());
app.use(passport.session());
app.get(
"/auth/google",
passport.authenticate("google", {
scope: ["profile", "email"],
})
);
app.get(
"/auth/google/callback",
passport.authenticate("google", {
failureRedirect: "/",
successRedirect: "/profile",
failureFlash: true,
successFlash: "Successfully logged in!",
})
);
Run the application with:
npm start
Once started, we can try logging in by navigating to
http://localhost:3000/auth/google
Google's OAuth Login screen triggered by "Sign in with Google" button The application might hang after a successful login but don't worry about that just yet. We will fix that in a bit. Looking at the console however, we will see a JSON response from Google like so,
{
id: 'xxx',
displayName: 'Sukhpal Saini',
name: { familyName: 'Saini', givenName: 'Sukhpal' },
emails: [ { value: 'sunnyashiin@gmail.com', verified: true } ],
photos: [
{
value: '<https://lh3.googleusercontent.com/a-/AOh14GjSb0KZnfOv_wP8cT6M7wEoGMlpG1fFbsO1Uszm7lw=s96-c>'
}
],
provider: 'google',
_raw: '{\\n' +
' "sub": "xxx",\\n' +
' "name": "Sukhpal Saini",\\n' +
' "given_name": "Sukhpal",\\n' +
' "family_name": "Saini",\\n' +
' "picture": "<https://lh3.googleusercontent.com/a-/AOh14GjSb0KZnfOv_wP8cT6M7wEoGMlpG1fFbsO1Uszm7lw\\\\u003ds96-c>",\\n' +
' "email": "sunnyashiin@gmail.com",\\n' +
' "email_verified": true,\\n' +
' "locale": "en-GB"\\n' +
'}',
_json: {
sub: 'xxx',
name: 'Sukhpal Saini',
given_name: 'Sukhpal',
family_name: 'Saini',
picture: '<https://lh3.googleusercontent.com/a-/AOh14GjSb0KZnfOv_wP8cT6M7wEoGMlpG1fFbsO1Uszm7lw=s96-c>',
email: 'sunnyashiin@gmail.com',
email_verified: true,
locale: 'en-GB'
}
}
Perfect, Google has just validated our user for us and provided us with their profile information.
We can save this information in our MongoDB database.
In config/google.js
const passport = require("passport");
const UserService = require("../user");
const GoogleStrategy = require("passport-google-oauth20").Strategy;
passport.use(
new GoogleStrategy(
{
callbackURL: process.env.CALLBACK_URL,
clientID: process.env.CLIENT_ID,
clientSecret: process.env.CLIENT_SECRET,
},
async (accessToken, refreshToken, profile, done) => {
const id = profile.id;
const email = profile.emails[0].value;
const firstName = profile.name.givenName;
const lastName = profile.name.familyName;
const profilePhoto = profile.photos[0].value;
const source = "google";
const currentUser = await UserService.getUserByEmail({
email,
});
if (!currentUser) {
const newUser = await UserService.addGoogleUser({
id,
email,
firstName,
lastName,
profilePhoto,
});
return done(null, newUser);
}
if (currentUser.source != "google") {
//return error
return done(null, false, {
message: `You have previously signed up with a different signin method`,
});
}
currentUser.lastVisited = new Date();
return done(null, currentUser);
}
)
);
Create a file called config/passport.js
. This will keep our passport configuration.
const passport = require("passport");
const User = require("../user/user.model");
passport.serializeUser((user, done) => {
done(null, user.id);
});
passport.deserializeUser(async (id, done) => {
const currentUser = await User.findOne({
id,
});
done(null, currentUser);
});
We can add the passport configuration to app.js
//...
require("./src/config/passport");
require("./src/config/google");
//...
Add a new file - views/index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="description" content="" />
<title>SaaSBase - Authentication</title>
<link
rel="stylesheet"
href="<https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css>"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<link href="./css/index.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="/local/signup">Sign up using Email →</a>
</p>
<div class="content">
<form class="text-center" action="/auth/google" method="get">
<a href="/"
><img
class="mb-4"
src="./images/saasbase.png"
alt=""
width="72"
height="72"
/></a>
<h1 class="h3 mb-3 font-weight-normal">Sign in with Google</h1>
<p class="mb-3 text-muted">
Implement a Google OAuth strategy using Passport.js and MongoDB
</p>
<button class="btn btn-primary btn-block my-2" type="submit">
Sign in with Google
</button>
</form>
<div class="mt-5 mb-3 text-center">
<a class="text-muted" href="<https://saasbase.dev>">
Built by SaaSBase
</a>
</div>
</div>
<script
src="<https://code.jquery.com/jquery-3.5.1.slim.min.js>"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="<https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js>"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
</body>
</html>
Add a new CSS file -
public/css/index.css
and copy over the styles from
.
Completed login screen with styling that allows signing in with a Google account
With Passport.js we can communicate back to the user when their credentials are rejected using flash messages. To add them in, edit app.js
const flash = require("express-flash");
const session = require("express-session");
app.use(
session({
secret: "secr3t",
resave: false,
saveUninitialized: true,
})
);
app.use(flash());
To render these messages in EJS, we can edit views/index.ejs
<button class="btn btn-primary btn-block my-2" type="submit">Sign in with Google</button>
<% if ( messages.error) { %>
<p class="error-text"><%= messages.error %></p>
<% } %>
</form>
Login screen with flash messages that notifies the user when a sign in attempt fails
After a successful login, we should send the user to a profile screen where they can see their data.
The profile route has to be protected so that non logged in users cannot go to the page and are redirected.
In app.js
I'm building a new SaaS to automate content marketing for your SaaS
Tools for SaaS Devs