![\"LoginRadius](\"/9f9fcb0430b89fa5c0ab46252144e277/pw6s1mqnn-yrtard7nbx.webp\")
What is a Content Security Policy (CSP), and why is it important?
\nA Content Protection Policy (CSP) is a security standard that adds an extra layer of defense in detecting and mitigating certain kinds of attacks, such as Cross-Site Scripting (XSS), clickjacking, and other code injection threats. CSP is a preventative step against attacks that rely on executing malicious material in a trusted web context, as well as other attempts to bypass the same-origin policy.
\nThe CSP's main purpose is to prevent and report XSS attacks. XSS attacks take advantage of the browser's faith in the server's content. Because the browser trusts the source of the material without additional safety measures, the browser runs all code from a trustworthy origin. It is unable to distinguish which code is legal. Thus any injected malicious code is also executed.
\nThe website administrator can reduce the XSS attack using the CSP by defining trusted source sites for the executable scripts. When we use the CSP header, browsers only allow us to run the script from the whitelisted domains and ignore all other scripts.
\nWe can also use the same-origin policy (SOP) header to prevent the website from accessing data from the other origin. Still, Websites need to include lots of assets from external sources like content delivery networks (CDNs), Google Analytics scripts, fonts, styles, comment modules, social media buttons, etc., so for the modern web, we need to use CSP.
\nOne interesting advantage of a content security policy is we can define the permitted protocols. For example, the sites can restrict browsers from loading content over HTTPS. Some browsers, by default, will not connect to HTTPS but using the content security policy, we can enforce browsers to encrypt conversations with your server.
\nSites may also leverage HTTP Strict-Transport-Security headers to ensure that browsers only connect to the site over encrypted routes.
\nAdding the Content-Security-Policy HTTP header to a web page and setting values for it allows you to restrict what resources the user agent is authorized to load for that page. For example, A page that allows loading external CSS or fonts but not allows loading javascript from the external domains.
\nHTTP response headers are generally used to specify the Content-Security-Policy header, but if needed, you can also use HTML meta tags to provide specific CSP directives at the page level.
\nAn example of adding CSP headers is shown below.
\n Content-Security-Policy: default-src 'self'; img-src *; script-src loginradius.com;An example of adding CSP headers in the HTML tags
\n<meta http-equiv="Content-Security-Policy" content="default-src 'self'">Listed below are a couple of CSP directives and their use cases:
\nDefault-src: This directive serves as a fallback for the other CSP fetch directives. For absent directives like media-src and script-src, the user agent looks for the default-src directive's content and uses it.
Script-src: This directive is used to define locations from which external scripts can be loaded.
Img-src: Specifies sources from which images can be retrieved.
Media-src: This directive is used to define locations from which rich media like video can be retrieved.
Object-src: This directive is used to define locations from which plugins can be retrieved.
Font-src: Specifies permitted sources for loading fonts.
manifest-src: A list of acceptable source locations for web manifests. Web manifests are used by users of Progressive Web Applications to download websites and run them like native mobile apps.
frame-ancestors: A list of acceptable URL locations which this website can load in an iFrame.
form-action: A list of acceptable URL target locations where the website can send form data. It's most likely that you want this value set to self as most websites only submit their form data locally. This property is not covered by default-src above, so make sure you set it.
plugin-types: The list of plugin types that can be loaded from the locations in object-src. Likely that you also want to set this to none.
base-uri: The list of URLs that can be used in HTML base tags on your site.
child-src is used to restrict permitted URLs for JavaScript workers and embedded frame contents, including embedded videos. In Level 3, frame-src and worker-src directives can be used instead to control embedded content and worker processes, respectively.
style-src is used to whitelist CSS stylesheet sources. To allow stylesheets from the current origin only, use style-src 'self'.
connect-src specifies permitted origins for direct JavaScript connections that use EventSource, WebSocket, or XMLHttpRequest objects.
You can find a more updated and complete list maintained by Mozilla here.\nMozilla maintains a more up-to-date and comprehensive list, which can be seen here.
\nAll major modern browsers have supported Content Security Policy.
\nMozilla maintains a more up-to-date and comprehensive list for the CSP support in the browser, which can be seen here.
\nThe default-src directive in the below example policy is set to self. This permits the browser to load resources from the site's origin.
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">The default-src directive in the below example policy permits the browser to load resources from the trusted domain and all its subdomains.
<meta http-equiv="Content-Security-Policy" content="default-src 'self' *.loginradius.com">The above policy permits the browser to load content from loginradius.com as well as any subdomain under loginradius.com.
\nSuppose you are running an e-commerce site and want to ensure that all resources are only loaded via SSL or HTTPS. The below policy ensures that all of the resources on your website load from TLS.
\n <meta http-equiv="Content-Security-Policy" content="default-src https:; script-src https: 'unsafe-inline'; style-src https: 'unsafe-inline'">If you want to allow users of a web application to add images/photos from any source but permits all scripts from trusted sources or specific sources.
\n <meta http-equiv="Content-Security-Policy" content="default-src 'self' img-src *; script-src cdn.loginradius.com;"> The img-src directive allows images to load from anywhere.\nThe script-src directive can only accept executable scripts from cdn.loginradius.com.
If you want to add social widgets like the google+ button, Facebook like, Tweet button on your website, you need to allow external script also like the below policy.
\n<meta http-equiv="Content-Security-Policy" content="default-src 'self' img-src *; script-src cdn.loginradius.com;https://platform.twitter.com; child-src https://plusone.google.com https://facebook.com https://platform.twitter.com;">The Content-Security-Policy-Report-Only Header is a wonderful method to evaluate the effects of a Content-Security-Policy header without really blocking anything on the site. Also, we can get any violation reports using this header. By default, it only sends reports to the developer tools console. If you include a report-to or report-uri directive, it will send a JSON representation of the violation to the provided URI endpoint.
<meta http-equiv="Content-Security-Policy-Report-Only" content="default-src 'self'; report-uri https://report.yourwebsite.com/cspreport;">In the above example, it will not enforce anything. Content-Security-Policy-Report-Only policy only generates reports and sends them to the report URI. The CSP violation report is generated in JSON format.
<meta http-equiv="Content-Security-Policy-Report-Only" content="default-src 'self'; script-src cdn.loginradius.com; report-uri https://report.loginradius.com/cspreport;">In the above example, the policy only allows the script from cdn.loginradius.com.
\n<!DOCTYPE html>\n<html>\n \n<head>\n <title>Content Security Policy</title>\n <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>\n</head>\n \n<body>\n . . .\n</body>\n \n</html>In the below sample HTML browser trying to download javascript from the other source, but we have allowed javascript src only from the CDN so that the browser will send the following violation report.
\n {\n"csp-report":{\n"document-uri": "https://loginradius.com/test.html",\n"referrer": "",\n"blocked-uri": "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js",\n"violated-directive": "script-src cdn.loginradius.com",\n"original-policy": "default-src 'self'; script-src cdn.loginradius.com; report-uri https://report.loginradius.com/cspreport;",\n"disposition”: “report"\n}\n}The Content Security Policy will add an additional layer of protection to your web application. CSP is compatible with almost all current browsers and is widely used on the internet as an effective technique for decreasing the threat of cross-site scripting attacks.
\nThe Web Application Security Working Group of the Wide Web Consortium (w3c has already begun work on the specification's next version, Content Security Policy Level 3 and Content Security Policy Level 2 already Candidate Recommendation.
\n","frontmatter":{"date":"July 14, 2021","updated_date":null,"description":null,"title":"Content Security Policy (CSP)","tags":["Secuirty Header","CSP","Content Security Policy"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/a14192a5c3e4cefed740fa3fc0e561e9/58556/content-security-policy.webp","srcSet":"/static/a14192a5c3e4cefed740fa3fc0e561e9/61e93/content-security-policy.webp 200w,\n/static/a14192a5c3e4cefed740fa3fc0e561e9/1f5c5/content-security-policy.webp 400w,\n/static/a14192a5c3e4cefed740fa3fc0e561e9/58556/content-security-policy.webp 800w,\n/static/a14192a5c3e4cefed740fa3fc0e561e9/99238/content-security-policy.webp 1200w,\n/static/a14192a5c3e4cefed740fa3fc0e561e9/7c22d/content-security-policy.webp 1600w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Vijay Singh Shekhawat","github":"code-vj","avatar":null}}}},{"node":{"excerpt":"Authentication and user identity management are challenging tasks you are bound to run into when building applications. For example, you…","fields":{"slug":"/engineering/guest-post/user-authentication-in-python/"},"html":"Authentication and user identity management are challenging tasks you are bound to run into when building applications. For example, you will need to create profiles for users, validate provided passwords, implement a password reset functionalities, manage user sessions (sometimes on multiple devices), manage social media authentication, and many others.
\nYou still have to work on other parts of your application, and you might not have a lot of time. A lot of developers might hack their way through authentication, but that could lead to improper implementations. It is not advisable to do this as you can create doorways for cyber-related attacks in your application.
\nIn this tutorial, you will learn how to properly implement user authentication and identity management in a Flask application.
\n\n\nHere for the code alone? Head over to the implementation section of this article or visit this GitHub gist to browse demo code.
\n
User authentication is the process of validating a person’s identity to ascertain that they are who they claim to be. Authentication is achievable using passwords, one-time pins (OTP), biometrics, authentication apps, access tokens, certificates, and many more.
\nUser identity is an entity used to identify a user of an application uniquely. Forms of user identifiers include full names, email addresses, system-generated values, and UUIDs.
\nAn identity provider is a system that helps create, maintain, and manage user identity information. It also provides authentication services to external applications to ease their authentication flow and make it seamless.
\nWhen referring to authentication in Python, we talk about user authentication concerning web applications built with it. Python is actively used in making web applications with many supporting frameworks, including but not limited to Flask, Django, FastAPI, Bottle, and Hug.
\nEvery web application built with Python at one point or another would need to implement user authentication features. This article will cover implementing authentication and proper handling of user identity information using LoginRadius and Flask.
\nLoginRadius is a cloud-based consumer identity and access management (CIAM) platform that allows seamless user authentication and SSO integration into your application. LoginRadius is simple to use, completely secure, and highly customizable.
\nTo proceed with this tutorial, you will need an account with LoginRadius. If you have not created one before now, create one on the LoginRadius website.
\nLogin to your LoginRadius dashboard, then navigate to the app you want to integrate with Python (LoginRadius will set up a free app for you when you create an account).
\n
Next, head over to the Configuration tab on the LoginRadius sidebar (left side of the screen).
![\"LoginRadius](\"/ea9ed1468469fcdba3d8c0fdebf2c088/i_alrgdnugpmtschkuuj.webp\")
Your API credentials are located under the API Key And Secret section. Once you have retrieved this, copy the APP Name, API Key, and API Secret and store them somewhere secure and easily retrievable.
![\"LoginRadius](\"/1d658bc9362be0fd7ed1a643af35012e/7lev6yc_ebtxcg62wrbe.webp\")
LoginRadius requires you to whitelist domains you will be integrating with your app. To whitelist, a domain, scroll down to the Whitelist Your Domain section in the Configuration tab of your app dashboard and add it.
![\"Domain](\"/689af03e0b523f8f87a86a4f38ffe91a/5ng50vbosmuhdhfuz-gi.webp\")
\n\nBy default, LoginRadius whitelists your local computer (localhost).
\n
We need to install the LoginRadius Python SDK. It provides functionalities that allow Python programs to communicate with LoginRadius APIs.
\nIn the terminal, type:
\npip install LoginRadius-v2 requests cryptography pbkdf2First, we need to install the Flask framework from PyPI. In the terminal, type:
\npip install flaskAfter that, create a file named server.py and save the following code in it:
from flask import *\n\napp = Flask(__name__)\napp.config["SECRET_KEY"] = "SECRET_KEY"\n\n\n@app.route("/")\ndef index():\n return "Hello World!"\n\n\nif __name__ == "__main__":\n app.run(debug=True)When you run the server.py script and open your browser, you will get a response similar to the image below:
![\"Hello](\"/b5ad3d364b16b60f9e8630be44e3cf84/vordrrnvz-vekwuickak.webp\")
Update the server.py file with the code below:
from LoginRadius import LoginRadius as LR\n\nLR.API_KEY = "API Key"\nLR.API_SECRET = "API Secret"\nloginradius = LR()Replace the values of the API_KEY and API_SECRET variables with your LoginRadius application keys we saved earlier.
To register users, you have to redirect them from your application to your LoginRadius Auth Page (IDX). Each LoginRadius app has a custom IDX. You can access it with the following URL pattern.
\nhttps://{APP_NAME}.hub.loginradius.com/auth.aspx?action={AUTH_ACTION}&return_url={RETURN_URL}APP_NAME parameter refers to your LoginRadius app name, which you can retrieve from the API Key And Secret section in the Configuration tab of your dashboard.AUTH_ACTION parameter refers to the authentication action you’re attempting to perform. It is either register or login.RETURN_URL parameter refers to the URL LoginRadius should redirect your users to after successful authentication. It is usually a route on your application server.Update the server.py file with the code below:
LR_AUTH_PAGE = "https://<APP_NAME>.hub.loginradius.com/auth.aspx?action={}&return_url={}"\n\n@app.route("/register/")\ndef register():\n # redirect the user to our LoginRadius register URL\n return redirect(LR_AUTH_PAGE.format("register", request.host_url))In the code above, we created a register route that redirects users to our LoginRadius registration IDX. We also set our AUTH_ACTION to “register” and our RETURN_URL to our application home page.
![\"LoginRadius](\"/79192f0d84a9ebca455ede5522497ab9/smn-8jr5ahgmhtynezje.webp\")
\n\nNOTE: Don’t forget to replace the <APP_NAME> placeholder with your LoginRadius app name we saved earlier.
\n
To authenticate registered users, you have to redirect them to your IDX page, passing “login” as the AUTH_ACTION.
Update the server.py file with the code below:
@app.route("/login/")\ndef login():\n access_token = request.args.get("token")\n if access_token is None:\n # redirect the user to our LoginRadius login URL if no access token is provided\n return redirect(LR_AUTH_PAGE.format("login", request.base_url))\n\n return "You have successfully logged in!"\n\nWhen LoginRadius successfully authenticates a user, it attaches a
\ntokenparameter to theREDIRECT_URLbefore redirecting your user there. This parameter contains the access token of the user that we authenticated.
In the code above, we redirect users to our LoginRadius login IDX if the token parameter is absent (this means LoginRadius did not redirect the user here). We also set our AUTH_ACTION to “login” and our RETURN_URL to our login page.
![\"LoginRadius](\"/8624b9e29ef548d70f975ecf65a31f92/7gs3xz6qhxhas7qgtjma.webp\")
![\"LoggedIn\"](\"/30d20a60f432e9415ebaf7645af42f80/xwzztcogdtmnyfq4j5nc.webp\")
We also want to fetch user profiles from the access token given by LoginRadius. It comes in handy when we want to verify if a given access token is valid (or has expired) or just fetch information about the current user.
Update the login route with the code below. We also added a dashboard route where we will redirect users after successful authentication.
@app.route("/login/")\ndef login():\n access_token = request.args.get("token")\n if access_token is None:\n # redirect the user to our LoginRadius login URL if no access token is provided\n return redirect(LR_AUTH_PAGE.format("login", request.base_url))\n\n # fetch the user profile details with their access tokens\n result = loginradius.authentication.get_profile_by_access_token(\n access_token)\n\n if result.get("ErrorCode") is not None:\n # redirect the user to our login URL if there was an error\n return redirect(url_for("login"))\n\n session["user_acccess_token"] = access_token\n\n return redirect(url_for("dashboard"))\n\n\n@app.route("/dashboard/")\ndef dashboard():\n return "You have successfully logged in!"In the code above, we used the authentication.get_profile_by_access_token method from the LoginRadius SDK to fetch our user’s details. If the request was successful and the result does not contain an ErrorCode parameter, we save the access token in the user’s session and redirect them to the dashboard route. But if an error occurs somewhere, e.g., the access token is invalid/expired, we redirect the user back to the login route.
![\"LoggedIn\"](\"/d15eed00435b16b1d05cbb201630c333/f2p7ddnwin3yihucx2em.webp\")
Next, we want to add more functionality to the dashboard route. Instead of just displaying a dummy text, let it show the user information we fetched earlier. Update the dashboard route with the code below:
@app.route("/dashboard/")\ndef dashboard():\n access_token = session.get("user_acccess_token")\n if access_token is None:\n return redirect(url_for("login"))\n\n # fetch the user profile details with their access tokens\n result = loginradius.authentication.get_profile_by_access_token(\n access_token)\n\n if result.get("ErrorCode") is not None:\n # redirect the user to our login URL if there was an error\n return redirect(url_for("login"))\n\n return jsonify(result)Here, we fetched the access token stored in the user’s session earlier, used it to get their details, and rendered the result.
\n![\"LoggedIn\"](\"/ed807cbc18a2c163fbbce57eb7789e5c/1zsvbg3rk013zlbpxx2u.webp\")
Invalidating access tokens means rendering particular access tokens useless and unusable. It comes in handy when we log out users. The LoginRadius SDK provides an auth_in_validate_access_token method that takes in an access token to be invalidated.
To add this to our server, create a logout route with the code below:
@app.route("/logout/")\ndef logout():\n access_token = session.get("user_acccess_token")\n if access_token is None:\n return redirect(url_for("login"))\n\n # invalidate the access token with LoginRadius API\n loginradius.authentication.auth_in_validate_access_token(access_token)\n session.clear()\n\n return "You have successfully logged out!"![\"Log](\"/bc9fb664300826a7397cfb8826284223/xyvodwpjtxjrjgxoffx5.webp\")
This article taught us about user authentication, user identity management, and implementing it correctly. In addition, we saw how easy it is to integrate LoginRadius services into a Python application to ease the implementation of authentication and user identity management.
\nThe source code of the demo application is available as a GitHub gist. You can learn more about the LoginRadius Python SDK features from the official documentation.
\n","frontmatter":{"date":"July 07, 2021","updated_date":null,"description":"Learn about user authentication, user identity management, and implementing it correctly into a Python application using LoginRadius.","title":"Implementing User Authentication in a Python Application","tags":["Python","Authentication","Flask"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/2005b7a832c4ee0e2301194e9f8eb64b/58556/coverImage.webp","srcSet":"/static/2005b7a832c4ee0e2301194e9f8eb64b/61e93/coverImage.webp 200w,\n/static/2005b7a832c4ee0e2301194e9f8eb64b/1f5c5/coverImage.webp 400w,\n/static/2005b7a832c4ee0e2301194e9f8eb64b/58556/coverImage.webp 800w,\n/static/2005b7a832c4ee0e2301194e9f8eb64b/99238/coverImage.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Solomon Esenyi","github":"LordGhostX","avatar":null}}}},{"node":{"excerpt":"Hi Everyone 👋 !!! Today we are announcing the beta release of LoginRadius CLI. I am very much excited about it. Why LoginRadius CLI…","fields":{"slug":"/engineering/introducing-loginradius-cli/"},"html":"Hi Everyone 👋 !!! Today we are announcing the beta release of LoginRadius CLI. I am very much excited about it.
\nDeveloper Experience plays a crucial role for us. We always think about the ways we can minimize the juggling between a quickstart tutorial, dashboard, and terminal.\nThe LoginRadius CLI will simplify your flow by just using some simple commands to register, login, add site, add social, etc., and enables you to get the job done in very little time without leaving the terminal.
\nCheck out a few examples of how LoginRadius CLI can help manage your Loginradius Dashboard.
\n![\"alt_text\"](\"/d8796faf29a7fcd7fb474a256d23fe61/login.webp\" "\\"Login")
This command will help you to log in to the CLI. Once you logged in to the CLI, you can configure all your LoginRadius Applications through CLI.
\n![\"alt_text\"](\"/085d2ce8c5c543876f123070b14b2609/api-cred.webp\" "\\"API")
Get your API Credentials in a single command. You can also reset your secret and generate sott using the LoginRadius CLI.
\n![\"alt_text\"](\"/fe8b9b3e8bc44a3e2e845a4b9ef12bb5/domain.webp\" "\\"Domain")
Manage your white-listed domain for your application with simple commands.
\n![\"alt_text\"](\"/2d953adec515093540994aa20fad8423/theme.webp\" "\\"Theme")
You can update the LoginRadius IDX Page theme from the predefined themes available through LoginRadius CLI.
\n\n\nYou can check out the Theme Customization section in the LoginRadius Dashboard for all the available customization options.
\n
![\"alt_text\"](\"/51377a663b53eba8c5e5803701dd41cb/social.webp\" "\\"Social")
With the help of LoginRadius CLI, you can add social logins to your LoginRadius IDX Page.
\nRun lr --help to get the list of all available commands. Also you can checkout the manual for all the commands supported.
The LoginRadius CLI is available for Windows, macOS, and Linux. Check out the installation on our README.
\nWe hope you’ll love the LoginRadius CLI. And we’re even more excited about the future as we explore what it looks like to build a truly delightful experience with LoginRadius on the command line.
\nWe can’t wait to hear about your experience with LoginRadius CLI, and we’d love your feedback. Please create an issue in our open source repository or discuss what more commands you feel should be there on our community page.
\n\n","frontmatter":{"date":"July 02, 2021","updated_date":null,"description":"LoginRadius CLI helps you to perform basic actions of your LoginRadius Dashboard through the command line. The actions include login, register, logout, email configuration, domain whitelisting, etc.","title":"Introducing LoginRadius CLI","tags":["Authentication","DevTools","CLI","LoginRadius CLI"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/c6be7e8c6ad8c169f91db6ca132b0667/a3e81/cli.webp","srcSet":"/static/c6be7e8c6ad8c169f91db6ca132b0667/61e93/cli.webp 200w,\n/static/c6be7e8c6ad8c169f91db6ca132b0667/1f5c5/cli.webp 400w,\n/static/c6be7e8c6ad8c169f91db6ca132b0667/a3e81/cli.webp 512w","sizes":"(max-width: 512px) 100vw, 512px"}}},"author":{"id":"Mohammed Modi","github":"mohammed786","avatar":null}}}},{"node":{"excerpt":"In this blog post, I will write a step-by-step tutorial to add Authentication to the Play Framework Application with OIDC and LoginRadius. I…","fields":{"slug":"/engineering/guest-post/add-authentication-to-play-framework-with-oidc-and-loginradius/"},"html":"In this blog post, I will write a step-by-step tutorial to add Authentication to the Play Framework Application with OIDC and LoginRadius. I will be using pac4j and it's play-pac4j integration in this tutorial. Before jumping into the tutorial, let's learn about few concepts.
\nOIDC is an authentication protocol that allows users to verify their identity when they are trying to access a protected HTTPS endpoint. OIDC is an evolutionary development of ideas implemented earlier in OAuth and OpenID.
\nOpenID Connect allows clients to request and receive information about authenticated sessions and end-users. It allows all types of clients, including
\nYou can find out more details about OIDC here
\nPlay Framework is an open-source web application framework that follows the model–view–controller architectural pattern. It is written in Scala and usable from other programming languages that are compiled to JVM Bytecode.
\nIt makes it easy to build web applications with Java & Scala. Play is based on a lightweight, stateless, web-friendly architecture. Built on Akka, Play provides predictable and minimal resource consumption (CPU, memory, threads) for highly-scalable applications.
\npac4j is an easy and powerful security engine for Java to authenticate users, get their profiles and manage authorizations in order to secure web applications and web services.
\nIt provides a comprehensive set of concepts and components. It is based on Java and available under the Apache 2 license. It is available for most frameworks/tools and supports most authentication/authorization mechanisms.
\npac4j is supported with most of the Java frameworks like
\nThere are multiple options you can get started with the Play framework.
\nsbt.For this tutorial, I will be using creating a new play project using sbt.
brew install sbtYou can find Installation steps for Windows and Linux here.
\nFor this tutorial, I will be using
\nCreate a new java play project using the following command
\nsbt new playframework/play-java-seed.g8The above command will prompt you to fill in the project name and project package structure in organization as shown below.
[info] welcome to sbt 1.5.3 (Oracle Corporation Java 11.0.2)\n[info] set current project to new (in build file:/private/var/folders/_9/rcqwq2vx1cl_1sc4xdhb5_5c0000gn/T/sbt_661d1bf7/new/)\n\nThis template generates a Play Java project\n\nname [play-java-seed]: loginradius-play-oidc\norganization [com.example]: com.loginradius.developer\n\nTemplate applied in /Users/vishnuchilamakuru/self/longinradius/./loginradius-play-oidcNow that the project is created with a base template. You can test it by running the project using the following command from loginradius-play-oidc folder.
sbt runNow visit http://localhost:9000, and it should look like this.
![\"play-project-homepage.webp\"](\"/9cfca8fc8971d0535c27bba8d3c3734f/play-project-homepage.webp\")
build.sbtAdd pac4j dependencies, Java 11 as required, and target version to compile the project in build.sbt.
name := """loginradius-play-oidc"""\norganization := "com.loginradius.developer"\n\nversion := "1.0-SNAPSHOT"\n\nlazy val root = (project in file(".")).enablePlugins(PlayJava)\n\nscalaVersion := "2.13.6"\n\ninitialize := {\n val _ = initialize.value // run the previous initialization\n val required = "11"\n val current = sys.props("java.specification.version")\n assert(current == required, s"Unsupported JDK: java.specification.version $current != $required")\n}\n\nscalacOptions += "-target:jvm-11"\n\njavacOptions ++= Seq("-source", "11", "-target", "11")\n\n\nlibraryDependencies ++= Seq(\n guice,\n ehcache,\n "org.pac4j" %% "play-pac4j" % "11.0.0-PLAY2.8",\n "org.pac4j" % "pac4j-oidc" % "5.1.0",\n "com.typesafe.play" % "play-cache_2.13" % "2.8.8",\n "com.fasterxml.jackson.module" %% "jackson-module-scala" % "2.12.3"\n)Create app/modules/SecurityModule.java. This class configures OIDC, sets up a secure HttpActionAdapter, and registers callback and logout controllers.
package modules;\n\nimport com.google.inject.AbstractModule;\n\nimport com.nimbusds.oauth2.sdk.ParseException;\nimport com.nimbusds.oauth2.sdk.auth.ClientAuthenticationMethod;\nimport com.nimbusds.openid.connect.sdk.op.OIDCProviderMetadata;\nimport com.typesafe.config.Config;\nimport net.minidev.json.JSONObject;\nimport org.pac4j.core.authorization.authorizer.RequireAnyRoleAuthorizer;\nimport org.pac4j.core.client.Clients;\nimport org.pac4j.core.context.session.SessionStore;\nimport org.pac4j.oidc.client.OidcClient;\nimport org.pac4j.oidc.config.OidcConfiguration;\nimport org.pac4j.play.CallbackController;\nimport org.pac4j.play.LogoutController;\nimport org.pac4j.play.http.PlayHttpActionAdapter;\nimport org.pac4j.play.store.PlayCacheSessionStore;\nimport play.Environment;\n\nimport java.util.Optional;\n\npublic class SecurityModule extends AbstractModule {\n\n private final Config configuration;\n\n public SecurityModule(final Environment environment, final Config configuration) {\n this.configuration = configuration;\n }\n\n @Override\n protected void configure() {\n\n bind(SessionStore.class).to(PlayCacheSessionStore.class);\n\n final OidcConfiguration oidcConfiguration = new OidcConfiguration();\n oidcConfiguration.setDiscoveryURI(configuration.getString("oidc.discoveryUri"));\n oidcConfiguration.setClientId(configuration.getString("oidc.clientId"));\n oidcConfiguration.setSecret(configuration.getString("oidc.clientSecret"));\n oidcConfiguration.setClientAuthenticationMethod(ClientAuthenticationMethod.CLIENT_SECRET_BASIC);\n\n addProviderMetadata(oidcConfiguration);\n\n final OidcClient oidcClient = new OidcClient(oidcConfiguration);\n oidcClient.addAuthorizationGenerator((ctx, session, profile) -> {\n profile.addRole("ROLE_ADMIN");\n return Optional.of(profile);\n });\n\n final String baseUrl = configuration.getString("baseUrl");\n final Clients clients = new Clients(baseUrl + "/callback", oidcClient);\n\n final org.pac4j.core.config.Config config = new org.pac4j.core.config.Config(clients);\n config.addAuthorizer("admin", new RequireAnyRoleAuthorizer("ROLE_ADMIN"));\n config.setHttpActionAdapter(PlayHttpActionAdapter.INSTANCE);\n bind(org.pac4j.core.config.Config.class).toInstance(config);\n\n // callback\n final CallbackController callbackController = new CallbackController();\n callbackController.setDefaultUrl("/");\n bind(CallbackController.class).toInstance(callbackController);\n\n // logout\n final LogoutController logoutController = new LogoutController();\n logoutController.setDefaultUrl("/?defaulturlafterlogout");\n bind(LogoutController.class).toInstance(logoutController);\n\n }\n\n private void addProviderMetadata(OidcConfiguration oidcConfiguration) {\n JSONObject jsonObj = new JSONObject();\n jsonObj.appendField("token_endpoint", configuration.getString("oidc.tokenUri"));\n final OIDCProviderMetadata providerMetaData;\n try {\n providerMetaData = OIDCProviderMetadata.parse(jsonObj);\n oidcConfiguration.setProviderMetadata(providerMetaData);\n } catch (ParseException e) {\n e.printStackTrace();\n }\n }\n}In app/controllers/HomeController.java add the following methods
After adding the above methods HomeController.java looks like this.
package controllers;\n\nimport com.google.inject.Inject;\nimport org.pac4j.core.context.session.SessionStore;\nimport org.pac4j.core.profile.ProfileManager;\nimport org.pac4j.core.profile.UserProfile;\nimport org.pac4j.play.context.PlayContextFactory;\nimport org.pac4j.play.java.Secure;\nimport org.pac4j.play.store.PlayCacheSessionStore;\nimport play.mvc.*;\n\nimport java.util.ArrayList;\nimport java.util.List;\n\n/**\n * This controller contains an action to handle HTTP requests\n * to the application's home page.\n */\npublic class HomeController extends Controller {\n\n /**\n * An action that renders an HTML page with a welcome message.\n * The configuration in the <code>routes</code> file means that\n * this method will be called when the application receives a\n * <code>GET</code> request with a path of <code>/</code>.\n */\n public Result index() {\n return ok(views.html.index.render());\n }\n\n @Secure(clients = "OidcClient")\n public Result oidcIndex(Http.Request req) {\n return protectedIndex(req);\n }\n\n public Result protectedIndex(Http.Request req) {\n return ok(views.html.protectedindex.render(getProfiles(req)));\n }\n\n @Inject\n private SessionStore sessionStore;\n\n private List<UserProfile> getProfiles(Http.Request req) {\n final ProfileManager profileManager = new ProfileManager(PlayContextFactory.INSTANCE.newContext(req), sessionStore);\n final List<UserProfile> profiles = new ArrayList<>();\n if (profileManager.getProfile().isPresent()) {\n profiles.add(profileManager.getProfile().get());\n }\n return profiles;\n }\n\n}app/views/index.scala.html as follows to add the link protected by OIDC authentication.@()\n\n@main("Welcome to Play") {\n <h1>Welcome to Play!</h1>\n\n <a href="oidc/index.html">Protected URL by OIDC</a>\n}app/views/protectedindex.scala.html with the following content below. This page will be shown after Successful Login using OIDC in LoginRadius.@(profileList: java.util.List[org.pac4j.core.profile.UserProfile])\n@import scala.collection.JavaConverters._\n@profiles() = { @profileList.toList }\n<h1>Protected Area</h1>\n<a href="..">Back</a>\n<ul>\n <li><a href="/logout?url=/?forcepostlogouturl">Logout</a></li>\n</ul>\n\n<p>\n profiles: @profiles\n</p>Now we already added methods in HomeController.java and configured callback, logout controllers in SecurityModule.java. Let's configure the routes to map to these methods in conf/routes.
conf/routes will look like this.# Routes\n# This file defines all application routes (Higher priority routes first)\n# ~~~~\n\n# An example controller showing a sample home page\nGET / controllers.HomeController.index\nGET /oidc/index.html controllers.HomeController.oidcIndex(request: Request)\nGET /protected/index.html controllers.HomeController.protectedIndex(request: Request)\nGET /callback @org.pac4j.play.CallbackController.callback(request: Request)\nPOST /callback @org.pac4j.play.CallbackController.callback(request: Request)\nGET /logout @org.pac4j.play.LogoutController.logout(request: Request)\n\n\n# Map static resources from the /public folder to the /assets URL path\nGET /assets/*file controllers.Assets.versioned(path="/public", file: Asset)Finally, configure the variables mentioned in SecurityModule.java in conf/application.conf as follows.
play {\n modules {\n enabled += modules.SecurityModule\n }\n}\n\nbaseUrl = "http://localhost:9000"\n\noidc.discoveryUri = "https://cloud-api.loginradius.com/sso/oidc/v2/{loginradius-site-name}/{loginradius-app-name}/.well-known/openid-configuration"\noidc.clientId = "{clientId}"\noidc.clientSecret = "{clientSecret}"\noidc.tokenUri = "https://cloud-api.loginradius.com/sso/oidc/v2/{loginradius-site-name}/token"Login to your LoginRadius account or signup here if you don't have one.
\nOnce you log in you can see by default, one application will be created for you. Otherwise, you can create a new application here from the following screen by clicking New App.
![\"loginradius-dashboard.webp\"](\"/88ef8789fadffc46e2a255a6fb80fcdb/loginradius-dashboard.webp\")
I will be using the existing application itself for this demo as I am using a free plan. In the free plan, you can create only one application (no need for card details).
\nUpgrade your application subscription to the Developer Pro Plan to configure OIDC. (Developer Pro Plan is available with 21 days trial).
![\"loginradius-upgrade-subscription-1.webp\"](\"/02e6331840d1bcb860ee3fce59596faa/loginradius-upgrade-subscription-1.webp\")
![\"loginradius-upgrade-subscription-2.webp\"](\"/fb33387fac84b2a97c35d480069f3319/loginradius-upgrade-subscription-2.webp\")
Now click on Select & Configure on your application and navigate to the Integration Section and Configure Open ID configuration. You can find step-by-step details to configure OIDC here.
Once you configure these conf/application.conf will look something like this.
# This is the main configuration file for the application.\n# https://www.playframework.com/documentation/latest/ConfigFile\n\nplay {\n modules {\n enabled += modules.SecurityModule\n }\n}\n\nbaseUrl = "http://localhost:9000"\n\noidc.discoveryUri = "https://cloud-api.loginradius.com/sso/oidc/v2/dev-svv3qlcj2y/pac4j-play-loginradius-demo/.well-known/openid-configuration"\noidc.clientId = "8ce24413-9b7e-4282-9f5b-e0e5ec13a42a"\noidc.clientSecret = "c9c61f6e-325f-40d6-89fd-696d17f970eb"\noidc.tokenUri = "https://cloud-api.loginradius.com/sso/oidc/v2/dev-svv3qlcj2y/token"\n# Site Name - dev-svv3qlcj2y\n# App Name - pac4j-play-loginradius-demoLet's run our application using sbt clean run and visit http://localhost:9000. The Home page will look like this.
![\"home-page.webp\"](\"/4c35100213251fe1d18a6e1aae565d2b/home-page.webp\")
Now click on the protected url by OIDC link on the home page that will redirect you to the LoginRadius Auth Page (IDX), which you configured.
![\"loginradius-consent-page.webp\"](\"/af92ab759d2f4b543a466933707a44af/loginradius-consent-page.webp\")
On successful login from the above step, you will be redirected to the protectedindex.scala.html page.
![\"loginradius-protected-index-page.webp\"](\"/1083cf7a089a7c3324dcc7b853351249/loginradius-protected-index-page.webp\")
play-pac4j provides out of the box LogoutController which can be used to handle logout flows. It has logout functionality which has the logout logic implementation to clear the session. Below is the sample logout functionality from org.pac4j.play.LogoutController play-pac4j module.
public CompletionStage<Result> logout(final Http.Request request) {\n\n final HttpActionAdapter bestAdapter = FindBest.httpActionAdapter(null, config, PlayHttpActionAdapter.INSTANCE);\n final LogoutLogic bestLogic = FindBest.logoutLogic(logoutLogic, config, DefaultLogoutLogic.INSTANCE);\n\n final WebContext context = FindBest.webContextFactory(null, config, PlayContextFactory.INSTANCE).newContext(request);\n\n return CompletableFuture.supplyAsync(() -> (Result) bestLogic.perform(context, sessionStore, config, bestAdapter, this.defaultUrl,\n this.logoutUrlPattern, this.localLogout, this.destroySession, this.centralLogout), ec.current());\n }So to use this LogoutController, we just need to initialize it and define logout route for the same in our routes. We already initialized LoginController in SecurityModule.java.
logout action. // logout\n final LogoutController logoutController = new LogoutController();\n logoutController.setDefaultUrl("/?defaulturlafterlogout");\n bind(LogoutController.class).toInstance(logoutController);/logout Route using LogoutController in conf/routes.GET /logout @org.pac4j.play.LogoutController.logout(request: Request)On Clicking logout in our application, the session will be cleared and you will be redirected to the Home page based on our configuration.
You can see the full source code for the application developed in this tutorial on GitHub.
\n","frontmatter":{"date":"June 25, 2021","updated_date":null,"description":"Learn how to integrate play-pac4j and use its OIDC support to authenticate with LoginRadius using JAVA play framework.","title":"Add Authentication to Play Framework With OIDC and LoginRadius","tags":["OIDC","Java","pac4j","Play Framework","Authentication"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/20973f3ab172cea4306baad7dd6cba11/58556/pac4j-authentication.webp","srcSet":"/static/20973f3ab172cea4306baad7dd6cba11/61e93/pac4j-authentication.webp 200w,\n/static/20973f3ab172cea4306baad7dd6cba11/1f5c5/pac4j-authentication.webp 400w,\n/static/20973f3ab172cea4306baad7dd6cba11/58556/pac4j-authentication.webp 800w,\n/static/20973f3ab172cea4306baad7dd6cba11/210c1/pac4j-authentication.webp 900w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Vishnu Chilamakuru","github":"vishnuchilamakuru","avatar":null}}}},{"node":{"excerpt":"There is an advanced feature of React that it can write renderers for multiple different env. Let discuss a few of them. React-Figma This is…","fields":{"slug":"/engineering/react-renderer/"},"html":"There is an advanced feature of React that it can write renderers for multiple different env. Let discuss a few of them.
\nThis is a Renderer for Figma. It can use React components as a design source.
\nSample code with react-figma:
\nimport * as React from 'react';\nimport { Page, View, Text } from 'react-figma';\n\nexport const App = () => {\n return (\n <Page name="My Resume" isCurrent>\n <View>\n <View style={{ width: 200, height: 100, backgroundColor: '#dd423a' }} /> <Text style={{ color: 'white' }}>Hi, There</Text>\n </View>\n </Page>\n );\n};Nowadays, Figma is the most popular design tool, similar renderers available as well: react-sketchapp for Sketch, react-xd for Adobe XD.
A device like Arduino can be operated by React components.
\nLet's checkout demo code :
\nimport React from 'react';\nimport ReactHardware, {Led} from 'react-hardware';\n\nconst App = () => {\n const [ledStage, setLedStage] = useState(false);\n\n useEffect(() => {\n setInterval(() => {\n setLedStage(prev => !prev);\n }, 2000);\n }, []);\n\n return <Led pin={13} value={ledStage ? 255 : 0} />\n}\nconst PORT = 'dev/tty.usbmodem1411';\nReactHardware.render(<App />, PORT);Another React solution for CLIs. It allows you to run, build and test your CLI output through components:
\nThe code of the demo:
\nconst Raiser = () => {\n const [i, setI] = useState(0);\n\n useEffect(() => {\n setInterval(() => {\n setI(prev => prev + 1);\n }, 200);\n }, []);\n\n return <Color>\n Increased by {i} \n\t</Color>;\n}Ink is a popular one that is used by libraries such a Gatsby, Parcel, Yarn 2, etc.\nreact-blessed is one of the similar libraries.
This is a great React renderer for threejs on the react-native and web.
\nLet's see a sample code:
\nimport ReactDOM from 'react-dom'\nimport React, { useRef, useState } from 'react'\nimport { Canvas, useFrame } from 'react-three-fiber'\n\nfunction MyFrame(props) {\n const Ref = useRef()\n const [hover, setOnHover] = useState(false)\n const [enable, setEnable] = useState(false)\n\n useFrame(() => (Ref.current.rotation.x = Ref.current.rotation.y += 0.01))\n\n return (\n <Ref\n {...props}\n ref={Ref}\n scale={enable ? [1.5, 1.5, 1.5] : [1, 1, 1]}\n onClick={(e) => setEnable(!enable)}\n onPointerOver={(e) => setOnHover(true)}\n onPointerOut={(e) => setOnHover(false)}>\n <boxBufferGeometry args={[1, 1, 1]} />\n <meshStandardMaterial color={hover ? 'hotpink' : 'orange'} />\n </Ref>\n )\n}\n\nReactDOM.render(\n <Canvas>\n <pointLight position={[10, 10, 10]} />\n <MyFrame position={[-3.2, 0, 0]} />\n <MyFrame position={[2.2, 0, 0]} />\n </Canvas>,\n document.getElementById('root')\n)The library has a great ecosystem along with packages such as react-three-flex ,react-xr, react-postprocessing , etc.
A renderer for React that render nothing.
\nimport React, { useState, useEffect } from "react"\nimport { render } from "react-nil"\nfunction MyComponent() {\n const [active, set] = useState(false)\n useEffect(() => void setInterval(() => set((active) => !active), 1000), [])\n return null\n}\n\nrender(<MyComponent />)It provides you kind of high-level abstraction to Node.
\nAnother reconciler for DOCX.js.
\nLet's understand with a sample code:
\nrenderAsyncDocument(\n <section>\n <paragraph heading={Docx.HeadingLevel.HEADING_1}>\n This is a sample paragraph with paragraph tag\n </paragraph>\n <p> This is a sample paragraph with P tag</p>\n <p>\n <t>this is for textrun</t>\n </p>\n <p>\n <img\n src="base64...."\n width={200}\n height={200}\n />\n <href\n src="http://localhost:8080"\n label={"image n links label"}\n />\n </p>\n <Component text="can try componets in this way of course, like react!">\n </Component>\n </section>\n).then((doc) => console.log(doc));Also, you can checkout react-pdf and redocx for a similar purpose.
Can visit this Github Repo for a curated list of react renderers.
\n","frontmatter":{"date":"June 23, 2021","updated_date":null,"description":"There is an advanced feature of React is that it can write renderers for multiple different env.","title":"React renderers, react everywhere?","tags":["JavaScript","React","Renderer"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/c78e466846f6ee90e75611967e696733/58556/react.webp","srcSet":"/static/c78e466846f6ee90e75611967e696733/61e93/react.webp 200w,\n/static/c78e466846f6ee90e75611967e696733/1f5c5/react.webp 400w,\n/static/c78e466846f6ee90e75611967e696733/58556/react.webp 800w,\n/static/c78e466846f6ee90e75611967e696733/99238/react.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null}}}},{"node":{"excerpt":"React's Context API Guide with Example In this blog, You will learn What React's Context API is and how to use React's Context API. It is…","fields":{"slug":"/engineering/react-context-api-guide-with-example/"},"html":"In this blog, You will learn What React's Context API is and how to use React's Context API. It is very much used as a state management tool, oftentimes replacing Redux.
\nAccording to the React doc:
\n\nContext provides a way to pass data through the component tree\nwithout having to pass props down manually at every level.
\n
To be more clear, this provides a way for you to make values available to all components of your application, no matter how complicated your application is.
\nconst App = () => {\n return(\n <ParentClass color= "blue"/>\n );\n}\n\nconst ParentClass = (props) => (\n <ChildClass color= {props.color} />\n)\n\nconst ChildClass = (props) => (\n <GrandChildClass color= {props.color} />\n)\n\nconst GrandChildClass = (props) => (\n <p>Color: {props.color}</p>\n)In the above code, we designed the application in which used color props in the ParentClass and passed that props to all component (top to down) without checking that it is required by the child class or not and another issue also here that in case if GrandChildClass component was more deeply nested than it was very difficult to manage. This is the problem that Context solves. Context is designed the share values that can be considered \"global\" such as preferred language, current user, or theme.
Using context, we can avoid passing props. Let's create the above example code using context:
\nWe will create a separate component for context that we can use throughout the components.\nOnce you have initialized your project, create a file called ColorContext.js in your /src folder.
Using React.createContext, we can create context and pass anything as an argument to React.createContext. In our case, we are passing \"white\" color to provide a light theme.
This will also give me ColorContext.Provider and ColorContext.Consumer. What these two components do is straightforward:
import React from \"react\";
\nconst ColorContext = React.createContext(\"white\");\nexport default ColorContext;
\nTo use this context all over the components, we have to use the provider. According to React document, every context object comes with a Provider React component that allows consuming components to subscribe to context changes.
\nAfter successfully creating context, we can import context and use it to create our provider.\nAs we want to access context in the entire application, we need to wrap our app in ColorContext.Provider.
import ColorContext from './ColorContext';\n function App() {\n const color= "white";\n return (\n <ColorContext.Provider value = {color}>\n <div className="App">\n <header className="App-header">\n <img src={logo} className="App-logo" alt="logo" />\n <h1 className="App-title">Welcome to my web page</h1>\n </header>\n </div>\n </ColorContext.Provider>\n );\n }The approach to providing context is the same for class and functional components but consuming is a little different for both.
\nMainly used way to accessing context in class component using static contextType. After that, you can access the context value using this.context. You can refer to it in any lifecycle method and even in the render method.
import ColorContext from './ColorContext'\n\nclass Page extends Component {\n static contextType = ColorContext;\n\n componentDidMount() {\n const colorValue= this.context\n\n console.log(colorValue) // "white" \n }\n\n render() {\n return <div>Color Value is {colorValue} </div>\n }\n}The traditional way to accessing context values is by wrapping the child component in Consumer. From there, You can access values as props.
import { ColorContext} from './ColorContext'\n\nclass Page extends Component {\n render() {\n return (\n <ColorContext.Consumer>\n {(props) => {\n return <div>{props}</div>\n }}\n </ColorContext.Consumer>\n )\n }\n} You can use useContextin functional components and its equivalent of static contextType. \t
import React, { useContext } from 'react'\nimport ColorContextfrom './ColorContext'\n\nexport const HomePage = () => {\n const colorValue= useContext(ColorContext)\n\n return <div>{ColorContext}</div>\n}We can update the context by updating the normal state. We just need to create a wrapper class that contains the state of context and the method to update it.\nExample code with file ColorContext.js
import React, { Component } from 'react'\n\nconst ColorContext = React.createContext()\n\nclass ColorContextProvider extends Component {\n // Context state\n state = {\n color:""\n }\n\n // Method to update state\n setColor = (color) => {\n this.setState((prevState) => ({ color}))\n }\n\n render() {\n const { children } = this.props\n const { color } = this.state\n\n\n return (\n <ColorContext.Provider\n value={{\n color,\n this.setColor,\n }}\n >\n {children}\n </ColorContext.Provider>\n )\n }\n}\n\nexport default ColorContext\n\nexport { ColorContextProvider }Now you can update and view the user from the Context method.
\nimport ColorContext from './ColorContext'\n\nclass Page extends Component {\n static contextType = ColorContext;\n\n render() {\n const { color, setColor } = this.context\n\n return (\n <div>\n <button\n onClick={() => {\n const newColorValue= "black";\n\n setColor (newColorValue)\n }}\n >\n Update Color\n </button>\n <p>{`Current Color Value: ${color}`}</p>\n </div>\n )\n }\n}In my opinion, It is much easier to use than Redux and requires very little code, so why wouldn't you use it?
\nThe problem with the context is simple: ** Everything that consumes the context re-renders each time the state of that reference changes. **
\nThis means that if you're consuming your context everywhere in your app, or worse, using one context for the state of your entire app, you'll end up re-rendering a ton everywhere.
\n","frontmatter":{"date":"June 09, 2021","updated_date":null,"description":"Deep Dive into React's Context API with example","title":"React's Context API Guide with Example","tags":["React","Redux","Hooks"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/6a87bd8ebde082f5a6d9c7c0bb658776/58556/title-image.webp","srcSet":"/static/6a87bd8ebde082f5a6d9c7c0bb658776/61e93/title-image.webp 200w,\n/static/6a87bd8ebde082f5a6d9c7c0bb658776/1f5c5/title-image.webp 400w,\n/static/6a87bd8ebde082f5a6d9c7c0bb658776/58556/title-image.webp 800w,\n/static/6a87bd8ebde082f5a6d9c7c0bb658776/99238/title-image.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","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":54,"currentPage":10,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}