Step 2: Initialize a node.js project with all the dependencies
\nFirst in an empty folder run the below command
\nnpm initIt essentially just creates the package.json file with all the basic information you will provide. after that, we will install all the dependencies needed in our project
\n- \n
- express: Node.js framework to create a server and accept requests \n
- ejs: To render HTML pages for login and profile \n
- axios: Use the Axios library, to make HTTP requests \n
npm install express ejs axios --saveStep 3: Writing express server code to accept web requests
\nCreate a file index.js in the root folder of your app and add the following code:
\n// index.js\n\n/* EXPRESS */\nconst express = require('express');\nconst app = express();\n\napp.set('view engine', 'ejs');\nvar access_token = "";\n\napp.get('/', function(req, res) {\n res.render('pages/index',{client_id: clientID});\n});\n\nconst port = process.env.PORT || 2400;\napp.listen(port , () => console.log('App listening on port ' + port));Our web server has been set up, now we will add the code related to sending the OAuth request to GitHub using Axios package, at the bottom of the index.js file:
\n// index.js\n\n// Import the axios library, to make HTTP requests\nconst axios = require('axios')\n// This is the client ID and client secret that you obtained\n// while registering on github app\nconst clientID = 'xxxxxxxxxxxx'\nconst clientSecret = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx'\n\n// Declare the callback route\napp.get('/github/callback', (req, res) => {\n\n // The req.query object has the query params that were sent to this route.\n const requestToken = req.query.code\n \n axios({\n method: 'post',\n url: `https://github.com/login/oauth/access_token?client_id=${clientID}&client_secret=${clientSecret}&code=${requestToken}`,\n // Set the content type header, so that we get the response in JSON\n headers: {\n accept: 'application/json'\n }\n }).then((response) => {\n access_token = response.data.access_token\n res.redirect('/success');\n })\n})\n\napp.get('/success', function(req, res) {\n\n axios({\n method: 'get',\n url: `https://api.github.com/user`,\n headers: {\n Authorization: 'token ' + access_token\n }\n }).then((response) => {\n res.render('pages/success',{ userData: response.data });\n })\n});Note: The callback URL should be the same as used in the GitHub app configuration.
\nStep 4: Creating a Login and Profile page
\nCreate an ejs file under path views/pages/index.js, it will render into a nice looking Github authorization page:
\n<!-- views/index.ejs -->\n<!doctype html>\n<html>\n<head>\n <title>Github OAuth</title>\n <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <!-- load bulma css -->\n <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- load fontawesome -->\n <style>\n body { padding-top:70px; }\n </style>\n</head>\n<body>\n<div class="container">\n <div class="jumbotron text-center text-primary">\n <h1><span class="fa fa-github"></span> Github OAuth</h1>\n <p>Authorize your app with:</p>\n <a href="https://github.com/login/oauth/authorize?client_id=<%= client_id %>" class="btn btn-danger"><span class="fa fa-github"></span> Github Login</a>\n </div>\n</div>\n</body>\n</html> After it we will create an ejs file under path views/pages/success.js, it will be used to show the user's GitHub information we will get after authorized by Github
\n<!-- views/success.ejs -->\n<!doctype html>\n<html>\n <head>\n <title>Github OAuth</title>\n <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <!-- load bulma css -->\n <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- load fontawesome -->\n <style>\n body { padding-top:70px; }\n </style>\n </head>\n <body>\n <div class="container">\n <div class="jumbotron">\n <h1 class="text-primary text-center"><span class="fa fa-github"></span> Github Information</h1>\n <div class="row">\n <div class="col-sm-6">\n <div class="well">\n <p>\n <strong>Name</strong>: <%= userData.name %><br>\n <strong>Username</strong>: <%= userData.login %><br>\n <strong>Company</strong>: <%= userData.company %><br>\n <strong>Bio</strong>: <%= userData.bio %>\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </body>\n</html>Note: Here we are also using bootstrap and font-awesome css to make our web pages look good.
\nWe have finished building our OAuth authorization page, let's run the application by below command
\nnode index.jsOnce our server is running, we can see our social login page on http://localhost:2400/
We need to click on the Github Login button, which will redirect us to google login page.
\nYou can implement the OAuth in Node.js by the above process, You can found the complete code used in this tutorial on out In this blog, we’ll be implementing authentication with JWT in a NodeJS web application. For this, we’ll be using jsonwebtoken package JWT(JSON Web Token) is a token format. It is digitally-signed, self-contained, and compact. It provides a convenient mechanism for transferring data. JWT is not inherently secure, but the use of JWT can ensure the authenticity of the message so long as the signature is verified and the integrity of the payload can be guaranteed. JWT is often used for stateless authentication in simple use cases involving non-complex systems. Here's an example of JWT: Now, let's authenticate/protect some routes. Pre-requisites: you can install all required packages by using following command: Step 1. First, create a directory structure as below : In the api/models folder, create a file called user userModel.js by running touch api/models/userModel.js. In this file, create a mongoose schema with the following properties: Add the following code In the api/controllers folder, create a file called user userController.js by running touch api/controllers/userController.js In the userController file, create three different handlers to handle by using the following code Note: A hash password was saved in the database using bcrypt. Step 6. In the api/route folder, create a file called user userRoute.js and add the following code: Step 9. Now you just need to run the project by using the following command and try logging by using the JWT. Step 10. Open Postman and create a post request to localhost:3000/auth/register as below: Under the value, add JWT and the token with a space between, like so: Step 11. Then, enter the parameters for the key and value for fetching the profile. You want to create as shown below and send: As we have seen it is fairly easy to build a JWT authentication system with NodeJS, You can found the complete code used in this tutorial here. Note : You can decode or verify your JWT token details with this tool Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards and refining approaches to building secure, seamless experiences. We’re here to support developers on that journey. We know how important simplicity, efficiency, and well-structured documentation are when working with identity and access management solutions. That’s why we’ve redesigned the LoginRadius website—to be faster, more intuitive, and developer-first in every way. The goal? Having them spend less time searching and more time building. LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve spent the last few months redesigning our interface— making navigation more intuitive and reassuring that essential resources are easily accessible. Here’s a closer look at what’s new and why it’s important: Developers spend long hours working in dark-themed IDEs and terminals, so we’ve designed the LoginRadius experience to be developer-friendly and align with that preference. The new dark mode reduces eye strain, enhances readability, and provides a seamless transition between a coding environment and our platform. Our new design features a clean, modern aesthetic with a consistent color scheme and Barlow typography, ensuring better readability. High-quality graphics and icons are thoughtfully placed to enhance the content without adding visual clutter. So, whether you’re navigating our API docs or configuring authentication into your system, our improved interface will make those extended development hours more comfortable and efficient. We’ve restructured our website to provide a straightforward breakdown of our customer identity and access management platform capabilities, helping you quickly find what you need: This structured layout ensures you can quickly understand each capability and how it integrates into your identity ecosystem. We’ve been analyzing developer workflows to identify how you access key resources. That’s why we redesigned our navigation with one goal in mind: to reduce clicks and make essential resources readily available. The new LoginRadius structure puts APIs, SDKs, and integration guides right at the menu bar under the Developers dropdown so you can get started faster. Our Products, Solutions, and Customer Services are also clearly categorized, helping development teams quickly find the right tools and make informed decisions. Developers now have a clear view of the tech stack available with LoginRadius, designed to support diverse business needs. Our platform offers pre-built SDKs for Node.js, Python, Java, and more, making CIAM integration seamless across popular programming languages and frameworks. Check out our revamped LoginRadius website and see how the improved experience makes it easier to build, scale, and secure your applications. Do not forget to explore the improved navigation and API documentation, and get started with our free trial today. We’re excited to see what you’ll build with LoginRadius!What is JWT?
\n
\neyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Im9sYXR1bmRlZ2FydWJhQGdtYWlsLmNvbSIsIm\n
\n
\nnpm install express mongoose bcrypt --saveJWTApp
\n-api\n--models\n----userModel.js\n--controllers\n----userController.js\n--route\n----userRoute.js\n--server.jsStep 2. Install “jsonwebtoken” packageby using following command
\n
\n npm install jsonwebtoken -- saveStep 3. Create the user model
\n\n
\n
\n'use strict';\n\nvar mongoose = require('mongoose'),\n bcrypt = require('bcrypt'),\n Schema = mongoose.Schema;\n\n/**\n * User Schema\n */\nvar UserSchema = new Schema({\n fullName: {\n type: String,\n trim: true,\n required: true\n },\n email: {\n type: String,\n unique: true,\n lowercase: true,\n trim: true,\n required: true\n },\n hash_password: {\n type: String\n },\n created: {\n type: Date,\n default: Date.now\n }\n});\n\nUserSchema.methods.comparePassword = function(password) {\n return bcrypt.compareSync(password, this.hash_password);\n};\n\nmongoose.model('User', UserSchema);Step 4. Create the user handlers
\n
\n'use strict';\n\nvar mongoose = require('mongoose'),\n jwt = require('jsonwebtoken'),\n bcrypt = require('bcrypt'),\n User = mongoose.model('User');\n\nexports.register = function(req, res) {\n var newUser = new User(req.body);\n newUser.hash_password = bcrypt.hashSync(req.body.password, 10);\n newUser.save(function(err, user) {\n if (err) {\n return res.status(400).send({\n message: err\n });\n } else {\n user.hash_password = undefined;\n return res.json(user);\n }\n });\n};\n\nexports.sign_in = function(req, res) {\n User.findOne({\n email: req.body.email\n }, function(err, user) {\n if (err) throw err;\n if (!user || !user.comparePassword(req.body.password)) {\n return res.status(401).json({ message: 'Authentication failed. Invalid user or password.' });\n }\n return res.json({ token: jwt.sign({ email: user.email, fullName: user.fullName, _id: user._id }, 'RESTFULAPIs') });\n });\n};\n\nexports.loginRequired = function(req, res, next) {\n if (req.user) {\n next();\n } else {\n\n return res.status(401).json({ message: 'Unauthorized user!!' });\n }\n};\nexports.profile = function(req, res, next) {\n if (req.user) {\n res.send(req.user);\n next();\n } \n else {\n return res.status(401).json({ message: 'Invalid token' });\n }\n};
\n'use strict';\nmodule.exports = function(app) {\n var userHandlers = require('../controllers/userController.js');\n // todoList Routes\n app.route('/tasks')\n .post(userHandlers.loginRequired, userHandlers.profile);\n app.route('/auth/register')\n .post(userHandlers.register);\n app.route('/auth/sign_in')\n .post(userHandlers.sign_in);\n};Step 7. Add the following code in server.js
\n
\n'use strict';\n\nvar express = require('express'),\n app = express(),\n port = process.env.PORT || 3000,\n\n\n User = require('./api/models/userModel'),\n bodyParser = require('body-parser'),\n jsonwebtoken = require("jsonwebtoken");\n\nconst mongoose = require('mongoose');\nconst option = {\n socketTimeoutMS: 30000,\n keepAlive: true,\n reconnectTries: 30000\n};\n\nconst mongoURI = process.env.MONGODB_URI;\nmongoose.connect('mongodb://127.0.0.1:27017/?compressors=disabled&gssapiServiceName=mongodb', option).then(function(){\n //connected successfully\n}, function(err) {\n //err handle\n});\n\napp.use(bodyParser.urlencoded({ extended: true }));\napp.use(bodyParser.json());\n\napp.use(function(req, res, next) {\n if (req.headers && req.headers.authorization && req.headers.authorization.split(' ')[0] === 'JWT') {\n jsonwebtoken.verify(req.headers.authorization.split(' ')[1], 'RESTFULAPIs', function(err, decode) {\n if (err) req.user = undefined;\n req.user = decode;\n next();\n });\n } else {\n req.user = undefined;\n next();\n }\n});\nvar routes = require('./api/routes/userRoutes');\nroutes(app);\n\napp.use(function(req, res) {\n res.status(404).send({ url: req.originalUrl + ' not found' })\n});\n\napp.listen(port);\n\nconsole.log(' RESTful API server started on: ' + port);\n\nmodule.exports = app;
\nnpm start
\nJWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Im9sYXR1bmRlZ2FydWJhQGdtYWlsLmNvbSIsImZ1bGxOYW1lIjoiT2xhdHVuZGUgR2FydWJhIiwiX2lkIjoiNThmMjYzNDdiMTY1YzUxODM1NDMxYTNkIiwiaWF0IjoxNDkyMjgwMTk4fQ.VcMpybz08cB5PsrMSr25En4_EwCGWZVFgciO4M-3ENEWhat’s New and Improved on the LoginRadius Website?
\nA Developer-Friendly Dark Theme
\n![\"This](\"/f46881583c7518a93bb24e94c32320de/a-developer-friendly-dark-theme.webp\")
Clear Categorization for LoginRadius Capabilities
\n![\"This](\"/e5358b82be414940f3fb146013845933/capabilities.webp\")
\n
\nDeveloper-First Navigation
\n![\"This](\"/a8c155c2b6faf3d5f4b4de4e2b14d763/developers-menu.webp\")
Quick Understanding of Integration Benefits
\n![\"This](\"/b2f9a964a2da0ea83e2f8596b833bba7/we-support-your-tech-stack.webp\")
Over to You Now!
\n