{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/53","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"Creating a popup is a very simple addition to any webpage. In this tutorial, I will show you how to create a popup using basic Html…","fields":{"slug":"/engineering/simple-popup-tutorial/"},"html":"

Creating a popup is a very simple addition to any webpage. In this tutorial, I will show you how to create a popup using basic Html, javascript and CSS. The first thing we want to think about is what we want to do to trigger a popup. You can trigger an event on almost anything such as a button, link or keypress. In this tutorial, we will be clicking on a button to trigger a popup.

\n

What you will need:

\n\n

Let’s start building the popup

\n
<html>\n<head>\n  <title>A Simple Popup</title>\n</head>\n<body>\n<div id="maincontent">\n    <h1>Page Content<h2>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n    <div class="popupcontent">\n        <h1>Some Popup Content</h1>\n    </div>\n</div>\n</body>\n</html>
\n

We’ve created a div with id overlay to cover all the page content when the popup is displayed. This forces the user to close the popup before returning to the page content and also creates a nice user experience. The div with id popup will be our popup containing controls at the top to close the popup and our content area. Currently, this popup has no content and no styling so nothing will show. Let's add some styling next.

\n
<html>\n<head>\n  <title>A Simple Popup</title>\n  <style>\n    #overlay {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        background: #999;\n        width: 100%;\n        height: 100%;\n        opacity: 0.8;\n        z-index: 100;\n    }\n\n    #popup {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        background: #fff;\n        width: 500px;\n        height: 500px;\n        margin-left: -250px; /*Half the value of width to center div*/\n        margin-top: -250px; /*Half the value of height to center div*/\n        z-index: 200;\n    }\n  </style>\n</head>\n<body>\n<div id="maincontent">\n    <h1>Page Content<h2>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n    <div class="popupcontent">\n        <h1>Some Popup Content</h1>\n    </div>\n</div>\n</body>\n</html>
\n

We’ve now added some CSS for the overlay and the popup. At this point, we can see a white box above our grey overlay. We’ve added an h1 tag inside our popup a page title and some main page content. We should now see something like this:

\n

\"popup-example-01\"

\n

Next let's add a control to close this popup. We’ll add a span containing an X that we can click on to close this popup and JavaScript to handle this event.

\n
<html>\n<head>\n  <title>A Simple Popup</title>\n  <style>\n    #overlay {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        background: #999;\n        width: 100%;\n        height: 100%;\n        opacity: 0.8;\n        z-index: 100;\n    }\n\n    #popup {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        background: #fff;\n        width: 500px;\n        height: 500px;\n        margin-left: -250px; /*Half the value of width to center div*/\n        margin-top: -250px; /*Half the value of height to center div*/\n        z-index: 200;\n    }\n\n    #popupclose {\n        float: right;\n        padding: 10px;\n        cursor: pointer;\n    }\n  </style>\n</head>\n<body>\n<div id="maincontent">\n    <h1>Page Content<h2>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n    <div class="popupcontrols">\n        <span id="popupclose">X</span>\n    </div>\n    <div class="popupcontent">\n        <h1>Some Popup Content</h1>\n    </div>\n</div>\n<script type="text/javascript">\n    // Initialize Variables\n    var closePopup = document.getElementById("popupclose");\n    var overlay = document.getElementById("overlay");\n    var popup = document.getElementById("popup");\n \n    // Close Popup Event\n    closePopup.onclick = function() {\n        overlay.style.display = 'none';\n        popup.style.display = 'none';\n    };\n</script>\n</body>\n</html>
\n

Now we can close this popup…. Ah, that’s nice. Here we’ve added our X to click on, some CSS to style this close area. Also, we’ve added the javascript to handle the click event to hide the popup. Save your file as index.html and open it in your browser to test closing the popup. You’ll notice that the popup is displayed when we first open the page. Let's hide this with CSS on load so that we have to do something to open it.

\n
#overlay {\n    display: none;\n    ...\n}\n \n#popup {\n    display: none;\n    ...\n}
\n

After adding display: none; to our overlay and popup, you’ll notice that when you load the page in your browser we cannot see them. To show this popup we’ll have to do something, so let’s make a button to click on and some JavaScript to handle this event.

\n
<html>\n<head>\n  <title>A Simple Popup</title>\n  <style>\n\t#overlay {\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\tbackground: #999;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\topacity: 0.8;\n\t\tz-index: 100;\n\t}\n\n\t#popup {\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\tbackground: #fff;\n\t\twidth: 500px;\n\t\theight: 500px;\n\t\tmargin-left: -250px; /*Half the value of width to center div*/\n\t\tmargin-top: -250px; /*Half the value of height to center div*/\n\t\tz-index: 200;\n\t}\n\n\t#popupclose {\n\t\tfloat: right;\n\t\tpadding: 10px;\n\t\tcursor: pointer;\n\t}\n\n\t.popupcontent {\n\t\tpadding: 10px;\n\t}\n\n\t#button {\n\t\tcursor: pointer;\n\t}\n  </style>\n</head>\n<body>\n<div id="maincontent">\n    <h1>Page Content<h2>\n    <button id="button">Show Popup</button>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n    <div class="popupcontrols">\n        <span id="popupclose">X</span>\n    </div>\n    <div class="popupcontent">\n        <h1>Some Popup Content</h1>\n    </div>\n</div>\n<script type="text/javascript">\n\t// Initialize Variables\n\tvar closePopup = document.getElementById("popupclose");\n\tvar overlay = document.getElementById("overlay");\n\tvar popup = document.getElementById("popup");\n\tvar button = document.getElementById("button");\n\t// Close Popup Event\n\tclosePopup.onclick = function() {\n\t  overlay.style.display = 'none';\n\t  popup.style.display = 'none';\n\t};\n\t// Show Overlay and Popup\n\tbutton.onclick = function() {\n\t  overlay.style.display = 'block';\n\t  popup.style.display = 'block';\n\t}\n</script>\n</body>\n</html>
\n

We’ve added a button in our main content area. To show the popup we’ve added a JavaScript function to change the overlay and our popup to display:block; on event onclick. After making these changes click on your button to open your popup.

\n

Demo:

\n

See the Pen OPmQMP by Zoie Carnegie (@zoie-loginradius) on CodePen.

\n

Please post your questions or feedback in the comment area.

\n","frontmatter":{"date":"January 05, 2015","updated_date":null,"description":null,"title":"A Simple Popup Tutorial","tags":["HTML","CSS","UI"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/c6bf325c9c408389282535e3a446b575/58556/simplepop.webp","srcSet":"/static/c6bf325c9c408389282535e3a446b575/61e93/simplepop.webp 200w,\n/static/c6bf325c9c408389282535e3a446b575/1f5c5/simplepop.webp 400w,\n/static/c6bf325c9c408389282535e3a446b575/58556/simplepop.webp 800w,\n/static/c6bf325c9c408389282535e3a446b575/210c1/simplepop.webp 900w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Zoie Carnegie","github":null,"avatar":null}}}},{"node":{"excerpt":"Welcome to our new initiative to contribute and spread the learnings/findings we had working with LoginRadius API! We always try to come up…","fields":{"slug":"/engineering/hello-developers-and-designers/"},"html":"

Welcome to our new initiative to contribute and spread the learnings/findings we had working with LoginRadius API!

\n

We always try to come up with new ideas/process during our development and research sessions..sometimes they are funny but awesome. :). We'll share those ideas and experiences.look forward for your comments/feedback!

\n

--

\n

LoginRadius Engineering team

\n","frontmatter":{"date":"May 02, 2014","updated_date":null,"description":null,"title":"Hello developers and designers!","tags":["Engineering"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/b965f64c315a9fddcd7037c0d1e1441f/ad85c/desdev.webp","srcSet":"/static/b965f64c315a9fddcd7037c0d1e1441f/61e93/desdev.webp 200w,\n/static/b965f64c315a9fddcd7037c0d1e1441f/1f5c5/desdev.webp 400w,\n/static/b965f64c315a9fddcd7037c0d1e1441f/ad85c/desdev.webp 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","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":312,"currentPage":53,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}