{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/8","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"One of the most used authentication standards in web applications is the JSON Web Token standard. It is mostly used for authentication…","fields":{"slug":"/engineering/guest-post/jwt-authentication-best-practices-and-when-to-use/"},"html":"

One of the most used authentication standards in web applications is the JSON Web Token standard. It is mostly used for authentication, authorization, and information exchange.

\n

JSON Web tokens are made of three parts separated by dots (.) — and look like this typically: xxxxx.yyyyy.zzzzz. These correspond to the Header, the Payload, and the Signature. You can learn more about JWT tokens here.

\n

And before using them and continuing to read this article, you might want to check the advantages compared to the session authentication method. You can learn more about JWTs vs. Sessions here.

\n

When to Use JWT Authentication?

\n

Authentication

\n

Authentication is done when a client successfully proves its identity via a login endpoint. If it's successful, the server will create JSON Web Token and send it in response to the client.

\n

The client will use this JWT on every request for a protected resource.

\n

Authorization

\n

A server built on JWT for authorization will create a JWT when a client logs in. This JWT is signed, so any other party can’t alter it.

\n

Each time the client has access to protected resources, the server will verify that the JWT’s signature matches its payload and header to determine that the JWT is valid.

\n

Then if the JWT is successfully verified, it can grant or deny access to the resource.

\n

Data Exchanges

\n

JWT is also a great way to secure information transmission between parties — two servers, for example — and because you can verify the validity of the token (signature, structure, or the standards claimed in the JWT).

\n

When Not to Use JWT Authentication?

\n

Revocable Tokens

\n

JWT doesn’t require any lookup of the database, so revoking them before the expiration is quite difficult.

\n

Revocation is very important in many cases.

\n

For example, when logging out users or banning users, or changing permissions or passwords instantly, if the token hasn't been revoked, it might be possible for the user to continue to make requests even if this user no longer has the required authorization to do so.

\n

Sensitive Information

\n

JWT is usually signed to protect against data manipulation or alteration. With this, the data can be easily read or decoded.

\n

So, you can’t include sensitive information such as the user’s record or any identifier because the data is not encrypted.

\n

Cookie Size Factor

\n

The size of a JWT is greater than the size of a session token. And this can quickly increase linearly as you add more data to the JWT. And because you need to send the JWT at each request, you're increasing the payload size. This can become heavily complex if there is a low-speed internet connection.

\n

JWT: Best Practices

\n

1) JWT as Access Token

\n

JWT can be used as an access token to prevent unwanted access to a protected resource. They're often used as Bearer tokens, which the API will decode and validate before sending a response.

\n
Authorization: Bearer <token>
\n

2) Refresh Tokens Logic with JWT

\n

How do you get a new access token if this one is expired? The natural first idea is to log in again. But from a User Experience point, this can be quite painful.

\n

JWT can be used as refresh tokens; these tokens are used to retrieve a new access token.

\n

For example, when a client requests a protected resource and receives an error, which can mean that the access token has expired, the client can be issued a new access token by sending a request with a refresh token in the headers or the body.\nIf the refresh token is valid, a new access token will be created and sent as a response.

\n

Note that the refresh token is obtained at authentication and has a bigger lifetime.

\n

3) Which Signing Algorithm to Use?

\n

Interestingly enough, JWT can be signed using many different algorithms. But let’s quickly talk about the alg value in the JWT header. When it’s decoded:

\n

The alg value in JWT headers simply tells you how the JWT was signed. For example, with an alg value of RS512.

\n

RS512 => RS 512 where RS is the signature algorithm and SHA-512 is the hashing algorithm.

\n

SHA-512 will produce a 512-bits hash while SHA-256 will produce a 256-bit hash. And each of these algorithms gives you 50% of their output size of security level. This means that, for example, SHA-512 will provide you with 256-bits security.

\n

In any case, make sure to use a minimum of 128-bit security.

\n

4) Expiration, Issued Time, and Clock Skew

\n

JWTs are hard to revoke when they are created. Most of the time, you’ll have to wait until expiry. That’s why you should use a short expiration time.

\n

Additionally, you can implement your own revocation system.

\n

JWT comes with a time-based claim iat — issued at. It can be used to reject tokens that are too old to be used by the resource server.\nAnd clock skew specifies the allowed time difference (in seconds) between the server and the client clocks when verifying exp and nbf time-based claims. The default recommended default value is 5.

\n

5) JWT Signature

\n

The last part of a JWT is the signature, which is simply a MAC (or Message Authentication Code). This signature is created by the server using a secret key. This secret key is an important part of the JWT signature.

\n

There are two things to respect to decrease the probability of a secret key leaking or a successful brute force attack:

\n\n

6) Where to Store the Tokens?

\n

The easiest ways to store a token on the client side are localStorage and sessionStorage. However, both are vulnerable to XSS attacks, and sessionStorage is cleaned if the browser is closed.

\n

A better, secure way is to store JWT in cookies. Cookies are not accessible via JavaScript, they can’t be read and written, and interestingly, they are automatically sent to the server.

\n

7) Always Use HTTPS

\n

One of the main benefits of HTTPS is that it comes with security and trust. HTTP path and query parameters are encrypted when using HTTPS.

\n

Then, there is no risk of someone intercepting the request, particularly the token in transit. These types of attacks are commonly called MitM (man in the middle) attacks that can be successful on compromised or insecure networks.

\n

Conclusion

\n

This article discussed JWT and some best practices to fully use its potential.

\n

JWT is simply an authentication standard with its pros and cons. Thus, knowing some best practices can really help you use JWT better.

