![\"RP-2022\"](\"/751ac241127c4800bbe4a3e228d82798/RP-2022.webp\")
We are thrilled to announce the release of our annual industry report, Consumer Digital Identity Trend Report 2022.
\nWe surveyed over 500 brands and 1.17 billion users worldwide from the LoginRadius Identity Platform to provide an in-depth analysis of the consumer data market, including changes in consumer behavior over time and their projected impact on business practices and IT requirements.
\nThe next few years will be a pivotal time for the digital consumer identity space. One critical aspect covered in this report is that consumers are evolving from the traditional registration model to a more personalized, easy to authenticate model that's secure. Keeping up is a challenge – and it requires businesses to adjust their identity management systems.
\nThe report findings highlight that if your business wants to stand out in a highly competitive world, you’ll need to make a huge improvement in your interactions with your customers. This means not just your interactions with them but also theirs with your brand, starting from registration to checkout.
\nBusinesses can achieve this by tailoring authentication and login methods to their customers' preferences, such as passwordless login or multi-factor authentication via email or SMS, or social sign-on.
\n
As a company strongly focused on CIAM, we analyzed our global customers over the past year, and discovered the following:
\nSome more findings of the report have been outlined in the infographic below.
\n![\"infographic-report-22\"](\"/c1f398c0fa9dcdf917e94019591e6bc6/infographic-report-22.webp\")
Overall, the CIAM trend report highlights:
\nCompanies that treat customer identity management as a strategic business process instead of an operational activity will have the advantage in today’s marketplace. These companies will be able to operate more efficiently through lower customer acquisition, onboarding, and support costs and higher customer retention rates.
\nIf you are trying to improve your customer experience, the finding of this report will definitely impact your bottom line.
\nDownload a complimentary copy of the LoginRadius Consumer Identity Trend Report here.
\n![\"book-a-demo-loginradius\"](\"/8fce571f703a5970dbb1359a2fe0e51a/book-a-demo-loginradius.webp\")
When your webapp has a large amount of data to visualize, you don't want your users to wait 10 seconds before seeing something.
\nOne technique that is often overlooked is HTTP streaming. It's broadly supported, works well, and doesn't require fancy libraries.
\nWe're going to go through how we can use HTTP streaming in our applications and what to consider when we do so.
\nWhen building web applications, we typically have a REST API with GET endpoints that do something like this:
\nThe API will typically wait for each step to complete before going on to the next one, and by step 4, the database result and the JSON objects are all in memory before the request is handled, and everything can be cleaned up.
\nThis works, and there is nothing wrong with it (KISS, right?) as long as your database query results are small and quickly available.
\nBut let's say you want to render a chart with 10k data points. Querying will not be as smooth anymore.\nThe simple way will work, but ideally, you don't want to accumulate all the data in memory before sending the response.
\nWith HTTP streaming, you can start rendering the chart even before your query is complete.
\nTo make it happen:
\nIn this example, we use Koa for the API, but you can use other libraries like Express or plain Node.js. Most will have support for streaming.
\nLet's create an API:
\nconst Koa = require('koa');\nconst app = new Koa();\n\napp.use(async (ctx) => {\n if (ctx.request.url === '/measurements.json') {\n ctx.response.set('content-type', 'application/json');\n // This is where the magic happens: set a stream as the response body\n ctx.body = fs.createReadStream('./measurements.json');\n }\n});\n\nhttp.createServer(app.callback()).listen(3000);This code creates an API with 1 endpoint GET /measurements that will respond with the contents of a JSON file with 10k measurements.
The file looks like this:
\n[\n { "id": "1", "timestamp": "2022-01-19T10:39:00.000Z", "value": 239.34 },\n { "id": "2", "timestamp": "2022-01-19T10:40:00.000Z", "value": 820.14 },\n { "id": "3", "timestamp": "2022-01-19T10:41:00.000Z", "value": 926.03 },\n { "id": "4", "timestamp": "2022-01-19T10:42:00.000Z", "value": 513.01 },\n // ...\n { "id": "99998", "timestamp": "2022-03-29T21:16:00.000Z", "value": 13.81 },\n { "id": "99999", "timestamp": "2022-03-29T21:17:00.000Z", "value": 465.28 },\n { "id": "100000", "timestamp": "2022-03-29T21:18:00.000Z", "value": 71.95 }\n]We're creating an HTTP/1.1 server with Node's http module. By setting ctx.body to a stream, data will be sent to the requester as soon as it is loaded using a mechanism called chunked transfer encoding.
This saves time and memory of your API because it doesn't have to accumulate the whole result in memory before sending the response.
\nIn a real application, you're probably using a database instead of a pre-created JSON file.\nIf you're using MongoDB, you can create a stream with the cursor's stream() method.
The GET /measurements endpoint we created can be consumed with any HTTP client, but you have to use the Fetch API to take advantage of streaming.
fetch() will set response.body to a ReadableStream for streaming responses.
Here's how you can read a streaming response:
\nfetch('http://localhost:3000/measurements.json')\n .then(async (response) => {\n // response.body is a ReadableStream\n const reader = response.body.getReader();\n for await (const chunk of readChunks(reader)) {\n console.log(`received chunk of size ${chunk.length}`);\n }\n });\n\n// readChunks() reads from the provided reader and yields the results into an async iterable\nfunction readChunks(reader) {\n return {\n async* [Symbol.asyncIterator]() {\n let readResult = await reader.read();\n while (!readResult.done) {\n yield readResult.value;\n readResult = await reader.read();\n }\n },\n };\n}If you run the API that we created and then run the code above in a web browser, you'll see received chunk of size x several times in the console with varying x:
![\"The](\"/75cf5afcae41ee6a1ea963da104389ff/console-received-chunk-of-size-x.gif\")
To see it more clearly, open up Developer Tools (F12) and set network throttling to 3G. It will take longer for the file to download, so you can see that the chunks are being processed gradually.
\nThat's all very nice, but the chunks themselves are not very useful. You want to process the measurements that are in these chunks. Ideally, you would have an async iterable that gradually yields the JSON objects as they come in so that you can use for await to iterate over the measurements instead of the chunks.
JavaScript doesn't have a JSON parser that can deal with streams. Let's assume we have a function that can do this called parseJsonStream(readableStream). More details and a simple implementation can be found in \"Streaming Considerations\" below.
We would then be able to do this:
\nfetch('http://localhost:3000/measurements.json')\n .then(async (response) => {\n let measurementsReceived = 0;\n for await (const measurement of parseJsonStream(response.body)) {\n measurementsReceived++;\n // To prevent the console from flooding we only show 1 in every 100 measurements\n if (measurementsReceived % 100 === 0) {\n console.log(`measurement with id {${measurement.id}} at time ${measurement.timestamp} has value [${measurement.value}]`);\n }\n }\n });This is the result:
\n![\"The](\"/e2d673ca68b3af5f9fa335ce755032ed/console-measurements.gif\")
This is a very powerful mechanism. Instead of console.log() statements, imagine a line chart where the measurements gradually become visible as more data comes in.
This is an example created with Apache ECharts:
\n![\"A](\"/76f92b76f2a2c36236b5610800abb88c/chart-loading-gradually.gif\")
Before the Fetch API, it was impossible to do this because the alternative, XMLHttpRequest, will load the whole response into memory before providing it to your code.
Modern applications don't use XMLHttpRequest directly, but a lot of libraries like Axios or Angular's HttpClient rely on it to make requests.
People would rely on more advanced technologies like WebSockets to stream data.
\nYou might have heard that HTTP/2 has a more efficient mechanism for streaming, and you would be right. So let's see if we can use HTTP/2.
\nFrom the side of your webapp, the browser will automatically determine if it can communicate with the server over HTTP/2 and use it if it's available. The Fetch API will do this transparently, so you do not need to make any changes to your webapp.
\nWhat you need to do is make your API available over HTTP/2:
\nconst Koa = require('koa');\nconst app = new Koa();\n\napp.use(async (ctx) => {\n if (ctx.request.url === '/measurements.json') {\n ctx.response.set('content-type', 'application/json');\n ctx.body = fs.createReadStream('./measurements.json');\n }\n});\n\nhttp2.createSecureServer(\n {\n key: fs.readFileSync(path.resolve('path/to/localhost-key.pem')),\n cert: fs.readFileSync(path.resolve('path/to/localhost.pem')),\n },\n app.callback(),\n).listen(3000);This code is mostly the same as for HTTP/1.1 with two notable differences:
\nhttp2 module instead of http.HTTPS instead of plain HTTP because this is mandatory for HTTP/2. You can set up HTTPS and get the cert and key files using mkcert. Or, use one of the other mechanisms described in this article: Use HTTPS for Local DevelopmentThat's it!
\nIf you restart the API and check the network tab in Developer Tools, you'll see that your application will now stream over HTTP/2 (don't forget to update the URL in your webapp, start with https:// instead of http://).
In the code above, we assumed that there was a function parseJsonStream(readableStream) that would parse a ReadableStream containing JSON into an async iterable of objects.
The difficulty is that reading from a ReadableStream will give you chunks of data that don't necessarily correspond to anything meaningful. To illustrate, let's take a look at this example:
[\n { "id": "1", "timestamp": "2022-01-19T10:39:00.000Z", "value": 239.34 },\n { "id": "2", "timestamp": "2022-01-19T10:40:00.000Z", "value": 820.14 },\n { "id": "3", "timestamp": "2022-01-19T10:41:00.000Z", "value": 926.03 },\n { "id": "4", "timestamp": "2022-01-19T10:42:00.000Z", "value": 513.01 }\n]We could receive this JSON in chunks like this:
\n[\n { "id": "1", "timestamp": "2022-01-19T10:39:00.000Z", "value": 239.34 },\n { "id": "2", "tim\n\n\n\n estamp": "2022-01-19T10:40:00.000Z", "value": 820.14 },\n { "id": "3", "timestamp": "2022-01-19T10:41:00.000Z", "value": 926.03 },\n { "id": "4", "timestamp": "2022-01-19T10:42\n\n\n\n:00.000Z", "value": 513.01 }\n]You need some way to determine where one measurement object starts and ends. To simplify this, we created a JSON file where each line contains precisely one object. Parsing the stream becomes manageable when we can make this assumption.
\nHere is the implementation of parseJsonStream(readableStream)
async function *parseJsonStream(readableStream) {\n for await (const line of readLines(readableStream.getReader())) {\n const trimmedLine = line.trim().replace(/,$/, '');\n\n if (trimmedLine !== '[' && trimmedLine !== ']') {\n yield JSON.parse(trimmedLine);\n }\n }\n}\n\nasync function *readLines(reader) {\n const textDecoder = new TextDecoder();\n let partOfLine = '';\n for await (const chunk of readChunks(reader)) {\n const chunkText = textDecoder.decode(chunk);\n const chunkLines = chunkText.split('\\n');\n if (chunkLines.length === 1) {\n partOfLine += chunkLines[0];\n } else if (chunkLines.length > 1) {\n yield partOfLine + chunkLines[0];\n for (let i=1; i < chunkLines.length - 1; i++) {\n yield chunkLines[i];\n }\n partOfLine = chunkLines[chunkLines.length - 1];\n }\n }\n}\n\nfunction readChunks(reader) {\n return {\n async* [Symbol.asyncIterator]() {\n let readResult = await reader.read();\n while (!readResult.done) {\n yield readResult.value;\n readResult = await reader.read();\n }\n },\n };\n}If you have control over the API you're calling, you can use the \"1 object per line\" formatting as part of the contract, but know that it could be prone to breaking. For robust JSON support, we need a real streaming parser.
\nOther options include using a format with one object per line by default, like CSV, or a more advanced format with built-in support for streaming like Apache Arrow.
\nError handling becomes more difficult because HTTP status code 200 will be sent as soon as streaming starts. What do we do when something goes wrong in the middle of the stream?
\nWhen something goes wrong, your API should close the stream. Your webapp can then determine if the stream was complete and show a fitting message to the user if it's not. For example: when using a JSON response, as we discussed, you can check that the last line contains only \"]\".
\nYou have learned how to stream HTTP data efficiently using Node.js and HTTP without congesting or burdening the memory. You have also understood the advantages and disadvantages of HTTP streaming.
\n","frontmatter":{"date":"April 27, 2022","updated_date":null,"description":"Do you know that you can stream HTTP data for efficient visualization? Learn more about how you can stream data with HTTP using Node.js and Fetch API.","title":"Implement HTTP Streaming with Node.js and Fetch API","tags":["Node.js","Fetch API","Streaming"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/e38eeb01b3a5ba1c6afe8f7ebbb43a6b/58556/http-streaming-with-nodejs-and-fetch-api.webp","srcSet":"/static/e38eeb01b3a5ba1c6afe8f7ebbb43a6b/61e93/http-streaming-with-nodejs-and-fetch-api.webp 200w,\n/static/e38eeb01b3a5ba1c6afe8f7ebbb43a6b/1f5c5/http-streaming-with-nodejs-and-fetch-api.webp 400w,\n/static/e38eeb01b3a5ba1c6afe8f7ebbb43a6b/58556/http-streaming-with-nodejs-and-fetch-api.webp 800w,\n/static/e38eeb01b3a5ba1c6afe8f7ebbb43a6b/99238/http-streaming-with-nodejs-and-fetch-api.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Nick Van Nieuwenhuyse","github":"Nivani","avatar":null}}}},{"node":{"excerpt":"Introduction It is an indisputable reality that authentication is critical in any application or system if you want to secure user data and…","fields":{"slug":"/engineering/guest-post/session-authentication-with-nestjs-and-mongodb/"},"html":"It is an indisputable reality that authentication is critical in any application or system if you want to secure user data and enable secure access to information. Authentication is the procedure of establishing or demonstrating that something is true, legitimate, or valid.
\nThis tutorial is a hands-on demonstration. To follow along, ensure you have the following in place:
\n\nNest (NestJS) is a Node.js server-side application framework for building scalable, efficient applications.
\nIt is written in TypeScript and built on Express, a very minimalistic framework that is great on its own but lacks structure. It combines programming paradigms such as object-oriented programming, functional programming, and functional reactive programming.
\nIt is a framework to use if you want a lot of structure on your backend. Its syntax and structure are very similar to AngularJS, a front-end framework. And it uses TypeScript, services, and dependency injection in the same way that AngularJS does.
\nIt employs modules and controllers, and you can build controllers for a file using the command-line interface.
\nNestJS modules allow you to group related controllers and service providers into a single code file. Simply put, a NestJS module is a TypeScript file with the @Module annotation (). This decorator informs the NestJS framework about which controllers, service providers, and other associated resources will be instantiated and used by the app code later.
\nSession-based authentication is a method of user authentication in which the server creates a session after a successful log-in, with the session ID stored in a cookie or local storage in your browser.
\nUpon subsequent requests, your cookie is validated against the session ID stored on the server. If there is a match, the request is considered valid and processed.
\nWhen using this authentication method, it is critical to keep the following security best practices in mind:
\nSession-based authentication is more secure than most authentication methods because it is simple, secure, and has a limited storage size. It is also thought to be the best option for websites in the same root domain.
\nStart your project setup by installing Nest CLI globally. You don’t need to do this if you already have NestJS CLI installed.
\nThe Nest CLI is a command-line interface tool for setting up, developing, and maintaining Nest applications.
\nnpm i -g @nestjs/cliNow, let’s set up your project by running the following command:
\nnest new session-based-authThe above command creates a Nest application with some boilerplates, then prompts you to choose your preferred package manager to install the required modules to run your application. For demonstration, this tutorial uses npm. Hit the enter key to continue with npm.
\n![\"Choose](\"/9382e66fea36e23b091b84e01a760db0/hDnzpIVA.webp\")
If everything went well, you should see an output like the one on the screenshot below on your terminal.
\n![\"Screenshot](\"/389af814b354994ea99495e669ae501b/Hv_Nxk_A.webp\")
Once the installation is complete, move into your project directory, and run the application with the command below:
\nnpm run start:devThe above command runs the application and watches for changes. Your project src folder structure should look as follows.
└───src\n│ └───app.controller.ts\n│ └───app.modules.ts\n│ └───app.service.ts\n│ └───main.tsNow that your application is set up, let's install the dependencies needed.
\nnpm install --save @nestjs/passport passport passport-localThe above command installs Passport.js, a popular nest.js authentication library.
\nAlso, install the types for the strategy with the command below:
\nIt contains type definitions for passport-local.
npm install --save-dev @types/passport-localTo set up and connect your database, install the Mongoose package and the NestJS wrapper with the following command:
\nnpm install --save @nestjs/mongoose mongooseThe Mongoose NestJS wrapper helps you use Mongoose in the NestJS application and gives approved TypeScript support.
\nNow, head over to your app.module.ts, and import the mongoose module from @nestjs/mongoose. Then call the forRoot() method, a method provided by the Mongoose module, and pass in your database URL string.
Setting up your database connection in app.module.ts helps your application connect to the database immediately as the server starts — after running your application since it’s the first module to be loaded.
app.module.ts
import { Module } from "@nestjs/common"\nimport { MongooseModule } from "@nestjs/mongoose"\nimport { AppController } from "./app.controller"\nimport { AppService } from "./app.service"\n\n@Module({\n imports: [\n MongooseModule.forRoot(\n "mongodb+srv://<username>:<password>@cluster0.kngtf.mongodb.net/session-auth?retryWrites=true&w=majority"\n ),\n ],\n controllers: [AppController],\n providers: [AppService],\n})\nexport class AppModule {}For separation concerns, to make your code clean and well organized, create a module specifically for users using the NestJS CLI by running the following command:
\nnest g module usersThe above command creates a users folder with users.module.ts and updates app.module.ts
Also, create users.service.ts and users.controller.ts files with the following commands:
nest g service users\nnest g controller usersNote that you can create your folders and files manually without using the nest CLI, but using the CLI automatically updates the necessary folders and makes your life easier.
\nThe next step is to create your UserSchema, but first, add a users.model.ts file, where you will create UserSchema
This should be the shape of our application src folder now.
└───src\n│ └───users\n│ │ └───users.controller.ts\n│ │ └───users.model.ts\n│ │ └───users.module.ts\n│ │ └───users.service.ts\n│ └───app.controller.ts\n│ └───app.module.ts\n│ └───app.service.ts\n│ └───main.tsTo create UserSchema, import everything as mongoose from the mongoose package in users.model.ts. Then call the new mongoose schema, a blueprint of the user Model, and pass in a JavaScript object where you will define the user object and data.
users.model.ts
import * as mongoose from "mongoose"\nexport const UserSchema = new mongoose.Schema(\n {\n username: {\n type: String,\n required: true,\n unique: true,\n },\n password: {\n type: String,\n required: true,\n },\n },\n { timestamps: true }\n)\n\nexport interface User extends mongoose.Document {\n _id: string;\n username: string;\n password: string;\n}Also, create an interface for your Model that extends mongoose, a document that helps you populate your MongoDB collections.
\nHead over to your users.module.ts and import MongooseModule in the imports array. Then call the forFeature() method provided by MongooseModule, and pass in an array of object that takes in name and schema.
This will enable you to share the file anywhere with the help of dependency injection.
\nusers.module.ts
import { Module } from "@nestjs/common"\nimport { MongooseModule } from "@nestjs/mongoose"\nimport { UsersController } from "./users.controller"\nimport { UserSchema } from "./users.model"\nimport { UsersService } from "./users.service"\n@Module({\n imports: [MongooseModule.forFeature([{ name: "user", schema: UserSchema }])],\n controllers: [UsersController],\n providers: [UsersService],\n})\nexport class UsersModule {}In users.module.ts, export the UsersService to enable you to access it in another module.
users.module.ts
import { Module } from "@nestjs/common"\nimport { MongooseModule } from "@nestjs/mongoose"\nimport { UsersController } from "./users.controller"\nimport { UserSchema } from "./users.model"\nimport { UsersService } from "./users.service"\n@Module({\n imports: [MongooseModule.forFeature([{ name: "user", schema: UserSchema }])],\n controllers: [UsersController],\n providers: [UsersService],\n exports: [UsersService],\n})\nexport class UsersModule {}It's usually a good idea to encapsulate the business logic in a separate class. Such a class is known as a service. The job of this class is to process the controller's requests and perform the business logic.
\nIn users.service.ts file, import Model from mongoose, User from users.model.ts, and InjectModel from @nestjs/mongoose. Then add a method to the UsersService class that takes a username and password, and call the method insertUser().
users.service.ts
import { Injectable } from '@nestjs/common';\nimport { InjectModel } from '@nestjs/mongoose';\nimport { Model } from 'mongoose';\nimport { User } from './users.model';\n@Injectable()\nexport class UsersService {\n constructor(@InjectModel('user') private readonly userModel: Model<User>) {}\n async insertUser(userName: string, password: string) {\n const username = userName.toLowerCase();\n const newUser = new this.userModel({\n username,\n password,\n });\n await newUser.save();\n return newUser;\n }\n}Now that the UsersService class is ready, you need to inject it into your controller. But first, let's talk about storing the users' passwords securely.
The most critical aspect of the registration procedure is the users’ passwords, which must not be saved in plain text. It is the responsibility of the user to create a strong password, but it is your obligation as a developer to keep their passwords secure. If a database breach occurs, the users' passwords would be exposed. And what happens if it’s stored in plain text? I believe you know the answer. To address this, hash the passwords using bcrypt.
\nSo, install bcrypt and @types/bcrypt with the following command:
npm install @types/bcrypt bcryptWith that out of the way, set up your controller. First, import your UsersService class and everything from bcrypt. Then add a constructor and a method that allows you to add a user; it will handle incoming post requests, call it addUser, with a function body where you'll hash the password.
users.controller.ts
import { Body, Controller, Post } from '@nestjs/common';\nimport { UsersService } from './users.service';\nimport * as bcrypt from 'bcrypt';\n@Controller('users')\nexport class UsersController {\n constructor(private readonly usersService: UsersService) {}\n //post / signup\n @Post('/signup')\n async addUser(\n @Body('password') userPassword: string,\n @Body('username') userName: string,\n ) {\n const saltOrRounds = 10;\n const hashedPassword = await bcrypt.hash(userPassword, saltOrRounds);\n const result = await this.usersService.insertUser(\n userName,\n hashedPassword,\n );\n return {\n msg: 'User successfully registered',\n userId: result.id,\n userName: result.username\n };\n }\n}The registration happens in the app.module.ts file, which is achieved by adding the UsersModule to the @Module() decorator's imports' array in app.module.ts.
app.module.ts
import { Module } from "@nestjs/common"\nimport { MongooseModule } from "@nestjs/mongoose"\nimport { AppController } from "./app.controller"\nimport { AppService } from "./app.service"\nimport { UsersModule } from "./users/users.module"\n\n@Module({\n imports: [\n MongooseModule.forRoot(\n "mongodb+srv://<username>:<password>@cluster0.kngtf.mongodb.net/session-auth?retryWrites=true&w=majority"\n ),\n UsersModule,\n ],\n controllers: [AppController],\n providers: [AppService],\n})\nexport class AppModule {}Congratulations! You are done with the registration. You can now register a user with a username and password.
\nNow, with registration out of the way, add a getUser function to your UsersService with the findOne method to find a user by username.
users.service.ts
import { Injectable } from '@nestjs/common';\nimport { InjectModel } from '@nestjs/mongoose';\nimport { Model } from 'mongoose';\nimport { User } from './users.model';\n@Injectable()\nexport class UsersService {\n constructor(@InjectModel('user') private readonly userModel: Model<User>) {}\n async insertUser(userName: string, password: string) {\n const username = userName.toLowerCase();\n const newUser = new this.userModel({\n username,\n password,\n });\n await newUser.save();\n return newUser;\n }\n async getUser(userName: string) {\n const username = userName.toLowerCase();\n const user = await this.userModel.findOne({ username });\n return user;\n }\n}Just as for users, create an auth module and service specifically for all the authentications/verifications. To do that, run the following commands:
\nnest g module auth\nnest g service authThe above will create an auth folder, auth.module.ts, and auth.service.ts, and update the auth.module.ts and app.module.ts files.
At this point, the shape of your application src folder should look as follows.
└───src\n│ └───auth\n│ │ └───auth.module.ts\n│ │ └───auth.service.ts\n│ └───users\n│ │ └───users.controller.ts\n│ │ └───users.model.ts\n│ │ └───users.module.ts\n│ │ └───users.service.ts\n│ └───app.controller.ts\n│ └───app.module.ts\n│ └───app.service.ts\n│ └───main.tsThe above generate command will update your app.module.ts, and it will look like the code snippet below:
app.module.ts
import { Module } from "@nestjs/common"\nimport { MongooseModule } from "@nestjs/mongoose"\nimport { AppController } from "./app.controller"\nimport { AppService } from "./app.service"\nimport { UsersModule } from "./users/users.module"\nimport { AuthModule } from './auth/auth.module';\n\n\n@Module({\n imports: [UsersModule, AuthModule, MongooseModule.forRoot(\n //database url string\n 'mongodb://localhost:27017/myapp'\n )],\n controllers: [AppController],\n providers: [AppService],\n})\nexport class AppModule {}Go to your auth.module.ts file and add UsersModule in the imports array to enable access to the UsersService exported from the users.module.ts file.
auth.module.ts
import { Module } from "@nestjs/common"\nimport { UsersModule } from "src/users/users.module"\nimport { AuthService } from "./auth.service"\n\n@Module({\n imports: [UsersModule],\n providers: [AuthService],\n})\nexport class AuthModule {}In your auth.service.ts file, call the constructor so you can inject the UsersService, and add a method for validation that will take a username and password.
To add some basic validations, check if the user exists in the database, and compare the given password with the one in your database to ensure it matches. If it exists, return the user in the request.user object — else, return null.
auth.service.ts
import { Injectable, NotAcceptableException } from '@nestjs/common';\n import { UsersService } from 'src/users/users.service';\n import * as bcrypt from 'bcrypt';\n\n @Injectable()\n export class AuthService {\n constructor(private readonly usersService: UsersService) {}\n async validateUser(username: string, password: string): Promise<any> {\n const user = await this.usersService.getUser(username);\n const passwordValid = await bcrypt.compare(password, user.password)\n if (!user) {\n throw new NotAcceptableException('could not find the user');\n }\n if (user && passwordValid) {\n return {\n userId: user.id,\n userName: user.username\n };\n }\n return null;\n }\n }Going further, create a new file and name it local.strategy.ts. This file will represent the strategy from Passport.js, which you installed earlier, that is the local strategy. And within it, pass in the strategy, which is the Strategy from passport-local.
Create a constructor and inject the AuthService, call the super() method; ensure to call the super() method.
local.strategy.ts
import { Injectable, UnauthorizedException } from '@nestjs/common';\n import { PassportStrategy } from '@nestjs/passport';\n import { Strategy } from 'passport-local';\n import { AuthService } from './auth.service';\n @Injectable()\n export class LocalStrategy extends PassportStrategy(Strategy) {\n constructor(private readonly authService: AuthService) {\n super();\n }\n async validate(username: string, password: string): Promise<any> {\n const userName = username.toLowerCase();\n const user = await this.authService.validateUser(userName, password);\n if (!user) {\n throw new UnauthorizedException();\n }\n return user;\n }\n }Go back to your auth.module.ts file. Then add PassportModule to imports and LocalStrategy to providers.
auth.module.ts
import { Module } from "@nestjs/common"\nimport { PassportModule } from "@nestjs/passport"\nimport { UsersModule } from "src/users/users.module"\nimport { AuthService } from "./auth.service"\nimport { LocalStrategy } from "./local.strategy"\n\n@Module({\n imports: [UsersModule, PassportModule],\n providers: [AuthService, LocalStrategy],\n})\nexport class AuthModule {}Now, add the login route to your users.controller.ts:
users.controller.ts
import {\n Body,\n Controller,\n Post,\n Request,\n } from '@nestjs/common';\n import * as bcrypt from 'bcrypt';\n import { UsersService } from './users.service';\n @Controller('users')\n export class UsersController {\n constructor(private readonly usersService: UsersService) {}\n //post / signup\n @Post('/signup')\n async addUser(\n @Body('password') userPassword: string,\n @Body('username') userName: string,\n ) {\n const saltOrRounds = 10;\n const hashedPassword = await bcrypt.hash(userPassword, saltOrRounds);\n const result = await this.usersService.insertUser(\n userName,\n hashedPassword,\n );\n return {\n msg: 'User successfully registered',\n userId: result.id,\n userName: result.username\n };\n }\n //Post / Login\n @Post('/login')\n login(@Request() req): any {\n return {User: req.user,\n msg: 'User logged in'};\n }\n }Now that you have all these put in place, you still cannot log in a user because there is nothing to trigger the login route. Here, use Guards to achieve that.
\nCreate a file and name it local.auth.guard.ts, then a class LocalAuthGuard that extends AuthGuard from NestJS/passport, where you will provide the name of the strategy and pass in the name of your strategy, local.
local.auth.guard.ts.
import { Injectable } from "@nestjs/common"\nimport { AuthGuard } from "@nestjs/passport"\n@Injectable()\nexport class LocalAuthGuard extends AuthGuard("local") {}Add the UseGuard decorator to your login route in the users.controller.ts file, and pass in the LocalAuthGuard.
users.controller.ts
import {\n Body,\n Controller,\n Post,\n UseGuards,\n Request,\n } from '@nestjs/common';\n import * as bcrypt from 'bcrypt';\n import { LocalAuthGuard } from 'src/auth/local.auth.guard';\n import { UsersService } from './users.service';\n @Controller('users')\n export class UsersController {\n constructor(private readonly usersService: UsersService) {}\n //post / signup\n @Post('/signup')\n async addUser(\n @Body('password') userPassword: string,\n @Body('username') userName: string,\n ) {\n const saltOrRounds = 10;\n const hashedPassword = await bcrypt.hash(userPassword, saltOrRounds);\n const result = await this.usersService.insertUser(\n userName,\n hashedPassword,\n );\n return {\n msg: 'User successfully registered',\n userId: result.id,\n userName: result.username\n };\n }\n //Post / Login\n @UseGuards(LocalAuthGuard)\n @Post('/login')\n login(@Request() req): any {\n return {User: req.user,\n msg: 'User logged in'};\n }\n }Finally, you can log in a user with a registered username and password.
\nYou have successfully set up user authentication. Now, protect your routes from unauthorized access by limiting access to just authenticated users. Go to your users.controller.ts file, and add another route — name it ‘protected’ and make it return the req.user object.
users.controller.ts
import {\n Body,\n Controller,\n Get,\n Post,\n UseGuards,\n Request,\n } from '@nestjs/common';\n import * as bcrypt from 'bcrypt';\n import { LocalAuthGuard } from 'src/auth/local.auth.guard';\n import { UsersService } from './users.service';\n @Controller('users')\n export class UsersController {\n constructor(private readonly usersService: UsersService) {}\n //signup\n @Post('/signup')\n async addUser(\n @Body('password') userPassword: string,\n @Body('username') userName: string,\n ) {\n const saltOrRounds = 10;\n const hashedPassword = await bcrypt.hash(userPassword, saltOrRounds);\n const result = await this.usersService.insertUser(\n userName,\n hashedPassword,\n );\n return {\n msg: 'User successfully registered',\n userId: result.id,\n userName: result.username\n };\n }\n //Post / Login\n @UseGuards(LocalAuthGuard)\n @Post('/login')\n login(@Request() req): any {\n return {User: req.user,\n msg: 'User logged in'};\n }\n // Get / protected\n @Get('/protected')\n getHello(@Request() req): string {\n return req.user;\n }\n }The protected route in the above code will return an empty object instead of returning the user’s details when a logged-in user makes a request to it because it already lost the login.
\nTo get that sorted, this is where the session-based authentication comes in.
\nIn session-based authentication, when a user logs in, the user is saved in a session so that any subsequent request by the user after login will grab the details from the session and grant the user easy access. The session expires when the user logs out.
\nTo start session-based auth, install express-session and the NestJS types using the following command:
\nnpm install express-session @types/express-sessionWhen the installation is completed, go to your main.ts file, the root of your application, and do the configurations there.
Import everything from passport and express-session, then add passport initialize and passport session.
It is preferable to keep your secret key in your environment variables.
\nmain.ts
import { NestFactory } from "@nestjs/core"\nimport { AppModule } from "./app.module"\nimport * as session from "express-session"\nimport * as passport from "passport"\nasync function bootstrap() {\n const app = await NestFactory.create(AppModule)\n app.use(\n session({\n secret: "keyboard",\n resave: false,\n saveUninitialized: false,\n })\n )\n app.use(passport.initialize())\n app.use(passport.session())\n\n await app.listen(3000)\n}\nbootstrap()Add a new file, authenticated.guard.ts, in your auth folder. And create a new Guard that checks if there is a session for the user making the request — name it authenticatedGuard.
authenticated.guard.ts
import { CanActivate, ExecutionContext, Injectable } from "@nestjs/common"\n\n@Injectable()\nexport class AuthenticatedGuard implements CanActivate {\n async canActivate(context: ExecutionContext) {\n const request = context.switchToHttp().getRequest()\n return request.isAuthenticated()\n }\n}In the above code, the request is gotten from the context and checked if authenticated. isAuthenticated() comes from passport.js automatically; it says. \"hey! does a session exist for this user? If so, keep going.\"
To trigger the login, in your users.controller.ts file:
authenticated from authenticated.guard.ts;useGuard decorator to the protected route; and,AuthenticatedGuard.users.controller.ts
import {\n Body,\n Controller,\n Get,\n Post,\n UseGuards,\n Request,\n } from '@nestjs/common';\n import * as bcrypt from 'bcrypt';\n import { AuthenticatedGuard } from 'src/auth/authenticated.guard';\n import { LocalAuthGuard } from 'src/auth/local.auth.guard';\n import { UsersService } from './users.service';\n @Controller('users')\n export class UsersController {\n constructor(private readonly usersService: UsersService) {}\n //signup\n @Post('/signup')\n async addUser(\n @Body('password') userPassword: string,\n @Body('username') userName: string,\n ) {\n const saltOrRounds = 10;\n const hashedPassword = await bcrypt.hash(userPassword, saltOrRounds);\n const result = await this.usersService.insertUser(\n userName,\n hashedPassword,\n );\n return {\n msg: 'User successfully registered',\n userId: result.id,\n userName: result.username\n };\n }\n //Post / Login\n @UseGuards(LocalAuthGuard)\n @Post('/login')\n login(@Request() req): any {\n return {User: req.user,\n msg: 'User logged in'};\n }\n //Get / protected\n @UseGuards(AuthenticatedGuard)\n @Get('/protected')\n getHello(@Request() req): string {\n return req.user;\n }\n }At this point, it still fails because you've only configured express-session but didn't implement it.
When a user logs in, you need to save the user in a session so that the user can access other routes with the session.
\nOne thing to keep in mind is that by default, the express-session library stores the session in the web server's memory.
Before it goes into the session, you need to serialize the user. As it comes out of the session, deserialize the user.
\nSo, create a new file in the auth folder for serializer and deserializer, name it session.serializer.ts.
At this point, the shape of our application src folder should look like this.
└───src\n │ └───auth\n │ │ └───auth.module.ts\n │ │ └───auth.service.ts\n │ │ └───authenticated.guard.ts\n │ │ └───local.auth.guard.ts\n │ │ └───local.strategy.ts\n │ │ └───session.serializer.ts\n │ └───users\n │ │ └───users.controller.ts\n │ │ └───users.model.ts\n │ │ └───users.module.ts\n │ │ └───users.service.ts\n │ └───app.controller.ts\n │ └───app.module.ts\n │ └───app.service.ts\n │ └───main.tssession.serializer.ts
import { Injectable } from "@nestjs/common"\nimport { PassportSerializer } from "@nestjs/passport"\n\n@Injectable()\nexport class SessionSerializer extends PassportSerializer {\n serializeUser(user: any, done: (err: Error, user: any) => void): any {\n done(null, user)\n }\n deserializeUser(\n payload: any,\n done: (err: Error, payload: string) => void\n ): any {\n done(null, payload)\n }\n}Go back to your auth.module.ts file, provide the SessionSerializer, and add the register method to the PassportModule.
auth.module.ts
import { Module } from "@nestjs/common"\nimport { PassportModule } from "@nestjs/passport"\nimport { UsersModule } from "src/users/users.module"\nimport { AuthService } from "./auth.service"\nimport { LocalStrategy } from "./local.strategy"\nimport { SessionSerializer } from "./session.serializer"\n\n@Module({\n imports: [UsersModule, PassportModule.register({ session: true })],\n providers: [AuthService, LocalStrategy, SessionSerializer],\n})\nexport class AuthModule {}Add some codes within the LocalAuthGuard in the local.auth.guard.ts file.
Call the login method in super and pass in the request to trigger the actual login by creating a session. If you want to use sessions, you must remember to trigger the super.login().
local.auth.guard.ts
import { ExecutionContext, Injectable } from '@nestjs/common';\n import { AuthGuard } from '@nestjs/passport';\n @Injectable()\n export class LocalAuthGuard extends AuthGuard('local') {\n async canActivate(context: ExecutionContext) {\n const result = (await super.canActivate(context)) as boolean;\n const request = context.switchToHttp().getRequest();\n await super.logIn(request);\n return result;\n }\n }If you log in now, you will see the session ID stored in a cookie, which is just a key to the session store, and the cookie gets saved in the browser. The cookie is automatically attached to the rest of the request.
\nNow that the session is working, you can access the protected route; it will return the expected user’s details.
\nAs mentioned earlier, once a user logs out, you destroy all sessions.
\nTo log out a user, go to the users.controller.ts file, add a logout route, and call the req.session.session() method. You can return a message notifying that the user’s session has ended.
import {\n Body,\n Controller,\n Get,\n Post,\n UseGuards,\n Request,\n } from '@nestjs/common';\n import * as bcrypt from 'bcrypt';\n import { AuthenticatedGuard } from 'src/auth/authenticated.guard';\n import { LocalAuthGuard } from 'src/auth/local.auth.guard';\n import { UsersService } from './users.service';\n @Controller('users')\n export class UsersController {\n constructor(private readonly usersService: UsersService) {}\n //signup\n @Post('/signup')\n async addUser(\n @Body('password') userPassword: string,\n @Body('username') userName: string,\n ) {\n const saltOrRounds = 10;\n const hashedPassword = await bcrypt.hash(userPassword, saltOrRounds);\n const result = await this.usersService.insertUser(\n userName,\n hashedPassword,\n );\n return {\n msg: 'User successfully registered',\n userId: result.id,\n userName: result.username\n };\n }\n //Post / Login\n @UseGuards(LocalAuthGuard)\n @Post('/login')\n login(@Request() req): any {\n return {User: req.user,\n msg: 'User logged in'};\n }\n //Get / protected\n @UseGuards(AuthenticatedGuard)\n @Get('/protected')\n getHello(@Request() req): string {\n return req.user;\n }\n //Get / logout\n @Get('/logout')\n logout(@Request() req): any {\n req.session.destroy();\n return { msg: 'The user session has ended' }\n }\n }So, once you log out, it returns a message notifying you that the user session has ended. The code for this tutorial is hosted here on my Github repository.
\nYou have successfully implemented user signup, authentication, and protected the route to enable authorized access only.
\nIt’s time to test the application. If everything is in order, your server should be running. Else, restart your server with the following command:
\nnpm run start:devHead over to your Postman. And let’s finally test our application.
\n![\"Sign](\"/f87197a117a591a4dcd924e350c53969/j38BmlHQ.webp\")
![\"Log](\"/a1da7b129971e3bf2b9cb9b2891265ec/p0GhcMPw.webp\")
![\"Logged-in](\"/226b87a1a542b8fff954b94e5ed5646e/mPo9j3Kg.webp\")
![\"Request](\"/dbde181cc57170a4abf48d50e815a1c1/kkX-6pFQ.webp\")
![\"User](\"/7c4bf4a2305d7df71b0b42dae13e855a/UZCy1IHQ.webp\")
LoginRadius provides a variety of registration and authentication services to assist you in better connecting with your consumers.
\nOn any web or mobile application, LoginRadius is the developer-friendly Identity Platform that delivers a complete set of APIs for authentication, identity verification, single sign-on, user management, and account protection capabilities like multi-factor authentication.
\nTo implement LoginRadius in your NestJS application, follow this tutorial: NestJS User Authentication with LoginRadius API.
\nCongratulations! In this tutorial, you've learned how to implement session-based authentication in a NestJS application with the MongoDB database. You've created and authenticated a user and protected your routes from unauthorized access.
\nYou can access the sample code used in this tutorial on GitHub.
\n\n\n","frontmatter":{"date":"April 26, 2022","updated_date":null,"description":"Want to implement user authentication for your NestJS apps? Follow this tutorial to learn how you can implement session-based authentication for your NestJS apps along with MongoDB.","title":"NestJS: How to Implement Session-Based User Authentication","tags":["Authentication","NestJS","MongoDB","Node.js"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/c08a732623e225933ce7293ad4d43437/58556/session-based-authentication-in-nestjs.webp","srcSet":"/static/c08a732623e225933ce7293ad4d43437/61e93/session-based-authentication-in-nestjs.webp 200w,\n/static/c08a732623e225933ce7293ad4d43437/1f5c5/session-based-authentication-in-nestjs.webp 400w,\n/static/c08a732623e225933ce7293ad4d43437/58556/session-based-authentication-in-nestjs.webp 800w,\n/static/c08a732623e225933ce7293ad4d43437/99238/session-based-authentication-in-nestjs.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Ekekenta Odionyenfe Clinton","github":"icode247","avatar":null}}}},{"node":{"excerpt":"Introduction With technology evolving leaps and bounds and businesses consistently emphasizing a seamless customer experience, customer…","fields":{"slug":"/growth/how-businesses-approach-customer-security/"},"html":"Note: Session storage is saved by default in 'MemoryStore,' which is not intended for production use. So, while no external datastore is required for development, once in production, a data store such as Redis or another is suggested for stability and performance. You can learn more about session storage here.
\n
With technology evolving leaps and bounds and businesses consistently emphasizing a seamless customer experience, customer security is often neglected.
\nBusinesses underestimate the importance of delivering rich consumer experiences backed with robust security. They believe customers aren’t concerned about their information security and how their personal information is managed.
\nHowever, a recent survey by Statista revealed that over 90% of global online users had at least one significant concern regarding data privacy. And around 47% of the total respondents were worried that their personal information could be exposed in a data breach.
\nSo does it mean every online business should focus more on customer security than improving overall consumer experience since balancing both aspects (security & UX) is tricky, especially when competitors are just a click away?
\nNo! Businesses can leverage a cutting-edge consumer identity and access management (CIAM) solution that creates a perfect balance between customer security and customer experience.
\nLet’s uncover the aspects of a robust CIAM solution and how it helps businesses stay ahead of their competitors.
\nIn the past couple of years, consumers have gotten a big wake-up call about the value of their data and the risks they run if it’s leaked, stolen, or misused.
\nMoreover, several high-profile hacks and breaches have generated widespread awareness of how negligent enterprises can be. And consumers are much more careful about which brands they do business with.
\nOn the other hand, stringent consumer privacy legislation has spread to new jurisdictions, such as the General Data Protection Regulation (GDPR). Even the most prominent companies aren’t exempted from significant fines.
\nIf consumers don’t trust your business to protect their data and accounts, they’ll find another one. The digital world makes it easy for them to switch providers within a few clicks.
\nTo keep pace with the ever-growing digital world, enterprises need to create a perfect harmony of a great user experience and robust security.
\nThis can be achieved by leveraging a consumer identity and access management (CIAM) solution like LoginRadius.
\nThe cutting-edge technology coupled with a great user experience from the beginning when your consumers first interact with your brand helps build consumer trust that guarantees conversion.
\nMoreover, the best-in-class security that comes with the LoginRadius Identity Platform lets you assure your consumers of how vigilant you are about data privacy and security.
\nAn omnichannel consumer experience refers to seamless interaction across multiple channels. Consumer expectations fall into speed, flexibility, reliability, and transparency.
\nFor example, it is omnichannel when marketing, sales, consumer support, and even in-store experiences are synced up so users can seamlessly switch channels and make the purchase.
\n![\"EB-omnichannel\"](\"/d5d452c185b8b02d0349db4bfacccd22/EB-omnichannel.webp\")
A single consumer view (also known as SCV) is where all consumers' data is stored securely and presented as an easy-to-read record.
\nThat may include the basic information about a consumer, the past and present purchasing data, interactions with customer service, and their social media behavior under a single admin panel. It assists brands in having an in-depth insight into their consumers.
\nIn an age where sensational hacking and malicious attacks have become the order of the day, enhanced safeguard against the ever-looming threats is indispensable.
\nBy adding multiple layers of shields in the form of multi-factor authentication (MFA) and risk-based authentication (RBA), the new-age CIAM strengthens security. Thus, the entire cluster of data remains protected from the prying eyes or, for that matter, falling prey to data trackers.
\nLoginRadius' modern CIAM solution is designed to be more flexible and intuitive. It addresses every subtle component that can improve consumers' experience while also providing an unmatched safeguard for private data.
\nWhat puts LoginRadius ahead of the curve are the three most fundamental aspects:
\nWith the high number of cybersecurity threats affecting global businesses, it’s high time business leaders need to incorporate stringent security mechanisms to ensure consumer data remains secure.
\nMoreover, at the same time, equal emphasis should be given to delivering rich consumer experiences since today’s consumers are always seeking great usability across every online platform.
\nHence, the critical role of a CIAM solution in enhancing customer security and improving consumer experience can’t be overlooked.
\nBusinesses need to invoke the potential of a reliable CIAM like LoginRadius to ensure they get perfect harmony of user experience and security.
\n
Phishing attacks aren’t uncommon, and we’ve all witnessed fake emails and messages that demand urgent attention at least once. However, there’s much more in the cybersecurity landscape than just conventional email practices when it comes to phishing.
\nA phishing attack can be a death blow for enterprises that don't take the necessary precautions. The top line is affected, but the brand's image and trust can be obliterated if news of a data breach reaches the public.
\nThe browser in the browser attack (BITB) is the latest form of phishing scam that simulates a browser window within a web browser and steals sensitive user information.
\nThe user is catered with a fraudulent pop-up window that asks for their credentials for signing into the website in the previous web browser window and thus leads to identity theft.
\nLet’s understand the aspects of Browser in-browser attacks and how businesses can ensure stringent security for their consumers and employees to protect against these attacks.
\nWhenever a user chooses a single sign-on (SSO) option in a website or web application for signing in to their account for multiple interconnected applications, the fraudulent pop-up will be displayed to collect sensitive information about the user, including login credentials.
\nMoreover, the significant difference between a phishing scam and a BIBT attack is that the pop-up window during the sign-in process would show any URL that matches the authentic one.
\nIn a nutshell, cybercriminals simulate a web browser window within a web browser for spoofing a legitimate domain. This attack majorly exploits the single sign-on (SSO) option, which users always prefer to stay logged in to different interconnected websites or applications.
\nUsers don’t wish to remember long credentials. They are hesitant to provide their credentials again and again, which gives an advantage to cybercriminals as they exploit the single sign-on login preference since users can’t differentiate between a fake domain or a legitimate one once a pop-up window appears.
\nVarious businesses offering single sign-on to their consumers for a seamless user experience across their multiple applications are always at a higher risk of compromising sensitive consumer information by falling prey to these browsers in the browser attacks.
\nHowever, the businesses offering SSO capabilities must understand the risks associated with SSO and incorporate stringent security mechanisms to protect their consumer information.
\nSince SSO has provided endless opportunities to businesses and consumers, avoiding the use of SSO isn’t a great option at all.
\nAdding multiple layers of security while implementing single sign-on (SSO) could help businesses prevent browser in the browser attacks and help mitigate other associated risks.
\n![\"DS-SSO\"](\"/970abf5b3c4e78379ad5bf97a519b62c/DS-SSO.webp\")
Let’s understand how businesses can reinforce security against BITB attacks.
\nMulti-factor authentication (or MFA) is a multi-layered security system that verifies the identity of users for login or other transactions.
\nBy leveraging multiple authentication layers, the user account will remain secure even if one element is damaged or disabled.
\nCodes generated by smartphone apps, answers to personal security questions, codes sent to an email address, fingerprints, etc., are a few examples of multi-factor authentication implemented in day-to-day scenarios.
\nAdding MFA to your security policy could prevent your users from compromising their identities during a browser in the browser attack but also helps ensure robust safety for your sensitive business information.
\nThe use of software and even hardware tokens for dual identity verification is a highly-efficient way of reinforcing security against BITB attacks.
\nRisk-based authentication or adaptive authentication is the one-stop solution for preventing browser in the browser attacks.
\nRBA is a method of applying various levels of stringency to authentication processes based on the likelihood that access to a given system could be compromised. As the level of risk increases, authentication becomes more restrictive.
\nHence, RBA automatically incorporates another layer of authentication in a high-risk situation like a BITB attack, and the user’s identity remains protected.
\nRisk-based authentication can be incorporated through a cloud-based consumer identity and access management (CIAM) platform that restricts unauthorized access even if the users leverage single sign-on capabilities.
\nZero trust is the security concept based on a belief that enterprises shouldn’t automatically trust any device or individual, whether inside or outside its perimeters and strictly verify everything before granting access.
\nIn a nutshell, zero trust relies on the principle of “don’t trust anyone.” This architecture cuts all the access points until proper verification is done and trust is established.
\nNo access is provided until the system verifies the individual or device demanding access to the IP address, device, or storage.
\nSince global businesses face enormous challenges when it comes to ensuring robust security for their consumers, relying on MFA, RBA, and zero trust architecture can provide the highest level of security when it comes to preventing browser in the browser attacks.
\nBusinesses can choose a reliable CIAM solution like LoginRadius that helps brands secure their consumer identities by leveraging the true potential of multi-factor authentication, risk-based authentication, and zero trust architecture.
\nIf you wish to see the future of CIAM in action and understand how it works for your brand, reach us to schedule a personalized demo.
\n
With enterprises inclining towards a cookieless business landscape, managing privacy and compliance with transparency become the need of the hour.
\nMoreover, various legislation, including EU’s GDPR and California’s CCPA, are becoming increasingly stringent regarding businesses collecting, storing, and managing consumer information.
\nHence, businesses need to gear up for the new reality and ensure they create a perfect harmony while adhering to the regulatory compliances and delivering a seamless user experience simultaneously.
\nBut, how would businesses swiftly adopt the change? Because almost every business is reliant on cookies for personalized user experiences and going cookieless all of a sudden could be stressful.
\nSo, how can businesses adopt this new shift while ensuring they remain compliant and do not compromise user experience while collecting crucial data?
\nLet’s look at some crucial aspects that businesses must adapt to remain compliant and grow in a cookieless world.
\nBefore learning about cookieless, let's understand what cookies are and how they’re helping businesses derive growth.
\nCookies are small portions of data stored on a user’s web browser, and websites utilize these cookies to enhance user experience through personalization.
\nBusinesses have been using cookies for decades since they help them understand their consumers better and further help them plan a winning strategy for their business growth.
\nNow talking about going cookieless describes a marketing process through which marketers aren’t relying much on cookies. In a nutshell, cookies aren’t collected for marketing purposes.
\nThe multinational technology giant Apple has already adopted the cookieless architecture. Apple’s Safari web browser is considered the only web browser that delivers the highest level of privacy to its users.
\nHowever, just like Safari, Google has also planned to jump on the cookieless bandwagon and is working to enhance privacy and compliance for its users.
\nSo, what does this entire scenario portray?
\nThough consumers are concerned about how their data is used online and demand more control over it, major companies are already blocking third-party cookies, thus impacting customer privacy and compliance.
\nHowever, on the other hand, blocking third-party cookies that are majorly used for marketing, personalization, and new customer acquisition purposes would undoubtedly impact many businesses online.
\nSince we’ve discussed all the aspects of a cookieless world, let’s talk about what online businesses can do to prosper and stay compliant.
\nOne of the crucial aspects that business owners need to understand is that transparency is the key to winning consumer trust.
\nTrust has to be earned, for which online businesses should be transparent about the collection, storage, and use of consumer data.
\nUnless businesses don’t offer complete transparency, earning consumer trust would be an uphill battle since the ones offering full transparency would be on the right path to meeting the privacy and compliance regulations and would eventually have users that share their details without any hassle.
\nSince businesses won’t be able to rely much on cookies, progressive profiling could be the game-changer for them as it allows users to gather crucial information gradually.
\nProgressive profiling is the method of collecting personal information about the client step-by-step. It helps the digital marketing team streamline the lead nurturing process by gathering increasingly specific client data without hampering privacy and compliance regulations.
\n![\"EB-progressive-profiling\"](\"/0043785bf2e3f481635df5ab85c16842/EB-progressive-profiling.webp\")
Progressive profiling allows marketers to collect critical information about their clientele and build unique consumer personas. It helps determine where a particular consumer is in the buying journey and decide the best course of action to move them towards the final purchasing stage.
\nAnd yes, all these things can be done by taking the user's consent so that they need not worry regarding their privacy.
\nA rich consumer experience can help businesses build trust, encouraging them to share their data even if cookies aren’t collected.
\nAs we all know that the attention span of users is decreasing consistently, businesses that aren’t able to impress their users in a couple of seconds would lose the game.
\nHence, businesses relying on conventional user interfaces that bombard users with a lengthy registration form would lag behind their competitors. An intelligent user interface that collects data gradually by adhering to the privacy and compliance regulations and doesn’t hamper user experience is undeniably the need of the hour.
\nIn a nutshell, businesses can ask for users’ consent if they deliver them a flawless user interface where users can quickly access the consent banner and customize their preferences.
\nThe cookieless world isn’t hyped since more and more web browsers are following the trend ever since Apple’s Safari has taken stringent measures regarding the collection of third-party cookies.
\nBusinesses that deliver personalized experiences based on user cookies would now have to find alternatives. Hence, the aspects mentioned above could help them deliver rich consumer experiences and maintain privacy and compliance even in challenging situations.
\n
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.
\nWe’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.
\nThe goal? Having them spend less time searching and more time building.
\nLoginRadius’ 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.
\nHere’s a closer look at what’s new and why it’s important:
\n![\"This](\"/f46881583c7518a93bb24e94c32320de/a-developer-friendly-dark-theme.webp\")
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.
\nThe 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.
\nSo, 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![\"This](\"/e5358b82be414940f3fb146013845933/capabilities.webp\")
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:
\nThis structured layout ensures you can quickly understand each capability and how it integrates into your identity ecosystem.
\n![\"This](\"/a8c155c2b6faf3d5f4b4de4e2b14d763/developers-menu.webp\")
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.
\nThe 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![\"This](\"/b2f9a964a2da0ea83e2f8596b833bba7/we-support-your-tech-stack.webp\")
Developers now have a clear view of the tech stack available with LoginRadius, designed to support diverse business needs.
\nOur platform offers pre-built SDKs for Node.js, Python, Java, and more, making CIAM integration seamless across popular programming languages and frameworks.
\nCheck out our revamped LoginRadius website and see how the improved experience makes it easier to build, scale, and secure your applications.
\nDo 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.webp"}}}},"pageContext":{"limit":6,"skip":282,"currentPage":48,"type":"///","numPages":164,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}