{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/53","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"Introduction There is no second opinion about the importance of data security. The biggest challenge for a service provider in today’s…","fields":{"slug":"/growth/stakeholder-engagement-modernize-ciam/"},"html":"

Introduction

\n

There is no second opinion about the importance of data security. The biggest challenge for a service provider in today’s information age is collecting, handling and managing data securely. With much potential and opportunity, organizations also have a responsibility to ensure the safety and security of customer data they handle.

\n

Every company that wants to win customers over with digital products or services should create an online portal. When your application is accessed by a customer for a product or service, they provide their personal information. A well-designed CIAM system can help you maximize customer experience and minimize risks for your security and IT teams.

\n

Understanding Stakeholder Engagement

\n

Stakeholder engagement is crucial to modernizing customer identity and access management (CIAM).

\n

In order to effectively implement a CIAM solution, it's important to understand the needs and perspectives of all stakeholders involved, from customers and employees to partners and vendors.

\n

By engaging with stakeholders throughout the implementation process, you can build trust, foster collaboration, and ensure that everyone's needs are being met. This can lead to a smoother implementation process, greater user adoption, and, ultimately, better business outcomes.

\n

From gathering stakeholder feedback and involving key decision-makers to communicating clearly and regularly, there are a variety of strategies that can help ensure successful stakeholder engagement in CIAM modernization efforts.

\n

By prioritizing stakeholder engagement, you can create a more customer-centric, efficient, and effective CIAM solution that benefits everyone involved.

\n

Here’s how you can bring your stakeholders onboard to modernize your CIAM.

\n

Tips For Engaging Stakeholders In The Modernization Of Your CIAM

\n

1. Narrow down your objectives and requirements

\n

Modernization of CIAM is an ongoing process. This means that you cannot modernize everything at once. As a result, you should involve your stakeholders in the process and ensure that all your teams have a clear understanding of each other's expectations.

\n

Implementing CIAM is a major undertaking. It incorporates high degrees of sophistication and functionality, and can affect every aspect of your product, service, or organization. The level of maturity of your product/service, the size of your company, and the future that you’re aiming for influence which aspects of CIAM you implement first. Therefore, clearly communicate your business strategy to all stakeholders before finalizing your implementation plan.

\n

2. Prioritize your requirements

\n

Once a requirement is finalized, it's important to prioritize it among other business heads and other key stakeholders. Decide which requirements are most important and which are secondary. Based on this prioritization, you can create a list of CIAM features keeping functionality, cost, aesthetics and other factors in mind.

\n

3. Engage actively

\n

The requirements and priorities of each department are different. Your Chief Marketing Officer would like the CIAM to give the best registration and onboarding experience. The Chief Information Officer will look to modernize CIAM to seamlessly integrate across the organization and to reduce complexity in handling data.

\n

Each stakeholder has a set of expectations. Stakeholders should be involved from the initial phase of the CIAM modernization process. Doing so will help boost participation and goal alignment, making the overall objectives easier to achieve.

\n

\n \n \n

\n

4. Manage expectations

\n

Technology can do anything, but if we expect the impossible, we may end up empty-handed. If you listen carefully to each team’s needs and concerns, however, you’re more likely to build a system that works for everyone. It’s important to take many things into account when designing the CIAM solution—for instance, usability, customer experience, convenience, security, and maintainability.

\n

5. Build trust

\n

Active listening encourages stakeholders to be interested and participate actively in an initiative. Building genuine trust will go a long way in getting the best results. Differing views and priorities require management to take a strategic decision that is aligned to the overall objectives of the initiative.

\n

Trust is built when we listen, engage actively, communicate regularly, and address their requirements.

\n

6. Remember: Customer is King

\n

Customer experience is important and a common objective to all stakeholders is also vital. As per 2021 market research by Gartner, 89% of brands prioritize the digital experience of their customers. The market is a highly competitive space. A complicated registration and login experience for a customer is the last thing you want.

\n

Customers expect a personalized experience with ease of use and confidence in data security. CIAM should provide trust on who is in control of data, how and for what purpose the data is collected. Further, it should provide the option to modify the consent on-demand by the customer.

\n

Companies holding on to their legacy applications with outdated functionality can make their customers think twice before updating their data. Stakeholders usually prioritize customer experience high up in the order without compromising the security when they modernize CIAM.

\n

7. Make no compromise on regulatory compliance

\n

Modernization of CIAM becomes necessary due to the need for compliance with global data privacy requirements. Additionally, there could be regional compliances that may be required. Most often, these regulatory bodies specify what the requirements are. However, they do not elaborate on how these requirements can be achieved.

\n

Businesses take advantage of CIAM to ensure compliance with regulations and avoid hefty fines. Managers, who are stakeholders in the process, provide their inputs as well. Companies should not look at CIAM only from a business angle; they must also involve other stakeholders in the decision-making process.

\n

8. Deal with different opinions

\n

The requirements of the marketing team may differ from admin and infrastructure teams. But critical points will have high levels of convergence as they are common across different verticals.

\n

Large organizations with multiple products and services modernize CIAM to achieve single access, integrated, hosted on Cloud with CRM enabling a 360 degree view of the customer. It makes implementing CIAM's best practices much simpler. It provides a better understanding of your customer behavior patterns, enabling more effective marketing campaigns.

\n

Cloud-based CIAM gives better ROI, reduces effort on maintenance and enables faster scalability. Validate your CIAM strategy with your stakeholders in making the correct decisions.

\n

In Conclusion

\n

Even though it may sound like a daunting task, modernizing your CIAM is not impossible if you are willing to put in the work. The key lies in communicating how and why modernization will be beneficial for all stakeholders, and eventually getting everyone onboard with the plan. The tips mentioned in this blog will help you make this process easier since stakeholder engagement will simplify things for you.

\n

\n \n \n

\n","frontmatter":{"date":"January 18, 2022","updated_date":null,"description":"If you’re ready to modernize your CIAM but aren’t quite sure where to start, then this blog should get you on the right path with your stakeholders.","title":"How to Bring Stakeholders Together to Modernize CIAM Across Your Organization","tags":["ciam solution","compliance","convenience","cx"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7094017094017093,"src":"/static/06b35d0a989beb561c9cdf306045281e/33aa5/saas-modernize.jpg","srcSet":"/static/06b35d0a989beb561c9cdf306045281e/f836f/saas-modernize.jpg 200w,\n/static/06b35d0a989beb561c9cdf306045281e/2244e/saas-modernize.jpg 400w,\n/static/06b35d0a989beb561c9cdf306045281e/33aa5/saas-modernize.jpg 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.jpg"}}}},{"node":{"excerpt":"Introduction Every day, we encounter various events where we need to verify our identities. Whether you’re applying for a loan, booking…","fields":{"slug":"/identity/decentralized-authentication-future-of-authentication/"},"html":"

Introduction

\n

Every day, we encounter various events where we need to verify our identities. Whether you’re applying for a loan, booking flight tickets, or signing up online for a service, identity verification is crucial.

\n

However, most conventional authentication processes are inconvenient and even threaten consumers’ details.

\n

Whether we talk about inappropriate data collection and storage or a loophole in managing consumer identities, anything could lead to compromised sensitive information.

\n

Here’s where the concept of decentralized authentication in identity management comes into play.

\n

Storing essential information like name, address, and credit card details at a centralized location could mitigate the risk of identity disclosure or a breach of privacy.

\n

Let’s understand how decentralized authentication paves the path for a secure and seamless authentication process across multiple platforms in 2022 and beyond.

\n

What is Decentralized Authentication?

\n

Decentralized authentication means no central authority is required to verify your identity, i.e., decentralized identifiers. DIDs (Decentralized Identifiers) are unique identifiers that allow for decentralized, verified digital identification.

\n

A DID any subject identified by the DID's controller (e.g., a person, organization, thing, data model, abstract entity, etc.).

\n

DIDs, unlike traditional federated identifiers, are designed to be independent of centralized registries, identity providers, and certificate authorities.

\n

How is Decentralized Authentication Used?

\n

Let’s understand this with a simple example. If someone creates a couple of personal and public keys in an identification wallet, the public key (identifier) is hashed and saved immutably in an ITF.

\n

A dependent third party then proves the person's identification and certifies it by signing with its non-public key.

\n

If the person desires to get admission to a carrier, it's sufficient to give its identifier within the shape of a QR code or inside a token. The provider company verifies the identification to evaluate the hash values of identifiers with their corresponding hash facts within the ITF. The certification report is likewise saved within the ITF.

\n

If they match, admission is granted. In greater ideal scenarios, the person can derive separate key pairs from a non-public key to generate different identifiers for one-of-a-kind relationships to allow privacy-pleasant protocols.

\n

\n \n \n

\n

Benefits of Decentralized Authentication

\n

Both government and private sectors are already leveraging the true potential of decentralized authentication to deliver a seamless and secure user experience to their clients.

\n

The growing use of decentralized identity eventually eliminates the need for storing user credentials on several websites, which further reduces the risk of identity theft.

\n

Here are some business advantages of incorporating decentralized authentication:

\n\n

The Bottom Line

\n

The modern technological ecosystem has offered endless possibilities to build a better and safer future with more robust control over our individual privacy.

\n

Decentralized authentication can be the game-changer in mitigating the risks of identity theft in both the government and private sectors. Organizations thinking of enhancing consumer information security should strictly put their best foot forward to incorporate decentralized authentication for a secure experience.

\n

\n \n \n

\n","frontmatter":{"date":"January 18, 2022","updated_date":null,"description":"Whether we talk about inappropriate data collection or a loophole in managing consumer identities, anything could lead to compromised sensitive information. Here’s where the concept of decentralized authentication in identity management comes into play.","title":"Will Decentralized Auth Change the Perception of Consumer Identities in 2022?","tags":["authentication","identity verification","cx"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.4814814814814814,"src":"/static/a953a396f790a9afe3e088ab1739ede5/33aa5/dec-auth.jpg","srcSet":"/static/a953a396f790a9afe3e088ab1739ede5/f836f/dec-auth.jpg 200w,\n/static/a953a396f790a9afe3e088ab1739ede5/2244e/dec-auth.jpg 400w,\n/static/a953a396f790a9afe3e088ab1739ede5/33aa5/dec-auth.jpg 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.jpg"}}}},{"node":{"excerpt":"Introduction Creating a user registration form employs the management of the registered user. This is where user role authentication comes…","fields":{"slug":"/engineering/guest-post/nodejs-authentication-guide/"},"html":"

Introduction

\n

Creating a user registration form employs the management of the registered user. This is where user role authentication comes into play. Role authentication ensures that non-admin users cannot make changes or access exclusive information. It grants administrative privileges to admin users and basic privileges to basic users.

\n

You can build your own authentication functionality with web tokens like JSON Web Token (JWT) or use a trusted third-party customer identity and access management (CIAM) software like LoginRadius.

\n

Goal

\n

This tutorial helps you:

\n\n

Prerequisites

\n

You have installed the following:

\n\n

You already understand JavaScript E56 Syntax.

\n

Now that everything is in place, let's set up your database.

\n

Set Up a Mongo Database

\n

You'll store all your user data — which includes username, password, and role — in MongoDB.

\n

Install a node package called Mongoose that will connect to MongoDB. Then create a user schema for your application.

\n
npm init\nnpm install mongoose
\n

npm init sets up your new project and creates a package.json file with the credentials.

\n

After installing mongoose, create a new file db.js in the project's directory and require mongoose.

\n
const Mongoose = require("mongoose")
\n

With the help of mongoose, you can connect your application to MongoDB:

\n
// db.js\nconst Mongoose = require("mongoose")\nconst localDB = `mongodb://localhost:27017/role_auth`\nconst connectDB = async () => {\n  await Mongoose.connect(localDB, {\n    useNewUrlParser: true,\n    useUnifiedTopology: true,\n  })\n  console.log("MongoDB Connected")\n}\nmodule.exports = connectDB
\n

The code snippet here connects to mongodb://localhost:27017 and then specifies the name of the database /role_auth.

\n

The function connectDB awaits for the connection, which contains the URI and options as a second parameter. If it connects without errors, it will log out MongoDB Connected. Error issues will be fixed while connecting to the database. After this, it exported the function for use in the server.

\n

Set Up the Server

\n

You need to install some dependencies that you'll use in this tutorial.

\n
  npm i express nodemon
\n

Express.js is a Node.js framework for building web applications quickly and easily.

\n

Nodemon is a tool that watches the file system and automatically restarts the server when there is a change.

\n

You require express in your application to listen for a connection on port 5000. Create a new file server.js in the root directory and create the listening event:

\n
const express = require("express")\nconst app = express()\nconst PORT = 5000\napp.listen(PORT, () => console.log(`Server Connected to port ${PORT}`))
\n

The next step is to test your application. Open up your package.json file and add the following to scripts:

\n
"scripts": {\n  "start": "node server.js",\n  "dev": "nodemon server.js"\n}
\n

Open your terminal and run npm run dev to start the server.

\n

Connect to the Database

\n

Earlier, you've created a function that connects to MongoDB and exported that function. Now import that function into your server.js:

\n
const connectDB = require("./db");\n...\n//Connecting the Database\nconnectDB();
\n

You also need to create an error handler that catches every unhandledRejection error.

\n
const server = app.listen(PORT, () =>\n  console.log(`Server Connected to port ${PORT}`)\n)\n// Handling Error\nprocess.on("unhandledRejection", err => {\n  console.log(`An error occurred: ${err.message}`)\n  server.close(() => process.exit(1))\n})
\n

The listening event is assigned to a constant server. If an unhandledRejection error occurs, it logs out the error and closes the server with an exit code of 1.

\n

Create User Schema

\n

Schema is like a blueprint that shows how the database will be constructed.

\n

You'll structure a user schema that contains username, password, and role.

\n

Create a new folder model in the project's directory, and create a file called User.js. Now open User.js and create the user schema:

\n
// user.js\nconst Mongoose = require("mongoose")\nconst UserSchema = new Mongoose.Schema({\n  username: {\n    type: String,\n    unique: true,\n    required: true,\n  },\n  password: {\n    type: String,\n    minlength: 6,\n    required: true,\n  },\n  role: {\n    type: String,\n    default: "Basic",\n    required: true,\n  },\n})
\n

In the schema, the username will be unique, required, and will accept strings.

\n

You've specified the minimum characters(6) the password field will accept. The role field grants a default value (basic) that you can change if needed.

\n

Now, you need to create a user model and export it:

\n
const User = Mongoose.model("user", UserSchema)\nmodule.exports = User
\n

You've created the user model by passing the UserSchema as the second argument while the first argument is the name of the model user.

\n

Perform CRUD Operations

\n

You'll create functions that handle:

\n\n

Register Function

\n

As the name implies, this function will handle the registrations of users.

\n

Let's create a new folder named Auth. It will contain the Authentication file and the Route set-up file.

\n

After creating the Auth folder, add two files — Auth.js and Route.js.

\n

Now open up our Auth.js file and import that User model:

\n
const User = require("../model/User")
\n

The next step is to create an async express function that will take the user's data and register it in the database.

\n

You need to use an Express middleware function that will grant access to the user's data from the body. You'll use this function in the server.js file:

\n
const app = express()\napp.use(express.json())
\n

Let's go back to your Auth.js file and create the register function:

\n
// auth.js\nexports.register = async (req, res, next) => {\n  const { username, password } = req.body\n  if (password.length < 6) {\n    return res.status(400).json({ message: "Password less than 6 characters" })\n  }\n  try {\n    await User.create({\n      username,\n      password,\n    }).then(user =>\n      res.status(200).json({\n        message: "User successfully created",\n        user,\n      })\n    )\n  } catch (err) {\n    res.status(401).json({\n      message: "User not successful created",\n      error: error.mesage,\n    })\n  }\n}
\n

The exported register function will be used to set up the routes. You got the username and password from the req.body and created a tryCatch block that will create the user if successful; else, it returns status code 401 with the error message.

\n

Set Up Register Route

\n

You'll create a route to /register using express.Router. Import the register function into your route.js file, and use it as the route's function:

\n
const express = require("express")\nconst router = express.Router()\nconst { register } = require("./auth")\nrouter.route("/register").post(register)\nmodule.exports = router
\n

The last step is to import your route.js file as middleware in server.js:

\n
app.use("/api/auth", require("./Auth/route"))
\n

The server will use the router middleware function if there is a request to /api/auth.

\n

Test the Register Route

\n

You'll use Postman to test all the routes.

\n

Open up Postman to send a POST request to http://localhost:5000/api/auth/register and pass the username and password to the body:

\n

\n \n

Open the Auth.js file and create the Login function, as follows:

\n
// auth.js\nexports.login = async (req, res, next) => {\n  const { username, password } = req.body\n  // Check if username and password is provided\n  if (!username || !password) {\n    return res.status(400).json({\n      message: "Username or Password not present",\n    })\n  }\n}
\n

The login function returns status code 400 if the username and password were not provided. You need to find a user with the provided username and password:

\n
exports.login = async (req, res, next) => {\n  try {\n    const user = await User.findOne({ username, password })\n    if (!user) {\n      res.status(401).json({\n        message: "Login not successful",\n        error: "User not found",\n      })\n    } else {\n      res.status(200).json({\n        message: "Login successful",\n        user,\n      })\n    }\n  } catch (error) {\n    res.status(400).json({\n      message: "An error occurred",\n      error: error.message,\n    })\n  }\n}
\n

Here, it returns status code 401 when a user isn't found and 200 when a user is found. The code snippet wrapped all this in a tryCatch block to detect and output errors, if any.

\n

Set Up Login Route

\n

To set up the login route, import the login function into your route.js:

\n
const express = require("express");\nconst router = express.Router();\nconst { register, login } = require("./auth");\n...\nrouter.route("/login").post(login);\nmodule.exports = router;
\n

Test the Login Route

\n

Make a POST request at http://localhost:5000/api/auth/login and pass a valid username and password to the body:

\n

\n \n \n

\n

Update Function

\n

This function will be responsibile for updating the role of a basic user to an admin user. Open the auth.js file and create the update function, as follows:

\n
//auth.js\nexports.update = async (req, res, next) => {\n  const { role, id } = req.body\n  // Verifying if role and id is presnt\n  if (role && id) {\n    // Verifying if the value of role is admin\n    if (role === "admin") {\n      await User.findById(id)\n    } else {\n      res.status(400).json({\n        message: "Role is not admin",\n      })\n    }\n  } else {\n    res.status(400).json({ message: "Role or Id not present" })\n  }\n}
\n

The first if statement verifies if role and id are present in the request body.

\n

The second if statement checks if the value of role is admin. You should do this to avoid having over two roles.

\n

After finding a user with that ID, you'll create a third if block that will check for the role of the user:

\n
exports.update = async (req, res, next) => {\n  const { role, id } = req.body;\n  // First - Verifying if role and id is presnt\n  if (role && id) {\n    // Second - Verifying if the value of role is admin\n    if (role === "admin") {\n      // Finds the user with the id\n      await User.findById(id)\n        .then((user) => {\n          // Third - Verifies the user is not an admin\n          if (user.role !== "admin") {\n            user.role = role;\n            user.save((err) => {\n              //Monogodb error checker\n              if (err) {\n                res\n                  .status("400")\n                  .json({ message: "An error occurred", error: err.message });\n                process.exit(1);\n              }\n              res.status("201").json({ message: "Update successful", user });\n            });\n          } else {\n            res.status(400).json({ message: "User is already an Admin" });\n          }\n        })\n        .catch((error) => {\n          res\n            .status(400)\n            .json({ message: "An error occurred", error: error.message });\n        });\n\n       ...
\n

The third if block prevents assigning an admin role to an admin user, while the last if block checks if an error occurred when saving the role in the database.

\n
\n

The numerous if statements might be a little bit tricky but understandable. Please read the comments in the above code block for better understanding.

\n
\n

Set Up Update Route

\n

Import the update function in your route.js, as follows:

\n
const { register, login, update } = require("./auth");\n...\nrouter.route("/update").put(update);
\n

Testing the Update Route

\n

Send a put request to http://localhost:5000/api/auth/update:

\n

\n auth.js file:

\n
exports.deleteUser = async (req, res, next) => {\n  const { id } = req.body\n  await User.findById(id)\n    .then(user => user.remove())\n    .then(user =>\n      res.status(201).json({ message: "User successfully deleted", user })\n    )\n    .catch(error =>\n      res\n        .status(400)\n        .json({ message: "An error occurred", error: error.message })\n    )\n}
\n

You remove the user based on the id you get from req.body.

\n

Set up the deleteUser Route

\n

Open your route.js file to create a delete request to /deleteUser, using the deleteUser as its function:

\n
const { register, login, update, deleteUser } = require("./auth");\n...\nrouter.route("/deleteUser").delete(deleteUser);
\n

Test the deleteUser Route

\n

Send a delete request to http://localhost:5000/api/auth/deleteUser by passing a valid id to the body:

\n

\n \n \n

\n

Hash User Passwords

\n

Saving user passwords in the database in plain text format is reckless. It is preferable to hash your password before storing it.

\n

For instance, it will be tough to decipher the passwords in your database if they are leaked. Hashing passwords is a cautious and reliable practice.

\n

Let's use bcryptjs to hash your user passwords.

\n

Lets install bcryptjs:

\n
npm i bcryptjs
\n

After installing bcryptjs, import it into your auth.js

\n
const bcrypt = require("bcryptjs")
\n

Refactor Register Function

\n

Instead of sending a plain text format to your database, lets hash the password using bcrypt:

\n
exports.register = async (req, res, next) => {\n  const { username, password } = req.body;\n\n  ...\n\n  bcrypt.hash(password, 10).then(async (hash) => {\n    await User.create({\n      username,\n      password: hash,\n    })\n      .then((user) =>\n        res.status(200).json({\n          message: "User successfully created",\n           user,\n        })\n      )\n      .catch((error) =>\n        res.status(400).json({\n          message: "User not successful created",\n          error: error.message,\n        })\n      );\n  });\n};
\n

bcrypt takes in your password as the first argument and the number of times it will hash the password as the second argument. Passing a large number will take bcrypt a long time to hash the password, so give a moderate number like 10.

\n

bcrypt will return a promise with the hashed password; then, send that hashed password to the database.

\n

Test the Register Function

\n

Send a POST request to http://localhost:5000/api/auth/register and pass the username and password to the body:

\n

\n \n \n

\n

Authenticate Users with JSON Web Token (JWT)

\n

JSON Web Token helps shield a route from an unauthenticated user. Using JWT in your application will prevent unauthenticated users from accessing your users' home page and prevent unauthorized users from accessing your admin page.

\n

JWT creates a token, sends it to the client, and then the client uses the token for making requests. It also helps verify that you're a valid user making those requests.

\n

You've to install JWT before using it in your application:

\n
npm i jsonwebtoken
\n

Refactor the Register Function

\n

When a user registers, you'll send a token to the client using JWT as a cookie. To create this token, you need to set a secret string. You'll use the node's in-built package called crypto to create random strings:

\n
node\nrequire("crypto").randomBytes(35).toString("hex")
\n

Output:

\n

\n \n \n

\n

Storing this secret string in an environment variable is a safe practice. If this secret string is leaked, unauthenticated users can create fake tokens to access the route.

\n

Store your secret string in a variable:

\n
const jwtSecret =\n  "4715aed3c946f7b0a38e6b534a9583628d84e96d10fbc04700770d572af3dce43625dd"
\n

Once you've created your jwtSecret, import jsonwebtoken as the token in the register function:

\n
...\nconst jwt = require('jsonwebtoken')\nconst jwtSecret = '4715aed3c946f7b0a38e6b534a9583628d84e96d10fbc04700770d572af3dce43625dd'\nexports.register = async (req, res, next) => {\n  const { username, password } = req.body;\n\n  ...\n\n  bcrypt.hash(password, 10).then(async (hash) => {\n    await User.create({\n      username,\n      password: hash,\n    })\n      .then((user) => {\n        const maxAge = 3 * 60 * 60;\n        const token = jwt.sign(\n          { id: user._id, username, role: user.role },\n          jwtSecret,\n          {\n            expiresIn: maxAge, // 3hrs in sec\n          }\n        );\n        res.cookie("jwt", token, {\n          httpOnly: true,\n          maxAge: maxAge * 1000, // 3hrs in ms\n        });\n        res.status(201).json({\n          message: "User successfully created",\n          user: user._id,\n        });\n      })\n      .catch((error) =>\n        res.status(400).json({\n          message: "User not successful created",\n          error: error.message,\n        })\n      );\n  });\n};
\n

The code snippet created the token using JWT's sign function. This function takes in three parameters:

\n\n

After passing all these arguments, JWT will generate a token. After the token is generated, send it as a cookie to the client.

\n

Refactor the Login Function

\n

Also, generate a token for logged in users:

\n
exports.login = async (req, res, next) => {\n\n    ...\n\n      bcrypt.compare(password, user.password).then(function (result) {\n        if (result) {\n          const maxAge = 3 * 60 * 60;\n          const token = jwt.sign(\n            { id: user._id, username, role: user.role },\n            jwtSecret,\n            {\n              expiresIn: maxAge, // 3hrs in sec\n            }\n          );\n          res.cookie("jwt", token, {\n            httpOnly: true,\n            maxAge: maxAge * 1000, // 3hrs in ms\n          });\n          res.status(201).json({\n            message: "User successfully Logged in",\n            user: user._id,\n          });\n        } else {\n          res.status(400).json({ message: "Login not succesful" });\n        }\n      });\n    }\n  } catch (error) {\n    res.status(400).json({\n      message: "An error occurred",\n      error: error.message,\n    });\n  }\n};
\n

Protect the Routes

\n

To prevent unauthenticated users from accessing the private route, take the token from the cookie, verify the token, and redirect users based on role.

\n

You'll get the token from the client using a node package called cookie-parser. Let's install the package before using it:

\n
npm i cookie-parser
\n

After installing it, import it into your server.js file and use it as a middleware:

\n
const cookieParser = require("cookie-parser");\n...\napp.use(cookieParser());
\n

You'll create your middleware that verifies the token and grants access to your private route.

\n

Let's create a new folder in the project's folder named middleware and create a file called auth.js.

\n

Admin Authentication

\n

Open the auth.js file and create the middleware:

\n
const jwt = require("jsonwebtoken")\nconst jwtSecret =\n  "4715aed3c946f7b0a38e6b534a9583628d84e96d10fbc04700770d572af3dce43625dd"\nexports.adminAuth = (req, res, next) => {\n  const token = req.cookies.jwt\n  if (token) {\n    jwt.verify(token, jwtSecret, (err, decodedToken) => {\n      if (err) {\n        return res.status(401).json({ message: "Not authorized" })\n      } else {\n        if (decodedToken.role !== "admin") {\n          return res.status(401).json({ message: "Not authorized" })\n        } else {\n          next()\n        }\n      }\n    })\n  } else {\n    return res\n      .status(401)\n      .json({ message: "Not authorized, token not available" })\n  }\n}
\n

The code snippet requests a token from the client, checks if a token is available, and verifies that token.

\n

JWT verifies your token with your jwtSecret and returns a callback function. This function returns status code 401 if the token fails the authentication test.

\n

When you've created the token, you passed a payload that contained the user's credentials. You'll get the role from the credentials and check if the user's role is admin. If the user is not an admin, you return status code 401, but you'll call the next function if the user is an admin.

\n

Basic User Authentication

\n

You'll also authenticate basic users before granting them access to the users route. Let's create another middleware in your auth.js file that will authenticate basic users:

\n
exports.userAuth = (req, res, next) => {\n  const token = req.cookies.jwt\n  if (token) {\n    jwt.verify(token, jwtSecret, (err, decodedToken) => {\n      if (err) {\n        return res.status(401).json({ message: "Not authorized" })\n      } else {\n        if (decodedToken.role !== "Basic") {\n          return res.status(401).json({ message: "Not authorized" })\n        } else {\n          next()\n        }\n      }\n    })\n  } else {\n    return res\n      .status(401)\n      .json({ message: "Not authorized, token not available" })\n  }\n}
\n

Protect the Routes

\n

You'll have two routes: one for the user and the other for the admin. Let's import this middleware into your server.js file and protect your routes:

\n
const { adminAuth, userAuth } = require("./middleware/auth.js");\n...\napp.get("/admin", adminAuth, (req, res) => res.send("Admin Route"));\napp.get("/basic", userAuth, (req, res) => res.send("User Route"));
\n

Updating user roles and deleting users should be done by an Admin, so you need to import this auth.js middleware into your route.js file to protect the update and delete routes.

\n

route.js:

\n
const { adminAuth } = require("../middleware/auth")\nrouter.route("/update").put(adminAuth, update)\nrouter.route("/deleteUser").delete(adminAuth, deleteUser)
\n

Populate the Database with Admin User

\n

You need to create an admin user in your database. Open up your terminal, and let's run some MongoDB methods:

\n
mongo
\n

After mongo is started, you need to use the role_auth database:

\n
use role_auth
\n

Before adding your admin user to the database, you need to hash the password using bcrypt in the node terminal. Open node terminal in your project's directory:

\n
const password = require("bcryptjs").hash("admin", 10)\npassword
\n

After you've created the constant password, you need to enter the password in the node terminal to get your hashed password.

\n

\n \n \n

\n

You'll use the hashed password to create your admin:

\n
db.users.insert({\n  username: "admin",\n  password: "$2a$10$mZwU9AbYSyX7E1A6fu/ZO.BDhmCOIK7k6jXvKcuJm93PyYuH2eZ3K",\n  role: "admin",\n})
\n

To check if it was successfully created, run db.users.find().pretty() — this will output all users in the database.

\n

Create the Login Form Using EJS

\n

You'll use Embedded JavaScript (EJS) to create a front-end for your application.

\n

Install the ejs package:

\n
    npm i ejs
\n

After you've installed ejs, you need to set ejs as your default view engine in your server.js file:

\n
app.set("view engine", "ejs")
\n

Render Embedded JavaScript

\n

When making a GET request to specific routes, you'll render an ejs file:

\n
app.get("/", (req, res) => res.render("home"))\napp.get("/register", (req, res) => res.render("register"))\napp.get("/login", (req, res) => res.render("login"))\napp.get("/admin", adminAuth, (req, res) => res.render("admin"))\napp.get("/basic", userAuth, (req, res) => res.render("user"))
\n

Create EJS Files

\n

By default, your application will look into the views folder when rendering an ejs file. You need to create the views folder in your project's folder and add your ejs files to it

\n

Create a Home Page

\n

Your home page will contain the links to /login and /register ejs file. Open up home.ejs and add these links:

\n
<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <title>Home page</title>\n  </head>\n  <body>\n    <h1>Home Page</h1>\n    <a href="/register"> Register</a> <br />\n    <a href="/login">Login</a>\n  </body>\n</html>
\n

Create a Registration Form

\n

Embedded JavaScript (EJS) supports HTML syntax. You'll create the registration form in register.ejs using HTML syntax:

\n
<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <title>Register Page</title>\n  </head>\n  <body>\n    <h1>Register Page</h1>\n    <form>\n      <div class="error" style="background-color: red;"></div>\n      <br />\n      <label for="username">Username</label><br />\n      <input type="text" id="username" required /><br />\n      <label for="password">Password</label><br />\n      <input type="password" id="password" required /><br />\n      <input type="submit" value="register" /><br />\n    </form>\n    <a href="/login">Already registered? Login</a>\n  </body>\n</html>
\n

Add POST Request Functionality

\n

You need to get the username and password that the user entered and pass it to the body when making the POST request:

\n
...\n<script>\n  const form = document.querySelector('form')\n  const username = document.querySelector('#username')\n  const password = document.querySelector('#password')\n  const display = document.querySelector('.error')\n  form.addEventListener('submit', async (e) => {\n     e.preventDefault()\n     display.textContent = ''\n     try {\n       const res = await fetch('/api/auth/register', {\n       method: 'POST',\n        body: JSON.stringify({ username: username.value, password: password.value }),\n       headers: { 'Content-Type': 'application/json' }\n       })\n       const data = await res.json()\n       if(res.status === 400 || res.status === 401){\n        return display.textContent = `${data.message}. ${data.error ? data.error : ''}`\n       }\n       data.role === "admin" ? location.assign('/admin') : location.assign('/basic')\n        } catch (err) {\n          console.log(err.message)\n        }\n      })\n</script>\n</body>\n</html>
\n

The code snippet uses JavaScript's in-built library called fetch to send a POST request to /api/auth/register.

\n

After the request has been sent, it stores the response to a constant res.

\n

res.json will return the JSON you've passed as a response in the API.

\n

When res.json returns the data, you store that data in a constant data.

\n

If you get an error while making the request, display the error to the user. If an error isn't found, redirect the user based on their role on different routes.

\n

Create a Login Form

\n

Creating your login form and adding functionality to it will be similar to that of your registration. Open login.ejs and create this form:

\n
<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <title>Login Page</title>\n  </head>\n  <body>\n    <h1>Login Page</h1>\n    <form>\n      <div class="error" style="background-color: red;"></div>\n      <br />\n      <label for="username">Username</label><br />\n      <input type="text" id="username" required /><br />\n      <label for="password">Password</label><br />\n      <input type="password" id="password" required /><br />\n      <input type="submit" value="login" /><br />\n    </form>\n    <a href="/register">Don't have an accout? Register</a>\n  </body>\n</html>
\n

Add POST Request Functionality

\n
    <script>\n      const form = document.querySelector('form')\n      const username = document.querySelector('#username')\n      const password = document.querySelector('#password')\n      const display = document.querySelector('.error')\n      form.addEventListener('submit', async (e) => {\n        e.preventDefault()\n        display.textContent = ''\n        try {\n          const res = await fetch('/api/auth/login', {\n            method: 'POST',\n            body: JSON.stringify({ username: username.value, password: password.value }),\n            headers: { 'Content-Type': 'application/json' }\n            })\n          const data = await res.json()\n          if (res.status === 400 || res.status === 401) {\n            return display.textContent = `${data.message}. ${data.error ? data.error : ''}`\n          }\n          data.role === "admin" ? location.assign('/admin') : location.assign('/basic')\n        } catch (err) {\n            console.log(err.message)\n          }\n\n        })\n      </script>\n    </body>\n    </html>
\n

Add Registered Users to the Route

\n

Once you've redirected users based on role to different routes, display all registered users on that route. You need to send a GET request to /getUsers.

\n

Open auth.js file in Auth folder:

\n
exports.getUsers = async (req, res, next) => {\n  await User.find({})\n    .then(users => {\n      const userFunction = users.map(user => {\n        const container = {}\n        container.username = user.username\n        container.role = user.role\n        return container\n      })\n      res.status(200).json({ user: userFunction })\n    })\n    .catch(err =>\n      res.status(401).json({ message: "Not successful", error: err.message })\n    )\n}
\n

The User.find method returns an array of users. After mapping through this array, it stores the username and role in the constant container and returns the container.

\n

Display Registered User in user Route

\n

You've rendered user.ejs when accessing the /user route. Now, you'll display all registered users to that route.

\n

user.ejs:

\n
<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8" />\n    <meta http-equiv="X-UA-Compatible" content="IE=edge" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <title>User page</title>\n  </head>\n  <body>\n    <h1>Users</h1>\n    <ul></ul>\n    <script>\n      const ul = document.querySelector("ul")\n      const getUsers = async () => {\n        const res = await fetch("/api/auth/getUsers")\n        const data = await res.json()\n        data.user.map(mappedUser => {\n          if (mappedUser.username !== "admin") {\n            let li = `<li> <b>Username</b> => ${mappedUser.username} <br> <b>Role</b> => ${mappedUser.role} </li>`\n            ul.innerHTML += li\n          } else {\n            return null\n          }\n        })\n      }\n      getUsers()\n    </script>\n  </body>\n</html>
\n

Add Update and Delete Function to the Admin Route

\n

You'll also display registered users to the admin route but add update and delete functionality to the route:

\n

admin.ejs:

\n
<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8" />\n    <meta http-equiv="X-UA-Compatible" content="IE=edge" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <title>Admin page</title>\n  </head>\n  <body>\n    <div class="display" style="background-color: red;"></div>\n    <h1>Users</h1>\n    <ul></ul>\n    <script>\n      const ul = document.querySelector("ul")\n      const display = document.querySelector(".display")\n      const getUsers = async () => {\n        const res = await fetch("/api/auth/getUsers")\n        const data = await res.json()\n        data.user.map(mappedUser => {\n          if (mappedUser.username !== "admin") {\n            let li = `<li> <b>Username</b> => ${mappedUser.username} <br> <b>Role</b> => ${mappedUser.role} </li> <button class="edit">Edit Role</button> <button class="delete">Delete User</button>`\n            ul.innerHTML += li\n          } else {\n            return null\n          }\n          const editRole = document.querySelectorAll(".edit")\n          const deleteUser = document.querySelector(".delete")\n        })\n      }\n      getUsers()\n    </script>\n  </body>\n</html>
\n

Edit a User's Role

\n

You'll create an event listener that will listen for a click on the Edit Role button. When the button is clicked, you'll send a PUT request to /api/auth/update:

\n
<script>\n\n    ...\n\n    const editRole = document.querySelectorAll('.edit')\n    const deleteUser = document.querySelector('.delete')\n  editRole.forEach((button, i) => {\n    button.addEventListener('click', async() => {\n      display.textContent= ''\n      const id = data.user[i+1].id\n      const res = await fetch('/api/auth/update', {\n      method: 'PUT',\n      body: JSON.stringify({ role: 'admin', id}),\n      headers: { 'Content-Type': 'application/json' }\n      })\n      const dataUpdate = await res.json()\n      if (res.status === 400 || res.status === 401) {\n        document.body.scrollTop = 0\n        document.documentElement.scrollTop = 0\n        return display.textContent = `${dataUpdate.message}. ${dataUpdate.error ? dataUpdate.error : ''}`\n      }\n      location.assign('/admin')\n      })\n    });\n\n      ...\n</script>
\n

Delete Users

\n

Deleting Users from the database should be the duty of an admin.

\n

admin.ejs:

\n
<script>\n\n  ...\n\n  const editRole = document.querySelectorAll('.edit')\n  const deleteUser = document.querySelector('.delete')\n  deleteUser.forEach((button, i)=> {\n   button.addEventListener('click', async ()=> {\n   display.textContent =''\n   const id = data.user[i+1].id\n   const res = await fetch('/api/auth/deleteUser', {\n     method: 'DELETE',\n     body: JSON.stringify({id}),\n     headers: {'Content-Type': 'application/json'}\n     })\n   const dataDelete = await res.json()\n   if (res.status === 401){\n     document.body.scrollTop = 0\n     document.documentElement.scrollTop = 0\n     return display.textContent = `${dataUpdate.message}. ${dataUpdate.error ? dataUpdate.error : ''}`\n   }\n   location.assign('/admin')\n    })\n  })\n\n   ...\n</script>
\n

You've created an event listener that listens for a click on the Delete User button. When the button is clicked, you'll send a DELETE request to /api/auth/deleteUser.

\n
\n

Please ensure the admin user is first on the list to avoid populating the database with an admin user again.

\n
\n

Logout Functionality

\n

To log out users, you need to remove the token from the client and redirect the client to the home page.

\n

You'll create a GET request to /logout in the server.js file:

\n
app.get("/logout", (req, res) => {\n  res.cookie("jwt", "", { maxAge: "1" })\n  res.redirect("/")\n})
\n

The code snippet replaced the JWT token with an empty string and gave it a lifespan of 1 second.

\n

After creating the GET request, add a logout button to the admin's route and user's route:

\n
...\n<ul></ul>\n<button class="logout"><a href="/logout">Log Out</a></button>\n...
\n

Node.js Authentication with LoginRadius

\n

You can simply replace the many steps discussed above using LoginRadius. In turn, it helps you focus more on developing core application features while letting you quickly implement user signup and login and manager users.

\n

In other words, LoginRadius is a SaaS-based customer identity and access management (CIAM) system with features to manage customer identity, privacy, and access. It is a simple, implementable solution for adding user authentication and authorization to your website.

\n

Basically, LoginRadius handles user registration, login, and authentication. Other features of LoginRadius include:

\n\n

To get started with LoginRadius, you need to create an account with either the free plan or the Developer plan, customize your registration and login forms, and start managing your users.

\n

How to Authenticate Your Node.js App with LoginRadius

\n

This section briefly covers how authentication works with LoginRadius.

\n

After signing up for LoginRadius, choose a name for your Node.js app.

\n
\n

\n \n \n

\n
\n

After completing your LoginRadius signup process, you can get your App Name, API Key, and API Secret from the configuration link on the sidebar. With these configurations, you can easily link the server-side of our application to LoginRadius.

\n

\n \n \n

\n

LoginRadius automatically generates a link that will be used to authenticate users. This link contains the name of your LoginRadius application and a URL that authenticated users will be redirected to:

\n
https://<LoginRadius-APP-Name>.hub.loginradius.com/auth.aspx?action=login&return_url=<Return-URL>
\n

An instance of the link is given below:

\n
https://noderoleauth.hub.loginradius.com/auth.aspx?action=login&return_url=http://localhost:5000
\n

Conclusion

\n

You've successfully learned how to perform CRUD operations using MongoDB as a database, hash passwords, authenticate using JWT, and render Embedded JavaScript (EJS). You can put all these together to build more complex applications.

\n

Resources

\n\n","frontmatter":{"date":"January 18, 2022","updated_date":null,"description":"Want to authenticate and manage users with specific roles in your Node.js app? This in-depth tutorial explains everything step-by-step to help you implement authentication in your Node.js apps.","title":"Node.js User Authentication Guide","tags":["JWT","Authentication","Node.js"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.9047619047619047,"src":"/static/2bf56fe9f3665d6ea50e762f073b6531/14b42/coverimage.jpg","srcSet":"/static/2bf56fe9f3665d6ea50e762f073b6531/f836f/coverimage.jpg 200w,\n/static/2bf56fe9f3665d6ea50e762f073b6531/2244e/coverimage.jpg 400w,\n/static/2bf56fe9f3665d6ea50e762f073b6531/14b42/coverimage.jpg 800w,\n/static/2bf56fe9f3665d6ea50e762f073b6531/235b6/coverimage.jpg 1034w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Uma Victor","github":"uma-victor1","avatar":null}}}},{"node":{"excerpt":"The customer success team always understands the importance of demonstrating value to every client in a well-organized and timely manner…","fields":{"slug":"/growth/business-review-meeting-success/"},"html":"

The customer success team always understands the importance of demonstrating value to every client in a well-organized and timely manner.

\n

However, the business landscape of both the client and service provider can always be in a state of fluctuation. So, meeting your clients frequently makes sense, isn’t it? That’s what quarterly business review (QBR) is all about.

\n

QBRs are the perfect time to showcase your business perspective and the business impact you’ve had on your clients. This is a critical exercise that bridges the gap between your clients, your product/services, and your company.

\n

Over nine months, the LoginRadius’ customer success team has been engaged to arrange the QBR’s with all its clients, and we’ve done some brainstorming to synchronize processes for better outcomes.

\n

Let’s understand the crucial aspects of quarterly business reviews and how companies can collaborate and scale business growth.

\n

What is a Quarterly Business Review (QBR)?

\n

A quarterly business review can be defined as a once-per-quarter meeting between a vendor (like a technology partner like us) with their clients.

\n

During a QBR, both the client and vendor discuss how their business impacts the client, what the processes are being followed, and brainstorm ideas to provide a competitive edge.

\n

Though it can be pretty challenging for some clients to visit the vendor’s location physically, remote QBRs are swiftly becoming part of the customer success best practices.

\n

What are the Objectives of a Successful Quarterly Business Review?

\n

QBRs offer endless opportunities to clients and vendors since we don’t see customers as a deal rather a long-term relationship. It’s one of the best ways to ensure consistent growth with the clients by conducting a quarterly business review.

\n

Let’s have a quick look at some of the essential objectives of a successful QBR:

\n\n

Stages that LoginRadius Covers in QBR

\n

A QBR is undoubtedly a single chance that allows you to bolster your image among your clients and their stakeholders; make sure you prepare well with valuable content and information.

\n

LoginRadius understands the value that each client brings to our organization, and hence, we’re now emphasizing building lasting relationships with our clients through QBRs. Here are the stages of QBR that we cover:

\n\n

What Should be the Content of the QBR?

\n

If you’re not sure about the purpose of QBR and its value to your business and clients, you first need to understand the aspects defining the need of a QBR. Here’s what your QBR must contain:

\n

Agenda

\n

You need to create an agenda for the meeting and make sure you circulate the same to all the attendees in advance so that they’re well aware of the purpose of the QBR.

\n

Demonstrate Value

\n

Keep a list of business outcomes your clients have achieved through your product/services in the previous quarter. Demonstrate the client with correct performance metrics and numbers.

\n

Share Goals

\n

Once you depict their achievements through your product/services, it’s the right time to show them what more their brand can achieve in the future. It’s crucial to share future goals and your benchmark plans to chase them.

\n

Portray Your Action Plan

\n

Since sharing goals alone won’t build trust and confidence with your client, you have to portray your action plan well in advance. Also, make the type of collaboration you would need with the client’s team to achieve your goals.

\n

How to Add Value to the QBR?

\n

We believe that the key to the successful conduction of a QBR lies in adding value to the QBR. It’s important to understand that the client can derive value from the session and eventually build trust in your team. Here’s what you need to consider:

\n\n

The Bottom Line

\n

A quarterly business review benefits both the client and the vendor since they get a chance to connect and learn how things are working and prepare an action plan for the future.

\n

It’s the job of the customer success team to correctly deliver the expectations and smartly use QBRs to transform their clients’ businesses.

\n

Moreover, you can help cement the relationship since you get a lot of feedback from your client's team that further helps plan things better.

\n

Enterprises that aren’t yet leveraging the true potential of QBRs must quickly put their best foot forward in conducting the same for ensuring better and lasting relationships with their clients.

\n

\n \n \n

\n","frontmatter":{"date":"January 13, 2022","updated_date":null,"description":"QBRs are the perfect time to showcase your business perspective and the business impact you’ve had on your clients. This is a critical exercise that bridges the gap between your clients, your product/services, and your company.","title":"A Successful Business Review Meeting Paves the Path for Your Business Success","tags":null,"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/fdefa788900050481d378d133f2f9a3f/33aa5/business-review.jpg","srcSet":"/static/fdefa788900050481d378d133f2f9a3f/f836f/business-review.jpg 200w,\n/static/fdefa788900050481d378d133f2f9a3f/2244e/business-review.jpg 400w,\n/static/fdefa788900050481d378d133f2f9a3f/33aa5/business-review.jpg 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Ritika Kapahi","github":null,"avatar":null}}}},{"node":{"excerpt":"Introduction A deepfake is a portmanteau of fake and deep learning. The consequences of it causing people to doubt their reality: recordings…","fields":{"slug":"/identity/how-to-identity-mitigate-deepfake-attacks/"},"html":"

Introduction

\n

A deepfake is a portmanteau of fake and deep learning. The consequences of it causing people to doubt their reality: recordings, pictures and videos that have been manipulated in such a way as to make it appear that someone said and did things they never said or did.

\n

Nowadays the use and the possibility of such types of attacks are gaining a lot of concern, due to the potential consequences related to law, politics, and many other public issues. In this post, you'll read all about deepfakes and how to avoid them. So, without wasting any time, just start reading!

\n

Concept of Deepfakes: What Is It?

\n

Have you ever come across the following news?

\n\n

If your answer is yes, then you've witnessed a deepfake.

\n

Deepfakes, the twenty-first century's equivalent to photoshopping, employs a type of artificial intelligence known as deep learning to create photographs of fictitious events, hence the name deepfake.

\n

Now that you know what deepfakes are, let's look at how they've become a new threat to all of us and how we can protect ourselves from them.

\n

Deepfake Attacks: A Cancer In The Society

\n

Deepfake technology advancements have made it more difficult to discern between actual and fake content, posing a real threat to businesses.

\n

Aside from the evolution of technology, the risk of deepfake attacks is heightened by the fact that businesses have gone virtual overnight as a result of COVID-19. This type of digital transformation boosts the usage of video conferencing and other digital workplace tools, which means more access to deepfake material and more opportunities to be duped.

\n

You can look at the below-mentioned points and understand how deepfake attacks are extremely dangerous:

\n\n

Doesn't that sound terrible? It's as though people are using these tools to exploit one another. As these deepfake attacks** **have become common, it's time for us to learn ways to mitigate them. You must be wondering how, right? Well, continue reading!

\n

How To Detect Deepfakes

\n

You should know that tools and best practices can assist in mitigating the attempts of fraudsters. Yes, you heard it right! And the most critical factor is vigilance. Fraudsters are relentless and continuously on the lookout for gaps or weak areas.

\n

The first step is to examine the current state of deepfake videos. If you know what to look for, you can typically spot a deepfake video at this stage. The warning indicators are the following:

\n\n

Algorithms are also emerging to assist video creators in authenticating their videos. A cryptographic technique, for example, can be used to insert hashes at predetermined intervals across the movie. The hashes will change if the video in question is changed.

\n

Similarly, security practices can help to deter fraudsters. Deepfake attacks, as an emerging threat, thrive on the degree of technology available to fraudsters, particularly machine learning and advanced analytics. Businesses can fight fire with fire by employing the same capabilities.

\n

Also Download: \n \n \n

\n

How to Prevent Deepfake Attacks

\n

1. Proper training and awareness

\n

Through sufficient training and raising awareness, an extra line of defense can be formed. Training should emphasize how technology is used in hostile attempts and how this may be recognized, such as enabling staff to detect deepfake-based social engineering attempts.

\n

2. Detection

\n

Although total risk prevention is unattainable, spotting false media early can help reduce the impact on your firm.

\n

3. Prepare response strategy

\n

Ascertain that you are prepared to respond appropriately to a deepfake. Prepare a plan that can be activated when a deepfake is spotted. Individual duties and needed actions must be stated in this strategy.

\n

Get Ready To Fight Deepfakes!

\n

You must have realized by now that the constant growth of cybercrime has culminated in deepfakes, which significantly exacerbate the threats posed by typical frauds.

\n

Deepfakes continue to pose a variety of threats, including political propaganda, fraud, and evidence manipulation in court. In fact, you can implement technical solutions to prevent deepfake attacks.

\n

However, these methods are not the only measures to address the issue of deepfakes. Hence, it is vital to engage in awareness and training to detect early symptoms of deepfake attacks.

\n

Additionally, technological companies and governments should consider enacting legislation that criminalizes the usage of deepfakes with the goal of damaging individuals' reputations. In this way, we can stop this rising threat.

\n

\n \n \n

\n","frontmatter":{"date":"January 13, 2022","updated_date":null,"description":"The emergence of deepfakes has led to many questions about how to identify and protect against them. This blog will provide an overview towards providing that understanding.","title":"Emerging Threat of Deepfakes: How To Identify And Prepare Against It","tags":["digital transformation","identity management","cx"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":2.0618556701030926,"src":"/static/731316a5afd52f90c38ff2ebca1e5586/33aa5/deepfake.jpg","srcSet":"/static/731316a5afd52f90c38ff2ebca1e5586/f836f/deepfake.jpg 200w,\n/static/731316a5afd52f90c38ff2ebca1e5586/2244e/deepfake.jpg 400w,\n/static/731316a5afd52f90c38ff2ebca1e5586/33aa5/deepfake.jpg 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Vishal Sharma","github":null,"avatar":null}}}},{"node":{"excerpt":"In this article, you'll learn about authentication in Next.js and how you can authenticate Next.js applications with LoginRadius. Note: An…","fields":{"slug":"/engineering/guest-post/nextjs-authentication-guide/"},"html":"

In this article, you'll learn about authentication in Next.js and how you can authenticate Next.js applications with LoginRadius.

\n
\n

Note: An understanding of React, Hooks, and Next.js is beneficial to follow this tutorial.

\n
\n

What is Authentication?

\n

Authentication is the process of validating that an individual is who they claim to be. Authentication is an essential feature for applications, particularly those that store user data.

\n

You should not mistake authentication for authorization. Authorization is the process of verifying that whether a user has required permission to access an asset or data set.

\n

Authentication deals with identifying a user, while authorization checks what resources or data an authenticated user has permission to access.

\n

Some of the methods used to implement authentication are:

\n\n

Should You Build Your Authentication System or Use a Third-party Solution?

\n

Authentication is one of the most critical parts of an application’s security, so you should address it adequately.

\n

A few aspects you should consider when assessing if you should build your authentication system or use a third-party solution:

\n\n

Considering these factors, it's pretty easier to rely on a third-party solution, and it's also cheaper and more secure than building your own authentication system.

\n

What is LoginRadius?

\n
\n

Loginradius is the world's first no-code identity platform. It is a simple, implementable solution for adding user authentication and authorization to your website.

\n
\n

LoginRadius provides no-code services for authorization, authentication, account security, and much more. It has several interesting features, and some of them are:

\n\n

Understanding Next.js Authentication Patterns

\n

Next.js offers two authentication patterns — client-side and server-side authentication.

\n

Client-Side Authentication

\n

With client-side authentication, the authentication logic and user redirection are done in the browser. The page component fully loads before the redirect logic is executed.

\n

When this authentication approach is used, developers usually use a loading indicator to indicate to the user that a process is running in the background. The loading indicator helps boost user experience. If the user’s authentication fails, redirect the user to a login page.

\n

The following example shows how to handle client-side redirects:

\n
import { useEffect } from "react"\nimport { useRouter } from "next/router"\nimport authService from "auth-service" //imaginary auth service\n\nexport default function ProtectedPage() {\n  const router = useRouter()\n\n  useEffect(() => {\n    const authUser = authService.getUser()\n\n    // if there is no authenticated user, redirect to login page_\n\n    if (!authUser) {\n      router.push("/login")\n    }\n  }, [])\n\n  return (\n    <>\n      <h1>Welcome {user.name}. This is a protected page</h1>`\n    </>\n  )\n}
\n

The above code snippet handles client-side redirects in the browser using next/router. It also uses an imaginary authentication service, auth-service, for illustration purposes. You’ll work with LoginRadius later in this tutorial.

\n

It checks if there is an authenticated user with the authService.getUser() method in the useEffect. If there is none, it redirects the user to the /login page using Next.js’s router object.

\n

This is a simple illustration of client-side authentication and redirection.

\n

Server-Side Authentication

\n

With server-side authentication, you can redirect a user from, say, pages/profile to pages/login. When non-authenticated users try to access a protected page, they are redirected to a login page. All of this is done on the server — before the request reaches the browser.

\n

A benefit of this pattern is that non-authenticated users do not see flashes of unauthenticated content before they are redirected.

\n

The following example below shows how to handle server-side redirects:

\n
export default function ProtectedPage({ user }) {\n\treturn (\n\t\t<>\n\t\t\t<h1>Welcome {user.name}. This is a protected page</h1>\n\t\t</>\n\t)\n}\n\nexport const getServerSideProps = async context => {\n\tconst { user } = authService.getUser(context.req)\n\n\t// if there is no authenticated user, redirect to login page\n\n\tif (!user)\n\t\treturn {\n\t\t\tprops: {},\n\n\t\t\tredirect: { destination: "/login" },\n\t\t}\n\n\t\treturn { props: { user } }\n\t}\n}
\n

Using getServerSideProps enables rendering pages on the server. You can take advantage of that to also handle the redirection on the server.

\n

The above code snippet uses the authService.getUser() method to get the authenticated user’s object. If there is no user, it returns an object with a redirect object. The redirect object contains a destination key, where you can put the page you want to redirect the user to, which is your application’s login page.

\n

Now that you’ve understood the authentication patterns available, let’s see how to authenticate a Next.js application with LoginRadius.

\n

Authenticating Next.js Apps with LoginRadius

\n

The steps below highlight how you can integrate and authenticate your Next.js applications with LoginRadius:

\n

Create a LoginRadius Account

\n

You should create an account to get started with LoginRadius. There is a free plan you can start with.

\n

Get Account Credentials

\n

Now that you have an account, you should get the credentials for your appName and apiKey from the dashboard. You'll need them later to use the React SDK.

\n

Start a New Next.js Application

\n

Run the following command in your terminal to create a new Next.js application:

\n
npx create-next-app <name-of-project>\n//or\nyarn add create-next-app <name-of-project>
\n

Install LoginRadius React SDK

\n

Next, install the React SDK into the project:

\n
```javascript\nnpm install loginradius-react\n//or\nyarn add loginradius-react\n```
\n

Integrate the React SDK

\n

You need to wrap the root component with the SDK’s authentication provider.

\n

You also need to pass the account credentials to the provider. You can get these credentials from your LoginRadius account dashboard.

\n

Navigate to pages/_app.js and update it with the code below:

\n
import Head from "next/head"\nimport { LRAuthProvider } from "loginradius-react"\nimport { ChakraProvider } from "@chakra-ui/react"\nimport Layout from "../layout"\nimport "../styles/globals.css"\n\nfunction MyApp({ Component, pageProps }) {\n  return (\n    <>\n      <Head>\n        <title>Loginradius Next</title>\n      </Head>\n\n      <LRAuthProvider\n        appName="your-app-name"\n        apiKey="your-api-key"\n        redirectUri={"http://localhost:3000/"}\n      >\n        <ChakraProvider>\n          <Layout>\n            <Component {...pageProps} />\n          </Layout>\n        </ChakraProvider>\n      </LRAuthProvider>\n    </>\n  )\n}\n\nexport default MyApp
\n

The above code snippet imports the LRAuthProvider component from loginradius-react. It passes the appName and apiKey taken from the LoginRadius account dashboard earlier to LRAuthProvider. It also sets the redirectUri to http://localhost:3000/.

\n

The redirectUri is the callback URL where you want to redirect users after being authenticated. You should whitelist the redirect_uri in your LoginRadius account dashboard. Localhost URLs are whitelisted by default.

\n

Now that you've integrated the SDK, let’s add the authentication functionality.

\n

Add Login and Logout Functionality

\n

Your users should be able to log in and out of our application, so let’s set that up.

\n

We will add the log in and log out functionality to a Nav component. Let’s set up the component.

\n

Create a layout folder in the root directory, and create a Nav.js file there. Add the following code to Nav.js:

\n
import { Button, Flex, Stack } from "@chakra-ui/react"\nimport { useLRAuth } from "loginradius-react"\n\nexport default function Nav() {\n  const { loginWithRedirect, logout } = useLRAuth()\n\n  return (\n    <Flex>\n      <Stack spacing={[6, 8]}>\n        <Button onClick={() => loginWithRedirect()}>Login to continue</Button>\n        <Button onClick={() => logout()}>Log out</Button>\n      </Stack>\n    </Flex>\n  )\n}
\n

Here, Chakra UI is used for UI components.

\n

First, it imports the useLRAuth hook from the SDK. Next, it accesses the loginWithRedirect and logout methods from the useLRAuth hook.

\n

Then, it passes loginWithRedirect and logout to the login and logout buttons’ onClick event handlers, respectively.

\n

Having created the Nav component, we need to create the Layout component we mentioned earlier.

\n

Create an index.js file in the layout folder, and paste the code below:

\n
import { Box } from "@chakra-ui/react"\nimport Nav from "./Nav"\n\nexport default function Layout({ children }) {\n  return (\n    <Box h="100vh" bg="green.50">\n      <Nav />\n      <Box>{children}</Box>\n    </Box>\n  )\n}
\n

With that, you've added authentication to your application. However, you need a way to track the authentication state. You need to know if there is a logged-in user and do something with that information.

\n

Tracking Authentication State

\n

The SDK also provides error and user objects, along with isLoading and isAuthenticated booleans. You'll use these to track the authentication state.

\n

You can access information about an authenticated user, such as their email address, from the user object. If any, you can display error messages from the error object.

\n

isAuthenticated returns true if there is an authenticated user and false if there is not.

\n

We are currently rendering both the login and logout buttons in the Nav component. However, we don’t want that. We want to display the login button when there is no authenticated user and logout when there is an authenticated user.

\n

Let’s update the Nav.js file with the code below to fix that:

\n
import { Button, Flex, Stack } from "@chakra-ui/react"\nimport { useLRAuth } from "loginradius-react"\n\nexport default function Nav() {\n  const { isAuthenticated, user, loginWithRedirect, logout } = useLRAuth()\n  return (\n    <Flex as="nav">\n      <Stack spacing={[6, 8]}>\n        {!user && (\n          <Button onClick={() => loginWithRedirect()}>Login to continue</Button>\n        )}\n\n        {isAuthenticated && user && (\n          <Button onClick={() => logout()}>Log out</Button>\n        )}\n      </Stack>\n    </Flex>\n  )\n}
\n

We conditionally display the login and logout buttons based on the authentication state.

\n

If there is a logged-in user, we want to redirect them to the profile page.

\n

Navigate to pages/index.js file and update it with the code below:

\n
import { useEffect } from "react"\nimport { useRouter } from "next/router"\nimport { useLRAuth } from "loginradius-react"\nimport { Button, Heading, VStack, Center } from "@chakra-ui/react"\n\nexport default function Home() {\n  const { isLoading, isAuthenticated, error, user } = useLRAuth()\n  const router = useRouter()\n\n  useEffect(() => {\n    if (user && isAuthenticated) {\n      router.push("/profile")\n    }\n  }, [router, user, isAuthenticated])\n\n  if (isLoading) {\n    return <div>Loading...</div>\n  }\n\n  if (error) {\n    return <div>Oops... {error.message}</div>\n  }\n\n  return (\n    <Center pt={10}>\n      <VStack spacing={[6, 8]}>\n        <Heading as="h2">Welcome</Heading>\n        <Text fontSize="3xl">Login to continue</Text>\n      </VStack>\n    </Center>\n  )\n}
\n

Let’s break down the above code snippet:

\n\n

Displaying Authenticated User Data

\n

You have to display information about the authenticated user. Let’s set that up.\nCreate a profile.js file in the pages directory and paste the code below:

\n
import { Box, Center, Heading } from "@chakra-ui/react"\nimport { useLRAuth } from "loginradius-react"\n\nexport default function Profile() {\n  const { user, isLoading, isAuthenticated } = useLRAuth()\n\n  if (isLoading) {\n    return <div>Loading...</div>\n  }\n\n  if (isAuthenticated) {\n    return (\n      <Box>\n        <Center mt={10}>\n          <Heading a="h2">\n            Welcome to your profile {user.Email[0].Value}\n          </Heading>\n        </Center>\n      </Box>\n    )\n  }\n}
\n

You should display a user’s information if they're authenticated. Here, you check that they're authenticated with the isAuthenticated hook. If they're authenticated, return some JSX and display the user’s email address.

\n

Protecting a Route

\n

You can create protected routes to ensure only authenticated users can access those routes.

\n
import { withAuthenticationRequired } from "loginradius-react"\n\nconst Profile = () => {\n\tif (isAuthenticated) {\n\t\treturn (\n\t\t\t<Box\n\t\t\t\t...markup goes here\n\t\t\t</Box\n\t\t)\n\t}\n}\n\nexport default withAuthenticationRequired(Profile,\n\t//Show a message while the user waits to be redirected to the login page.\n\tonRedirecting: () => (\n\t\t<div>Redirecting you to LoginRadius awesome Login page</div>\n\t),\n});
\n

Here, the code snippet uses the withAuthenticationRequired higher-order component to wrap the Profile component. With this, anytime an unauthenticated user tries to access the /profile route, they'll be redirected to LoginRadius’s login page and then back to /profile after they log in.

\n

The image below shows an authenticated user's profile page.

\n

\n \n \n

\n

Conclusion

\n

In this tutorial, you have learned about user authentication and understood whether you should develop an authentication system in-house or use a modern identity platform like LoginRadius.

\n

Then, you have briefly learned different authentication patterns available in Next.js. And you step-by-step understood how to authenticate Next.js applications with LoginRadius’s React SDK.

\n

A working version of the code used in this tutorial is available on Github.

\n","frontmatter":{"date":"January 13, 2022","updated_date":null,"description":"This tutorial describes Next.js authentication patterns and helps you learn step-by-step how to authenticate a Next.js application.","title":"Your Ultimate Guide to Next.js Authentication","tags":["Authentication","React","Next.js","LoginRadius"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/cc1040bb014138d9f198e7e127d9c831/ee604/next-authentication.png","srcSet":"/static/cc1040bb014138d9f198e7e127d9c831/69585/next-authentication.png 200w,\n/static/cc1040bb014138d9f198e7e127d9c831/497c6/next-authentication.png 400w,\n/static/cc1040bb014138d9f198e7e127d9c831/ee604/next-authentication.png 800w,\n/static/cc1040bb014138d9f198e7e127d9c831/f3583/next-authentication.png 1200w,\n/static/cc1040bb014138d9f198e7e127d9c831/5707d/next-authentication.png 1600w,\n/static/cc1040bb014138d9f198e7e127d9c831/eeb1b/next-authentication.png 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Emadamerho-Atori Nefe","github":"nefejames","avatar":null}}}}]},"markdownRemark":{"excerpt":"Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards…","fields":{"slug":"/identity/developer-first-identity-provider-loginradius/"},"html":"

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.

\n

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.

\n

The goal? Having them spend less time searching and more time building.

\n

What’s New and Improved on the LoginRadius Website?

\n

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.

\n

Here’s a closer look at what’s new and why it’s important:

\n

A Developer-Friendly Dark Theme

\n

\"This

\n

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.

\n

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.

\n

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.

\n

Clear Categorization for LoginRadius Capabilities

\n

\"This

\n

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:

\n\n

This structured layout ensures you can quickly understand each capability and how it integrates into your identity ecosystem.

\n

Developer-First Navigation

\n

\"This

\n

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.

\n

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.

\n

Quick Understanding of Integration Benefits

\n

\"This

\n

Developers now have a clear view of the tech stack available with LoginRadius, designed to support diverse business needs.

\n

Our platform offers pre-built SDKs for Node.js, Python, Java, and more, making CIAM integration seamless across popular programming languages and frameworks.

\n

Over to You Now!

\n

Check out our revamped LoginRadius website and see how the improved experience makes it easier to build, scale, and secure your applications.

\n

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!

\n","frontmatter":{"date":"February 21, 2025","updated_date":null,"description":"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 redesigned our website interface, making navigation more intuitive and reassuring that essential resources are easily accessible.","title":"Revamped & Ready: Introducing the New Developer-First LoginRadius Website","tags":["Developer tools","API","Identity Management","User Authentication"],"pinned":true,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7857142857142858,"src":"/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp","srcSet":"/static/80b4e4fbe176a10a327d273504607f32/61e93/hero-section.webp 200w,\n/static/80b4e4fbe176a10a327d273504607f32/1f5c5/hero-section.webp 400w,\n/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp 800w,\n/static/80b4e4fbe176a10a327d273504607f32/99238/hero-section.webp 1200w,\n/static/80b4e4fbe176a10a327d273504607f32/7c22d/hero-section.webp 1600w,\n/static/80b4e4fbe176a10a327d273504607f32/1258b/hero-section.webp 2732w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.jpg"}}}},"pageContext":{"limit":6,"skip":312,"currentPage":53,"type":"///","numPages":161,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}