\n","frontmatter":{"date":"October 14, 2021","updated_date":null,"description":"JWT is a common way of implementing authentication in web and mobile apps. Read more to know how you can use JWT and learn the necessary best practices.","title":"JWT Authentication — Best Practices and When to Use","tags":["JWT","Authentication"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/2f8d7e959c4e58511a3d83168d15cd6f/58556/cover-image.webp","srcSet":"/static/2f8d7e959c4e58511a3d83168d15cd6f/61e93/cover-image.webp 200w,\n/static/2f8d7e959c4e58511a3d83168d15cd6f/1f5c5/cover-image.webp 400w,\n/static/2f8d7e959c4e58511a3d83168d15cd6f/58556/cover-image.webp 800w,\n/static/2f8d7e959c4e58511a3d83168d15cd6f/99238/cover-image.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kolawole Mangabo","github":"koladev32","avatar":null}}}},{"node":{"excerpt":"Ever wondered how amazing it would be if an application knows you are trying to access it, without having to re-validate your credentials…","fields":{"slug":"/engineering/guest-post/what-are-refresh-tokens-and-when-to-use-them/"},"html":"

Ever wondered how amazing it would be if an application knows you are trying to access it, without having to re-validate your credentials time and again?!

\n

Let's say you try accessing the application after a day or two, or even at the end of an entire week, and somehow... magically (not really xD) the system just knows it's you.

\n

Furthermore, the Security aspect of the app being completely robust, no other individual with malicious intent can access confidential information. Now that's music to a developer's ears -- or, at least, a powerful way to secure applications and systems at scale.

\n

Before diving into the know-hows of refresh tokens, let's understand why it is even needed in the first place.

\n

Conventional Approach of Securing Apps

\n

Many applications utilize the so-called token-based authentication to permit a user to access information (or resources) that would normally not be available for the general public (unauthenticated users).

\n

A token is an unique approval given to you (more like a digital signature) for accessing any resource. The application issues it to you once you have authenticated yourself with valid credentials. These tokens are generally short-lived, i.e., valid only for a short amount of time (say 5-15 minutes). This is plenty for you to perform a particular task requiring validation but makes it harder for individuals with malicious intent to get their hands on confidential resources. Now, until the token expires, the user would not have to enter the credentials again.

\n

This kind of system is widely used to perform online transactions where security is of utmost importance. However, due to the short-lived nature of such access tokens, the user would have to re-validate themselves to be re-issued a new access token.

\n

Refresh Tokens to The Rescue

\n

We can clearly make out that access tokens overall provide better security but hampers the user experience (UX) of the application. Imagine having to log in again and again just because the application has to make sure that you're still, well... you!

\n

Here is where refresh tokens come to the rescue. A refresh token just helps you re-validate a user without them having to re-enter their login credentials multiple times. The access token is re-issued, provided the refresh token is a valid one requesting permission to access confidential resources. This method provides an enhanced user experience all while keeping a robust security interface.

\n

OAuth 2.0 is a popular authentication framework that essentially allows client applications to access resources provided by other applications & servers on behalf of the user. This architecture leverages the benefits of utilizing access and refresh tokens.

\n

Now, having discussed the impact a refresh token has on enhancing the user experience of the application, is there any other benefit to using them?

\n

It is true that, generally, web applications and SPAs (Single-Page Applications) are meant to have short-term access to any resource leveraging authentication. When you do need access after a few days to the resources, you could definitely log in again, right? So why bother setting up refresh tokens?

\n

When to use Refresh Tokens?

\n

The main purpose of using a refresh token is to considerably shorten the life of an access token. The refresh token can then later be used to authenticate the user as and when required by the application without running into problems such as cookies being blocked, etc. If that does not make much sense, think of it this way:

\n

When a browser makes a request to an API endpoint to use a resource provided only to authenticated users, the application would require the credentials of the user. And upon authentication (login), the application on the user's browser is granted access to the resource. This access is provided by sharing an access token with the user's browser so that subsequent API calls from the browser -- which requires the credentials -- can be sent without any hassle.

\n

Now in the process of sharing the access token with the user, the system may also provide a refresh token that would later authenticate the user while making the subsequent API calls -- even if the access token has expired -- by requesting a new access token when required.

\n

Hence, the refresh tokens allow applications to obtain new access tokens utilizing mere API calls without any need of having users approve cookies, login multiple times, etc.

\n

Drawbacks and Ways to Conquer

\n

It's also true that you may not need the \"added superpowers\" offered by the refresh tokens to keep the user session and experience smooth. After all, methods such as cookies and silent authentication are beneficial in their own ways too! Let's talk about a scenario when refresh tokens might actually turn out to be an application's kryptonite... (not really xD).

\n

If a refresh token is compromised (someone else got their hands on it or, even worse -- steals it), the individual would not only gain access to the resources provided by the API but also the amount of time the access has been granted would be more. Now that's a dreadful scenario for developers and users alike.

\n

Having said that, counter-measures such as Refresh Token Rotation and Automatic Reuse Detection help limit the destructive nature -- and highlight the benefits of these refresh tokens.

\n

In such methods, when a refresh token is utilized to access any resource, the system not only responds with the access token but also with a new refresh token in turn. Any subsequent API requests can be made through newer refresh tokens from there onwards. If a request is made utilizing an older refresh token, the request is efficiently rejected (assuming the person/client requesting is unauthenticated).

\n

Also, Risk-Based Authentication (RBA) method suggests that if a refresh token is utilized multiple times, the tokens are revoked; thereby, preventing further access to valuable resources. Such a mechanism further helps strengthen the security of applications using refresh tokens.

\n

Conclusion

\n

Refresh Tokens are really a consummate way of providing sturdy security all while providing a great experience for users, provided it being used in appropriate ways. That being said, it might not be completely essential for your applications and their needs, so the final decision rests with you.

\n

I hope this blog provided an insight into refresh tokens and how you may utilize these in your applications. Thanks for reading!

\n","frontmatter":{"date":"October 05, 2021","updated_date":null,"description":"This is your guide to understanding refresh tokens, and why you may need to use them to enhance the user experience of your applications.","title":"What Are Refresh Tokens? When & How to Use Them","tags":["Authentication","Tokens","UX"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/241e64d42dcb94631ac0aa541ff3e5f0/58556/coverImage.webp","srcSet":"/static/241e64d42dcb94631ac0aa541ff3e5f0/61e93/coverImage.webp 200w,\n/static/241e64d42dcb94631ac0aa541ff3e5f0/1f5c5/coverImage.webp 400w,\n/static/241e64d42dcb94631ac0aa541ff3e5f0/58556/coverImage.webp 800w,\n/static/241e64d42dcb94631ac0aa541ff3e5f0/99238/coverImage.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Mcvean Soans","github":"McTechie","avatar":null}}}},{"node":{"excerpt":"You might have already participated in Hacktoberfest as a contributor. But what if you have a project that you want to open source and get…","fields":{"slug":"/engineering/hacktoberfest-participation-as-maintainer/"},"html":"

You might have already participated in Hacktoberfest as a contributor. But what if you have a project that you want to open source and get contributions during Hacktoberfest?

\n

Well, this guide covers everything you need to know:

\n\n
\n

Most Important: The project should be in Working Condition or at both Logical and Coding End (if coding project). Here are the list of OpenSource repos by LoginRadius and the issues/guidelines for contributers.

\n
\n

If your project satisfies the above condition, you can just go ahead and implement the steps described as follows. By implementing these steps, you can successfully open source your project and get contributions for your open source project, especially during Hacktoberfest.

\n

Title

\n

Your project should have a concise title. This title will be the name of your project repo on GitHub.

\n\n

Repository Description

\n\n

Topic/Labels

\n

As part of Hacktoberfest and to make it easy to find the project, the repository should have one or more of the following labels

\n\n

Project README

\n

Each project must have a README file.

\n\n

CONTRIBUTING.MD

\n

It should have instructions on how to contribute to the project. Contributions guidelines should have at least three different sections.

\n\n

License

\n

Choose an appropriate open source license for your project

\n

MIT license is one of the popular open source licenses used by many open source projects on GitHub. Click here to know more about open source licenses and choose the license most appropriate for your project.

\n

Issues in Repos

\n

Each repo should have at least 5-10 well-labeled issues to be considered for Hacktoberfest.

\n\n

As a maintainer, you could also be eligible to win swag from DigitalOcean for participating in Hacktoberfest. For more information, click here.

\n","frontmatter":{"date":"September 28, 2021","updated_date":null,"description":"This ultimate guide is the resource you need to open source your project and participate in Hacktoberfest to get valuable contributions from the community.","title":"How to Participate in Hacktoberfest as a Maintainer","tags":["Hacktoberfest","Hacktoberfest 2021","Open Source"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/ba2c17ed3a96b8c00eacf98433b0338d/58556/cover.webp","srcSet":"/static/ba2c17ed3a96b8c00eacf98433b0338d/61e93/cover.webp 200w,\n/static/ba2c17ed3a96b8c00eacf98433b0338d/1f5c5/cover.webp 400w,\n/static/ba2c17ed3a96b8c00eacf98433b0338d/58556/cover.webp 800w,\n/static/ba2c17ed3a96b8c00eacf98433b0338d/99238/cover.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Narendra Pareek","github":"pareek-narendra","avatar":null}}}},{"node":{"excerpt":"What is Hacktoberfest 2021? Hacktoberfest 2021 is the 8th edition of Hacktoberfest hosted by DigitalOcean. It is an open source festival…","fields":{"slug":"/engineering/hacktoberfest-2021/"},"html":"

What is Hacktoberfest 2021?

\n

Hacktoberfest 2021 is the 8th edition of Hacktoberfest hosted by DigitalOcean. It is an open source festival celebrated during October every year, encouraging people worldwide to actively participate and contribute to participating open source projects hosted across GitHub and GitLab.

\n

In fact, Hacktoberfest 2020 had attracted 169,886 participants and 116,361 participating open source repositories, representing 135 countries.

\n

You can simply register yourself here and start contributing to any participating open source project from Oct 01 - Oct 31. And if you meet the contribution criteria set by DigitalOcean, you’ll receive a Hacktoberfest t-shirt from DigitalOcean!

\n

Additionally, if you make successful contributions to LoginRadius open source projects, you’ll separately receive a LoginRadius branded Hacktoberfest t-shirt from us, recognizing and thanking you for your valuable contributions.

\n

Why Contribute to LoginRadius Open Source Projects?

\n

LoginRadius is an industry-leading Customer Identity and Access Management (CIAM) provider with a mission to secure every identity on this planet.

\n

At LoginRadius, we’re committed to making our cloud platform more accessible for developers across tech stacks, so they can quickly implement user registration and authentication processes in their applications and become more efficient at focusing on core business features.

\n

We’ve always loved open source and the many great things it has done for the software development community and businesses. This inspired us to open source many of our projects, including SDKs, LR CLI, and Async Blog, a leading publication for developers by developers.

\n

Through our open source projects, we actively collaborate with the developer community and drive change and innovation for the optimistic progress of everyone.

\n

When you contribute to our open source projects, you’re helping the whole developer community become efficient, productive, and helping them manage user identities and authentication on their applications securely and scalably.

\n

How to Contribute?

\n

The exciting part about being involved in the open source community is that no matter how small or big your contributions are, the community will welcome your efforts and collaborate with you positively, sharing feedback and expressing gratitude.

\n

Especially with LoginRadius open source projects, your contributions can make a big difference! We also try making your collaboration with us more enjoyable.

\n

Please note that only contributions that add significant value to our projects will be eligible for swag. This will be at our sole discretion. But you may go ahead and contribute in any way you would like.

\n

Prerequisites

\n

You should have a basic to intermediate understanding of the following:

\n\n

Repositories for Contributing

\n

Each of the following public repositories on GitHub will have a list of issues listed. You can choose to work on these issues based on your skills and expertise in solving them.

\n

At LoginRadius, we value your contributions and proactively collaborate with you to get your contribution accepted.

\n

But one thing to keep in mind is that we don’t tolerate spamming.

\n

So, what is spamming?

\n

Spamming is creating a pull request for the sake of it and not adding value in any way. We’ll identify spam pull requests and report them according to GitHub guidelines.

\n

Anyways, you don’t have to worry about spamming accidentally: it seldom occurs without a clear intention. If we identify something as spam, we’ll let you know and help you understand why it is marked as spam.

\n

You can also easily find issues with the hacktoberfest label in order to know which repositories are seeking contributions. Or, you can simply click here to find all the issues needing contribution.

\n

That all being out of the way, here are the open source projects for which we’re seeking your valuable contributions:

\n\n

Please note that each project will have specific guidelines on how to contribute in general and raise pull requests. Also, each project will have issues listed that you can pick and work on.

\n

If you’re facing any issues with locally running a project or something else, please feel free to raise an issue for the project. Our team will help you out.

\n

Win LoginRadius Branded Swag

\n

By actively participating in Hacktoberfest, you make the open source community more sustainable, and, in turn, this makes you feel at home. Empowering one another is what best depicts the open source philosophy and is a reward in itself.

\n

However, we want to make it more fun by sending cool t-shirts to all the accepted/eligible contributors. Just make sure to fill this form after you raise a pull request.

\n

Don’t forget that your contributions to our projects also count towards your overall Hacktoberfest contributions calculated by DigitalOcean — and if you’re eligible, they’ll send you another t-shirt as well.

\n

Let’s have fun with Hacktoberfest 2021!

\n

\"fun\"

\n","frontmatter":{"date":"September 23, 2021","updated_date":null,"description":"At LoginRadius, we're excited to celebrate Hacktoberfest 2021. Contribute to our open source projects and win cool LoginRadius branded swag to show off!","title":"Hacktoberfest 2021: Contribute and Win Swag from LoginRadius","tags":["Hacktoberfest","Open Source","LoginRadius"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/b37804ed1ec767d9a9d9ed54872f51d5/58556/Hacktoberfest-2021.webp","srcSet":"/static/b37804ed1ec767d9a9d9ed54872f51d5/61e93/Hacktoberfest-2021.webp 200w,\n/static/b37804ed1ec767d9a9d9ed54872f51d5/1f5c5/Hacktoberfest-2021.webp 400w,\n/static/b37804ed1ec767d9a9d9ed54872f51d5/58556/Hacktoberfest-2021.webp 800w,\n/static/b37804ed1ec767d9a9d9ed54872f51d5/99238/Hacktoberfest-2021.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Raghunath Reddy","github":"raghunath-r-a","avatar":null}}}},{"node":{"excerpt":"Prerequisites You should know the basics of Vim beforehand. You may refer to a previous blog Vim: Getting started. This tutorial explores…","fields":{"slug":"/engineering/guest-post/vim-level-up/"},"html":"

Prerequisites

\n

You should know the basics of Vim beforehand. You may refer to a previous blog Vim: Getting started.

\n

This tutorial explores the following concepts:

\n\n

In addition, this tutorial explores a few other tips and tricks. It is not uncommon for folks who have been using Vim for a long time and not being familiar with these handy, useful features.

\n

Macros

\n

You don't want to miss out on macros if you want to level up your Vim game. Vim macro is a powerful feature that allows you to record a sequence of keys on the fly. It helps you to automate a lot of stuff.

\n

Macros are based on the concept of registers. If you don't know what registers are, you can think of them as a bunch of spaces in memory that Vim uses to store some text.

\n

Macros are editable registers, which you can record, store, and edit whenever you want.

\n

Here's the basic syntax of macros:

\n
q<key you want to record your macro into><series of commands>q
\n

Example:

\n
q1f;xq
\n

Let's break it down for you:

\n

q : Starts recording a macro
\n1 : The recorded macro will be stored on key 1
\nf;x : Find the first occurrence of ;in that line and delete ;
\nq : stop recording the macro

\n

That's it. Now, you can use this macro by @<your key> i.e @1

\n

If you want to repeat a macro n number of times, then n@1is the syntax.

\n

Use Case

\n

Not impressed yet? Huhh! Let's show you a practical use case to demonstrate the power of a macro. I work in ReactJs a lot and like to export all my components in one file. Let's try exporting 99 HeroBlocks in one go.

\n

The desired result is:

\n
export {default as HeroBlock1 } from './HeroBlock1/HeroBlock1.js'\nexport {default as HeroBlock2 } from './HeroBlock1/HeroBlock2.js'\nexport {default as HeroBlock3 } from './HeroBlock1/HeroBlock3.js'\n...\n..\nso on
\n

Perform vim index.js

\n

And, write this line:

\n

export {default as HeroBlock1 } from './HeroBlock1/HeroBlock1.js'

\n

Now, follow along:

\n

q1yyp4E ^A6e ^Aq

\n

Breaking it down:

\n

q1 : Start recording a macro in key 1.
\nyy : yank the current line.
\np : paste the yanked line.
\n4E : Get the cursor to 1 of Heroblock1. (f1 might be tempting but it will give you wrong results as not all lines will have 1, they can have any number. Try making the macro very generalized.)
\n^A : this is ctrl + a. It increments the current version by one.
\n6e : Get the cursor to the second number.
\n^A : increment the number by one.
\nq : stop recording.

\n

Now, to repeat your macro 99 times:

\n

99@1

\n

And that's all.

\n

\"macro

\n

Buffers & Splitting

\n

In simple terms, a buffer is a file that has been loaded into memory. Everything you do in Vim is in a buffer. You can list all the buffers by :buffers. And then, if you want to check out a particular buffer, use :b n -- where n is the buffer number.

\n

If you want to delete a buffer, use :bd n is the command.

\n

To create a new buffer in the same view -- creating a split in the current window -- use :sp filename.

\n

For a vertical split, use :vsp filename.

\n
\n

To be honest, using buffer numbers to switch buffers is not what I prefer to do. I prefer to switch based on what I see, like ctrl-w then jto focus on a buffer below if I'm splitting the window. :tabprevious to move a tab on the left if I'm using tabs.

\n
\n

Here are some key bindings you might want to use for a smooth workflow.

\n
nnoremap <C-t> :tabnew<CR>\nnnoremap <C-Left> :tabprevious<CR>\nnnoremap <C-Right> :tabnext<CR>\nnnoremap <C-J>  <C-W><C-J>\nnnoremap <C-K>  <C-W><C-K>\nnnoremap <C-L>  <C-W><C-L>\nnnoremap <C-H>  <C-W><C-H>
\n

Global Command

\n

The global command in Vim is very powerful and will solve a lot of your problems quickly.

\n

The basic syntax goes something as follows:

\n
:[range]global/{pattern}/{command}
\n

Let's go through some use cases to learn more about it.

\n

The following will delete any line containing the word console in the entire file:

\n
:g/console/d
\n

The following will delete any line between line 10-20 containing the word console in it:

\n
:10,20g/console/d
\n

You can even do the inverse of it by using :g!

\n

The following will delete any line not containing the word console in it in the entire file:

\n
:g!/console/d
\n

You can even combine the two.

\n

The following will delete any line containing console and not containing hello in it in the entire file.

\n

The global command can work on any regular expression, which makes it even more powerful, provided you're creative enough...

\n
:g/console/g!/Hello/d
\n

The following will delete any line starting with # i.e., comments in python will be deleted in one go:

\n
:g/^#/d
\n

So far, we've been using d as the command, but it can be anything else like m for move t for copy etc.

\n

One of the very powerful commands is norm. This command allows you to do anything that would have worked in normal mode.

\n

The following will comment out all the print statements in a python code in one go.

\n
:g/print/norm I#
\n

The global command can be coupled with macros using norm, which means you can apply a macro to certain lines matching the regex given. This was enough to blow my mind, and it made the time I spent reading about Vim worthy.

\n

Here's the syntax for using macros with global commands:

\n
:g/const/normal @q
\n

You Made It

\n

Congratulations! You made it this far. You now have leveled up your Vim game. All these tips and tricks will eventually be useful to you. Here's a little something for reading this far: Pintovim You can use this tool to make your own customized Vim color scheme.

\n

Thanks for reading!

\n","frontmatter":{"date":"September 23, 2021","updated_date":null,"description":"Vim is Vi's newest and most common reincarnation, which is supported on every known platform. Go through this tutorial to learn about what Vim is and how to make the most out of it.","title":"How to Upgrade Your Vim Skills","tags":["Vim","Text Editor","UNIX"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/aa9e337b13aca7c3043c49bba3b61a23/58556/Vim.webp","srcSet":"/static/aa9e337b13aca7c3043c49bba3b61a23/61e93/Vim.webp 200w,\n/static/aa9e337b13aca7c3043c49bba3b61a23/1f5c5/Vim.webp 400w,\n/static/aa9e337b13aca7c3043c49bba3b61a23/58556/Vim.webp 800w,\n/static/aa9e337b13aca7c3043c49bba3b61a23/99238/Vim.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Shubhankar Khare","github":"iamshubhankarkhare","avatar":null}}}},{"node":{"excerpt":"In modern websites that serve different kinds of users, there is a need to create a distinction between users to determine what kind of…","fields":{"slug":"/engineering/guest-post/role-based-user-authentication-with-loginradius-and-reactjs/"},"html":"

In modern websites that serve different kinds of users, there is a need to create a distinction between users to determine what kind of privileges are assigned to them. You can achieve this with authentication. Through authentication, we validate user-specific credentials to determine if the user is genuine and then assign a specific role, which could be a simple client or administrator access, for example.

\n

React user authentication is usually carried out by using a trusted third-party customer identity and access management (CIAM) software. This tutorial uses LoginRadius API to carry out user authentication with React application.

\n

Prerequisites

\n

You should know React to be able to follow this tutorial. Also, you should have the node package manager or yarn installed on your PC.

\n

Overview

\n

First, you need to install the LoginRadius React SDK. You can then configure it to provide authentication and role assignment for use within your React application.

\n

Introduction

\n

What is LoginRadius?

\n
\n

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

\n
\n

LoginRadius has features to add different login authentication options, including email, phone, and social network logins, such as Google and Facebook. It also provides security on these data. Some security features it offers include:

\n\n

LoginRadius comes with different SDKs, including reactjs authentication, to support different frameworks. One of them is the LoginRadius ReactJS SDK, which allows you to add authentication within your React app.

\n

Getting Started

\n

Creating a LoginRadius Account

\n

First, you need to create a LoginRadius account with a Developer Pro plan selected instead of the free plan. This is to be able to access role management features, which are only available in the Developer Pro plan.

\n

You'll get a page requesting you to create a new application. Click on \"create a new application\". After which, a page comes up where you should enter the name of your app and the URL to your app. Here, Input any name and URL of your choice.

\n

\"Naming

\n

Auth Page (IDX)

\n

LoginRadius allows you to create a custom login page (an auth page that you can customize from the dashboard), which you can then preview. This is a page provided by LoginRadius that you can easily customize to contain different form contents. Features like user log in, signup, email, and password have been pre-implemented on this page. You'll be using this page for registration and authentication with react application. To learn more on how to customize this page to contain more form contents, refer to customizing Auth Page.

\n

\"A

\n

To be able to use user roles within your app, you first have to set up these roles and their respective privileges from the dashboard. In this tutorial, you'll set up two roles, namely Admin and Client.

\n

To set up roles, navigate to your dashboard, click on \"user management\".

\n

Click on \"manage roles\" and click on \"add roles\". A popup opens in which you add the role name. And in the permission tab, add what permissions that role should have.

\n

This tutorial has added a \"client\" role with a permission called \"view\" and an \"admin\" role with permissions: \"view, edit, delete\". Enable \"set as default\" for the client role to automatically assign the client role to any user in our app by default.

\n

\"Role

\n

Integrate LoginRadius into React

\n

Creating a React Application

\n

To build your application, you'll be using the command-line interface (CLI) with create-react-app

\n

For node users:

\n
npx create-react-app {project name}
\n

Alternatively, if you're using yarn, write:

\n
yarn add create-react-app {project name}
\n

Next, cd into the directory with the command below:

\n
cd {project name}
\n

Configuring LoginRadius for React

\n

Next, you'll install the LoginRadius React dependency using the CLI:

\n

For node users:

\n
npm install loginradius-react
\n

yarn:

\n
yarn add loginradius-react
\n

To use the react-router components, you need to install react-router-dom using CLI. Run the following code to achieve this:

\n

For node:

\n
npm install react-router-dom
\n

yarn:

\n
yarn add react-router-dom
\n

Setup a .env file in the root directory with the following details:

\n
REACT_APP_LR_APP_NAME={app name}\nREACT_APP_API_KEY={your app key}\nREACT_APP_SECRET={your secret key}
\n

You can find the keys required above in your dashboard within react user authentication configuration: API key and secret.

\n

Building Login Components

\n

The Auth Page(IDX) is a web page created for you that reflects the configurations you create in our dashboard. You'll utilize this page as the login and signup page within your app and set up routes to route users to a different page based on their roles.

\n

Go to the index.js file and add:

\n
import React from "react";\nimport ReactDOM from "react-dom";\nimport App from "./App";\nimport { LRAuthProvider } from "loginradius-react";\n\nReactDOM.render(\n<React.StrictMode>\n  <LRAuthProvider\n    appName={process.env.REACT_APP_LR_APP_NAME || ""}\n    apiKey={process.env.REACT_APP_API_KEY || ""}\n    redirectUri={window.location.origin}\n  >\n    <App />\n  </LRAuthProvider>\n</React.StrictMode>,\ndocument.getElementById("root")\n);
\n

In the above code, you made imports for required modules, set up your LRAuthProvider component with parameters appname and apikeys from your .env file, and also created your redirect URI. In this case, it is equal to your current window.location.origin, which is the URL of the webpage -- in this case, it is our localhost.

\n

Localhosts are whitelisted by default. If you're building your app using a hosted site, you have to whitelist the URL in your dashboard. The entry component in the code is set to the App component.

\n

In the App.js component, add the following code:

\n
import React from 'react';\nimport './App.css';\nimport {\nBrowserRouter as Router,\nSwitch,\nRoute\n} from "react-router-dom";\nimport Auth from "./Landing";\nimport CallAPI from './Return';\n\nfunction App() {\nreturn (\n <Router>\n      <div className="App">\n        <Switch>\n          <Route exact path="/">\n            <div>{"Application home"}</div>\n            <Auth />\n          </Route>\n          <Route path="/login">\n          <CallAPI />\n          </Route>\n        </Switch>\n      </div>\n    </Router>\n);\n}\n\nexport default App;
\n

Here, you've set up your routes using Browser routes, Switch, and Route components imported from the react-router-dom module. The path to your home page is blank (\"/\"). It displays the text Application home. It runs an Auth component that was earlier imported. A second route is made for a second page with a path of \"/login\" that runs the CallAPI component on the new page.

\n

You'll then create a page that will serve as the landing page for your site. To do this, create a Landing.js file in your src folder and input the following code:

\n
import { useLRAuth } from "loginradius-react";\n\nconst Auth = () => {\n\nconst {isAuthenticated,loginWithRedirect,logout } =  useLRAuth();\n  if (isAuthenticated) {\n    return (\n      <div>\n        <button onClick={() => logout()}>\n          Log out\n        </button>\n      </div>\n    );\n  } else {\n    \n    return <button onClick={() => loginWithRedirect("/login")}>Login/Register</button>;\n\n  }\n}; \n\nexport default Auth;
\n

In the code written above, you've used loginWithRedirect, loginWithPopup, and logout authentication methods from the useLRAuth hook in your components to set up the authentication flow within your React application. You can also get access to the authentication state using isAuthenticated. The isAuthenticated method is used to check if the user is already logged into the app; it true, it returns true and displays a log out button that is connected to a logout function. Else, it returns false and displays a Login/Register button, which when clicked is set up to redirect to the path /login. The loginWithRedirect() and logout() methods use the Auth Page (IDX), where registration and login functionality is already implemented to perform these tasks.

\n

You can style the button to make it easier to see by adding the following code within your App.css file:

\n
//for our login button on our landing page \nbutton{\n  background-color: #2d56da;\n  color: #fff;\n  padding: 20px;\n  border-radius: 8px;\n}\n//for the output in our login route which we will cover later\nspan{\n  font-size: 24px;\n  height: 80vh;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n}
\n

Using the LoginRadius API

\n

As an additional feature, you can use the LoginRadius React SDK to access the API to get parameters that are assigned upon logging in using the login form. You can use this method to check if a user is a client or administrator. Whenever a user creates an account using the form, the user is assigned a unique user-id called Uid, which you can view in your dashboard under \"manage users\". You can reference this user-id to determine your users’ roles. To do this, you need to fetch and return the Uid of the current user. The fetch request for the user role requires the Uid and your app secret key as parameters within the URL.

\n

In your src folder, create a file name return.js, and populate it with the following code:

\n
import React, { useEffect, useState } from "react";\nimport { useLRAuth, withAuthenticationRequired } from "loginradius-react";\n\nconst CallAPI = () => {\n\n  const [resp, setResp] = useState(null);\n    const { user } = useLRAuth();\n    const uid = user["Uid"];\n    \n\n  useEffect(() => {\n    (async () => {\n      try {\n        const response = await fetch(\n          `https://api.loginradius.com/identity/v2/manage/account/${uid}/role?apiKey=${process.env.REACT_APP_API_KEY}&apiSecret=${process.env.REACT_APP_SECRET}`,\n          {}\n        );\n        setResp(await response.json());\n      } catch (e) {\n        console.error(e);\n      }\n    })();\n  });\n\n  if (!resp) {\n    return <div>Loading...</div>;\n  }\n\n  return <span>{JSON.stringify(resp, null, 2)}</span>;\n};\n\nexport default withAuthenticationRequired(CallAPI, {\n  onRedirecting: () => <div>Loading...</div>,\n});
\n

Here, within your CallAPI component, you've used usestate hook to create two states resp and setResp to check if you have received a response from the API. A constant user was made to use the LAuth method to get the current user data, and then the next line gets the id of the current user. The useeffect React hook that runs after the render contains an asynchronous function is used to fetch the role of the current user uid. It returns the data and outputs it in JSON form, which value is given to SetResp. Else, it throws an error if the fetch request fails.

\n

Since it is an asynchronous function, the code below it runs while fetching and awaiting a response. resp is false during this time while waiting for the result of the asynchronous function. Therefore, it outputs \"Loading...\" on the screen until the async returns the data that it then outputs.

\n

The last code block: export is simply used to show \"Loading...\" on the screen during redirecting.

\n

Running the Code

\n

You can run the present code by cd into your parent directory and running:

\n
npm start
\n

When it successfully starts the server, you would have a similar page as follows:

\n

\"landing

\n

This is the landing page you've built in the Auth component and is your / path in your routes within App.js. If you click on the \"login/register\" button, you'll be redirected to your custom Auth Page (IDX) provided by LoginRadius, where you can create a user account and login. You can manage the users who have accounts from your dashboard in \"manage users\".

\n

After logging in auth react js, with your user, you'll get redirected to the /login route that then runs the CallAPI component and gives you a result similar to the following:

\n

\"Login

\n

This is the current role of the user. Any user would have the role of client assigned since you've set to assign the client role by default to all our users from your dashboard during the creation of roles.

\n

Managing User Authentication and Data

\n

User Authentication

\n

In the above section, you've created a user account with different parameters for the email and password. Upon creation of an account, you get directed to the login page, where you can sign in using the credentials of the created account. Authentication was carried out on the parameters in the input field by the LoginRadius API set up in the Auth Page.

\n

Your user authentication is carried out by the API. This checks the input details against the registered user details. If any input not matching this is put in the form, you'll get an alert \"user does not exist\" upon clicking the login button. Upon logging in, your app key and secret are sent by your app to the authentication server. Upon authentication, the server responds with an access token and authorizes the user. To view this token, you can create a new file called Token.js and insert the following code into it:

\n
import React, { useEffect, useState } from "react";\nimport { useLRAuth, withAuthenticationRequired } from "loginradius-react";\n\nconst CallAPI = () => {\n  const { getAccessTokenSilently } = useLRAuth();\n  const [resp, setResp] = useState(null);\n\n  useEffect(() => {\n    (async () => {\n      try {\n        const token = await getAccessTokenSilently();\n        const response = await fetch(\n        `https://api.loginradius.com/identity/v2/auth/access_token/validate?access_token=${token}&apiKey=${process.env.REACT_APP_API_KEY}`,\n          {}\n        );\n        setResp(await response.json());\n      } catch (e) {\n        console.error(e);\n      }\n    })();\n  }, [getAccessTokenSilently]);\n\n  if (!resp) {\n    return <div>Loading...</div>;\n  }\n\n  return (\n    <span>{JSON.stringify(resp, null, 2)}</span>\n  );\n};\n\nexport default withAuthenticationRequired(CallAPI, {\n    onRedirecting: () => <div>Loading...</div>, \n    });
\n

The code above runs a fetch request for the access token and displays it when the data is returned. To view the output of this code, import the newly created file into your App.js file. Since the name of the function component in the code is still CallAPI, you don't need to edit the component called in the login route. You just need to comment out the former import for the component from your return.js file as shown below:

\n
import "./App.css";\nimport { BrowserRouter as Router, Switch, Route } from "react-router-dom";\nimport Auth from "./Landing";\n// import Login from "./Login";\nimport React from 'react';\n// import CallAPI from './Return';\n import CallAPI from './Token';\n\nfunction App() {\n  return (\n    <Router>\n      <div className="App">\n        <Switch>\n          <Route exact path="/">\n            <div>{"Application home"}</div>\n            <Auth />\n          </Route>\n          <Route path="/login">\n            <CallAPI />\n          </Route>\n        </Switch>\n      </div>\n    </Router>\n  );\n}\nexport default App;
\n

You then need to run the code by starting the server using the npm start command. Upon starting the server, when you log in, you'll have your user token displayed on the screen. Your output will be similar to the following:

\n

\"access

\n

Here, you can see the access token and its details. You can then return your code to the previous CallAPI component imported from Return.js.

\n

User Data

\n

You can view and manage user accounts from the dashboard. You can find the panel for this under \"User management\":

\n

\"User

\n

Manage users:

\n

\"Manage

\n

Here, you can view the account information of your users, search for a particular user details using the email, Uid, or phone number as the query in the search box. Also, the panel provides an option to reset the password of a user, block users, and delete users as the above image shows. You can create new users by clicking on the \"add user\" button and filling in the details of the new user.

\n

Viewing User Permissions

\n

To view all roles and permissions for your app, change the URL in the fetch request to https://api.loginradius.com/identity/v2/manage/role, keeping the rest of the URL the same. That is, it still contains your appkey and appsecret parameters.

\n

Reload your page, and you'll have an output similar as follows:

\n

\"All

\n

Adding a Role to the Current User

\n

To add the Admin role to the current user, create objects for this by adding the following code within the parenthesis after your fetch URL:

\n
method: "PUT",\n     headers: {\n      'Content-Type': 'application/json',\n     },\n     body: JSON.stringify({\n      roles: ["Admin"],\n     }),
\n

This adds the Admin role to the current logged-in user since it is the Uid that is within our URL. fetch uses a GET request by default. Since you're making a change to the URL, you're using a PUT method instead. You'll get a result similar to as follows:

\n

\"Added

\n

The user has both client and admin roles because you've added client roles by default to all our users.

\n

Assigning Client and Admin roles

\n

To assign specific roles to different people, first you should uncheck the set as default in the \"manage roles\" section of your dashboard. You can then run an if block to check if the users’ logged-in emails are equal to a particular set of emails and then perform the assignment of admin roles to them; else, assign the client roles instead. Modify your return.js file as below:

\n
import React, { useState } from "react";\nimport { useLRAuth, withAuthenticationRequired } from "loginradius-react";\n\nconst CallAPI = () => {\n\n  const [resp, setResp] = useState(null);\n  const { user } = useLRAuth();\n  const uid = user["Uid"];\n  var response;\n  const email = user["Email"];\n  var emailmain = email[0].Value;\n  \n  \n  (async () => {\n    if (emailmain.toLowerCase() === "admin@example.com"){\n      try {\n          \n        \n        response = await fetch(\n          `https://api.loginradius.com/identity/v2/manage/account/${uid}/role?apiKey=${process.env.REACT_APP_API_KEY}&apiSecret=${process.env.REACT_APP_SECRET}`,\n          {\n            method: "PUT",\n            headers: {\n              'Content-Type': 'application/json',\n            },\n            body: JSON.stringify({\n              roles: ["Admin"],\n            }),\n          }\n        );\n        setResp(await response.json());\n      } catch (e) {\n        console.error(e);\n      }\n    }\n    else {\n       try {\n         response = await fetch(\n           `https://api.loginradius.com/identity/v2/manage/account/${uid}/role?apiKey=${process.env.REACT_APP_API_KEY}&apiSecret=${process.env.REACT_APP_SECRET}`,\n           {\n             method: "PUT",\n             headers: {\n               "Content-Type": "application/json",\n             },\n             body: JSON.stringify({\n               roles: ["Client"],\n             }),\n           }\n         );\n         setResp(await response.json());\n       } catch (e) {\n         console.error(e);\n       }\n    }\n  })();\n  \n\n  if (!resp) {\n    return <div>Loading...</div>;\n  }\n\n   return <span>\n    Welcome user : {uid}<br/>\n    Email : {emailmain}<br/>\n    {JSON.stringify(resp, null, 2)}\n  </span>;\n};\n\nexport default withAuthenticationRequired(CallAPI, {\n  onRedirecting: () => <div>Loading...</div>,\n});
\n

In the code above, you've created a const email that returned an array containing the user email. To get the email specifically, you've created another variable emailmain which gets the value at a particular array position containing the user email.

\n

The async request block has now been modified to check if the user email being used for logging in is equivalent to a particular email which you've declared. Alternatively, you can have your emails pulled from a database and assign the admin roles to the ones you want. The else block assigns a client role to emails that do not meet the first criteria. When you create a new account with an email similar to what I have in the if block, that is admin@example.com; when rerouted to the /login path, you'll discover that the role of admin was assigned while any other email will have the client role assigned upon login. The return statement returns the user id of the logged-in user, the email, and then the role in a JSON format. The output would be similar to the following:

\n

\"output

\n

Conclusion

\n

This tutorial covered:

\n\n

These privileges can be used to give users certain permissions as to what they can do on your website.

\n

LoginRadius is a great tool and is easy to implement if you want to implement authentication in your application.

\n

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

\n","frontmatter":{"date":"September 03, 2021","updated_date":null,"description":"This tutorial illustrates how to perform user authentication and assign roles to users in React apps using LoginRadius.","title":"How to Implement Role-Based Authentication with React Apps","tags":["Authentication","React","User Roles"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/f67613d9df4f2b44e8700d779302109e/58556/coverImage.webp","srcSet":"/static/f67613d9df4f2b44e8700d779302109e/61e93/coverImage.webp 200w,\n/static/f67613d9df4f2b44e8700d779302109e/1f5c5/coverImage.webp 400w,\n/static/f67613d9df4f2b44e8700d779302109e/58556/coverImage.webp 800w,\n/static/f67613d9df4f2b44e8700d779302109e/99238/coverImage.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Victory Tuduo","github":"Victory-ET","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":"

Introduction

\n

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.

\n

With 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.

\n

In this blog, we’ll walk you through what is JWT, why use it, and how to implement JWT authentication using LoginRadius.

\n

You’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.

\n

Whether you're a developer, product manager, or IAM architect, this guide offers a complete foundation for implementing JWT token authentication into your application stack.

\n

What is JWT?

\n

JSON 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.

\n

A JWT consists of three parts:

\n
    \n
  1. Header – Contains metadata like the type of token and signing algorithm (e.g., HS256).
    2. \n
  2. Payload – Stores the actual data or “claims,” such as user ID, roles, and token expiry.
    3. \n
  3. Signature – A cryptographic hash that ensures the token hasn’t been tampered with.
    4. \n
\n

Example of a token structure:

\n

<base64Header>.<base64Payload>.<signature>

\n

Why Use JWT?

\n\n

How JWT Works?

\n

\"Flowchart

\n
    \n
  1. A user logs in with credentials.
    2. \n
  2. Your app (or identity provider like LoginRadius) issues a signed JWT.
    3. \n
  3. The client stores the token and sends it with each request (usually in the Authorization header).
    4. \n
  4. The server validates the token’s signature and claims.
    5. \n
  5. If valid, access is granted — without any session stored on the backend.
    6. \n
\n

JWT simplifies identity verification, especially when you're building apps that talk to APIs or need to scale without centralized session storage.

\n

JWT Authentication with LoginRadius: Overview

\n

LoginRadius 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.

\n

If 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:

\n

1. IDX Implementation – JWT through a Hosted Login Page

\n

The 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\n

Configuration Steps:

\n
    \n
  1. Enable JWT Login
    2. \n
  2. Go to authentication configuration settings and enable JWT Login in the Admin Console.
    3. \n
\n

\"Screenshot

\n
    \n
  1. Specify your signing algorithm and expiry policy, and define your JWT Secret Key.
    2. \n
  2. Input a secure JWT signing key.
    3. \n
  3. Specify token expiry duration (e.g., 15–60 minutes)
    4. \n
  4. Select the desired algorithm —HS256 for symmetric signing (same key signs and verifies)
    5. \n
  5. RS256 for asymmetric signing, where LoginRadius securely stores the private key used to sign the JWT.
    6. \n
  6. Your app or backend service uses the public key to validate the token signature.
    7. \n
  7. LoginRadius provides a JWKS (JSON Web Key Set) endpoint to dynamically fetch and rotate public keys, ensuring trust without key exposure.
    8. \n
  8. Update IDX Template for Callback
    9. \n
  9. Modify your IDX login page template to retrieve the JWT post-login. You can access the token via redirect URL parameters or secure JavaScript callbacks.
    10. \n
\n

Example Response:

\n

{

\n

\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR...\",

\n

\"expires_in\": 1800

\n

}

\n

This 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.

\n

2. Direct API Implementation – Self Managed Login

\n

If 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:

\n\n

Configuration Steps:

\n

Step 1: Authenticate via API:

\n\n

Include the user’s credentials (email + password) in the request body.

\n

Step 2: Get JWT in Response

\n\n

{

\n

\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...\",

\n

\"expires_in\": 3600

\n

}

\n

Step 3: JWT Decoding and Validation

\n\n

Step 4: Set Custom Claims (Optional)

\n

With 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.

\n

With this method, you have complete customization over login flows while using LoginRadius to issue signed JWTs for user session management.

\n

NOTE- 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.

\n

To get started with JWT implementation, you can read our complete developer documentation.

\n

Hosted Login vs Direct API

\n

\"Illustration

\n

What is Session Management and How It Works with JWT

\n

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.

\n

In 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.

\n

In 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.

\n

Good session management ensures:

\n\n

How LoginRadius Handles Session Management with JWT:

\n
    \n
  1. \n

    User Logs In

    \n\n
    2. \n
  2. \n

    Client Stores the Token

    \n\n
    3. \n
  3. \n

    Access Token Expiry

    \n\n
    4. \n
  4. \n

    Token Renewal

    \n\n
    5. \n
  5. Logout and Token Revocation Strategy
    6. \n
\n

When the user logs out, both the access token and refresh token should be cleared from client storage.

\n\n

Combining these strategies gives you greater control over token misuse and enables a robust, enterprise-grade logout flow.

\n

\"illustration

\n

How to Store JWT Tokens?

\n

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.

\n

Choosing where to store the JWT is a crucial security decision. The most common storage options are:

\n\n

Each option has trade-offs between security, accessibility, and persistence, and the right choice depends on your application's architecture and threat model.

\n

Recommended Storage Strategy

\n\n

Best Practices for Storing JWTs

\n
    \n
  1. Never store sensitive tokens (like refresh tokens) in localStorage or sessionStorage.
    2. \n
  2. Use Secure and HttpOnly flags with cookies to prevent JavaScript access and ensure transmission only over HTTPS.
    3. \n
  3. Set the SameSite=Strict or Lax attribute on cookies to protect against CSRF.
    4. \n
  4. Use short-lived access tokens and rotate refresh tokens regularly.
    5. \n
  5. Implement CSP (Content Security Policy) to reduce XSS risk.
    6. \n
  6. Avoid storing any tokens in frontend code (e.g., hardcoded in JS files).
    7. \n
\n

Conclusion

\n

JWT 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.

\n

With 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.

\n

FAQs

\n

1. What is JWT authentication used for?

\n

A: JWT authentication securely verifies user identities, enabling stateless session management across web, mobile apps, and microservices without server-side session storage.

\n

2. How does LoginRadius simplify JWT integration?

\n

A: LoginRadius simplifies JWT integration by offering hosted IDX login pages and direct API-based authentication methods, enabling rapid deployment and deep customization.

\n

3. Is JWT authentication secure?

\n

A: Yes, JWT authentication is secure when implemented with best practices like short-lived tokens, secure storage methods, signature validation, and refresh token rotation.

\n

4. Can JWT tokens be revoked with LoginRadius?

\n

A: 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":42,"currentPage":8,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}