![\"cl-1\"](\"/67d6d5324720ac782e34b94e966787f3/cl-1.webp\")
LoginRadius is one of the leading and technologically advanced Customer Identity and Access Management (CIAM) solutions. Enterprise customers rely on our CIAM to manage end-user authentication and authorization. They typically serve hundreds of thousands to millions of end-users, making our CIAM a critical part of their IT infrastructure and value delivery.
\nOur backend consists of multiple microservices handling various identity and access management functions and workflows through APIs. And we use MongoDB as persistent storage for configuration data. For faster access and availability of this data, we deployed Redis in-memory cache through Redis Enterprise Cloud.
\nWe had our configuration cache set up in Redis Cloud. And to reduce the Redis Cloud latency, we kept the configuration cache at the application level in memory — but we ran into problems.
\nGenerally, customers don’t update their configurations so frequently. But when a customer updates their configuration, it doesn’t propagate in the backend until the server memory cache is purged — sometimes even taking several hours.
\nThis is bad for business: A customer updates configurations in response to a new requirement or rapidly changing business environment. If these changes take so much time for a digital identity process, it can affect end-users and, in turn, business outcomes. Simply imagine that a customer updated app configuration to accommodate a one-time flash sale, and end-users can’t place orders properly due to configuration update issues!
\nSo, we started evaluating various options to address these issues. We considered running multiple instances in the Redis Cloud and synchronizing them to minimize latency for all regions while ensuring customer configuration updates go live immediately. But this proved to be technically cumbersome and costly.
\nWe continued our research with various solutions and concluded that AWS ElastiCache for Redis best serves our needs.
\nAWS provides ElastiCache for Redis as a Redis Cloud alternative with all necessary capabilities. Also, we were already using AWS Cloud for some of our IT infrastructure needs.\nSo, we can deploy ElastiCache alongside the same infrastructure to solve the latency issues.
\nAccordingly, we have created ElastiCache instances in multiple AWS regions and set up the primary ElastiCache DB to quickly sync configuration updates in the secondary ElastiCache instances. Also, we deployed ElastiCache instances in multiple locations as needed.
\nFor migration, we updated the old Redis and ElastiCache primary instances simultaneously. Once we reached a sufficient confidence level with the new setup, we completely switched over to ElastiCache.
\nOur applications and cache are deployed in AWS, so our API response latency is no longer problematic. Ultimately, we can reduce application in memory cache updates to a few minutes or seconds as required.
\nNow customers get updated configurations deployed rapidly, solving our primary challenge!
\n","frontmatter":{"date":"August 09, 2023","updated_date":null,"description":"ElastiCache’s capabilities are better suited than Redis Cloud for our technical requirements and use cases, especially better scalability and pricing.","title":"Breaking Down the Decision: Why We Chose AWS ElastiCache Over Redis Cloud","tags":["Cache","AWS","Redis","LoginRadius"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/c24493552cd32d4940767196408ef18d/58556/migrating-to-aws-elasticache-for-redis.webp","srcSet":"/static/c24493552cd32d4940767196408ef18d/61e93/migrating-to-aws-elasticache-for-redis.webp 200w,\n/static/c24493552cd32d4940767196408ef18d/1f5c5/migrating-to-aws-elasticache-for-redis.webp 400w,\n/static/c24493552cd32d4940767196408ef18d/58556/migrating-to-aws-elasticache-for-redis.webp 800w,\n/static/c24493552cd32d4940767196408ef18d/99238/migrating-to-aws-elasticache-for-redis.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},{"node":{"excerpt":"Introduction As a developer, I like to work on the terminal. Many developers are the same way. Instead of scrolling, clicking the mouse…","fields":{"slug":"/engineering/loginradius-launches-cli-enterprise-dashboard/"},"html":"As a developer, I like to work on the terminal. Many developers are the same way. Instead of scrolling, clicking the mouse, they prefer working with only keywords (through commands or shortcuts). The command-line interface (CLI) is a great tool for them.
\nSo, LoginRadius has launched a CLI for its enterprise dashboard. The CLI makes it easier by using some commands to perform different operations and manage the flow of the LoginRadius Enterprise dashboard.
\nWe always look for ways to eliminate resistance from the process of working with LoginRadius. Therefore, we have taken this step to introduce LoginRadius CLI for a better developer experience.
\nIn the 1970s and 1980s, most users preferred to use command-line interfaces. As time passed, we shifted to graphical user interfaces. GUIs are user-friendly; however, CLIs are faster than GUIs. Here is an example of adding domain via Admin Console v/s CLI :
\nTo add a domain through LoginRadius Admin Console, you need to: \\
\nOn the flip side, you can do this by running a single command:
\n
Here are some more of LoginRadius CLI Enterprise's commands:
\n1. Login/Logout to your LoginRadius Dashboard
\n![\"cl-2\"](\"/01565dd7e2484e66c193d5d6726b7119/cl-2.webp\")
This command (lr login) will help you to login to your LoginRadius Enterprise Dashboard. Once logged in, you can perform other operations and configure your LoginRadius Application through CLI.
\n2. Manage Application Credentials
\n![\"cl-3\"](\"/5b47bcb23907c1e51ddc8c7ffdc53bed/cl-3.webp\")
You can get our App Credentials, reset Secret key, update account password and generate SOTT through LoginRadius CLI.
\nSet Schema for Your LoginRadius Application
\n![\"4\"](\"/2501425e8f674fbe52df7a98bd4b0050/4.webp\")
This command will help you set the schema for your application. We can get all the basic fields via lr get schema we can update the schema via lr set schema.
\nTheme Management (LoginRadius Page)
\n![\"cl-5\"](\"/f297c11ec61efcb4ae3852aa5923e800/cl-5.webp\")
You can update the LoginRadius IDX Page(Hosted Page) from the available themes through LoginRadius CLI commands.
\nLearn More LoginRadius CLI Enterprise Commands
\nRun lr – help for available commands. For more details about commands please check out the documentation.
\nThe LoginRadius CLI is available for Windows, Linux, and MacOS. Check out the installation instructions for your Operating System on our README Page.
\nWe hope you will love trying LoginRadius CLI for Enterprise Dashboard. We will add and explore more features in the future. Needless to say, for developers who like working with terminals and prefer to type commands, LoginRadius CLI will be a great experience.
\nWe are eager to know your feedback, test cases and also what we can bring up next in our CLI. If you have any suggestions, please create an issue on our open source github repository.
\n![\"book-a-free-demo-loginradius\"](\"/8fce571f703a5970dbb1359a2fe0e51a/book-a-demo-loginradius.webp\")
It is essential to protect your APIs for a secure experience, and JSON Web Token (JWT) authentication allows you to protect your APIs so that an unauthorized person will not have access.
\nThis is a hands-on tutorial to follow. To get the most out of it, ensure you have:
\nDeno is developed in Rust. It is a modern runtime environment for JavaScript/TypeScript and a WebAssembly that uses the Google V8 engine. It is simple and safe. It implements web platform standards and provides web platform capabilities.
\nDeno’s features are intended to enhance Node.js’s capabilities. It’s secure by default, with no access to files, networks, or the environment except explicitly enabled. And it supports both JavaScript and TypeScript out of the box.
\nDeno is a well-thought-out modular system. Apart from its simplicity and high security, there are so many other reasons to use Deno:
\nJSON Web Token, popularly called JWT, is an open standard that offers a concise and self-contained method for securely transferring data between parties as a JSON object. It holds information in an easy-to-access format for developers and computers; the token's compact size makes it simple to send through URL, POST parameter, or HTTP header. It allows two parties — a client and a server — to share information securely. A secret or public/private key pair is used to digitally sign the information in a JWT.
\nAuthentication is the primary use of JWT. It is assigned to a user after they sign in to an application, and with the assigned JWT, a user can request other routes.
\nWithout too many shenanigans, let's start by installing Deno!
\nDeno installation in Windows isn't as smooth sailing as on Mac or Linux. Unlike in Node.js, where you run a command on your terminal, Deno in Windows can be installed using PowerShell, Scoop (a command-line installer), or Chocolatey (a package manager). Click here for the guide on how to install Deno.
\nTo install Deno with PowerShell, open your PowerShell and run the following command:
\niwr https://deno.land/x/install/install.ps1 -useb | iexRelax while Deno is being installed. When completed, exit PowerShell and close and reopen a terminal. The new PATH is activated by closing and reopening the terminal. Now that you have installed Deno, let's check the version of Deno.
\nTo check the version of your installed Deno, run: deno -V
With installation out of the way, let us set up your project. Create a folder DenoAPI_JWT_Auth; you can call it any name you choose. Create an app.ts file and a folder src in your folder.
Inside your src folder, create the following folders: controllers, database, middlewares, routes, schema, and utils.
Your project directory should look as follows:
\nDenoAPI_JWT_Auth
│\n└─src
\n│ └───controllers
\n│ │\n│ └───database
\n│ │\n│ └───middlewares
\n│ │\n│ └───routes
\n│ │\n│ └───schema
\n│ │\n│ └───utils
\n└─app.ts
Next is to create your Oak server. Oak is a Deno middleware system that provides a router middleware for HTTP servers.
\nGo to app.ts, import Application from the Deno Oak URL, create an instance of the application, define your port, and call a middleware, as follows.
app.ts
import { Application } from "https://deno.land/x/oak/mod.ts";\n\nconst app = new Application();\nconst PORT = 8080;\n\n app.use((ctx, next) => {\n ctx.response.body = 'Welcome';\n next();\n });\n\nconsole.log(`Application is listening on port: ${PORT}`);\n\nawait app.listen({port:PORT});Let's quickly run your server: to run the server, use deno run --allow-net app.ts
Deno will always request permission to use your network. --allow-net gives Deno permission to all network calls.
You should see Application is listening on port: 8080
Now, in your routes folder, create a file called allRoutes.ts, and set up your router by importing Router from the oak URL, then create an instance of the router and export the default router.
routes.allRoutes.ts
import { Router } from "https://deno.land/x/oak/mod.ts";\n\nconst router = new Router();\n\nexport default router;Moving on, you need to modify app.ts. So, go to app.ts and import the router. Let the app use router.routes() and router.allowedMethods() methods, then remove the middleware, so it doesn't overshadow the imported routes. The allowedMethods() tells Deno to include all routes by your router.
app.ts
import { Application } from "https://deno.land/x/oak/mod.ts";\nimport router from "./src/routes/allRoutes.ts";\n\nconst app = new Application();\nconst PORT = 8080;\n\napp.use(router.routes());\napp.use(router.allowedMethods());\n\nconsole.log(`Application is listening on port: ${PORT}`);\n\nawait app.listen({port:PORT});You can rerun your app with the same command: deno run --allow-net app.ts
Now, you need to create user data. But before that, let's connect your application to the MongoDB database.
\ndatabase folderconnectBD.tsdatabase.connectDB.ts
import { MongoClient } from "https://deno.land/x/mongo@v0.30.0/mod.ts";\n\n // Connecting to a Mongo Database\n const client = new MongoClient();\n \n const dbString = "DB_String"\n\n await client.connect(dbString)\n \n console.log("Database connected!");\n \n const db = client.database("deno_auth");\n\n export default db;\n With that out of the way, let's create an interface for your database.
\nIn your schema folder, create a file user.ts, import objectId from deno MongoDB URL, then define and export your schema.
schema.user.ts
import {ObjectId} from "https://deno.land/x/mongo@v0.30.0/mod.ts";\n\nexport interface UserSchema {\n _id: ObjectId;\n username: string;\n password: string;\n }Let's play with some logic: go to your controllers folder, and create a file called users.ts. In the file, import your database and UserSchema.
It's not a good practice to store your password in plain text for security reasons. To has your password, let's import bcrypt from the deno bcrypt URL.
\nSo, create a function called signup that takes username and password. Take the user details from the request body, hash the password, and save them to your database.
controllers.users.ts
import db from "../database/connectBD.ts";\nimport * as bcrypt from "https://deno.land/x/bcrypt/mod.ts";\nimport { UserSchema } from "../schema/user.ts";\n\nconst Users = db.collection<UserSchema>("users");\n\nexport const signup = async({request, response}:{request:any;response:any}) => {\n const {username, password} = await request.body().value;\n const salt = await bcrypt.genSalt(8);\n const hashedPassword = await bcrypt.hash(password, salt);\n\n const _id = await Users.insertOne({\n username,\n password:hashedPassword\n });\n response.status =201;\n response.body = {message: "User created", userId:_id, user:username}\n \n};Now, head over to allRoutes.ts in your routes folder, import the signup function from the controller, and create a POST route for signup, as follows.
routes.allRoutes.ts
import { Router } from "https://deno.land/x/oak/mod.ts";\nimport {signup} from "../controllers/users.ts";\n\nconst router = new Router();\n\n//User routes\nrouter.post("/api/signup", signup)\n\nexport default router;Next, create an authentication route that authenticates your user route. The latest version of Deno does not allow a string as a secret key but accepts a cryptokey generated from a Web Crypto API with the generatekey() method of the SubtleCrypto interface.
So, head over to your utils folder, create a file called apiKey.ts, and in the file, generate your key and export it, as follows.
utils.apiKey.ts
export const key = await crypto.subtle.generateKey(\n { name: "HMAC", hash: "SHA-512" },\n true,\n ["sign", "verify"],\n );Now that you have successfully created your key, you can create a user authentication route so that every user that logs in will get authenticated.
\nHead over to user.ts in your controller, import the API key, create a signin function, and write some validation logic to validate that the user exists in your database. If validation is successful, you create a token to authenticate the user.
Now, let's import Deno JWT (djwt) create function from the URL to create a token. When a user logs in, take the id and username, pass the payload into the JWT create function, generate a token, and use the token to authenticate the user.
controllers.users.ts
import db from "../database/connectDB.ts";\nimport * as bcrypt from "https://deno.land/x/bcrypt/mod.ts";\nimport { UserSchema } from "../schema/user.ts";\nimport { create } from "https://deno.land/x/djwt@v2.4/mod.ts";\nimport { key } from "../utils/apiKey.ts";\n\nconst Users = db.collection<UserSchema>("users");\n\n //create a user\n export const signup = async({request, response}:{request:any;response:any}) => {\n const {username, password} = await request.body().value;\n const salt = await bcrypt.genSalt(8);\n const hashedPassword = await bcrypt.hash(password, salt);\n\n const _id = await Users.insertOne({\n username,\n password:hashedPassword\n });\n response.status =201;\n response.body = {message: "User created", userId:_id, user:username} \n};\n\n //sign in a user\n export const signin = async ({request, response}:{request:any; response:any}) => {\n\n const body = await request.body();\n const {username, password} = await body.value;\n\n const user = await Users.findOne({username});\n\n if(!user) {\n response.body = 404;\n response.body = {message: `user "${username}" not found`};\n return;\n }\n const confirmPassword = await bcrypt.compare(password, user.password);\n if(!confirmPassword){\n response.body = 404;\n response.body = {message: "Incorrect password"};\n return;\n }\n \n //authenticate a user\n const payload = {\n id: user._id,\n name: username\n };\n const jwt = await create({ alg: "HS512", typ: "JWT" }, { payload }, key);\n\n if(jwt) {\n response.status = 200;\n response.body = {\n userId: user._id,\n username: user.username,\n token: jwt,\n }\n } else {\n response.status = 500;\n response.body = {\n message: "internal server error"\n }\n }\n return;\n }So far, you have progressed well. The next thing is to import your signin function in the routes and create a post request for it, as follows.
routes.allRoutes.ts
import { Router } from "https://deno.land/x/oak/mod.ts";\nimport {signup, signin} from "../controllers/users.ts";\n\nconst router = new Router();\n\n//User routes\nrouter.post("/api/signup", signup)\n .post("/api/signin", signin);\n \n\nexport default router;Congratulations on making it this far! You are through with the authentication route. Now, you can register a user, sign in, and authenticate the user.
\nYou need to create your todo CRUD API and protect the routes so that a random person will not be able to access your route except when authenticated.
\nGo to your schema folder, and create a file task.ts. In the file, create your tasks interface and export it.
schema.task.ts
export interface TaskSchema {\n name: string;\n isCompleted: boolean;\n } After successfully creating the task interface, move to our controller, create a file tasks.ts, and import the database, schema, and object Id. Then write the logic for our todo CRUD API.
controllers.tasks.ts
import db from "../database/connectDB.ts";\nimport { TaskSchema } from "../schema/task.ts";\nimport {ObjectId} from "https://deno.land/x/mongo@v0.30.0/mod.ts";\n\nconst tasks = db.collection<TaskSchema>("tasks");\n\nexport const create = async({request, response}:{request:any;response:any}) => {\n const {name, isCompleted} = await request.body().value;\n\n const _id = await tasks.insertOne({\n name,\n isCompleted\n });\n response.body = {message: "Task created!!", id:_id, name:name, Completed:isCompleted}\n };\n\n export const getTasks = async ({response}:{response:any}) => {\n const allTasks = await tasks.find({}).toArray();\n\n response.status = 200;\n response.body = {tasks:allTasks};\n };\n\n export const getById = async ({\n params,\n response\n }:{\n params:{taskId:string};\n response:any;\n }) => {\n const taskId = params.taskId;\n const task = await tasks.findOne({_id:new ObjectId(taskId)});\n\n if(!task){\n response.body = {message: `no task with Id: ${taskId}`};\n return;\n}\n response.status = 200;\n response.body = {task: task}\n};\n\nexport const updateById = async ({\n params,\n request,\n response\n}:{\n params:{taskId:string};\n request:any;\n response:any;\n}) => {\n const taskId = params.taskId;\n const {name, isCompleted} = await request.body().value;\n const task = await tasks.updateOne({_id:new ObjectId(taskId)},\n {$set:{name:name, isCompleted:isCompleted}});\n\n response.status = 200;\n response.body = {message:"Updated task", task:task};\n};\n\nexport const deleteTask = async ({\n params,\n response,\n}:{\n params:{taskId:string};\n response:any;\n}) => {\n const taskId = params.taskId;\n const task = await tasks.deleteOne({_id:new ObjectId(taskId)});\n response.status = 200;\n response.body = {message:"Deleted task", task:task};\n};With that out of the way, you need to create your todo CRUD routes. So, head over to allRoutes.ts and import the CRUD functions from the task controllers, then create the routes for our todo, as follows.
routes.allRoutes.ts
import { Router } from "https://deno.land/x/oak/mod.ts";\nimport {signup, signin} from "../controllers/users.ts";\nimport {create, getTasks, getById, updateById, deleteTask} from "../controllers/tasks.ts";\n\nconst router = new Router();\n\n//User routes\nrouter.post("/api/signup", signup)\n .post("/api/signin", signin);\n\n//Task routes\nrouter.post("/api/tasks", create)\n .get("/api/tasks", getTasks)\n .get("/api/tasks/:taskId", getById)\n .patch("/api/tasks/:taskId", updateById)\n .delete("/api/tasks/:taskId", deleteTask);\n\nexport default router;You need to protect your todo routes so that an unauthorized person will not be able to access them.
\nTo protect the todo routes, go to your middlewares folder: create a file called isAuthorized.ts, import the verify function from deno JWT URL, import Context from deno, import the secret key you've created, and create the authorized function.
The authorize function checks if a user has a JWT token, grant the user access if he does, and deny him access if otherwise.
\nmiddlewares.isAuthorized.ts
import { verify } from "https://deno.land/x/djwt@v2.4/mod.ts";\nimport { key } from "../utils/apiKey.ts";\nimport { Context } from "https://deno.land/x/oak/mod.ts";\n\nexport const authourized = async (ctx: Context, next:any) => {\n try{ \n const headers: Headers = ctx.request.headers;\n const authorization = headers.get('Authorization');\n if(!authorization) {\n ctx.response.status = 401;\n return;\n }\n const jwt = authorization.split(' ')[1];\n\n if(!jwt) {\n ctx.response.status = 401;\n return;\n }\n const payload = await verify(jwt, key);\n\n if(!payload){\n throw new Error("!payload")\n }\n await next();\n \n } catch (error) {\n ctx.response.status = 401;\n ctx.response.body ={message: "You are not authorized to access this route"}\n return;\n }\n};To protect your todo routes, import the authorized middleware function from the isAuthorized.ts middleware file and pass the middleware into the todo routes to protect them from unauthorized people.
routes.allRoutes.ts
import { Router } from "https://deno.land/x/oak/mod.ts";\nimport {signup, signin} from "../controllers/users.ts";\nimport {create, getTasks, getById, updateById, deleteTask} from "../controllers/tasks.ts";\nimport { authourized } from "../middlewares/isAuthorized.ts";\n\nconst router = new Router();\n\n//User routes\nrouter.post("/api/signup", signup)\n .post("/api/signin", signin);\n\n//Task routes\nrouter.post("/api/tasks", authourized, create)\n .get("/api/tasks", authourized, getTasks)\n .get("/api/tasks/:taskId", authourized, getById)\n .patch("/api/tasks/:taskId", authourized, updateById)\n .delete("/api/tasks/:taskId", authourized, deleteTask);\n\nexport default router;Awesome! Your application is ready, but wait! Don't get too excited yet, relax let's test the application :)
\nBelow is what your final project directory looks like:
\nDenoAPI_JWT_Auth
│
\n└─src
\n│ └───controllers
\n│ │ └───users.ts
\n│ │ └───tasks.ts
\n│ │\n│ └───database
\n│ │ └───connectDB.ts
\n│ │
\n│ └───middlewares
\n│ │ └───isAuthorized.ts
\n│ │
\n│ └───routes
\n│ │ └───allRoutes.ts
\n│ │\n│ └───schema
\n│ │ └───user.ts
\n│ │ └───task.ts
\n│ │\n│ └───utils
\n│ │ └───apiKey.ts
\n│ │
\n└─app.ts
Now that your application is ready, you need to test the various routes to ensure they are working. To test the routes, rerun your server with deno run --allow-net app.ts.
![\"deno](\"/62ae9cc872cb4e6726bf38887a6f95f2/apk23wt.webp\")
Great! The app is running on port:8080. You can now head to the postman to test your routes.
\n![\"Sign](\"/2737369979374f3a18b07747fbc29495/d2orbz0.webp\")
![](\"/d122648378e66a04ba9f5ccea186d791/trydtxn.webp\")
![\"Signin](\"/6c3a13c7403199d459243429bd206718/fee5d0s.webp\")
![\"Signin](\"/76e7addc166b0dfbc834423b2f8c664f/wncqtya.webp\")
Amazing! Now that you have signed up and authenticated a user, the returned token, which shows that the user has been authenticated, can be used to access your todo CRUD APIs.
\nFirst, let's try accessing your todo routes without the token...
\n![\"Create](\"/ecc4bd696513d61205cf9a4330f631ed/0bohcxv.webp\")
![\"Create](\"/821f749c0ad4c42017623a3bce8034d2/q6eetmg.webp\")
As you can see, when you tried to create a task, you got a message You are not authorized to access this route because a random person did it without a token.
Now, let's also try accessing the delete by Id route without the token...
\n![\"Delete](\"/3c361eebddb2e01593ae8bbde40dbce6/ngozekb.webp\")
![\"Delete](\"/1490faa5e0338c8995b8f22555595236/cdkr6ad.webp\")
Your todo CRUD APIs have been protected, and the only way a user can access them is by getting authenticated. Now let's log in again and use the returned token to access the todo routes.
\n![\"Tasks\"](\"/540a044d27006d91a86d4db1928b0c73/ehp4zwf.webp\")
So, you have logged a user in and put the returned Bearer's token in the authorization header. You can access our todo APIs now because, with the bearer's token, you are authorized to access the todo APIs.
\n![\"Create](\"/ecc4bd696513d61205cf9a4330f631ed/y9ilrk9.webp\")
![\"Create](\"/0592e46a3e4261079c741e095e5a987e/nbiaskx.webp\")
![\"Get](\"/990cf69f38c62c2d8e240d8f30d49ef8/zosrr9u.webp\")
![\"Get](\"/12178b6a0d02f0b42eb81d6d4c8be97b/zxkgmsm.webp\")
![\"Get](\"/3c361eebddb2e01593ae8bbde40dbce6/hph0xmy.webp\")
![\"Get](\"/a1856e78c8c2916792aefec9834c48f7/get-task-by-id.webp\")
Feel free to test the other routes to see how things work.
\nIn this tutorial, you've built a todo CRUD API and protected the routes from unauthorized access using JSON Web Token (JWT). You have learned how to create an Oak server in Deno, connect MongoDB, implement JWT authentication, as well as create and authenticate CRUD routes in a Deno application.
\nThe code for this tutorial is available here on Github. Feel free to clone and extend the features of the application.
\n","frontmatter":{"date":"July 28, 2022","updated_date":null,"description":"In this hands-on tutorial, you'll learn from scratch how to implement JWT authentication for CRUD APIs in Deno.","title":"How to Implement JWT Authentication for CRUD APIs in Deno","tags":["JWT","Deno","Authentication"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/ecb7a333dd6ee8ea03a2f5cc6c9633c2/58556/jwt-authentication-with-deno.webp","srcSet":"/static/ecb7a333dd6ee8ea03a2f5cc6c9633c2/61e93/jwt-authentication-with-deno.webp 200w,\n/static/ecb7a333dd6ee8ea03a2f5cc6c9633c2/1f5c5/jwt-authentication-with-deno.webp 400w,\n/static/ecb7a333dd6ee8ea03a2f5cc6c9633c2/58556/jwt-authentication-with-deno.webp 800w,\n/static/ecb7a333dd6ee8ea03a2f5cc6c9633c2/99238/jwt-authentication-with-deno.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Ekekenta Odionyenfe Clinton","github":"icode247","avatar":null}}}},{"node":{"excerpt":"Securing your web applications from unauthorized users is very important. You can increase the security with One Time Password (OTP…","fields":{"slug":"/engineering/guest-post/multi-factor-authentication-using-redis-cache-and-otp/"},"html":"Securing your web applications from unauthorized users is very important. You can increase the security with One Time Password (OTP) authentication in addition to the login credentials. An OTP is sent to the user’s email when they want to log in. This is a form of multi-factor authentication (MFA).
\nIt is essential to learn how to apply Multi-Factor authentication in real-world applications, and this tutorial got you covered. This tutorial explains how to store users’ sessions in the Redis Store and send OTP using Nodemailer for authentication.
\nThis tutorial helps you understand:
\nTo follow this tutorial, make sure you have:
\nAs everything is in place, let’s jump right in.
\nIn this section, you will learn how to start an Express server.
\nMulti-Factor Auth, but you can decide to call it anything you want.Open the terminal in the project’s path and run the following code to install the dependencies needed to start the Express server.
\nnpm init --y\nnpm i express\nnpm i -D nodemonThe Express dependency will be used to set up the backend server and nodemon, installed as a devDependency, which will watch the file system and restart the server when a change is made.
\n![\"Express](\"/812f431945696f62b9e800f8de665e18/express-and-nodemon-install.webp\")
server.js in the project’s directory. For simplicity, this file will contain all the server code for this application.Add the following codes in the server.js file to set up an Express server to listen on port 5000.
const express = require("express");\nconst app = express();\nconst PORT = 5000;\n\napp.listen(PORT, () => {\n console.log(`Server running on port ${PORT}`);\n});Open package.json and add the following code to start the server.
{\n "name": "multi-factor-auth",\n "version": "1.0.0",\n "description": "",\n "main": "server.js",\n "scripts": {\n "start": "node server.js",\n "dev": "nodemon server.js"\n },\n "keywords": [],\n "author": "",\n "license": "ISC",\n "dependencies": {\n "express": "^4.18.1"\n },\n "devDependencies": {\n "nodemon": "^2.0.16"\n }\n}Start the server in development mode by running npm run dev in your terminal.
![\"Express](\"/1f8d909af4adc05e80567590355bba69/npm-run-dev.webp\")
Nodemailer is a Node.js module that allows you to send emails using an email service or an SMTP server.
\nTo set up Nodemailer, you need to provide your email or SMTP service credentials.
\n\n\nGoogle mailing service (Gmail) will not support the use of third-party apps or devices like Nodemailer starting from May 30, 2022.
\n
For this tutorial, we will use Microsoft’s Outlook Maling Service to send emails.
\nAdd your phone number if you are prompted to do so.
\n\n\nThis step can be skipped.
\n
After setting up your Outlook account, the next step is to use your Outlook account’s credential to send emails through Nodemailer.
\nOpen your terminal and install the nodejs-nodemailer-outlook dependency.
This module only needs your Outlook account credentials and message to send emails.
\nNow, run the code below in your terminal to install the nodejs-nodemailer-outlook dependency:
npm i nodejs-nodemailer-outlookImport the nodejs-nodemailer-outlook module into server.js and add the configurations needed to send emails:
const express = require("express");\nconst app = express();\napp.use(express.json());//Enabling the body attribute.\nconst PORT = 5000;\n\napp.post("/auth", (req, res) => {//Post request to 'http://localhost:3000'\n const nodeoutlook = require("nodejs-nodemailer-outlook");//Importing the module\n nodeoutlook.sendEmail({\n auth: {//Outlook Account Credentials \n user: "<yourOutlookEmail@outlook.com>",//Email\n pass: "<yourOutlookPassword>",//Password\n },\n from: "<yourOutlookEmail@outlook.com>",\n to: req.body.email,//Getting the email\n subject: "OTP",\n text: req.body.message,//Getting the Message\n onError: (e) => res.status(500).json({ message: `an error occurred ${e}` }),\n onSuccess: (i) => res.status(200).json({ message: i }),\n });\n});\n\napp.listen(PORT, () => {\n console.log(`Server running on port ${PORT}`);\n});To test the application, use an API testing application like Postman and make a POST request to http://localhost:5000/auth, passing email and message to the body of the request.
![\"Postman\"](\"/d68ac7c10bfe004201ade8710770ffc5/postman.webp\")
In the previous section, you've successfully configured Nodemailer and used it to send emails. This section will show you how to generate a random number and how to add this random number to the message sent to the user.
\nYou can generate this random number using:
\nMath.trunc(Math.random() * 1000000)This tutorial uses the nanoid module to generate random numbers.
In the terminal, install the nanoid module. This module will create a random set of characters as the OTP. Run the following command in your terminal:
npm i nanoid@3.3.4 #Version compatible with NodejsAfter installing the nanoid module, import it into server.js and use it to generate six random digits.
const nanoid = require("nanoid");//Importing the naonid module\n\nconst OTP = nanoid.customAlphabet("1234567890", 6)();//Generating Add the OTP to the message sent to the user’s email.
\nconst express = require("express");\n\nconst nanoid = require("nanoid");\nconst app = express();\n\napp.use(express.json());\nconst PORT = 5000;\n\nconst OTP = nanoid.customAlphabet("1234567890", 6)();\n\napp.post("/auth", (req, res) => {\n const nodeoutlook = require("nodejs-nodemailer-outlook");\n\n nodeoutlook.sendEmail({\n auth: {//Outlook Account Credentials \n user: "<yourOutlookEmail@outlook.com>",//Email\n pass: "<yourOutlookPassword>",//Password\n },\n from: "<yourOutlookEmail@outlook.com>",\n to: req.body.email,//Getting the email\n subject: "OTP",\n text: `Your One Time Password is ${OTP}`,//Adding the OTP\n onError: (e) => res.status(500).json({ message: `an error occurred ${e}` }),\n onSuccess: (i) => res.status(200).json({ message: i }),\n });\n});\n\napp.listen(PORT, () => {\n console.log(`Server running on port ${PORT}`);\n});Make a POST request to http://localhost:5000/auth, passing only the email address.
![\"Email](\"/d92cfad8deca0e05fd73f647a16d7cc6/email-test.webp\")
Check the email address for which the OTP is sent.
\n![\"Gmail\"](\"/cc4daf82741847d13c3642ef147c21f4/gmail.webp\")
Now that the OTP part of the authentication is settled, let’s set up the next part of the authentication. This section covers what Redis is and how to use the Redis Store to cache data.
\nRedis, also known as Remote Dictionary Server, is an open-source (BSD licensed), in-memory data structure store. Developers use it as a database, cache, and message broker. It is a fast, lightweight database that structures data in key-value pairs.
\nStoring and retrieving cached data from Redis is faster than traditional databases as it retrieves and stores data in the main memory (the RAM). The data can be users’ sessions or responses to requests.
\nThe only downside is that data can be lost if the computer crashes.
\nSetting up Redis locally for Linux and Mac computers is simply straightforward.
\nFollow the official documentation for Linux and macOS
\nFor Windows, you need to install Windows Subsystem for Linux Version 2 (WSL 2) and a Linux Distro on your local machine.
\nThis tutorial uses Redis Cloud to set up the Redis database. Redis Cloud starts with Free a subscription fee that grants 30MB of storage. This is perfect for this simple application.
\nCreate a new Redis Cloud account if you don’t have one.
\n![\"Redis](\"/b6dd134a5a85942c214df12cb07f7a05/redis-cloud-sign-in.webp\")
Click on Configurations and copy your Public endpoint. This endpoint will be used to set up the Redis application.
\n![\"Public](\"/ac8b9ccef39cab8092f32c986646d71e/fredrick-free-db.webp\")
Still on the Configurations tab, copy your Default user password.
\n![\"Password\"](\"/49011dbfdfd715410270ed1bf90bc713/password.webp\")
Run npm i redis in your terminal. Import the redis dependency into server.js, and set up the redisClient using the Redis cloud endpoint.
const redis = require("redis");\n\nconst redisConnect = async () => {//This function will be removed later in the tutorial\n try {\n const redisClient = redis.createClient({\n url: "redis://redis-12345.c80.us-east-1-2.ec2.cloud.redislabs.com:12345", //This is an incorrect end point, insert your Public endpoint\n port: 12345,//The PORT is the last five digits in the url\n username: "default",\n password: "1234567890ABCDEFGHIJKLMNOPQRSTUV",//Input your Default_user_password\n });\n await redisClient.connect();//Connecting to Redis Cloud\n await redisClient.set("Hello", "Hello from LoginRadius");//key=Hello, value=Hello from LoginRadius\n const Hello = await redisClient.get("Hello");//Getting the value using its key=Hello\n console.log(Hello);\n } catch (error) {\n if (//Running the function again when there is a network error\n error.message ===\n "getaddrinfo ENOTFOUND redis-12345.c80.us-east-1-2.ec2.cloud.redislabs.com:12345" ||\n error.message ===\n "getaddrinfo EAI_AGAIN redis-12345.c80.us-east-1-2.ec2.cloud.redislabs.com"\n ) {\n return redisConnect();\n }\n console.log(error.message);\n }\n};Start up the server in your terminal and view the result.
\n![\"Redis](\"/29ac46a27c80657b3c90a390aa906ca0/redis-test.webp\")
Now that Redis has been added to the application, let’s set up users’ sessions using Express Sessions.
\nInstall the express-session and connect-redis modules in your terminal.
The express-session module allows you to create a session in the client’s browser. And the connect-redis module enables you to set Redis as the session store. Run the following command in your terminal.
npm i express-session connect-redisImport express-session and connect-redis into server.js and configure the session store.
const express = require("express");\nconst app = express();\n\nconst redis = require("redis");\nconst session = require("express-session");//Importing express session\nconst RedisStore = require("connect-redis")(session);//Importing connect-redis and passing the session\nconst redisClient = redis.createClient({\n url: "redis://redis-12345.c80.us-east-1-2.ec2.cloud.redislabs.com:12345", //This is an incorrect end point, insert your Public endpoint\n port: 12345,//The PORT is the last five digits in the url\n username: "default",\n password: "1234567890ABCDEFGHIJKLMNOPQRSTUV",//Input your Default_user_password\n legacyMode: true, //Very important for Redis V4\n });\nredisClient\n .connect()\n .then(() => console.log("connected"))//Logs out connected on successful\n .catch((e) => console.log(e.message));//Logs out the error\n\napp.use(\n session({\n secret: "LoginRadius",//session secret key\n resave: false,\n saveUninitialized: false,\n store: new RedisStore({ client: redisClient }),//Setting the store\n })\n);\n\n//The Rest of the codeAttributes stored in a session without a database are removed after the server refreshes. With the help of Redis cache, attributes in a session can be retrieved fast and saved even when the server restarts.
\nThe user’s OTP should be saved in the session before sending it to the user’s email.
\nOpen your server.js file and add the code as follows.
The following code stores the OTP in the session, redirects when the email has been sent, and verifies the OTP provided with the one stored in the session.
\napp.post("/auth", (req, res) => {\n let OTP = nanoid.customAlphabet("1234567890", 6)();//Changing the OTP\n req.session.OTP = OTP;//Storing the OTP in the \n const nodeoutlook = require("nodejs-nodemailer-outlook");\n nnodeoutlook.sendEmail({\n auth: {//Outlook Account Credentials \n user: "<yourOutlookEmail@outlook.com>",//Email\n pass: "<yourOutlookPassword>",//Password\n },\n from: "<yourOutlookEmail@outlook.com>",\n to: req.body.email,//Getting the email\n subject: "OTP",\n text: `Your One Time Password is ${OTP}`,\n onError: (e) => res.status(500).json({ message: `an error occurred ${e}, Please try again` }),\n onSuccess: (i) => res.redirect("/verify"),//Redirecting the user to verify the token\n });\n});\n\napp.get("/verify", (req, res) => {\n res.send("Welcome to the verify route");//Welcome Message\n console.log(req.session.OTP);//Logging out the OTP stored in the session.\n});\n\napp.post("/verify", (req, res) => {\n const { OTP } = req.body;//Getting the user provided OTP\n const OTPSession = req.session.OTP;//Getting the stored OTP\n if (OTPSession) {//Checking if the OTP exist in the session\n if (OTP === OTPSession) {//Verifying the similarity of the OTP\n req.session.isAuth = true;//Setting auth to true\n return res.status(200).json({ message: "OTP is correct" });\n }\n return res.status(401).json({ message: "Incorrect OTP" });\n }\n return res.status(404).json({ message: "OTP not found" });\n});Preventing unauthorized/unauthenticated users from accessing a specific route or a piece of important information is essential in various applications. In this section, you'll learn how to create a middleware that will authenticate the users accessing a specific route.
\n\n\nIn this tutorial, the protected route is
\n/home
Create a GET route to /home in server.js and add the middleware auth
app.get("/home", auth , (req, res) => {\n res.send("You have Successfully been Authenticated");\n});Create the auth middleware function and verify if the user is authenticated.
const auth = (req, res, next) => {//auth middleware function\n\n if (req.session.isAuth) {//Checking if `isAuth` = true\n return next();\n }\n return res.redirect("/auth");//Redirecting the Login route\n};\n\napp.get("/auth", (req, res) => {//Login route\n res.send("Login");\n});\n\napp.get("/home", auth, (req, res) => {//The Home route\n res.send("You have Successfully been Authenticated");\n});The logout route will also be protected using the auth middleware to prevent requests from users who are not signed in.
app.post("/logout", auth, (req, res) => {\n req.session.destroy();//Destroying the session\n res.redirect("/auth");\n});It’s time to put the backend code into actual functionality. This tutorial makes use of Embedded JavaScript Template (EJS) as the frontend of this application.
\nInstall the EJS Module
\nnpm i ejsOnce the installation is complete, open your server.js and use ejs as the default view engine
app.set("view engine", "ejs")In this application, there are only three routes. The login, verify, and home routes. You need to render an ejs file when accessing the routes.
Modify the GET routes using the code as follows:
app.get("/auth", (req, res) => {\n res.render("login");//Rendering the login ejs file\n});\napp.get("/verify", (req, res) => {\n res.render("verify");Rendering the verify ejs file\n});\napp.get("/home", auth, (req, res) => {\n res.render("home");Rendering the home ejs file\n});Create a folder named views, and inside, create the various ejs files.
\n\nWhen the server is rendering an ejs file, it checks in the views folder for the file. So, this name is not optional.
\n
![\"Folder](\"/c9c3034937f7000831fefaa62d4a5cee/folder-structure.webp\")
\n\nStyle these various routes as you like
\n
Add the following code to login.ejs to set up the Login route.
<!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>Login</title>\n</head>\n<body>\n <h1>Login Page</h1>\n <p>Please Sign in</p>\n <form>\n <input type="email" class="email"/><!-- Email input -->\n <input type="submit" value="submit" class="submit"/>\n </form>\n <script>\n const form = document.querySelector('form')//Getting the form\n const email = document.querySelector('.email')//Getting the email\n\n form.addEventListener('submit', async(e)=> {//Listening for a submit\n e.preventDefault()\n const data = { email: email.value }//Getting the email\n await fetch("/auth", {//Making a POST request to http://localhost:5000/auth\n method: "POST",\n headers: {\n "Content-Type": "application/json",\n },\n redirect: "follow",//Permiting redirects\n body: JSON.stringify(data),//Sending the email\n }).then(res => {\n if(res.redirected) location.href = res.url//Redirecting the user on success\n })\n .catch((e) => {\n email.value = ''\n console.log(e.message);//Logging out error\n });\n })\n </script>\n</body>\n</html>Open verify.ejs and set up the verify page as follows.
<!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>Login</title>\n</head>\n<body>\n <h1>Verify Page</h1>\n <p class="message">Enter your OTP</p><!-- Message alert -->\n <form>\n <input type="number" class="OTP" /><!-- OTP input -->\n <input type="submit" value="submit" class="submit" />\n </form>\n\n <script>\n const form = document.querySelector('form')//Getting the form\n const OTP = document.querySelector('.OTP')//Getting the OTP\n const message = document.querySelector('.message')//Getting the message alert\n\n form.addEventListener('submit', async (e) => {//Listening for a submit\n e.preventDefault()\n const data = { OTP: OTP.value }//Getting the OTP\n await fetch("/verify", {//Making a POST request to http://localhost:5000/verify\n method: "POST",\n headers: {\n "Content-Type": "application/json",\n },\n redirect: "follow",//Permitting redirects\n body: JSON.stringify(data),//Sending the OTP\n }).then(async(res) => {\n if(!res.ok){//Checking for errors\n const data = await res.json()\n OTP.value = ''\n return message.textContent = data.message//Alerting the error\n }\n if (res.redirected) location.href = res.url//Redirecting the user on success\n }).catch((e) => {\n OTP.value = ''\n console.log(e.message)\n });\n })\n </script>\n</body>\n</html>This is the route that is protected. The page can contain sensitive information that must not be accessible to unauthenticated users.
\nOpen home.ejs and configure the home route as follows.
<!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>Login</title>\n</head>\n<body>\n <h1>Home Page</h1>\n <p>Hello authenticated user, This is a secret information for your eyes only😉</p>\n Want to be unauthenticated, <button>Sign Out</button><!-- Sign Out button -->\n <script>\n const button = document.querySelector('button')//Getting the sign out button\n button.addEventListener('click', async()=> {//Listening for a click\n await fetch('/logout', {//Making a POST request to http://localhost:5000/logout\n method: "POST",\n headers: {\n "Content-Type": "application/json",\n },\n redirect: "follow"//Permitting redirects\n }).then((res)=> {\n if (res.redirected) location.href = res.url //Redirecting the user on success\n }).catch(e=> {\n console.log(e.message)\n })\n })\n </script>\n</body>\n</html>This tutorial taught you how to set up Nodemailer, Redis Cloud, and Multi-Factor Authentication. With these, you've learned to secure your applications from unauthenticated users.
\nDo you think you can use this to build complex and scalable applications?
\nYou can also set up MFA with LoginRadius instead of setting up everything manually with Redis. You can sign up for a free account here.
\nRefer to this developer-friendly documentation to get started with your MFA setupdocs/guide/mfa/) for your web and mobile apps.
\nClick here to access the sample code used in this tutorial on GitHub
\n","frontmatter":{"date":"June 30, 2022","updated_date":null,"description":"Want to implement Multi-Factor Authentication (MFA)? Follow this tutorial to implement MFA using Redis Cache and OTP in your applications.","title":"Multi-Factor Authentication (MFA) with Redis Cache and OTP","tags":["Node.js","Redis","Authentication"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/3daec096b51ef3e91f85364c0c87892b/58556/mfa-with-redis-cache-and-otp.webp","srcSet":"/static/3daec096b51ef3e91f85364c0c87892b/61e93/mfa-with-redis-cache-and-otp.webp 200w,\n/static/3daec096b51ef3e91f85364c0c87892b/1f5c5/mfa-with-redis-cache-and-otp.webp 400w,\n/static/3daec096b51ef3e91f85364c0c87892b/58556/mfa-with-redis-cache-and-otp.webp 800w,\n/static/3daec096b51ef3e91f85364c0c87892b/99238/mfa-with-redis-cache-and-otp.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Fredrick Emmanuel","github":"divofred","avatar":null}}}},{"node":{"excerpt":"SolidJS is a declarative JavaScript framework used for building UIs and web applications pragmatically and performatively. Even though it's…","fields":{"slug":"/engineering/guest-post/introduction-to-solidjs/"},"html":"SolidJS is a declarative JavaScript framework used for building UIs and web applications pragmatically and performatively. Even though it's relatively new, its similarity with other JavaScript frameworks like React and Svelte has made it more adoptable for the developer community.
\nSo in this tutorial, I'll give you a complete walkthrough of SolidJS and help you understand the essentials. You'll also build a simple web application with SolidJS to get a better hang of the basics. Finally, I'll compare and contrast it with the most popular framework in town — React.
\n![\"Features](\"/a2514ba65b9a9296996372a35081a94e/features-of-solidjs.webp\")
SolidJS takes the syntax and developer experience of React and combines it with the performance of Svelte to give you the best of both worlds.
\nJust like React, Solid uses JSX to render HTML in the browser. It also uses similar syntax for reactivity to update DOM in real-time. However, unlike React, it uses a compiled DOM instead of virtual DOM.
\nThis means you get a smaller size pure JavaScript bundle, much like the production bundle of your Svelte or Vanilla JS application. This makes it blazingly fast and highly performant.
\nLet's now understand the fundamentals of SolidJS using some code examples. To follow along, you can directly run these snippets in the SolidJS playground.
\nSolid follows the component architecture for modularity and reusability. Let's see how you can create an entry component and render it to the DOM.
\nHere's a component HelloWorld that is injected into the DOM inside an HTML element that has an id app:
import { render } from "solid-js/web";\n\nfunction HelloWorld() {\n \n\n return (\n <h1>Hello World</h1>\n );\n}\n\nrender(() => <HelloWorld />, document.getElementById("app")!);From the above code, it's also clear that components are functions that return the HTML template using JSX.
\n![\"HelloWorld](\"/d96256d16965f92c7faec59f4e627b24/hello-world-example.webp\")
Solid components allow only a single JSX element at the top level. To combat this, you can use special JSX elements called fragments:
\n <>\n <h1>Hello World </h1>\n <p>This is my first solid app </p>\n </>Components can be nested inside one another. For instance, here you have a <Header/>component:
function Header() {\n return (\n <h1>\n Header\n </h1>\n );\n}\n\nexport default Header;That is rendered inside the main <App/>component:
import { render } from "solid-js/web";\nimport Header from './header';\n\nfunction App() {\n \n\n return (\n <>\n <Header/>\n <h1>\n Hello World\n </h1>\n </>\n );\n}\n\nrender(() => <App />, document.getElementById("app")!);That should give you both the components on the DOM like this:
\n![\"Header](\"/635fc35b840666bba0a846f8c215c437/header-and-hello-world.webp\")
Props are data and functions you can pass from one component to another to share data and features between the two components. In the previous example, you can pass a title prop to the <Header/> component:
...\n <Header title="Header"/>\n...Then consequently consume this prop inside the child component:
\nfunction Header({title}) {\n return (\n <h1>\n {title}\n </h1>\n );\n}\n\nexport default Header;Reactivity allows you to create variables that dynamically trigger a DOM update when changed.
\nSolidJS allows you to create reactive variables called signals using the createSignal function. This function takes in the initial value of the variable as a parameter. And it returns an array where the first element is the variable itself and the second element is a function used to mutate that variable.
Here's an example that changes the reactive variable called name:
import { render } from "solid-js/web";\nimport { createSignal } from "solid-js";\n\nfunction DisplayName() {\n const [name, setName] = createSignal('fuzzysid');\n const changeName = () => setName('siddhant')\n\n return (\n <>\n <h1> {name} </h1>\n <button onClick={changeName}> Change Name </button>\n </>\n );\n}\n\nrender(() => <DisplayName />, document.getElementById("app")!);Initially, the name outputs the string 'fuzzysid':
\n![\"Reactivity](\"/1f715e6e1a7bbd2df0c8aa9d806eda9b/reactivity-before-update.webp\")
A click event is used on the button that fires a function called changeName. When you press the Change Name button, the changeName function updates the name signal to 'siddhant':
![\"Reactivity](\"/ff011e658142db06b088ebff6415ca08/reactivity-after-update.webp\")
What a state is to React components, a signal is to Solid components. Here's another useful and typical example of reactive variables:
import { render } from "solid-js/web";\nimport { createSignal } from "solid-js";\n\nfunction Counter() {\n const [count,setCount] = createSignal(0);\n\n return (\n <>\n <h1> Counter: {count} </h1>\n <button onClick={()=>setCount(count=>count-1)}> Decrement </button>\n \n <button onClick={()=>setCount(count=>count+1)}> Increment </button>\n </>\n );\n}\n\nrender(() => <Counter />, document.getElementById("app")!);You can take the current value of a signal inside the signal's mutation's callback function. The above code used the present value of count to increment and decrement it accordingly.
Effects are triggers or watchers that can help you fire a function when a signal updates.
\nLet's say, in the previous example, you want to throw an alert when the count becomes greater than 5.
\nTo do so, you can create an effect using the createEffect function. It takes a callback function as a parameter. This callback function is fired whenever a signal invoked inside it changes.
createEffect(()=>{\n if(count()>5) alert('Count is greater than five')\n})So now, if you click on the Increment button, you should get an alert when it becomes greater than 5:
\n![\"Effects](\"/c71abb37732d1396f71838c2649bc688/effects-example.webp\")
Solid provides special components called <Show> to render a template based on a condition or the value of a signal. Here's an example of that:
import { render } from "solid-js/web";\nimport { createSignal,Show } from "solid-js";\n\nfunction Counter() {\n const [count,setCount] = createSignal(0);\n\n return (\n <>\n <h1> Counter: {count} </h1>\n <button onClick={()=>setCount(count=>count-1)}> Decrement </button>\n \n <button onClick={()=>setCount(count=>count+1)}> Increment </button>\n <Show when={count()>5}>\n <p>Count is greater than five </p>\n </Show>\n </>\n );\n}\n\nrender(() => <Counter />, document.getElementById("app")!);Once the count becomes greater than 5, the <p> will start showing on the DOM:
![\"Conditionals](\"/412d0e34c71697847bf639180351097b/conditionals-example.webp\")
Just like <Show>, Solid also provides a special component called <For> to render a list on the DOM from an array.
In the following example, you use the <For> component to render a list of fruits from the fruits signal. Inside the opening brackets of the <For> component, you specify the variable name that will be used to extract items to loop through using the each prop.
Then, you can take a callback inside which you get the individual item as the first parameter and an optional index of the iteration as a second parameter.
\nimport { render } from "solid-js/web";\nimport { createSignal, For } from "solid-js";\n\nfunction Counter() {\n const [fruits,setFruits] = createSignal([\n 'Mango 🥭',\n 'Apple 🍎',\n 'Banana 🍌',\n 'Melon 🍈',\n 'Watermelon 🍉'\n ]);\n\n return (\n <>\n <h1> Fruits </h1>\n <For each={fruits()}>{(fruit,index)=>\n <div>{index()+1}: {fruit}</div>\n }\n </For>\n </>\n );\n}\n\nrender(() => <Counter />, document.getElementById("app")!);Here's what the list looks like when rendered in the DOM:
\n![\"For](\"/b01ad13211d6eb1510bd92846e206b7c/for-example.webp\")
Most frameworks provide several lifecycle methods for different purposes. This often leads to a steeper learning curve as well as unnecessary complexity.
\nSolid stays truly reactive: it gives you the createEffect and signals to build whatever interaction you want. However, to simplify things further, it gives you two primary lifecycle methods.
The onMount method is fired just once in the entire lifecycle of a Solid component. It runs only the first time your component mounts on the DOM. It's an excellent place to make any API calls your application needs.
For instance, consider the following example that uses the onMount method to fetch and render some data:
import { render } from "solid-js/web";\nimport { createSignal, onMount, For } from "solid-js";\n\nfunction App() {\n const [posts, setPosts] = createSignal([]);\n\n onMount(async () => {\n const res = await fetch(`https://jsonplaceholder.typicode.com/posts`);\n setPosts(await res.json());\n });\n\n return <>\n <h1>Effects: onMount</h1>\n\n <div>\n <For each={posts()}>{ post =>\n <p>\n {post.body}\n </p>\n }</For>\n </div>\n </>;\n}\n\nrender(() => <App />, document.getElementById('app'));It renders a list of posts fetched from a dummy API:
\n![\"onMount](\"/f06543ab7114424eaf97db0c115aec75/on-mount-example.webp\")
onCleanup is the exact opposite of onMount. It's fired whenever a component unmounts from the DOM completely. Ideally, you can use this method to clear any event listeners you may have added to your DOM elements.
Here's an example that does that:
\nimport { render } from "solid-js/web";\nimport { onMount, onCleanup } from "solid-js";\n\nfunction App() {\n\n const handleMouseEnter=()=>{\n console.log('Entered the box')\n }\n\n onCleanup(()=>{\n const box=document.querySelector('#box');\n box.removeEventListener('mouseenter',handleMouseEnter)\n })\n\n onMount(async () => {\n const box=document.querySelector('#box');\n const onMouseEnter=box.addEventListener('mouseenter',handleMouseEnter)\n });\n\n return <>\n <h1>Effects</h1>\n\n <div id="box" style={{height:'200px',width:'200px',border:'1px solid red'}}>\n\n </div>\n </>;\n}\n\nrender(() => <App />, document.getElementById('app'));When you enter the red box, the mouseenter event fires, and you get a message on the console. As a cleanup, when the component unmounts, we remove this event listener from that <div>.
![\"OnCleanup](\"/71b873ee324c8bf6eea0890a2c55c5df/on-cleanup-example.webp\")
Let's combine all that knowledge to build a small todo application with Solid.
\nTo get started, you'll create a new SolidJS project configured with Vite by running:
\nnpx degit solidjs/templates/js my-appThat should create a new Solid project for you. Navigate inside this project and open it in a code editor (like VS Code):
\ncd my-app && code .Next, install the dependencies by running:
\nnpm iAnd finally, kickstart the app by running:
\nnpm run startThat should open the project for you at http://localhost:3000. Awesome!
Your initial project structure gives the <App/> component by default. This is going to be your entry point component. For starters, clean everything that's inside it:
import styles from './App.module.css';\n\n\nfunction App() {\n \n return (\n <div class={styles.App}>\n \n </div>\n );\n}\n\nexport default App;Notice that you also have an App.module.css file being imported here. It's then referenced inside the <div> container. You'll add all our styles inside this App.module.css file and reference it the same way.
Now let's create some boilerplate files. Here's what the architecture of our Todo app would look like:
\n![\"Todo](\"/1798fa4d73729a43b10f75d049badf3a/todo-app-architecture.webp\")
You'll have your top-most parent <App/> component that would store all the todos and the functions to manipulate these todos. This <App/> component will have two child components.
First, the <AddTodo> component will be responsible for adding a new todo.
Second, the <Todos/> component will be responsible for rendering the list of todos via its own child — <TodoItem/> component.
Create a JSX file for each of the above components.
\nThe <AddTodo/> component will render an input field and a button. The input field is where the user types a new todo. The button will be used to send this new todo back to a function in the parent <App/> component to add this todo to the todos list. This function will be taken as props inside the <AddTodo/> component.
To store the newTodo, create a signal since you want this property to be reactive based on what the user enters in the input.
const [newTodo,setNewTodo]=createSignal('')Now let's add the template inside the component's JSX:
\nimport {createSignal} from 'solid-js'\n\n\nfunction AddTodo({addTodo}){\n\n const [newTodo,setNewTodo]=createSignal('')\n\n \n return(\n <div>\n <input \n onChange={handleChange} \n value={newTodo()} type="text" \n placeholder="Type a new todo..."\n />\n <button onClick={handleClick}>Add Todo</button>\n </div>\n )\n}\n\nexport default AddTodo;You bind the input field to the newTodo signal. You now need to create the handleChange function that updates the newTodo signal based on the onChange event.
You also need to create the handleClick function that passes the newTodo signal to the addTodo function prop and clears the input state.
const handleChange=(e)=>setNewTodo(e.target.value)\n\n const handleClick=()=>{\n addTodo(newTodo)\n setNewTodo('')\n }Here's how the entire <AddTodo/> component looks like:
import {createSignal} from 'solid-js'\n\n\nfunction AddTodo({addTodo}){\n\n const [newTodo,setNewTodo]=createSignal('')\n\n const handleChange=(e)=>setNewTodo(e.target.value)\n\n const handleClick=()=>{\n addTodo(newTodo)\n setNewTodo('')\n }\n \n return(\n <div>\n <input \n onChange={handleChange} \n value={newTodo()} type="text" \n placeholder="Type a new todo..."\n />\n <button onClick={handleClick}>Add Todo</button>\n </div>\n )\n}\n\nexport default AddTodo;You also need to render this inside the <App/> component:
import styles from './App.module.css';\nimport {createSignal} from 'solid-js'\nimport AddTodo from './AddTodo';\n\nfunction App() {\n\n const addTodo=(newTodo)=>{\n \n }\n\n const deleteTodo=(todo)=>{\n\n }\n\n return (\n <div class={styles.App}>\n <h1 class={styles.heading}>Todos</h1>\n <AddTodo addTodo={addTodo}/>\n </div>\n );\n}\n\nexport default App;Once you do that, you should see an input field with a submit button rendered by the <AddTodo/> component on the screen:
![\"AddTodo](\"/3bf1935a89c191327f5787f41f4eeb14/add-todo-component.webp\")
Now let's work on two simple components responsible for rendering the todos. First is the <Todos/> component. As you already know, this component takes in two props — a list of todos called the todos signal and the deleteTodo method.
import { For } from 'solid-js';\nimport TodoItem from './TodoItem';\n\nfunction Todos({todos,deleteTodo}){\n console.log(todos())\n return(\n <For each={todos()}>{(todo,ind)=>\n \n }\n </For>\n )\n\n}\n\nexport default Todos;You use the <For/> component to loop through the list of todos. Now, you need to pass each todo item and the deleteTodo method further down to your <TodoItem/> component. This component is responsible for rendering each list item.
function TodoItem({todo,deleteTodo}){\n const handleDelete=()=>deleteTodo(todo);\n return(\n <p onClick={handleDelete}>{todo}</p>\n )\n}\n\nexport default TodoItem;When you click on an item, you invoke the deleteTodo function and pass the clicked todo item as a parameter.
Finally, render the <Todos/> component inside the root <App/> component.
import styles from './App.module.css';\nimport {createSignal} from 'solid-js'\nimport Todos from './Todos';\nimport AddTodo from './AddTodo';\n\nfunction App() {\n const [todos,setTodos]=createSignal([])\n\n const addTodo=(newTodo)=>{\n }\n\n const deleteTodo=(todo)=>{\n \n }\n\n return (\n <div class={styles.App}>\n <h1 class={styles.heading}>Todos</h1>\n <AddTodo addTodo={addTodo}/>\n <Todos deleteTodo={deleteTodo} todos={todos}/>\n </div>\n );\n}\n\nexport default App;Great! Let's complete the todo app by writing the logic for adding and deleting a todo.
\nTo add a new todo, you only need to complete the logic inside the addTodo function in the <App/> component. This function already takes a newTodo parameter, the new todo item you need to add.
const addTodo=(newTodo)=>{\n setTodos([newTodo(),...todos()]);\n}You'll add the newTodo in the todos signal that is an array using its setter function setTodos. Use JavaScript array destructuring here to ensure to keep the previous todos intact. Let's give this a whirl now:
It looks like you're able to add todos now. Awesome!
\nTo delete the todo when they're clicked, populate your deleteTodo function:
const deleteTodo=(todo)=>{\n let newTodos=todos;\n newTodos=newTodos().filter(_todo=>_todo!=todo);\n setTodos(newTodos)\n }First, make a copy of the current todos array. Then, filter through this copy to remove the todo you wish to delete. Finally, update your original todos signal with this copy using the setTodos setter. Let's test it out now:
You can delete todos as well; fantastic!
\nFunctionally your app is complete, but it surely misses some aesthetics. Let's add some simple yet neat-looking styles. You can directly update the styles in our App.module.css file:
*{\n margin: 0;\n padding: 0;\n}\n\n.App {\n text-align: center;\n height: 100vh;\n background: #F8F8F8;\n padding: 100px;\n display:flex;\n flex-direction: column;\n align-items: center;\n}\n\n.heading{\n font-size: 96px;\n margin-bottom: 20px;\n}\n\ninput{\n border-radius: 12px;\n outline: none;\n border: none;\n padding: 5px 20px;\n margin-right: 20px;\n height: 60px;\n width: 400px;\n font-size: 24px; \n box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;\n}\n\nbutton{\n height: 65px;\n width: 150px;\n border: none;\n outline: none;\n border-radius: 12px;\n font-size: 24px;\n padding: 5px 15px;\n box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;\n cursor: pointer;\n font-weight: 600;\n background:#2e3136;\n color:#fff;\n}\n\np{\n height: 60px;\n background: white;\n width: 600px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 12px;\n font-size: 24px;\n margin: 20px 0px;\n box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;\n}\n\np:hover{\n background: rgb(232, 169, 146);\n color:#fff;\n cursor: pointer;\n}\n\n\n.header {\n background-color: #282c34;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}And that should give us a much better-looking todo app now:
\n![\"Updated-app\"](\"/47281a0b4ba0ce1cf44dc3af9e917f13/updated-app.webp\")
If you're coming from a React background, building the todo app must feel like a piece of cake to you! This is because, in terms of syntax and architecture, Solid is strikingly similar to React. It uses the same structure of using functional components, returning JSX, fragments, one-way data binding, etc.
\nUsing effects, refs and events are also much similar to React in Solid. So it's safe to say that Solid provides almost the same if not slightly different syntactic sugar as React. Then why do we need another React-like framework for building web applications?
\nSolid differs from React in terms of performance, developer experience, rendering algorithm, and reactivity. Let's skim through the key differences:
\nAt the beginning of this tutorial, we discussed how Solid doesn't use a virtual DOM. Instead, it uses a compiled DOM. This gives it a significant edge over React and any other framework in terms of run-time performance. It generates a blazingly fast production bundle that is aimed to provide a more rich user experience for your users.
\n![\"SolidJS](\"/b978d84ac56d354428cba67a79b0562c/solidjs-performance.webp\")
If you wish to dive deeper into these stats and take a closer look at performance benchmarks, here's a comparison guide you can refer to.
\nReactivity lies at the heart of SolidJS, which is why you'll never find any unnecessary renders of your Solid components. Only the part of a template that needs to update will re-render.
\nWith React, however, change in a state leads to re-rendering the entire component. There are ways to combat this, but it needs additional efforts to learn and incorporate these concepts into your applications.
\nEven though Solid has excellent and extensive documentation, the React community is much larger since it has been around for longer. That can be a deal-breaker if you want to build scalable web applications quickly. Even third-party libraries are short in number for Solid in comparison to React.
\nSolid has an exciting future and is worth a side-project or an MVP for your startup. If you wish to explore Solid in-depth, you can check out an official tutorial by the Solid team here that walks you through every concept in Solid. You can also explore the entire code for the demo in this tutorial here. Until next time!
\n","frontmatter":{"date":"June 28, 2022","updated_date":null,"description":"In this tutorial, you’ll learn what SolidJS is, how it works, and its fundamentals such as reactivity, architecture, events, effects, etc. Then you’ll use this knowledge to build a simple todo app. Finally, you’ll understand how SolidJS compares with React and how it’s better and worse.","title":"Introduction to SolidJS","tags":["SolidJS","React","Frontend"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/98c70b8f15d4e24e9751c950a5a4f1cc/58556/introduction-to-solidjs.webp","srcSet":"/static/98c70b8f15d4e24e9751c950a5a4f1cc/61e93/introduction-to-solidjs.webp 200w,\n/static/98c70b8f15d4e24e9751c950a5a4f1cc/1f5c5/introduction-to-solidjs.webp 400w,\n/static/98c70b8f15d4e24e9751c950a5a4f1cc/58556/introduction-to-solidjs.webp 800w,\n/static/98c70b8f15d4e24e9751c950a5a4f1cc/99238/introduction-to-solidjs.webp 1200w,\n/static/98c70b8f15d4e24e9751c950a5a4f1cc/7c22d/introduction-to-solidjs.webp 1600w,\n/static/98c70b8f15d4e24e9751c950a5a4f1cc/d3365/introduction-to-solidjs.webp 2240w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Siddhant Varma","github":"FuzzySid","avatar":null}}}},{"node":{"excerpt":"Introduction Currently, the LoginRadius Identity Platform processes more than 100K requests per second. As our developer and enterprise…","fields":{"slug":"/engineering/why-we-rebuilt-loginradius-dot-net-core-apis-with-go/"},"html":"Currently, the LoginRadius Identity Platform processes more than 100K requests per second. As our developer and enterprise customers grow, we should be able to scale our APIs to handle staggering loads of requests per second. It won’t be surprising if our APIs have to serve a million requests per second in the future.
\nGenerally, we add more instances, CPU, or memory for supporting high request volumes. However, it has been burdening our infrastructure budget and maintenance.
\nSo, we’re focused on reducing the cost of compute capacity by improving efficiency. In this engineering update, we share our experience with a highly effective, low-risk, large-scale performance and cost optimization with Go.
\nLoginRadius production environment consists of 30+ microservices backed by a cloud-native infrastructure. Most of these services are written in .NET and Node.js. In Q1 2021, we explored the possibilities of improving the performance of our services and optimizing costs.
\nLoginRadius tech stack consists of 30+ microservices. We have different microservices for each business service like Authentication, Web SSO, Federated SSO, etc.
\nCore Applications: Multiple microservices instances for Authentication, Account API, Analytics API, Risk-based Authentication, Backend Jobs, Integrations, and much more,
\nData Storage: MongoDB, Elasticsearch, Redis, and PostgreSQL clusters are used to store a range of datasets for various applications and functionalities.
\nQueues: Amazon Kinesis Data Streams, Amazon Simple Notification Service (SNS), Amazon Simple Queue Service (SQS), and Azure Queue Storage.
\nOther Services: Services for rate-limiting, bcrypt clusters, feature flags, and more.
\nRouting: AWS load balancers (ALB, NLB, and ELB from AWS) and some nodes running NGINX as a proxy.
\nWe've been utilizing a multi-cloud and multi-region architecture for years based on our and our customers’ data and privacy compliance requirements. However, as our usage (and load) grew with maintenance costs, we relied more on AWS resources.
\nThis is the basic architecture of the environment in the US:
\n![\"Basic](\"/491e73fe4836ca5daa93f6aad47f3b4d/basic-architecture.webp\")
Each request is processed as follows:
\n![\"Request](\"/fc6929115da8e289aaaaa4880d05fe5b/request-processing-flow.webp\")
The above diagram shows two cloud regions — US East and US West.
\nWhen requests come:
\nSo, how do we maintain high availability?
\nEvery availability zone has operating instances of all services (including databases). If one availability zone is down, we still have two availability zones.
\nWe are using a two-pronged scaling approach as scaling based on resource utilization (CPU & Memory) alone is not practical.
\nOnce, our multi-tenant application received a sudden spike in API requests — from thousands of requests to millions. Usually, adding new infrastructure to the existing pool takes around 60 seconds. And application deployment and start-up time were about 90 seconds. Plus, considering other possible delays in scaling, we can lose about 5 minutes for scaling up.
\nFurther, adding the time to gather metrics and make the scaling decision, the total delay can be ~6 minutes. This process can impact all multi-tenant customers' critical applications because user authentication and authorization are essential.
\nWe keep Scaling Buffers to support this kind of scenario.
\n\n\nScaling Buffers: During the Scale-up Time, the Scaling Buffer is the service's highest predicted traffic spike. Depending on the scaling strategy, we store several types of the buffer.
\n
Usually, we set a one million requests concurrency buffer. And based on the traffic pattern, our scaling automation triggers the scaling.
\nOur Platform performance is good. We can quickly handle millions of requests, and our application platform was scalable but not great. Minding the kind of growth we’re expecting, we wanted to improve and prepare our platform for the future.
\nNo. of requests can fluctuate within a few seconds if not minutes or hours, especially with specific events such as holiday shopping, promotional events, Black Friday, etc. So, in the event of traffic spikes, application startup time plays a significant role in scaling.
\nOur application startup time was around 90 seconds, so whenever scaling was happening due to high traffic, scaling took more time. That's why we needed to improve the application startup time.
\nWe used hundreds of AWS c5.2xlarge instances in a production environment to handle daily traffic. During certain events such as holiday shopping and Black Friday, we doubled our infrastructure according to expected traffic with a 20~30% buffer. We kept a high buffer because scaling took time with the existing .NET Core services. As a result, infrastructure cost was burdening as we were inefficiently deploying cloud infrastructure.
\nWe designed our Identity Platform a few years ago. Since then, the technology landscape has dramatically improved and optimized in recent years.
\nAlso, current technology platforms available to build and support our product (Identity Platform) are limited. So, it is crucial to align functionality with proper technology capabilities.
\nWe were facing challenges in customization. It was inflexible and limiting to deliver the required outcomes in more complex situations and use cases.
\nWe did a lot of research to choose the appropriate programming language for our application. We needed a language that would be simple to understand and learn, easy to maintain, and has high concurrency. Our research ended with Go due to its amazing qualities.
\nLet's take a closer look. Why choose Go? What makes Go such an excellent development language? What distinguishes it from the competition?
\nLet's get to the bottom of this by looking at what makes Go special.
\nGo is an open-source programming language developed by Google's Rob Pike, Robert Griesemer, and Ken Thompson. It was initially released in 2009. It has several enhancements and additions based on the C syntax to properly control memory use, manage objects, and enable static or strict typing along with concurrency.
\nConcurrent code can be executed in parallel by separate computer cores or in sequence. Most programming languages lack concurrent execution when working with multiple threads. They often slow down programming, compiling, and execution.
\nGo works with goroutines that are lightweight, low-cost threads. And Go channels allow goroutines to communicate with one another.
\nSequential Processes Communication: They are very similar to threads in Java but lightweight, and the cost of creating them is meager.
\nGo's core value is simplicity: it builds quickly, runs quickly, and is simple to learn. To help speed things up, there are no classes or type inheritance. This makes it easier to build a market-ready product quickly. Furthermore, its simplicity allows for quick and simple maintenance.
\nGo has an excellent standard library that includes a large number of built-in essential type functions and packages that are both practical and straightforward to use: I/O, encoding and decoding, manipulating raw bytes, network utility functions, parsing, debugging, and a lot more are all made simple by particular packages. Testing support is also included in the standard library, so no other dependencies are required.
\nGo has a simpler syntax than other languages and is simple to learn. The syntax of Go is somewhat similar to the C language. Developers can begin with Go in a couple of hours, but they need to spend time understanding best coding practices, especially understanding goroutines for concurrency.
\nWe run benchmarks on our API so that the performance insights help us make decisions about the tech stack. It will paint a clearer picture of where we stand compared to our existing tech stack and what areas need improvement or immediate attention.
\nWe did multiple stress tests on our high usage APIs built separately with .NET Core(Old) and Go (new).
\nWe are using Kubernetes to deploy and manage our microservices and application infrastructure and deploy our application microservices across multiple Pods.
\n| Test Item | \nValue | \n
|---|---|
| Instance Type | \nc5.2xlarge on AWS | \n
| No. of Instances | \n20 | \n
| Reverse Proxy | \nNGINX | \n
| Concurrent Requests | \n20K per second | \n
| Duration | \n5 minutes | \n
| Stress Test Tool | \nGatling | \n
We deployed both applications in the same infrastructure and did the same stress test.\nGolang application has performed much better.
\n![\"Requests](\"/425ce0aea8c01e3281101dd268d0def6/requests-and-responses-per-second-dot-net-core.webp\")
\n ![\"API](\"/d7b965865c218de9b3e71b6559787500/response-time-percentiles-dot-net-core.webp\")
\n ![\"Overall](\"/cd1c01d04ed3965ac3ca5bfce7ba66dc/overall-matrix-dot-net-core.webp\")
\n You can see some errors in Graph - 1(a) after ramping up to 15K users. Also, response time is increasing, as seen in Graph - 1(b).
\nThe application can recover after a couple of seconds, and after that, the application cannot respond. Application scaling is taking time. And existing infra cannot handle this spike, so the application crashes after 18K RPS.
\nWe did the same stress test with the new Go application. It is easily able to handle this kind of concurrency without any issue.
\n![\"Requests](\"/64fd50adc421658ca67fbf096038dc9e/requests-and-responses-per-second-go-lang.webp\")
\n ![\"API](\"/dd50184c7b2f042915816c6374a53590/response-time-percentiles-go-lang.webp\")
\n ![\"Overall](\"/19f6d7a35332ce026578459805a2327d/overall-matrix-go-lang.webp\")
\n The Go application can easily handle 20K ramp-up requests per second without any issue, as shown in Graph -2(a).
\nYou can see in Graph - 2(b) what the response time was after 2 min 47 sec for a couple of seconds. The Go application was scaling during that time. It is scaling quickly, so it is not impacting API request performance, and, also, the application can recover response API time as expected.
\nIn this article, you have learned how we have achieved better API performance by rebuilding them in Go, which were previously built in .NET Core. And you have understood our approach to this transition and how it increased the API performance of the LoginRadius Identity Platform.
\nLeverage LoginRadius Identity Platform to build authentication functionality for your web and mobile apps. Sign up for a free LoginRadius account here
\n","frontmatter":{"date":"June 06, 2022","updated_date":null,"description":"At Loginradius, we strive to leverage technology and ingenuity to push the boundaries of what our Identity Platform can deliver. In this engineering article, learn how we improved the performance of our APIs with Go.","title":"Why We Re-engineered LoginRadius APIs with Go?","tags":["Go","API",".NET","LoginRadius"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/da26686e342d94b3007681cd0379367c/58556/high-performance-identity-apis.webp","srcSet":"/static/da26686e342d94b3007681cd0379367c/61e93/high-performance-identity-apis.webp 200w,\n/static/da26686e342d94b3007681cd0379367c/1f5c5/high-performance-identity-apis.webp 400w,\n/static/da26686e342d94b3007681cd0379367c/58556/high-performance-identity-apis.webp 800w,\n/static/da26686e342d94b3007681cd0379367c/99238/high-performance-identity-apis.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Vijay Singh Shekhawat","github":"code-vj","avatar":null}}}}]},"markdownRemark":{"excerpt":"Introduction Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT…","fields":{"slug":"/engineering/how-to-integrate-jwt/"},"html":"Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT, or JSON Web Tokens, a compact, stateless method for securely transmitting user identity and session data across services.
\nWith JWT token authentication, identity information is embedded in a signed token, allowing you to maintain user sessions without server-side storage. This approach is highly scalable and ideal for modern architectures like SPAs, mobile apps, and microservices.
\nIn this blog, we’ll walk you through what is JWT, why use it, and how to implement JWT authentication using LoginRadius.
\nYou’ll learn what JWT is, why it’s effective, and how it works in real-world applications. We'll cover both integration methods (IDX and Direct API), generating your signing key, managing sessions, storing the JWT token securely, and applying best practices throughout.
\nWhether you're a developer, product manager, or IAM architect, this guide offers a complete foundation for implementing JWT token authentication into your application stack.
\nJSON Web Token (JWT) is an open standard (RFC 7519) used to transmit information securely between parties as a JSON object. It’s compact, self-contained, and digitally signed, making it a reliable format for authentication and authorization across modern applications.
\nA JWT consists of three parts:
\nExample of a token structure:
\n<base64Header>.<base64Payload>.<signature>
\n![\"Flowchart](\"/f29edbf2978577390c7ffa02e9bc4dda/lr-JWT-authentication.webp\")
JWT simplifies identity verification, especially when you're building apps that talk to APIs or need to scale without centralized session storage.
\nLoginRadius provides robust support for JWT (JSON Web Token) authentication, which allows for flexible and secure access control across different digital platforms. Whether you're building a fully custom identity flow or using a pre-built interface, the platform supports various integration approaches depending on your architecture.
\nIf you're looking to understand how to implement JWT token authentication effectively, LoginRadius offers two primary implementation models that cater to different levels of customization and control:
\nThe IDX-hosted login approach enables secure, standards-compliant, JWT-based authentication without requiring you to build a custom login interface. This is a strategic option for fast, compliant, and user-friendly deployments.
\n![\"Screenshot](\"/9fb19dd9c88c7916aeebd03ab6e661b7/lr-admin-console.webp\")
{
\n\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR...\",
\n\"expires_in\": 1800
\n}
\nThis integration approach works best for all teams that want effective identity workflows without the complexity of building proprietary login screens, something that is crucial for customer portals, onboarding of mobile applications, and even managing access for business partners.
\nIf you’re building a custom login UI or working in a headless environment, LoginRadius lets you generate and handle JWTs directly through its Authentication APIs. Here’s how you can programmatically perform token authentication using the classic method:
\nSend a POST login request to the LR Authentication URL:
\nPOST /identity/v2/auth/login
\nInclude the user’s credentials (email + password) in the request body.
\n{
\n\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...\",
\n\"expires_in\": 3600
\n}
\nWith LoginRadius, it is possible to customize the payload to include user roles and/or any additional metadata. You can set custom JWT claims on the Admin Console.
\nWith this method, you have complete customization over login flows while using LoginRadius to issue signed JWTs for user session management.
\nNOTE- With either method, LoginRadius ensures that JWTs are securely signed, optionally short-lived, and compatible with standard token validation libraries, making integration seamless for everyone.
\nTo get started with JWT implementation, you can read our complete developer documentation.
\n![\"Illustration](\"/15ec02ac98d24a9f1f28e5d0f06b9174/IDX-vs-Direct-API-JWT.webp\")
Session management is how your app keeps track of a user after they log in so they don’t have to prove who they are with every request.
\nIn traditional apps, sessions are stored on the server using session IDs. Every time a request comes in, the server checks that session ID to verify the user.
\nIn modern apps, especially SPAs and APIs, JWTs are used to manage sessions without needing server-side storage; this is called stateless session management. The token itself carries the user’s identity, roles, and expiration details. As long as the token is valid, the user stays logged in.
\nGood session management ensures:
\nUser Logs In
\nClient Stores the Token
\nAccess Token Expiry
\nToken Renewal
\nWhen the user logs out, both the access token and refresh token should be cleared from client storage.
\nHowever, access tokens are stateless and cannot be revoked mid-lifecycle unless:
\nCombining these strategies gives you greater control over token misuse and enables a robust, enterprise-grade logout flow.
\n![\"illustration](\"/e55ae4bbc8ce62e13f03e46e29ebe7cc/api-economy.webp\")
When you implement JWT-based authentication, the client (browser or mobile app) needs a way to store the access token and, optionally, the refresh token after they are issued by the authentication server. This stored token is then attached to every subsequent request to prove the user's identity.
\nChoosing where to store the JWT is a crucial security decision. The most common storage options are:
\nEach option has trade-offs between security, accessibility, and persistence, and the right choice depends on your application's architecture and threat model.
\nAccess Tokens
\nRefresh Tokens
\nJWT authentication with LoginRadius offers a modern, stateless approach to managing sessions across distributed systems. The IDX integration is ideal for rapid deployment, while the Direct API model is best for organizations needing deep customization and integration flexibility.
\nWith robust token signing, refresh capabilities, and centralized control, LoginRadius provides a future-ready foundation for secure, scalable identity architecture. Contact us to know more about JWT authentication and implementation guide.
\nA: JWT authentication securely verifies user identities, enabling stateless session management across web, mobile apps, and microservices without server-side session storage.
\nA: LoginRadius simplifies JWT integration by offering hosted IDX login pages and direct API-based authentication methods, enabling rapid deployment and deep customization.
\nA: Yes, JWT authentication is secure when implemented with best practices like short-lived tokens, secure storage methods, signature validation, and refresh token rotation.
\nA: Yes, LoginRadius allows revocation of JWT refresh tokens explicitly, and supports strategies like short-lived tokens and key rotation to manage token lifecycles securely.
\n","frontmatter":{"date":"April 15, 2025","updated_date":null,"description":"Discover JWT (JSON Web Token) authentication, its advantages, and how to integrate it seamlessly using LoginRadius' hosted IDX and Direct API methods for secure, scalable identity management.","title":"JWT Authentication with LoginRadius: Quick Integration Guide","tags":["JWT","JSON Web Token","Authentication","Authorization"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":0.7782101167315175,"src":"/static/4cedb7829f98208cbc6d5a9aea4e983d/58556/how-to-integrate-jwt.webp","srcSet":"/static/4cedb7829f98208cbc6d5a9aea4e983d/61e93/how-to-integrate-jwt.webp 200w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/1f5c5/how-to-integrate-jwt.webp 400w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/58556/how-to-integrate-jwt.webp 800w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/1cc9f/how-to-integrate-jwt.webp 896w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},"pageContext":{"limit":6,"skip":6,"currentPage":2,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}