{"componentChunkName":"component---src-templates-tag-js","path":"/tags/login-radius/","result":{"data":{"site":{"siteMetadata":{"title":"LoginRadius Blog"}},"allMarkdownRemark":{"totalCount":20,"edges":[{"node":{"fields":{"slug":"/engineering/implementing-oidc-sso-loginradius-as-identity-provider/"},"html":"

First, let's understand:

\n\n

SSO stands for Single Sign-On. It's an authentication process that allows a user to access multiple applications or systems with one set of login credentials (username and password). Instead of requiring users to log in separately to each application, SSO enables them to log in once and gain access to all the connected systems without needing to re-enter their credentials.

\n

OpenID Connect (OIDC) is a protocol that builds on OAuth 2.0 to ensure secure user authentication and authorization. It adds an identity layer to OAuth 2.0, allowing applications to confirm a user's identity and gather basic profile information. OIDC utilizes JSON Web Tokens (JWTs) for these functions, aligning with OAuth 2.0's token acquisition methods. This integration enables seamless user authentication across different platforms, supporting features like single sign-on, where users can access multiple applications with one set of credentials managed by an identity provider.

\n

What is LoginRadius CIAM?

\n

LoginRadius is a high-performance, scalable identity and access management platform focused on customer-facing use cases. It offers comprehensive features and capabilities to help you implement user authentication and authorization and manage user data with built-in workflows and security controls.

\n

On these lines, LoginRadius offers built-in support for OIDC and the use of OIDC to implement SSO.

\n

First, you need to create an OIDC application in LoginRadius to tailor user claim fields effortlessly. You can fine-tune these customizable user claims through LoginRadius' user-friendly interface. Subsequently, you can seamlessly integrate these claims into the token, enabling streamlined extraction and utilization within the application ecosystem.

\n

In essence, LoginRadius facilitates the setup of OIDC applications and offers customization capabilities through its intuitive interface. This ensures efficient management of user claims, ultimately contributing to a more personalized and secure authentication experience.

\n

After setting up the OIDC app from the LoginRadius dashboard, you'll use the go-oidc library to configure our provider further and configure the oidc connect.

\n

Setting Up OIDC Application in LoginRadius

\n

Go to OIDC Application Configuration and click on Add App button

\n

\"OIDC

\n

Enter the App name and click one of the following:

\n

Native App, Single page App or Web App according to your application.

\n

\"OIDC

\n

After clicking the Create button, you'll get the OIDC application configuration page. This page contains details like your application's Client ID and Client Secret, which are necessary for setting up the OIDC provider and configuration when you code in Golang.

\n

\"OIDC

\n

Upon reaching the configuration page for your OIDC Application, you'll encounter a variety of fields ripe for customization:

\n
    \n
  1. Algorithm: Presently, we offer support for rs256.
    2. \n
  2. Grant Type: Options include authorization code, implicit, password creds, etc.
    3. \n
  3. You can tailor settings for Token Expiry, Refresh Token, and TTL to suit your needs.
    4. \n
  4. Data Mapping: Define fields or properties to be included in the data response.
    5. \n
  5. Metadata: Incorporate static, non-profile values into the data response.
    6. \n
  6. Define the Scope for Management API.
    7. \n
\n

This array of configurable options empowers you to fine-tune your OIDC Application according to your specific requirements.

\n

Whitelisting the Domain of Your Application

\n

To ensure seamless redirection of requests and successful callbacks to your endpoint, add your application's domain to the whitelist. This will authorize the redirection process and prevent failures when calling the callback endpoint.

\n

To access Web Apps in Deployment, follow these steps:

\n
    \n
  1. Navigate to the Deployment section from the Dashboard.
    2. \n
  2. Once in Deployment, select the Apps tab.
    3. \n
  3. From there, choose Web Apps.
    4. \n
\n

Now, to add a new site:

\n
    \n
  1. Click on the Add New Site button.
    2. \n
  2. Enter the domain name of the website (example: \"https://localhost:8080\").
    3. \n
\n

\"Whitelisting

\n

Whitelisting Domain from OIDC Application Configuration

\n

LoginRadius lets you uniquely identify the redirect URLs for individual OIDC applications:

\n\n

Setting Up the Provider Object and the OAuthconfig with the Loginradius OIDC App Credentials

\n
provider, err := oidc.NewProvider(ctx, "`https://api.loginradius.com/{oidcappname}")`\nif err != nil {\n    // handle error\n}\n\n// Configure an OpenID Connect aware OAuth2 client.\noauth2Config := oauth2.Config{\n    ClientID:     your-oidc-clientID,\n    ClientSecret: your-oidc-clientSecret\n    RedirectURL:  redirectURL,\n\n    // Discovery returns the OAuth2 endpoints.\n    Endpoint: provider.Endpoint(),\n\n    // "openid" is a required scope for OpenID Connect flows.\n    Scopes: []string{oidc.ScopeOpenID, "profile", "email"},\n}
\n

When setting up a new provider, you'll need to input the LoginRadius OIDC App URL, typically in this format: https://{siteUrl}/service/oidc/{OidcAppName}

\n

To seamlessly integrate this with your Go backend, create two essential APIs for setting up and configuring go-oidc:

\n
    \n
  1. Login Endpoint: This endpoint initiates the authentication process and redirects to the callback endpoint with the authorization code.
    2. \n
  2. Callback Endpoint: Here, the authorization code received from the login endpoint is exchanged for an access token. Additionally, this endpoint extracts user claims from the access token.
    3. \n
\n

By establishing these APIs, your Go backend efficiently handles the authentication flow, ensuring a smooth user experience while securely managing user identity and access.

\n

Handle the Callback Hit

\n

Handle the callback hit that exchanged the authorization token for the access token:

\n
var verifier = provider.Verifier(&oidc.Config{ClientID: clientID})\n\nfunc handleOAuth2Callback(ctx *gin.context) {\n    // Verify state and errors.\n    authCode := ctx.query("code")\n\n    oauth2Token, err := oauth2Config.Exchange(ctx, authCode)\n    if err != nil {\n        // handle error\n    }\n\n    // Extract the ID Token from the OAuth2 token.\n    rawIDToken, ok := oauth2Token.Extra("id_token").(string)\n    if !ok {\n        // handle missing token\n    }\n\n    // Parse and verify ID Token payload.\n    idToken, err := verifier.Verify(ctx, rawIDToken)\n    if err != nil {\n        // handle error\n    }\n\n    // Extract custom claims\n    var claims struct {\n        Email    string `json:"email"`\n        Verified bool   `json:"email_verified"`\n    }\n    if err := idToken.Claims(&claims); err != nil {\n        // handle error\n    }\n}
\n

For both endpoints, let's review a sample backend server with implementation in Gin Golang.

\n

Gin Golang Code

\n

For OIDC integration with the Go backend, you'll implement it using the coreos/go-oidc library (feel free to check it out). This library provides comprehensive support for OIDC, allowing to easily verify tokens, extract user claims, and validate ID tokens. Its features ensure secure authentication and seamless integration with various OIDC providers.

\n

With the go-oidc library, you can efficiently implement OIDC authentication in the Go backend, guaranteeing users a smooth and secure authentication process.

\n
go get github.com/coreos/go-oidc/v3/oidc
\n
package main\n\nimport (\n\t"encoding/json"\n\t"fmt"\n\t"io"\n\t"log"\n\t"net/http"\n\t"os"\n\n\t"github.com/coreos/go-oidc/v3/oidc"\n\t"github.com/gin-gonic/gin"\n\t"golang.org/x/oauth2"\n)\n\n// Define global OAuth2 configuration and OIDC provider.\nvar (\n\toauthConfig = &oauth2.Config{\n\t\tClientID:     "your-client-id", // Replace with your LoginRadius Client ID\n\t\tRedirectURL:  "http://localhost:8080/api/callback",\n\t\tClientSecret: "your-client-secret", // Replace with your LoginRadius Client Secret\n\t\tScopes:       []string{"user"},\n\t}\n\tglobalProvider   *oidc.Provider\n\tglobalOuthConfig *oauth2.Config\n)\n\n// Server struct holds interfaces like HTTP server, DBHelper, ServerProvider, MongoDB client, etc.\ntype Server struct {\n\n}\n\n// InitializeOAuthConfig sets up the global OAuth2 configuration and OIDC provider.\nfunc InitializeOAuthConfig() {\n\t// Create a new OIDC provider using the OAuth2 endpoint and OIDC provider URL.\n\tprovider, err := oidc.NewProvider(context.Background(), "https://<siteUrl>/service/oidc/<OidcAppName>") // Replace with your OIDC Provider URL\n\tif err!= nil {\n\t\tlog.Fatalf("Failed to create new provider: %v", err)\n\t}\n\tglobalProvider = provider\n\n\t// Set up the OAuth2 configuration with the client ID, secret, redirect URL, and scopes.\n\toauth2Config := &oauth2.Config{\n\t\tClientID:     oauthConfig.ClientID,\n\t\tClientSecret: oauthConfig.ClientSecret,\n\t\tRedirectURL:  oauthConfig.RedirectURL,\n\t\tEndpoint:     provider.Endpoint(),\n\t\tScopes:       []string{oidc.ScopeOpenID, "profile", "email"},\n\t}\n\tglobalOuthConfig = oauth2Config\n}\n\n// StartLoginProcess initiates the login process by redirecting the user to the OIDC provider.\nfunc StartLoginProcess(ctx *gin.Context) {\n\t// Generate the authorization URL for the OIDC provider.\n\tauthURL := globalOuthConfig.AuthCodeURL("state", oidc.Nonce(""))\n\t// Redirect the user to the OIDC provider for authentication.\n\thttp.Redirect(ctx.Writer, ctx.Request, authURL, http.StatusFound)\n}\n\n// HandleCallback processes the callback from the OIDC provider after the user has authenticated.\nfunc HandleCallback(ctx *gin.Context) {\n\t// Retrieve the authorization code from the query parameters.\n\tcode := ctx.Query("code")\n\n\t// Exchange the authorization code for an access token.\n\toauth2Token, err := globalOuthConfig.Exchange(ctx, code)\n\tif err!= nil {\n\t\tlog.Printf("Error exchanging code for token: %v", err)\n\t\treturn\n\t}\n\n\t// Extract the ID token from the OAuth2 token.\n\trawIDToken, ok := oauth2Token.Extra("id_token").(string)\n\tif!ok {\n\t\tlog.Println("Missing ID token")\n\t\treturn\n\t}\n\n\t// Verify the ID token using the OIDC provider.\n\tvar verifier = globalProvider.Verifier(&oidc.Config{ClientID: globalOuthConfig.ClientID, SkipClientIDCheck: true})\n\n\tidToken, err := verifier.Verify(ctx, rawIDToken)\n\tif err!= nil {\n\t\tlog.Printf("Error verifying ID token: %v", err)\n\t\treturn\n\t}\n\n\t// Extract claims from the verified ID token.\n\tvar claims interface{}\n\tif err := idToken.Claims(&claims); err!= nil {\n\t\tlog.Printf("Error extracting claims: %v", err)\n\t\treturn\n\t}\n\n\t// Respond with a success message.\n\tctx.JSON(http.StatusOK, gin.H{"message": "success"})\n}\n\n// InjectRoutes sets up the routes for the application, including login and callback endpoints.\nfunc (srv *Server) InjectRoutes() *gin.Engine {\n\trouter := gin.Default()\n\n\tapi := router.Group("/api")\n\t{\n\t\t// Define the login route that redirects users to the OIDC provider for authentication.\n\t\tapi.GET("/login", StartLoginProcess)\n\t\t// Define the callback route that handles the callback from the OIDC provider.\n\t\tapi.GET("/callback", HandleCallback)\n\t}\n\n\treturn router\n}\n\nfunc main() {\n\t// Initialize the OAuth2 configuration and OIDC provider.\n\tInitializeOAuthConfig()\n\t// Create a new server instance.\n\tserver := &Server{}\n\t// Inject routes into the Gin engine.\n\trouter := server.InjectRoutes()\n\t// Start the HTTP server.\n\tlog.Fatal(http.ListenAndServe(":8080", router))\n}
\n

The process described involves several key steps in setting up an OAuth2 flow with OpenID Connect (OIDC) for user authentication.

\n

Here's a brief overview of what was done in the code:

\n

Initialization of OIDC Provider and OAuth2 Configuration

\n\n

Setting Up the Callback Endpoint

\n\n

Verifying the Access Token and Extracting User Claims

\n\n

This process leverages the security and standardization provided by OIDC and OAuth2 to implement a secure authentication flow. By following these steps, the application can authenticate users through LoginRadius OIDC provider, ensuring that user credentials are managed securely and that the application can trust authenticated users' identities.

\n

Conclusion

\n

In this tutorial, you have learned how to implement OIDC SSO with LoginRadius as the Identity Provider. You have also built a simple Golang backend with Gin to understand the implementation.

\n","frontmatter":{"date":"May 30, 2024","updated_date":null,"title":"How to Implement OpenID Connect (OIDC) SSO with LoginRadius?","tags":["SSO","OIDC","LoginRadius"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/185a654052323b1a8fd3b9ee7f274ad3/58556/implementing-oidc-sso.webp","srcSet":"/static/185a654052323b1a8fd3b9ee7f274ad3/61e93/implementing-oidc-sso.webp 200w,\n/static/185a654052323b1a8fd3b9ee7f274ad3/1f5c5/implementing-oidc-sso.webp 400w,\n/static/185a654052323b1a8fd3b9ee7f274ad3/58556/implementing-oidc-sso.webp 800w,\n/static/185a654052323b1a8fd3b9ee7f274ad3/99238/implementing-oidc-sso.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Sanjay Velu","github":"SanjayV0","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/bruteforce-lock-and-unlock/"},"html":"

First, let's understand some basic terminology.

\n

Basic Terminology

\n
    \n
  1. Brute-force attack: A method where every possible combination of characters or values is systematically tried to gain unauthorized access to a system, application, or data.
    2. \n
  2. Brute-force lock: Brute-force lock is a type of account lock made to prevent a bruteforce attack.
    3. \n
  3. Brute-force lockout: Brute-force lockout is a security mechanism that blocks access after a certain number of failed authentication attempts to prevent unauthorized access through repeated trial and error.
    4. \n
  4. CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart): CAPTCHA is a method used to determine whether a user is human by presenting a challenge that is easy for humans to solve but difficult for bots.
    5. \n
  5. Multi-Factor Authentication (MFA): MFA is a security method that requires multiple forms of identification to grant access, typically combining something the user knows, has, and is.
    6. \n
\n

In LoginRadius, you can implement brute-force lockout using APIs.

\n
\n

To implement brute-force lockout, please register in the LoginRadius Admin Console.

\n
\n

Let's go through the API implementation of brute-force lockout and user unlock.

\n

API Implementation for Brute-force Lockout

\n

Creating a Basic Application

\n
    \n
  1. To implement brute-force lockout using API, create a simple app with login and registration features.
    2. \n
  2. This can be done by using Admin Console.
    3. \n
  3. Navigate through Deployment > Identity Experience Framework.
    4. \n
  4. You can design the required application using theme, customization, preview, and implement options.
    5. \n
  5. You can also customize the predefined templates if needed.
    6. \n
\n
\n

You can view the created app using the link https://<app-name>.hub.loginradius.com/auth.aspx in the implement section of the Identity Experience Framework or from the preview section.

\n
\n

Brute-force Lockout

\n

Enabling

\n

In LoginRadius, the brute-force lockout feature can be enabled from the Admin Console.

\n

\"admin_bfl_page.webp\"

\n

Testing

\n
    \n
  1. Register with a new user and log in with the correct email and password. It is observed that the user is redirected to the profile page after authentication.
    2. \n
\n

\"loginpage_with_data.webp\"\n
\n\"successful_login.webp\"

\n
    \n
  1. Now, log out and try to log in with incorrect credentials.
    2. \n
  2. If the password is incorrect successively till the lockout threshold, the account gets locked.
    3. \n
  3. Therefore, brute-force lockout is achieved.
    4. \n
\n

\"incorrect_pwd.webp\"

\n
\n

In the Admin Console, you can set the brute-force lockout threshold, lockout type, and suspend effective period.

\n
\n

Lockout Types in LoginRadius

\n

LoginRadius supports the following lockout types:

\n
    \n
  1. Suspend: Suspends further login attempts after multiple failed tries for a certain amount of time, deterring automated attacks and enhancing system security by limiting access from suspicious sources.
    2. \n
  2. \n

    CAPTCHA:

    \n\n
    \n

    Refer CAPTCHA in miscellaneous section to learn more.

    \n
    \n
    3. \n
  3. Security Questions: A personalized query set up by the user to verify identity to unlock a locked account with valid credentials.
    4. \n
  4. Block: Restricts login attempts from a specific source (email ID or username) after multiple failed tries, enhancing security against unauthorized access.
    5. \n
\n

Unlocking an Account Locked through Brute-force Lockout

\n

You can unlock the locked user account in two ways, using:

\n
    \n
  1. Account Update API from the LoginRadius Account API collection.
    2. \n
  2. Auth Unlock Account by Access Token from the LoginRadius Authentication API collection.
    3. \n
\n
\n

For more understanding on Auth Unlock Account, refer Auth Security Configuration

\n
\n

Account Update API from the LoginRadius Account API Collection

\n

Calling the Account Update API with the provided endpoint, using the given method, providing the apisecret and apikey, and formatting the given body will unlock the account.

\n
    \n
  1. Endpoint: https://api.loginradius.com/identity/v2/manage/account/{uid}
    2. \n
  2. Method: PUT
    3. \n
  3. Parameters: apisecret, apikey
    4. \n
  4. Body:
    5. \n
\n
{\n   ...\n  "FirstName": "Test",\n  "MiddleName": null,\n   ...\n}
\n
    \n
  1. Response:
    2. \n
\n
{\n    ...\n    "LoginLockedType": "None",\n    "Email": [\n        {\n            "Type": "Primary",\n            "Value": "user1@yopmail.com"\n        }\n    ],\n    ...\n}
\n
\n

\"unlocked_account_update.webp\"

\n

Conclusion

\n\n

Miscellaneous

\n

CAPTCHA

\n

LoginRadius supports the following types of CAPTCHAs:

\n\n

Multi-Factor Authentication (MFA):

\n\n

To understand more about LoginRadius APIs, refer to the API docs.

\n","frontmatter":{"date":"May 29, 2024","updated_date":null,"title":"Testing Brute-force Lockout with LoginRadius","tags":["Brute-force","LoginRadius","Authentication"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/868ffd6ee6f1dcdc0618db2afa053099/58556/implementing-brute-force-lockout.webp","srcSet":"/static/868ffd6ee6f1dcdc0618db2afa053099/61e93/implementing-brute-force-lockout.webp 200w,\n/static/868ffd6ee6f1dcdc0618db2afa053099/1f5c5/implementing-brute-force-lockout.webp 400w,\n/static/868ffd6ee6f1dcdc0618db2afa053099/58556/implementing-brute-force-lockout.webp 800w,\n/static/868ffd6ee6f1dcdc0618db2afa053099/99238/implementing-brute-force-lockout.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Gayathri Suresh","github":"gayathrisuresh150501","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/smart-cache-redis-cloud-aws-elasticache-for-redis/"},"html":"

LoginRadius is one of the leading and technologically advanced Customer Identity and Access Management (CIAM) solutions. Enterprise customers rely on our CIAM to manage end-user authentication and authorization. They typically serve hundreds of thousands to millions of end-users, making our CIAM a critical part of their IT infrastructure and value delivery.

\n

Our backend consists of multiple microservices handling various identity and access management functions and workflows through APIs. And we use MongoDB as persistent storage for configuration data. For faster access and availability of this data, we deployed Redis in-memory cache through Redis Enterprise Cloud.

\n

Challenges with Cache Updates

\n

We had our configuration cache set up in Redis Cloud. And to reduce the Redis Cloud latency, we kept the configuration cache at the application level in memory — but we ran into problems.

\n

Generally, customers don’t update their configurations so frequently. But when a customer updates their configuration, it doesn’t propagate in the backend until the server memory cache is purged — sometimes even taking several hours.

\n

This is bad for business: A customer updates configurations in response to a new requirement or rapidly changing business environment. If these changes take so much time for a digital identity process, it can affect end-users and, in turn, business outcomes. Simply imagine that a customer updated app configuration to accommodate a one-time flash sale, and end-users can’t place orders properly due to configuration update issues!

\n

So, we started evaluating various options to address these issues. We considered running multiple instances in the Redis Cloud and synchronizing them to minimize latency for all regions while ensuring customer configuration updates go live immediately. But this proved to be technically cumbersome and costly.

\n

We continued our research with various solutions and concluded that AWS ElastiCache for Redis best serves our needs.

\n

Migrating to AWS ElastiCache for Redis

\n

AWS provides ElastiCache for Redis as a Redis Cloud alternative with all necessary capabilities. Also, we were already using AWS Cloud for some of our IT infrastructure needs.\nSo, we can deploy ElastiCache alongside the same infrastructure to solve the latency issues.

\n

Accordingly, we have created ElastiCache instances in multiple AWS regions and set up the primary ElastiCache DB to quickly sync configuration updates in the secondary ElastiCache instances. Also, we deployed ElastiCache instances in multiple locations as needed.

\n

For migration, we updated the old Redis and ElastiCache primary instances simultaneously. Once we reached a sufficient confidence level with the new setup, we completely switched over to ElastiCache.

\n

Conclusion

\n

Our applications and cache are deployed in AWS, so our API response latency is no longer problematic. Ultimately, we can reduce application in memory cache updates to a few minutes or seconds as required.

\n

Now customers get updated configurations deployed rapidly, solving our primary challenge!

\n","frontmatter":{"date":"August 09, 2023","updated_date":null,"title":"Breaking Down the Decision: Why We Chose AWS ElastiCache Over Redis Cloud","tags":["Cache","AWS","Redis","LoginRadius"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/c24493552cd32d4940767196408ef18d/58556/migrating-to-aws-elasticache-for-redis.webp","srcSet":"/static/c24493552cd32d4940767196408ef18d/61e93/migrating-to-aws-elasticache-for-redis.webp 200w,\n/static/c24493552cd32d4940767196408ef18d/1f5c5/migrating-to-aws-elasticache-for-redis.webp 400w,\n/static/c24493552cd32d4940767196408ef18d/58556/migrating-to-aws-elasticache-for-redis.webp 800w,\n/static/c24493552cd32d4940767196408ef18d/99238/migrating-to-aws-elasticache-for-redis.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},{"node":{"fields":{"slug":"/growth/flexible-work-culture-game-changer-for-employees/"},"html":"

Introduction

\n

As an employee who has been part of the LoginRadius family for the past four years, I am thrilled to share how our flexible work culture has revolutionized our professional lives.

\n

In this blog, I want to provide insights into the transformative power of our flexible work model and highlight the incredible initiatives that LoginRadius has implemented to support our well-being. This include daily virtual zumba sessions, month end celebrations and team parties, to name a few.

\n

The Rise of Flexible Work: Redefining Work-Life Integration

\n

Post COVID-19 pandemic, LoginRadius swiftly embraced a flexible work model, blending the best aspects of remote and in-office work. This innovative approach provides the flexibility to work both from the office and remotely.

\n

Strengthening Bonds: Work-Life Balance and Collaboration in Harmony

\n

The flexible work culture at LoginRadius has been a game-changer when it comes to achieving work-life balance. Having the option to work from the office for a portion of the week allows us to collaborate in person, engage in face-to-face meetings, and strengthen our connections with colleagues.

\n

On the other hand, the flexibility to work remotely provides us with the opportunity to manage personal commitments, minimize commuting time, spend time with loved ones and create a harmonious integration of work and personal life.

\n

The combination of in-office and remote work at LoginRadius has successfully fostered collaboration and connectivity among employees. When we gather in the office, we can engage in spontaneous discussions, brainstorming sessions, and effective collaboration that is sometimes challenging to replicate in a remote work setting.

\n

Daily Virtual Zumba Sessions: Shake, Sweat, and Smile!

\n

\"zumba-session\"

\n

In addition to providing flexibility and autonomy, LoginRadius has taken employee well-being to another level by organizing daily virtual Zumba sessions. These fitness sessions are a testament to the company's commitment to fostering a healthy and vibrant work environment. The virtual Zumba sessions offer a fun and energetic outlet for us to stay active, destress, and recharge our minds. It's an opportunity to connect with colleagues virtually, share positive energy, and build camaraderie.

\n

LoginRadius TT League: Smash, Spin, and Connect!

\n

LoginRadius TT League is an interdepartmental table tennis league that brings out the competitive spirit and camaraderie within our teams. It is a time for friendly matches, cheering each other on, and building connections beyond our usual work interactions. During the league, we gather to showcase our table tennis skills, engage in thrilling matches, and support each other with cheers and encouragement. This league adds an extra dose of fun and excitement to our work environment, and it is just another way LoginRadius nurtures a positive and engaging culture for its employees.

\n

Celebrate You: Let's Party!

\n

\"alt_text\"

\n

LoginRadius understands the importance of celebrating milestones, recognizing achievements, and fostering a sense of community among its employees. To honor our hard work and create memorable experiences, LoginRadius organizes Celebrate You: Month End celebrations. These celebrations encompass a range of activities, including team-building exercises, recognition ceremonies, and engaging games. It's a time to come together as a team, celebrate our collective achievements, and forge deeper connections.

\n

And the fun doesn't stop there! Our monthly team lunch parties add an extra sprinkle of joy to our work life. These gatherings are a time for us to come together, share a delicious meal, and enjoy informal conversations outside of work tasks. Whether we are enjoying a catered meal or ordering from our favorite local restaurants, these lunch parties create a warm and inclusive atmosphere where laughter and conversation flow freely.

\n

In Conclusion

\n

LoginRadius' adoption of a flexible work culture has proven to be a game-changer. It aligns our professional and personal lives, nurtures our well-being, and strengthens our sense of community and connection.

\n

As an employee at LoginRadius, I am grateful to be part of an organization that prioritizes the holistic development and happiness of its employees. The flexible work model, combined with these initiatives, exemplifies the company's commitment to fostering a positive and engaging work culture.

\n

Together, we are embracing the exciting future of flexible work at LoginRadius, where collaboration, well-being, and celebration go hand in hand.

\n

\"CTA\"

\n","frontmatter":{"date":"July 13, 2023","updated_date":null,"title":"Flexible Work Culture: A Game-Changer for LoginRadius and its Employees","tags":["flexible work culture","work life balance","LoginRadius"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3333333333333333,"src":"/static/527523993c6a0776c7fb2c1cafef05fd/7f8e9/flexible-work-culture.webp","srcSet":"/static/527523993c6a0776c7fb2c1cafef05fd/61e93/flexible-work-culture.webp 200w,\n/static/527523993c6a0776c7fb2c1cafef05fd/1f5c5/flexible-work-culture.webp 400w,\n/static/527523993c6a0776c7fb2c1cafef05fd/7f8e9/flexible-work-culture.webp 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Azharuddin Mohammad","github":null,"avatar":null}}}},{"node":{"fields":{"slug":"/engineering/why-we-rebuilt-loginradius-dot-net-core-apis-with-go/"},"html":"

Introduction

\n

Currently, the LoginRadius Identity Platform processes more than 100K requests per second. As our developer and enterprise customers grow, we should be able to scale our APIs to handle staggering loads of requests per second. It won’t be surprising if our APIs have to serve a million requests per second in the future.

\n

Generally, we add more instances, CPU, or memory for supporting high request volumes. However, it has been burdening our infrastructure budget and maintenance.

\n

So, we’re focused on reducing the cost of compute capacity by improving efficiency. In this engineering update, we share our experience with a highly effective, low-risk, large-scale performance and cost optimization with Go.

\n

LoginRadius production environment consists of 30+ microservices backed by a cloud-native infrastructure. Most of these services are written in .NET and Node.js. In Q1 2021, we explored the possibilities of improving the performance of our services and optimizing costs.

\n

How LoginRadius Has Been Handling High RPS Throughput?

\n

LoginRadius tech stack consists of 30+ microservices. We have different microservices for each business service like Authentication, Web SSO, Federated SSO, etc.

\n\n

1) Architecture

\n

Core Applications: Multiple microservices instances for Authentication, Account API, Analytics API, Risk-based Authentication, Backend Jobs, Integrations, and much more,

\n

Data Storage: MongoDB, Elasticsearch, Redis, and PostgreSQL clusters are used to store a range of datasets for various applications and functionalities.

\n

Queues: Amazon Kinesis Data Streams, Amazon Simple Notification Service (SNS), Amazon Simple Queue Service (SQS), and Azure Queue Storage.

\n

Other Services: Services for rate-limiting, bcrypt clusters, feature flags, and more.

\n

Routing: AWS load balancers (ALB, NLB, and ELB from AWS) and some nodes running NGINX as a proxy.

\n

2) Availability

\n

We've been utilizing a multi-cloud and multi-region architecture for years based on our and our customers’ data and privacy compliance requirements. However, as our usage (and load) grew with maintenance costs, we relied more on AWS resources.

\n\n

This is the basic architecture of the environment in the US:

\n

\"Basic

\n

Each request is processed as follows:

\n

\"Request

\n

The above diagram shows two cloud regions — US East and US West.

\n

When requests come:

\n\n

So, how do we maintain high availability?

\n

Every availability zone has operating instances of all services (including databases). If one availability zone is down, we still have two availability zones.

\n

3) Scaling

\n

We are using a two-pronged scaling approach as scaling based on resource utilization (CPU & Memory) alone is not practical.

\n
    \n
  1. Traffic-based scaling
    2. \n
  2. Based on CPU & Memory utilization
    3. \n
\n

Why Scaling Was Challenging?

\n

Once, our multi-tenant application received a sudden spike in API requests — from thousands of requests to millions. Usually, adding new infrastructure to the existing pool takes around 60 seconds. And application deployment and start-up time were about 90 seconds. Plus, considering other possible delays in scaling, we can lose about 5 minutes for scaling up.

\n

Further, adding the time to gather metrics and make the scaling decision, the total delay can be ~6 minutes. This process can impact all multi-tenant customers' critical applications because user authentication and authorization are essential.

\n

We keep Scaling Buffers to support this kind of scenario.

\n
\n

Scaling Buffers: During the Scale-up Time, the Scaling Buffer is the service's highest predicted traffic spike. Depending on the scaling strategy, we store several types of the buffer.

\n
\n

Usually, we set a one million requests concurrency buffer. And based on the traffic pattern, our scaling automation triggers the scaling.

\n

Why Our Platform Performance Was Good, But Not Great?

\n

Our Platform performance is good. We can quickly handle millions of requests, and our application platform was scalable but not great. Minding the kind of growth we’re expecting, we wanted to improve and prepare our platform for the future.

\n

Challenges in the Existing Platform

\n

1) Startup Time

\n

No. of requests can fluctuate within a few seconds if not minutes or hours, especially with specific events such as holiday shopping, promotional events, Black Friday, etc. So, in the event of traffic spikes, application startup time plays a significant role in scaling.

\n

Our application startup time was around 90 seconds, so whenever scaling was happening due to high traffic, scaling took more time. That's why we needed to improve the application startup time.

\n

2) Cost

\n

We used hundreds of AWS c5.2xlarge instances in a production environment to handle daily traffic. During certain events such as holiday shopping and Black Friday, we doubled our infrastructure according to expected traffic with a 20~30% buffer. We kept a high buffer because scaling took time with the existing .NET Core services. As a result, infrastructure cost was burdening as we were inefficiently deploying cloud infrastructure.

\n

3) Lack of Flexibility and Customization

\n

We designed our Identity Platform a few years ago. Since then, the technology landscape has dramatically improved and optimized in recent years.

\n

Also, current technology platforms available to build and support our product (Identity Platform) are limited. So, it is crucial to align functionality with proper technology capabilities.

\n

We were facing challenges in customization. It was inflexible and limiting to deliver the required outcomes in more complex situations and use cases.

\n

The Road to Lightning Performance, Thanks to Go

\n

Why Go?

\n

We did a lot of research to choose the appropriate programming language for our application. We needed a language that would be simple to understand and learn, easy to maintain, and has high concurrency. Our research ended with Go due to its amazing qualities.

\n

Let's take a closer look. Why choose Go? What makes Go such an excellent development language? What distinguishes it from the competition?

\n

Let's get to the bottom of this by looking at what makes Go special.

\n

Go — Background

\n

Go is an open-source programming language developed by Google's Rob Pike, Robert Griesemer, and Ken Thompson. It was initially released in 2009. It has several enhancements and additions based on the C syntax to properly control memory use, manage objects, and enable static or strict typing along with concurrency.

\n

1) Concurrency

\n

Concurrent code can be executed in parallel by separate computer cores or in sequence. Most programming languages lack concurrent execution when working with multiple threads. They often slow down programming, compiling, and execution.

\n

Go works with goroutines that are lightweight, low-cost threads. And Go channels allow goroutines to communicate with one another.

\n

Sequential Processes Communication: They are very similar to threads in Java but lightweight, and the cost of creating them is meager.

\n

2) Performance

\n

Go's core value is simplicity: it builds quickly, runs quickly, and is simple to learn. To help speed things up, there are no classes or type inheritance. This makes it easier to build a market-ready product quickly. Furthermore, its simplicity allows for quick and simple maintenance.

\n

3) Standard Library

\n

Go has an excellent standard library that includes a large number of built-in essential type functions and packages that are both practical and straightforward to use: I/O, encoding and decoding, manipulating raw bytes, network utility functions, parsing, debugging, and a lot more are all made simple by particular packages. Testing support is also included in the standard library, so no other dependencies are required.

\n

4) Easy to Learn

\n

Go has a simpler syntax than other languages and is simple to learn. The syntax of Go is somewhat similar to the C language. Developers can begin with Go in a couple of hours, but they need to spend time understanding best coding practices, especially understanding goroutines for concurrency.

\n

Benchmarking API Performance Gains

\n

We run benchmarks on our API so that the performance insights help us make decisions about the tech stack. It will paint a clearer picture of where we stand compared to our existing tech stack and what areas need improvement or immediate attention.

\n

We did multiple stress tests on our high usage APIs built separately with .NET Core(Old) and Go (new).

\n

We are using Kubernetes to deploy and manage our microservices and application infrastructure and deploy our application microservices across multiple Pods.

\n

Stress Test Scenario

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Test ItemValue
Instance Typec5.2xlarge on AWS
No. of Instances20
Reverse ProxyNGINX
Concurrent Requests20K per second
Duration5 minutes
Stress Test ToolGatling
\n

We deployed both applications in the same infrastructure and did the same stress test.\nGolang application has performed much better.

\n

Existing Application Matrix — .NET Core

\n
\n \"Requests\n
Graph - 1(a): Requests and Responses per Second (.NET Core)
\n
\n \n
\n \"API\n
Graph -1(b): API Response Time (.NET Core)
\n
\n
\n \"Overall\n
Graph - 1(c): Overall Matrix (.NET Core)
\n
\n

You can see some errors in Graph - 1(a) after ramping up to 15K users. Also, response time is increasing, as seen in Graph - 1(b).

\n

The application can recover after a couple of seconds, and after that, the application cannot respond. Application scaling is taking time. And existing infra cannot handle this spike, so the application crashes after 18K RPS.

\n

New Application Matrix — Go

\n

We did the same stress test with the new Go application. It is easily able to handle this kind of concurrency without any issue.

\n
\n \"Requests\n
Graph - 2(a): Requests and Responses per Second (Go)
\n
\n \n
\n \"API\n
Graph -2(b): API Response Time (Go)
\n
\n
\n \"Overall\n
Graph - 2(c): Overall Matrix (Go)
\n
\n

The Go application can easily handle 20K ramp-up requests per second without any issue, as shown in Graph -2(a).

\n

You can see in Graph - 2(b) what the response time was after 2 min 47 sec for a couple of seconds. The Go application was scaling during that time. It is scaling quickly, so it is not impacting API request performance, and, also, the application can recover response API time as expected.

\n

Conclusion

\n

In this article, you have learned how we have achieved better API performance by rebuilding them in Go, which were previously built in .NET Core. And you have understood our approach to this transition and how it increased the API performance of the LoginRadius Identity Platform.

\n

Leverage LoginRadius Identity Platform to build authentication functionality for your web and mobile apps. Sign up for a free LoginRadius account here

\n","frontmatter":{"date":"June 06, 2022","updated_date":null,"title":"Why We Re-engineered LoginRadius APIs with Go?","tags":["Go","API",".NET","LoginRadius"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/da26686e342d94b3007681cd0379367c/58556/high-performance-identity-apis.webp","srcSet":"/static/da26686e342d94b3007681cd0379367c/61e93/high-performance-identity-apis.webp 200w,\n/static/da26686e342d94b3007681cd0379367c/1f5c5/high-performance-identity-apis.webp 400w,\n/static/da26686e342d94b3007681cd0379367c/58556/high-performance-identity-apis.webp 800w,\n/static/da26686e342d94b3007681cd0379367c/99238/high-performance-identity-apis.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Vijay Singh Shekhawat","github":"code-vj","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/integrate-invisible-captcha-for-bot-protection/"},"html":"

Finding it challenging to integrate invisible reCAPTCHA only on specific web pages? This short tutorial helps you implement invisible reCAPTCHA at specific and distinct containers, such as login and forgot password. This tutorial uses LoginRadius to demonstrate this.

\n
\n

You can quickly create a free LoginRadius account here.

\n
\n

What is reCAPTCHA?

\n

Google reCAPTCHA is a security service that helps protect your websites from fraud and abuse.

\n

Currently, LoginRadius supports two different versions of Google v2reCAPTCHA.

\n\n

The Scenario

\n

You want to enable invisible reCAPTCHA on a specific page — a login page, for demonstration. To achieve this, first login to your LoginRadius dashboard. Or, sign up here for a free account or 21-day free trial for the Developer Pro plan.

\n

If you're new to LoginRadius, follow our Getting Started documentationdocs/references/javascript-library/getting-started/) to get going.

\n

Solution Steps

\n\n

The above code used the utility method addRecaptchaJS that adds the required JS for invisible reCAPTCHA. It also used the captchaSchema method to add reCAPTCHA within the Login Schema.

\n\n

When you check your hosted page, invisible reCAPTCHA will appear only on the login page.

\n

Similarly, you can follow the above steps to enable invisible reCAPTCHA on the registration(signup) page or any other page.

\n

Conclusion

\n

You have learned how to use invisible reCAPTCHA on specific web pages and forms with LoginRadius to improve user experience and prevent malicious bot traffic from being effective.

\n","frontmatter":{"date":"April 08, 2022","updated_date":null,"title":"How to Integrate Invisible reCAPTCHA for Bot Protection","tags":["reCAPTCHA","LoginRadius"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/f8a146c57decdef4899cbaa4abd69ba6/58556/configure-invisible-reCAPTCHA.webp","srcSet":"/static/f8a146c57decdef4899cbaa4abd69ba6/61e93/configure-invisible-reCAPTCHA.webp 200w,\n/static/f8a146c57decdef4899cbaa4abd69ba6/1f5c5/configure-invisible-reCAPTCHA.webp 400w,\n/static/f8a146c57decdef4899cbaa4abd69ba6/58556/configure-invisible-reCAPTCHA.webp 800w,\n/static/f8a146c57decdef4899cbaa4abd69ba6/99238/configure-invisible-reCAPTCHA.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/guest-post/authenticating-svelte-apps/"},"html":"

In this tutorial, I’ll talk about adding authentication in a Svelte application using LoginRadius Authentication APIs. You'll understand step by step how to:

\n\n

You'll also learn how to consume REST APIs in a Svelte app using Fetch API and update user information in your Svelte store.

\n

What is Svelte?

\n

Svelte is a lightweight and minimal JavaScript compiler that ships a single JavaScript bundle to your application without any internal code of its own. This results in smaller bundle size and often a faster running application. It was also the most loved framework of 2021.

\n

But what's the first feature you'd add in a Svelte application? Authentication! It's the gateway for your users to interact and use your website.

\n

So in this post, I’ll talk about how to add authentication in a Svelte application.

\n

Svelte Project Demo

\n

You'll learn how to create forms in Svelte and add reactivity to it. You'll also understand how to conditionally render different UI components and set up protected routes for authenticated users in a Svelte application.

\n

To speed things up, you won't build your own authentication services from scratch. Instead, you'll use LoginRadius to quickly configure an authentication backend for your Svelte App.

\n

Here's a little demo of what your Svelte App would look like by the end of the tutorial:

\n

\n

Looks exciting? Let's jump right into it!

\n

Setup a Svelte App

\n

Let's start by creating a new Svelte project and adding some boilerplate code.

\n

Create a New Svelte Project

\n

Navigate into the directory of your choice and create a new Svelte project by running:

\n
npx degit sveltejs/template svelte-auth-app
\n

That should create a new Svelte project with a simple starter template.

\n

Additionally, you'll need to install svelte-navigator package to set up routing in your Svelte app:

\n
npm i svelte-navigator
\n

Configure Environment Variable Support

\n

You need to add environment variable support in your Svelte app to store and use your LoginRadius API Keys and Secrets.

\n

First, install a package called dotenv that let's create and use a special .env file to define your environment variables.

\n
npm i dotenv
\n

Next, head over to the rollup.config.js file. Here, make some configurational changes on the plugins property, so your Svelte app can read those environment variables on the client-side:

\n
\t...\n\tplugins: [\n\t\treplace({\n\t\t\t// stringify the object\n\t\t\t__myapp: JSON.stringify({\n\t\t\t  env: {\n\t\t\t\tisProd: production,\n\t\t\t\t...config().parsed // attached the .env config\n\t\t\t  }\n\t\t\t}),\n\t\t  }),\n    ...\n\t],
\n

You can refer to the complete rollup.config.js file for this project here.

\n

Create Files and Folders

\n

Besides the initial set of files, your project will have the following directory structure:

\n

\"Directory

\n

So go ahead and create those files and folders accordingly. I'll talk about each of these as you start filling them with some code.

\n

Add Project Styles

\n

Your starter template should come with the following styles inside your App.svelte file:

\n
main {\n  text-align: center;\n  padding: 1em;\n  max-width: 240px;\n  margin: 0 auto;\n}\n\nh1 {\n  color: #ff3e00;\n  text-transform: uppercase;\n  font-size: 4em;\n  font-weight: 100;\n}\n\n@media (min-width: 640px) {\n  main {\n    max-width: none;\n  }\n}
\n

However, I have also added some additional styles inside the global stylesheet inside the /public/build/global.css file. You can copy those styles from here.

\n

Global Data Store for Authenticated User

\n

Your Svelte app will store the authenticated user's data in a global data store to easily access and modify that data from any component within your application. Svelte provides you with the writable function inside the svelte/store dependency.

\n

Create a global object called user inside your /src/stores.js file:

\n
import { writable } from "svelte/store"\n\nexport const user = writable(\n  localStorage.user ? JSON.parse(localStorage.getItem("user")) : null\n)
\n

You have also synced the above user object with the browser's local storage so that this data persists on page reloads. If you're unfamiliar with what local storage is, check out my guide on Local Storage vs. Session Storage vs. Cookies that dives deeper into browser storage and other related concepts.

\n

The App Component Boilerplate

\n

The root component in your Svelte app is the App Component. This is located inside /src/App.svelte.

\n

It has the following imports declared inside:

\n
<script>\n  /** IMPORTS */ import Login from './Login.svelte'; import Signup from\n  './Signup.svelte'; import Home from './Home.svelte'; import PrivateRoute from\n  "./routes/PrivateRoutes.svelte"; /** VARIABLES */ const sdkoptions = {}\n</script>
\n

It also has an sdkoptions variable that will store the environment variables that you can easily pass to different components as and when they need it. You can get rid of any additional HTML inside the App.svelte file generated by the starter template.

\n

The Login Component

\n

Let's head over to the /src/Login.svelte file to create the Login Page.

\n

Create Login Form

\n

Here's what the HTML of your Login Form consists of:

\n
<h3>Login</h3>\n<form on:submit|preventDefault="{handleSubmit}">\n  <input\n    class="form-field"\n    bind:value="{email}"\n    type="email"\n    placeholder="Email"\n  />\n  <input\n    class="form-field"\n    bind:value="{password}"\n    type="password"\n    placeholder="Password"\n  />\n  <button class="form-field">\n    Login\n  </button>\n</form>\n<p>\n  Don't have an account?\n  <strong class="link" on:click="{navigateToSignup}">Sign up</strong>\n</p>
\n

You have a login form with two input fields for email and password and a submit button. The form also has an on:submit handler with an event modifier to prevent the default reloading action of the form when it gets submitted.

\n

After the form, you have a simple link with an on:click handler that allows the user to navigate to the Signup page.

\n

Login Form Field Bindings and Handlers

\n

Inside the script of your Login component, create two variables — email and password — to handle the bindings to the input fields. Also, make the sdkoptions variable exportable since you'll receive it as props from the App component.

\n
<script>let email; let password; export let sdkoptions;</script>
\n

You also need to create a function called handleSubmit that is the on:submit handler for your Login form:

\n
<script>\n\t...\n    const handleSubmit=(e)=>{\n       let loginFields={email,password};\n\t   console.log(loginFields)\n    }\n    const navigateToSignup=()=>{}\n</script>
\n

At the moment, you're simply encapsulating the email and password bindings into a JavaScript object. Later, you'll send a request to your Login API here. You also have an empty navigateToSignup function that I'll come back to once you set up your routes.

\n

Let's render the Login component inside your App.svelte file:

\n
<main>\n  <Login />\n</main>
\n

\"Login

\n

Awesome! Let's follow the same process to create your Signup form.

\n

The Signup Component

\n

Head over to the /src/Signup.svelte file to create your Signup Page.

\n

Create Signup Form

\n

Similar to the Login Form, the Signup Form will have the following HTML:

\n
<h3>Create a New Account</h3>\n<form on:submit|preventDefault="{handleSubmit}">\n  <input\n    class="form-field"\n    bind:value="{firstName}"\n    type="text"\n    placeholder="First Name"\n  />\n  <input\n    class="form-field"\n    bind:value="{lastName}"\n    type="text"\n    placeholder="Last Name"\n  />\n  <input\n    class="form-field"\n    bind:value="{email}"\n    type="email"\n    placeholder="Email"\n  />\n  <input\n    class="form-field"\n    bind:value="{password}"\n    type="password"\n    placeholder="Password"\n  />\n  <button class="form-field">\n    Signup\n  </button>\n</form>\n<p>\n  Already have an account?\n  <strong class="link" on:click="{navigateToLogin}">Login</strong>\n</p>
\n

The only difference is now you have two additional fields — first name and last name. You also have a link just below the signup form that takes the user to the login page.

\n

Signup Form Field Bindings and Handlers

\n

Here's what the script section of your Signup.svelte file should look like:

\n
<script>\n\n\tlet email;\n    let password;\n    let firstName;\n    let lastName;\n    let loading;\n\n\n    export let sdkoptions;\n\n    const handleSubmit=()=>{\n        const signupFields={\n            "FirstName": firstName,\n            "LastName": lastName,\n            "Email": [\n                {\n                "Type": "Primary",\n                "Value": email\n                }\n            ],\n            "Password": password\n     }\n     console.log(signupFields)\n   }\n\n   const navigateToLogin=()=>{}\n</script>
\n

Your signupFields object has a specific format because it aligns with the structure of your Signup API's request. It would make complete sense when you hook your Signup API here.

\n

Let's render the Signup component inside your App.svelte file:

\n

\"Signup

\n

The Home Component

\n

Let's create your Home component or the page where you'll redirect an user on a successfull login. Inside /src/Home.svelte file, add the following HTML:

\n
{#if user && _user}\n<h3>Welcome {_user?.profile?.FullName}</h3>\n<button on:click="{logout}">Logout</button>\n{/if}
\n

In the above HTML, you simply use some Svelte conditionals to render the user's name and a logout button. The script part of your Home component looks like this:

\n
<script>\n    import {user} from './stores';\n\n    let _user;\n\n    user.subscribe(data=>_user=data)\n    const logout=()=>{\n        user.set(null);\n        localStorage.clear();\n    }\n\n</script>
\n

You import the global user object from your Svelte store and store it inside your Home component's state _user. For the logout function, you simply set this user object in your store to null and clear the local storage.

\n

Setup LoginRadius

\n

The next step is to set up LoginRadius, so you can start using its Authentication APIs from your Svelte App.

\n

Create LoginRadius Account

\n

Head over to LoginRadius and create a new account by filling in the following details:

\n

\"Signup

\n

You'll then see a form with the name of your App, a URL, and a Data Center:

\n

\"Signup

\n

Hit Next and LoginRadius will set up an authentication app for you. You can try the pre-built authentication page LoginRadius provides for your app by clicking on Try Signing Up Now.

\n

\"Signup

\n

Once you do that, you'll be shown a pre-built authentication page of your LoginRadius app:

\n

\"LoginRadius

\n

However, for this tutorial, all you need are the LoginRadius APIs since you already have a frontend (your Svelte App) in place.

\n

Get LoginRadius API Configurations

\n

Once you're inside your LoginRadius account, head over to the Configurations tab from your dashboard. Then expand the API Credentials tab of your application.

\n

\"LoginRadius

\n

Inside that, you should see your APP Name, API Key, and API Secret.

\n

\"LoginRadius

\n

Add API Credentials as Environment Variables

\n

Head back to the Svelte App's .env file and add the above credentials inside it:

\n
APP_NAME=<YOUR_APP_NAME>\nAPI_CLIENT_KEY= <YOUR_APP_API_KEY>\nAPI_SECRET= <YOUR_APP_API_SECRET>
\n

You'll need to ensure that the above .env file is present inside the .gitignore of your Svelte project. You don't want to accidentally push this file to a public repository on Github.

\n
/node_modules/\n/public/build/\n\n.DS_Store\n\n.env
\n

Consume Environment Variables in Svelte Components

\n

Finally, you need to extract these environment variables in your sdkoptions variables inside your App component file.

\n
...\n\tconst sdkoptions = {\n\t"apiKey": __myapp["env"].API_CLIENT_KEY,\n\t"appName":__myapp["env"].APP_NAME,\n    "apiSecret":__myapp["env"].API_SECRET\n\t}\n...
\n

And pass this variable as props to both the Login and Signup component:

\n
...\n<Login {sdkoptions} />\n<Signup {sdkoptions} />\n...
\n

Great! Now you're ready to integrate LoginRadius APIs in your Svelte app.

\n

Integrate LoginRadius API

\n

You'll use two APIs — one for registering the user on the Signup page and the other for authenticating the user on the Login Page. However, both APIs will take the API key and API secret as query parameters.

\n
const endpoint = `${BASE_URL}?apikey=${sdkoptions.apiKey}&apisecret=${sdkoptions.apiSecret}`
\n

So in the above endpoint, you'll only change the BASE_URL according to which API you're hitting.

\n

Integrate Signup API

\n

Inside your Signup.svelte file, you'll create a variable called signupResponse to store the result of the Signup API. It also has properties like success and error to prompt the user on the status of your API calls.

\n
<script>\n    let signupResponse={\n            success:null,\n            error:null,\n            uid:null,\n            id:null,\n            fullname:null\n     }\n \tlet loading;\n\n</script>
\n

Since an API request is an asynchronous process, you also have a' loading' variable to disable the submit button until the API responds.

\n

Signup API Request on Signup Form Submission

\n

You need to send a request to the Signup API inside your handleSubmit() function. First, set the loading to true and reset the signupResponse object. Then, use the fetch API to make a POST request with the signupFields object as post parameter:

\n
const handleSubmit = () => {\n  const signupFields = {\n    FirstName: firstName,\n    LastName: lastName,\n    Email: [\n      {\n        Type: "Primary",\n        Value: email,\n      },\n    ],\n    Password: password,\n  }\n  loading = true\n  signupResponse = {\n    success: null,\n    error: null,\n    uid: null,\n    id: null,\n    fullname: null,\n  }\n  const endpoint = `https://api.loginradius.com/identity/v2/manage/account?apikey=${sdkoptions.apiKey}&apisecret=${sdkoptions.apiSecret}`\n  fetch(endpoint, {\n    method: "POST",\n    headers: {\n      "Content-Type": "application/json",\n    },\n    body: JSON.stringify(signupFields),\n  })\n    .then(response => response.json())\n    .then(data => {})\n    .catch(error => console.log(error))\n    .finally(() => (loading = false))\n}
\n

Handle API Response

\n

Inside the callback of your fetch request, you can handle any errors returned by the API based on different error codes. In case of success, you'll populate your signupResponse object with data from the API. In the finally block, set the loading to false.

\n
...\n.then(data=>{\n          if(data.ErrorCode){\n              if(data.ErrorCode==936){\n              signupResponse={\n                    ...signupResponse,\n                    error:data.Message\n                }\n             }\n            else if(data.ErrorCode==1134){\n                signupResponse={\n                    ...signupResponse,\n                    error:data.Errors[0].ErrorMessage\n                }\n            }else{\n                signupResponse={\n                    ...signupResponse,\n                    error:data.Description\n                }\n            }\n        }else{\n            signupResponse={\n                ...signupResponse,\n                success:"Account created successfully! Please login via the same details.",\n                fullname:data.FullName,\n                id:data.id,\n                uid:data.Uid\n            }\n        }\n      })\n...
\n

Disable Submit Button

\n

You can set the disabled attribute on your Submit button based on the loading state of the API.

\n
...\n<button disabled="{loading}" class="form-field">\n  Signup\n</button>\n...
\n

Show Signup Success and Error

\n

Lastly, render a conditional template based on the status of your Signup API.

\n
... {#if signupResponse.error}\n<p class="error">Error ❌ {signupResponse.error}</p>\n{/if} {#if signupResponse.success}\n<p class="success">\n  Success ✔ {signupResponse.success}\n</p>\n{/if} ...
\n

And that's it! Let's give your Signup functionality a whirl. Create a new account first:

\n

\"Signup

\n

And voila! You can see in the network tab that the API is successful. And you got back a bunch of data about the newly created user. You also have a success that appears underneath the Signup form.

\n

Let's also test an erroneous flow. What if you signup via the same credentials again?

\n

\"Signup

\n

The LoginRadius Signup API returns the error message, details, error code, etc., that you've handled accordingly.

\n

Also, if you use a simple password, the LoginRadius API returns an error based on a validation mechanism.

\n

\"Signup

\n

That's great because it makes your authentication workflow more air-tight.

\n

Integrate Login API

\n

Similarly, you can now integrate the Login API as well in your Login.svelte file:

\n
<script>\n\n\t...\n    import {user} from './stores';\n\n    let email;\n    let password;\n    let loading;\n\n    let loginResponse={\n        error:null,\n        success:null,\n        profile:null,\n        auth_token:null\n    }\n\n    export let sdkoptions;\n\n    const handleSubmit=(e)=>{\n       let loginFields={email,password};\n       loading=true;\n        loginResponse={\n        error:null,\n        success:null,\n        profile:null,\n        auth_token:null\n    }\n       const endpoint=`https://api.loginradius.com/identity/v2/auth/login?apikey=${sdkoptions.apiKey}&apisecret=${sdkoptions.apiSecret}`;\n       loading=true;\n    fetch(endpoint,\n        {\n        method:'POST',\n        headers: {\n        'Content-Type': 'application/json'\n        },\n        body:JSON.stringify(loginFields)\n        }).then(response=>response.json())\n        .then(data=>{\n            console.log(data)\n            if(data.ErrorCode){\n                if(data.ErrorCode==936){\n                loginResponse={\n                        ...loginResponse,\n                        error:data.Message\n                    }\n                }\n                else if(data.ErrorCode==1134){\n                    loginResponse={\n                        ...loginResponse,\n                        error:data.Errors[0].ErrorMessage\n                    }\n                }else{\n                    loginResponse={\n                        ...loginResponse,\n                        error:data.Description\n                    }\n                }\n            }else{\n                loginResponse={\n                    ...loginResponse,\n                    success:true,\n                    profile:data.Profile,\n                    auth_token:{\n                        access_token:data.access_token,\n                        refresh_token:data.refresh_token,\n                        ttl:data.expires_in\n                    }\n                }\n                user.set(loginResponse)\n                localStorage.setItem('user',JSON.stringify(loginResponse))\n\n            }\n        })\n        .catch(error=>console.log(error))\n        .finally(()=>loading=false);\n    }\n    ...\n\n</script>\n\n...\n{#if loginResponse.error}\n\t<p class="error">Error ❌ {loginResponse.error}</p>\n{/if}\n{#if loginResponse.success}\n\t<p class="success">\n        Success ✔\n    </p>\n{/if}\n<p>\n    Don't have an account?\n    <strong class="link" on:click={navigateToSignup}>Sign up</strong>\n</p>
\n

If you relate it to the Signup component, it's almost identical. The only thing that has changed is the API endpoint. Additionally, if the Login API is a success, you're also storing the data in your user store and consequently updating your localStorage.

\n

Let's also test this out:

\n

\"Login

\n

Let's also test an erroneous Login flow by entering the credentials for a user that doesn't exist:

\n

\"Login

\n

Great! Let's now tie all these individual pages together by setting up routing in your Svelte app.

\n

Setup Routes

\n

You'll use the svelte-navigator package that you previously installed to configure routing in your app.

\n

Add Routing

\n

First, you'll define the routes for the Signup, Login, and Home pages inside your App.svelte file:

\n
<script>\n\n  /** IMPORTS */\n  import { Router, Route } from "svelte-navigator";\n  ...\n</script>\n\n<main>\n  <Router>\n    <div>\n      <Route path="signup">\n        <Signup {sdkoptions} />\n      </Route>\n      <Route path="login">\n        <Login {sdkoptions} />\n      </Route>\n      <Route path="/">\n        <Home />\n      </Route>\n    </div>\n  </Router>\n</main>
\n

If you visit /login, you should see the Login Page. Similarly, if you go to /signup, you should see the Signup Page.

\n

Programmatic Redirection

\n

Remember, you had a link to the Signup page at the bottom of the Login page and vice versa?

\n

Also, your login page doesn't redirect anywhere after you login successfully. In order to programmatically navigate to a specific page on completion of an action, you can use the useNavigate hook from the svelte-navigator library.

\n

To use this hook, import useNavigate and save its invoked reference inside a variable, as follows:

\n
<script>\n  import {useNavigate} from "svelte-navigator"; const navigate = useNavigate();\n  ...\n</script>
\n

Now call the navigate() function and pass the path of the page you wish to redirect to. So let's complete the navigateToLogin function inside your Signup component:

\n
<script>... const navigateToLogin=()=>navigate('/login'); ...</script>
\n

Similarly, you can also complete the navigateToSignup function inside your Login component:

\n
<script>... const navigateToSignup=()=>navigate('/signup') ...</script>
\n

Finally, you'll also navigate to the Home page on a successful response from your Login API inside your Login component's handleSubmit function:

\n
 const handleSubmit=(e)=>{\n       ...\n    fetch(endpoint,\n       ...\n        .then(data=>{\n \t\t\t\t...\n            }else{\n\t\t\t\t...\n                navigate('/')\n            }\n        })\n       ...\n    }\n\n</script>
\n

Great! You can now navigate from your Login page to the Signup page and vice versa. You should also be automatically redirected to the Home page on a successful login.

\n

Add Protected/Private Routes

\n

If you try to visit the Home component by entering the path / in the URL, you'll be able to see the Home page regardless of your authenticated state. However, you must protect this route so that it's only accessible to authenticated users in your application.

\n

For this purpose, you have created a RouteGuard.svelte file inside your routes folder. It's a higher-order component that uses the useNavigation hook to programmatically redirect to the login page if an unauthenticated user visits the home page. You use the user object from your Svelte store to validate the authenticated state of a user.

\n
<script>\n    import { useNavigate, useLocation } from "svelte-navigator";\n    import { user } from "../stores";\n\n    const navigate = useNavigate();\n    const location = useLocation();\n\n    $: if (!$user) {\n      navigate("/login", {\n        state: { from: $location.pathname },\n        replace: true,\n      });\n    }\n  </script>\n\n  {#if $user}\n    <slot />\n  {/if}
\n

You can then wrap another higher order Route component on top of the RouteGuard component inside the PrivateRoutes.svelte file, as follows:

\n
<script>\n    import { Route } from "svelte-navigator";\n    import RouteGuard from "./RouteGuard.svelte";\n\n    export let path;\n  </script>\n\n  <Route {path} let:params let:location let:navigate>\n    <RouteGuard>\n      <slot {params} {location} {navigate} />\n    </RouteGuard>\n  </Route>
\n

Now, all you need to do is use this PrivateRoute component to wrap your Home component instead of a regular Route component:

\n
...\n\t<PrivateRoute path="/" let:location>\n\t\t<Home />\n\t</PrivateRoute>\n...
\n

And now you should be able to access the / route or the Home page only when you're authenticated:

\n

\"Home

\n

Conclusion

\n

I hope I've shed some light on how to authenticate Svelte apps. You can do a lot from here, like adding Svelte Kit to this project to simplify the routing system for your Svelte application.

\n

You can refer to the entire source code for this tutorial here.

\n

You can also explore LoginRadius to add forgot password functionality or social signups with Facebook and Google.

\n","frontmatter":{"date":"March 10, 2022","updated_date":null,"title":"How to Authenticate Svelte Apps","tags":["Authentication","Svelte","LoginRadius"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/c47b7b41ce6f525c5d8fa037d7313ae0/58556/authenticate-svelte-apps.webp","srcSet":"/static/c47b7b41ce6f525c5d8fa037d7313ae0/61e93/authenticate-svelte-apps.webp 200w,\n/static/c47b7b41ce6f525c5d8fa037d7313ae0/1f5c5/authenticate-svelte-apps.webp 400w,\n/static/c47b7b41ce6f525c5d8fa037d7313ae0/58556/authenticate-svelte-apps.webp 800w,\n/static/c47b7b41ce6f525c5d8fa037d7313ae0/99238/authenticate-svelte-apps.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Siddhant Varma","github":"FuzzySid","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/guest-post/nextjs-authentication-guide/"},"html":"

In this article, you'll learn about authentication in Next.js and how you can authenticate Next.js applications with LoginRadius.

\n
\n

Note: An understanding of React, Hooks, and Next.js is beneficial to follow this tutorial.

\n
\n

What is Authentication?

\n

Authentication is the process of validating that an individual is who they claim to be. Authentication is an essential feature for applications, particularly those that store user data.

\n

You should not mistake authentication for authorization. Authorization is the process of verifying that whether a user has required permission to access an asset or data set.

\n

Authentication deals with identifying a user, while authorization checks what resources or data an authenticated user has permission to access.

\n

Some of the methods used to implement authentication are:

\n\n

Should You Build Your Authentication System or Use a Third-party Solution?

\n

Authentication is one of the most critical parts of an application’s security, so you should address it adequately.

\n

A few aspects you should consider when assessing if you should build your authentication system or use a third-party solution:

\n\n

Considering these factors, it's pretty easier to rely on a third-party solution, and it's also cheaper and more secure than building your own authentication system.

\n

What is LoginRadius?

\n
\n

Loginradius is the world's first no-code identity platform. It is a simple, implementable solution for adding user authentication and authorization to your website.

\n
\n

LoginRadius provides no-code services for authorization, authentication, account security, and much more. It has several interesting features, and some of them are:

\n\n

Understanding Next.js Authentication Patterns

\n

Next.js offers two authentication patterns — client-side and server-side authentication.

\n

Client-Side Authentication

\n

With client-side authentication, the authentication logic and user redirection are done in the browser. The page component fully loads before the redirect logic is executed.

\n

When this authentication approach is used, developers usually use a loading indicator to indicate to the user that a process is running in the background. The loading indicator helps boost user experience. If the user’s authentication fails, redirect the user to a login page.

\n

The following example shows how to handle client-side redirects:

\n
import { useEffect } from "react"\nimport { useRouter } from "next/router"\nimport authService from "auth-service" //imaginary auth service\n\nexport default function ProtectedPage() {\n  const router = useRouter()\n\n  useEffect(() => {\n    const authUser = authService.getUser()\n\n    // if there is no authenticated user, redirect to login page_\n\n    if (!authUser) {\n      router.push("/login")\n    }\n  }, [])\n\n  return (\n    <>\n      <h1>Welcome {user.name}. This is a protected page</h1>`\n    </>\n  )\n}
\n

The above code snippet handles client-side redirects in the browser using next/router. It also uses an imaginary authentication service, auth-service, for illustration purposes. You’ll work with LoginRadius later in this tutorial.

\n

It checks if there is an authenticated user with the authService.getUser() method in the useEffect. If there is none, it redirects the user to the /login page using Next.js’s router object.

\n

This is a simple illustration of client-side authentication and redirection.

\n

Server-Side Authentication

\n

With server-side authentication, you can redirect a user from, say, pages/profile to pages/login. When non-authenticated users try to access a protected page, they are redirected to a login page. All of this is done on the server — before the request reaches the browser.

\n

A benefit of this pattern is that non-authenticated users do not see flashes of unauthenticated content before they are redirected.

\n

The following example below shows how to handle server-side redirects:

\n
export default function ProtectedPage({ user }) {\n\treturn (\n\t\t<>\n\t\t\t<h1>Welcome {user.name}. This is a protected page</h1>\n\t\t</>\n\t)\n}\n\nexport const getServerSideProps = async context => {\n\tconst { user } = authService.getUser(context.req)\n\n\t// if there is no authenticated user, redirect to login page\n\n\tif (!user)\n\t\treturn {\n\t\t\tprops: {},\n\n\t\t\tredirect: { destination: "/login" },\n\t\t}\n\n\t\treturn { props: { user } }\n\t}\n}
\n

Using getServerSideProps enables rendering pages on the server. You can take advantage of that to also handle the redirection on the server.

\n

The above code snippet uses the authService.getUser() method to get the authenticated user’s object. If there is no user, it returns an object with a redirect object. The redirect object contains a destination key, where you can put the page you want to redirect the user to, which is your application’s login page.

\n

Now that you’ve understood the authentication patterns available, let’s see how to authenticate a Next.js application with LoginRadius.

\n

Authenticating Next.js Apps with LoginRadius

\n

The steps below highlight how you can integrate and authenticate your Next.js applications with LoginRadius:

\n

Create a LoginRadius Account

\n

You should create an account to get started with LoginRadius. There is a free plan you can start with.

\n

Get Account Credentials

\n

Now that you have an account, you should get the credentials for your appName and apiKey from the dashboard. You'll need them later to use the React SDK.

\n

Start a New Next.js Application

\n

Run the following command in your terminal to create a new Next.js application:

\n
npx create-next-app <name-of-project>\n//or\nyarn add create-next-app <name-of-project>
\n

Install LoginRadius React SDK

\n

Next, install the React SDK into the project:

\n
```javascript\nnpm install loginradius-react\n//or\nyarn add loginradius-react\n```
\n

Integrate the React SDK

\n

You need to wrap the root component with the SDK’s authentication provider.

\n

You also need to pass the account credentials to the provider. You can get these credentials from your LoginRadius account dashboard.

\n

Navigate to pages/_app.js and update it with the code below:

\n
import Head from "next/head"\nimport { LRAuthProvider } from "loginradius-react"\nimport { ChakraProvider } from "@chakra-ui/react"\nimport Layout from "../layout"\nimport "../styles/globals.css"\n\nfunction MyApp({ Component, pageProps }) {\n  return (\n    <>\n      <Head>\n        <title>Loginradius Next</title>\n      </Head>\n\n      <LRAuthProvider\n        appName="your-app-name"\n        apiKey="your-api-key"\n        redirectUri={"http://localhost:3000/"}\n      >\n        <ChakraProvider>\n          <Layout>\n            <Component {...pageProps} />\n          </Layout>\n        </ChakraProvider>\n      </LRAuthProvider>\n    </>\n  )\n}\n\nexport default MyApp
\n

The above code snippet imports the LRAuthProvider component from loginradius-react. It passes the appName and apiKey taken from the LoginRadius account dashboard earlier to LRAuthProvider. It also sets the redirectUri to http://localhost:3000/.

\n

The redirectUri is the callback URL where you want to redirect users after being authenticated. You should whitelist the redirect_uri in your LoginRadius account dashboard. Localhost URLs are whitelisted by default.

\n

Now that you've integrated the SDK, let’s add the authentication functionality.

\n

Add Login and Logout Functionality

\n

Your users should be able to log in and out of our application, so let’s set that up.

\n

We will add the log in and log out functionality to a Nav component. Let’s set up the component.

\n

Create a layout folder in the root directory, and create a Nav.js file there. Add the following code to Nav.js:

\n
import { Button, Flex, Stack } from "@chakra-ui/react"\nimport { useLRAuth } from "loginradius-react"\n\nexport default function Nav() {\n  const { loginWithRedirect, logout } = useLRAuth()\n\n  return (\n    <Flex>\n      <Stack spacing={[6, 8]}>\n        <Button onClick={() => loginWithRedirect()}>Login to continue</Button>\n        <Button onClick={() => logout()}>Log out</Button>\n      </Stack>\n    </Flex>\n  )\n}
\n

Here, Chakra UI is used for UI components.

\n

First, it imports the useLRAuth hook from the SDK. Next, it accesses the loginWithRedirect and logout methods from the useLRAuth hook.

\n

Then, it passes loginWithRedirect and logout to the login and logout buttons’ onClick event handlers, respectively.

\n

Having created the Nav component, we need to create the Layout component we mentioned earlier.

\n

Create an index.js file in the layout folder, and paste the code below:

\n
import { Box } from "@chakra-ui/react"\nimport Nav from "./Nav"\n\nexport default function Layout({ children }) {\n  return (\n    <Box h="100vh" bg="green.50">\n      <Nav />\n      <Box>{children}</Box>\n    </Box>\n  )\n}
\n

With that, you've added authentication to your application. However, you need a way to track the authentication state. You need to know if there is a logged-in user and do something with that information.

\n

Tracking Authentication State

\n

The SDK also provides error and user objects, along with isLoading and isAuthenticated booleans. You'll use these to track the authentication state.

\n

You can access information about an authenticated user, such as their email address, from the user object. If any, you can display error messages from the error object.

\n

isAuthenticated returns true if there is an authenticated user and false if there is not.

\n

We are currently rendering both the login and logout buttons in the Nav component. However, we don’t want that. We want to display the login button when there is no authenticated user and logout when there is an authenticated user.

\n

Let’s update the Nav.js file with the code below to fix that:

\n
import { Button, Flex, Stack } from "@chakra-ui/react"\nimport { useLRAuth } from "loginradius-react"\n\nexport default function Nav() {\n  const { isAuthenticated, user, loginWithRedirect, logout } = useLRAuth()\n  return (\n    <Flex as="nav">\n      <Stack spacing={[6, 8]}>\n        {!user && (\n          <Button onClick={() => loginWithRedirect()}>Login to continue</Button>\n        )}\n\n        {isAuthenticated && user && (\n          <Button onClick={() => logout()}>Log out</Button>\n        )}\n      </Stack>\n    </Flex>\n  )\n}
\n

We conditionally display the login and logout buttons based on the authentication state.

\n

If there is a logged-in user, we want to redirect them to the profile page.

\n

Navigate to pages/index.js file and update it with the code below:

\n
import { useEffect } from "react"\nimport { useRouter } from "next/router"\nimport { useLRAuth } from "loginradius-react"\nimport { Button, Heading, VStack, Center } from "@chakra-ui/react"\n\nexport default function Home() {\n  const { isLoading, isAuthenticated, error, user } = useLRAuth()\n  const router = useRouter()\n\n  useEffect(() => {\n    if (user && isAuthenticated) {\n      router.push("/profile")\n    }\n  }, [router, user, isAuthenticated])\n\n  if (isLoading) {\n    return <div>Loading...</div>\n  }\n\n  if (error) {\n    return <div>Oops... {error.message}</div>\n  }\n\n  return (\n    <Center pt={10}>\n      <VStack spacing={[6, 8]}>\n        <Heading as="h2">Welcome</Heading>\n        <Text fontSize="3xl">Login to continue</Text>\n      </VStack>\n    </Center>\n  )\n}
\n

Let’s break down the above code snippet:

\n\n

Displaying Authenticated User Data

\n

You have to display information about the authenticated user. Let’s set that up.\nCreate a profile.js file in the pages directory and paste the code below:

\n
import { Box, Center, Heading } from "@chakra-ui/react"\nimport { useLRAuth } from "loginradius-react"\n\nexport default function Profile() {\n  const { user, isLoading, isAuthenticated } = useLRAuth()\n\n  if (isLoading) {\n    return <div>Loading...</div>\n  }\n\n  if (isAuthenticated) {\n    return (\n      <Box>\n        <Center mt={10}>\n          <Heading a="h2">\n            Welcome to your profile {user.Email[0].Value}\n          </Heading>\n        </Center>\n      </Box>\n    )\n  }\n}
\n

You should display a user’s information if they're authenticated. Here, you check that they're authenticated with the isAuthenticated hook. If they're authenticated, return some JSX and display the user’s email address.

\n

Protecting a Route

\n

You can create protected routes to ensure only authenticated users can access those routes.

\n
import { withAuthenticationRequired } from "loginradius-react"\n\nconst Profile = () => {\n\tif (isAuthenticated) {\n\t\treturn (\n\t\t\t<Box\n\t\t\t\t...markup goes here\n\t\t\t</Box\n\t\t)\n\t}\n}\n\nexport default withAuthenticationRequired(Profile,\n\t//Show a message while the user waits to be redirected to the login page.\n\tonRedirecting: () => (\n\t\t<div>Redirecting you to LoginRadius awesome Login page</div>\n\t),\n});
\n

Here, the code snippet uses the withAuthenticationRequired higher-order component to wrap the Profile component. With this, anytime an unauthenticated user tries to access the /profile route, they'll be redirected to LoginRadius’s login page and then back to /profile after they log in.

\n

The image below shows an authenticated user's profile page.

\n

\"An

\n

Conclusion

\n

In this tutorial, you have learned about user authentication and understood whether you should develop an authentication system in-house or use a modern identity platform like LoginRadius.

\n

Then, you have briefly learned different authentication patterns available in Next.js. And you step-by-step understood how to authenticate Next.js applications with LoginRadius’s React SDK.

\n

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

\n","frontmatter":{"date":"January 13, 2022","updated_date":null,"title":"Your Ultimate Guide to Next.js Authentication","tags":["Authentication","React","Next.js","LoginRadius"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/6a3f9e6ed0b8803f9523875b01d55a37/58556/next-authentication.webp","srcSet":"/static/6a3f9e6ed0b8803f9523875b01d55a37/61e93/next-authentication.webp 200w,\n/static/6a3f9e6ed0b8803f9523875b01d55a37/1f5c5/next-authentication.webp 400w,\n/static/6a3f9e6ed0b8803f9523875b01d55a37/58556/next-authentication.webp 800w,\n/static/6a3f9e6ed0b8803f9523875b01d55a37/99238/next-authentication.webp 1200w,\n/static/6a3f9e6ed0b8803f9523875b01d55a37/7c22d/next-authentication.webp 1600w,\n/static/6a3f9e6ed0b8803f9523875b01d55a37/25f09/next-authentication.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Emadamerho-Atori Nefe","github":"nefejames","avatar":null}}}},{"node":{"fields":{"slug":"/identity/loginradius-top-performing-blogs-2021/"},"html":"

2021 was a remarkable year since businesses began overcoming challenges and uncertainties worldwide amid the global pandemic.

\n

Regardless of the industry, almost every organization bounced back and made every effort to stay up and running in the most unpredictable times.

\n

As far as the consumer identity and access management (CIAM) industry is concerned, LoginRadius was one of the top performers in securing billions of identities and educating the global audience regarding the diverse aspects of CIAM and security.

\n

Our insightful blogs helped millions of people globally understand, implement, and enhance their platform experience by leveraging cutting-edge technology in the CIAM landscape.

\n

In this post, we’ve narrowed down the list of our Top 10 Performing Blogs in 2021 that people across the globe found insightful as they helped them cut corners during the unpredicted times.

\n

We hope you’ll find a topic you’re excited about and will get the most accurate and in-depth information about the same. Let’s get started.

\n

#10. How to Set Up Two-factor Authentication on All Your Online Accounts?

\n

Two-factor authentication is one of the best security methods that use two layers to verify a consumer's identity.

\n

This means, rather than simply entering the password to log into an account, two-factor authentication requires a code sent via text message to the consumer's phone number or generated through an app.

\n

Read this blog to learn everything about two-factor authentication, how to set up two-factor authentication on your social accounts, and its importance.

\n

#9. What Is a Salt and How Does It Boost Security?

\n

Salting hashes sounds like something that comes out of a recipe book. However, Salt plays a significant role in preventing a data breach in cryptography.

\n

While data leaks can sometimes happen, hash salting generators only come to mind when there is a significant invasion of privacy that affects the majority of the consumers’ applications.

\n

Read this blog to know more about Salt, utilizing hashing using Salt, and its importance in enhancing overall password security.

\n

#8. Identity Management in Cloud Computing

\n

Identity management in cloud computing is the subsequent identity and access management (IAM) solution.

\n

However, it is a lot more than merely a straightforward web app single sign-on (SSO) solution. This next generation of IAM solution is a holistic move of the identity provider right to the cloud.

\n

This blog covers all the aspects of cloud IAM, its significance, and businesses must incline towards a modern cloud identity management solution.

\n

#7. A Detailed Guide on How UX/UI Affects Registration

\n

Login is a big deal that decides the entire UX your website will deliver. Businesses should try to put as little resistance as possible into their registration process.

\n

As with it comes customer identities—the most accurate first-party data beneficial for conversions and customer retention.

\n

This blog covers all the aspects associated with UI/UX along with the numerous benefits of using social login for your online platforms.

\n

#6. What Is Broken Authentication and How to Prevent Your Company From It

\n

When the hacker gains access into the system admin's account by using the online platform's vulnerabilities, particularly in two areas: credential management and session management, it's referred to as broken authentication.

\n

Poor credential management and poor session management always lead to broken authentication. Read on this blog to know everything about broken authentication, its consequences, and how to prevent it.

\n

#5. Refresh Tokens: When to Use Them and How They Interact with JWTs

\n

A token plays a crucial role in enhancing the overall security mechanism of an organization that helps to deliver flawless and secure authentication and authorization on their website or application.

\n

With token security, users have to re-authenticate themselves for obvious security reasons by offering credentials to sign in if the access token is expired.

\n

However, this can be tedious and hampers user experience. To overcome this, the concept of refresh tokens was introduced.

\n

This blog provides an overview of using refresh tokens and helps securely authenticate users without hampering their overall experience.

\n

#4. The Rise of BYOI (Bring your own Identity)

\n

Consumers demand a more innovative experience today. They don't like to create a new ID whenever they want to utilize a service. Instead, they are open to leveraging their existing digital identity securely and efficiently, with the opportunity to reuse it in multiple domains.

\n

And as a response to this demand, businesses have come up with a concept called Bring Your Own Identity (BYOI).

\n

Read on this blog to learn every aspect of BYOI.

\n

#3. What is a Token? What are its Pros and Cons?

\n

Tokens are widely used to provide authorization and authentication to users when accessing a website or a mobile application. This post covers detailed information about tokens' use and their advantages and disadvantages.

\n

This blog will help you better understand what a token is, what are its pros and cons and will help you decide whether you need to invoke the potential of tokens for your business or not.

\n

#2. How NIST is Changing Password Creation in 2021?

\n

To cope with the increasing number of cyber frauds and data thefts, the National Institute of Standards and Technology (NIST) has issued specific requirements and controls for digital user identities.

\n

The NIST has dispensed several guidelines that ensure security to the user and eventually help enterprises secure their crucial business information.

\n

These guidelines offer recommendations for users for creating strong passwords and suggestions for vendors/verifiers handling passwords.

\n

This blog provides detailed information about NIST password guidelines and offers valuable insights into how businesses can ensure maximum security in 2021 and beyond.

\n

#1. The Future of Authentication is Passwordless With Magic links

\n

This is perhaps the most popular blog that depicts the importance of passwordless in the modern digital world.

\n

A passwordless magic link allows you to log in directly with the help of a link that is received through an email. This process is similar to receiving a one-time password (OTP) though you might have to physically enter the OTP once you are redirected to the page or application.

\n

In the case of passwordless magic links, all you have to do is click on the link sent through an email, allowing you to log in directly.

\n

Read on this insightful blog that covers all the aspects of passwordless login, challenges, and how organizations can use magic links for going passwordless.

\n

Bottom Line

\n

The blogs mentioned above can help you understand the CIAM landscape and the crucial role of incorporating a cutting-edge consumer identity and access management solution.

\n

LoginRadius helps businesses deliver a flawless user experience backed by robust security through a world-class consumer identity and access management solution.

\n

Reach us to know more about LoginRadius CIAM and how it can help scale your business growth even in the most unpredictable times.

\n

\"book-a-demo-loginradius\"

\n","frontmatter":{"date":"December 29, 2021","updated_date":null,"title":"Top 10 Performing Identity Blogs in 2021","tags":["LoginRadius"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7391304347826086,"src":"/static/412ef6bab129e2dc0cf8b99a5b731955/7f8e9/performing-blogs.webp","srcSet":"/static/412ef6bab129e2dc0cf8b99a5b731955/61e93/performing-blogs.webp 200w,\n/static/412ef6bab129e2dc0cf8b99a5b731955/1f5c5/performing-blogs.webp 400w,\n/static/412ef6bab129e2dc0cf8b99a5b731955/7f8e9/performing-blogs.webp 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Navanita Devi","github":null,"avatar":null}}}},{"node":{"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,"title":"Hacktoberfest 2021: Contribute and Win Swag from LoginRadius","tags":["Hacktoberfest","Open Source","LoginRadius"],"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":{"fields":{"slug":"/engineering/loginradius-sponsorship-freecodecamp/"},"html":"

It is scientifically proven that helping others makes people happy. Probably no one knows this better than the developer community around the world, which continues to amaze by contributing extensively to free and open source software.

\n

And there is freeCodeCamp community, a nonprofit started in 2014 by Quincy Larson. It has been helping thousands of aspiring developers learn web development and find their first software jobs. The community features a self-paced learning platform that helps learn various web technologies, including Bootstrap, D3, jQuery, and React, among many others.

\n

Being a nonprofit, freeCodeCamp entirely works based on charitable donations and contributions of developers to maintain its learning platform. In fact, it is so efficient that with every $5 in donation, it can provide more than 250 hours of learning. And it is so effective that some of its alumni work for marquee tech companies like Apple, Google, Microsoft, and Amazon, among others.

\n

In 2013, just a year before freeCodeCamp was established, we founded LoginRadius with a vision to secure every identity on this planet. From our early beginnings, we have developed LoginRadius CIAM to empower developers to build more secure applications and simplify the implementation of customer identity and access management on their production applications to save development and maintenance time. Today, burgeoning startups to Fortune 500 companies trust LoginRadius, and we're now collectively handling 1.17 billion user identities for our customers worldwide.

\n

We are as obsessed as freeCodeCamp to support and enable the developer community to do much more and make this world a better place. And we wanted to continuously help the freeCodeCamp community in any way possible.

\n

Today, we are a proud sponsor of freeCodeCamp and supporting the community's developers.

\n

Signup here if you're a developer from the freeCodeCamp community. And we'll offer $200 credits so you can leverage LoginRadius CIAM — beyond the free developer tier — to implement highly secure, user-centric customer identity and access management.

\n

This is indeed a moment of joy and pride for everyone at LoginRadius. We would like to extend our gratitude to freeCodeCamp for letting us be a part of its journey in strengthening the developer community.

\n

By the way, if you want to share your expertise with the developer community, please feel free to write for the LoginRadius Blog portal. We have an open for contributions policy so anyone around the world can contribute. Find more details on our public GitHub repo.

\n

\"Squad

\n","frontmatter":{"date":"July 16, 2021","updated_date":null,"title":"One Vision, Many Paths: How We’re Supporting freeCodeCamp","tags":["LoginRadius","sponsorship","freeCodeCamp"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3333333333333333,"src":"/static/e2d9670f74a3203d6424fc773fbaf35b/58556/cover.webp","srcSet":"/static/e2d9670f74a3203d6424fc773fbaf35b/61e93/cover.webp 200w,\n/static/e2d9670f74a3203d6424fc773fbaf35b/1f5c5/cover.webp 400w,\n/static/e2d9670f74a3203d6424fc773fbaf35b/58556/cover.webp 800w,\n/static/e2d9670f74a3203d6424fc773fbaf35b/cc834/cover.webp 1024w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Raghunath Reddy","github":"raghunath-r-a","avatar":null}}}},{"node":{"fields":{"slug":"/identity/media-entertainment-use-loginradius-platform/"},"html":"

The Consumer Identity and Access Management or _CIAM _platform is rapidly becoming a ‘must have’ for any business focused on delivering a personalized experience to consumers.

\n

The entertainment industry is no different.

\n

Today, TV is no longer just the occasional evening in front of the telly. Streaming services, catch-up services, and OTT platforms mean we can watch whenever we want.

\n

The Global Media and Entertainment (M&E) industry is made up primarily of five distinct sub-segments– including TV, film, video games, publishing, and music.

\n

As such, it is one of the largest industries in the world when it comes to both revenue and market share.

\n

As the M&E industry continues to develop, a wave of new services, technology, and distribution methods continue to create more opportunities and challenges for production companies.

\n

It is critical to minimize the risk of data breaches and fraud that compromise confidential user information and not forget adherence to data privacy regulations. The balance between functionality and user experience is what separates the good from the great.

\n

Identity sits at the core of media digitalization. While there are many instances, here are five of the most common areas where the LoginRadius CIAM platform can provide a solution.

\n

LoginRadius’ CIAM Capabilities for the Entertainment Industry

\n

1. Single Sign On (SSO)

\n

A single sign-on provides users with a convenient way to log in to multiple applications and/or websites without having to enter their user credentials repeatedly. It allows you to centralize your consumer records in a single location so you can easily track, share, and access all their information.

\n\n

\"DS-Fed-IM\"

\n

LoginRadius supports industry-standard SSO protocols like SAML, JWT, OAuth 2.0, OpenID Connect, and Web Services Federation.

\n

2. Authentication

\n

The LoginRadius Identity Platform provides a comprehensive set of consumer registration and authentication options, allowing you to strike the right balance between convenience and security. You can choose from a range of options, including:

\n\n

3. Progressive User Profiling

\n

Getting insights into your customers and their behavior patterns is vital to making sure you’re creating a personalized experience.

\n

The LoginRadius CIAM platform puts down the pieces of the puzzle of customer interactions and creates a holistic customer profile. We call it progressive user profiling.

\n

We don’t just identify who a person is. We identify who they are becoming. With this knowledge, you can create a 360-degree view of each individual to serve them content that builds long-term loyalty.

\n

4. 360-Degree Consumer View

\n

LoginRadius works through different applications, communicating with consumers and feeding a single image of them—regardless of which platform they're using.

\n

Why is this important? Because an identity layer and activity data across different systems will enable organizations to understand their consumers better and deliver personalized experiences.

\n

This means that marketing, sales, and support teams have real-time identity and behavior data to power customized interactions and control consent preferences through their systems.

\n\n

Regulations such as GDPR and the new California Consumer Privacy Act require businesses to know where and how to remove consumer data upon request, regardless of the channel from which the request is made.

\n

As a result, having a central consumer identity store that prioritizes first-party declared profile data and can integrate with advanced consent management software becomes critical to your compliance strategy.

\n

Moreover, in certain industries, such as entertainment, a CIAM platform is required to verify that users are who they claim they are, ensuring that the appropriate level of access is granted to the appropriate persons, fraudulent behavior is prevented, and identity data is collected with a high degree of certainty.

\n

Conclusion

\n

Every industry has a different set of identity challenges and a unique approach to identity management. When it comes to media and entertainment, viewers love to move around a lot. Therefore, organizations need to understand a few things before embarking on the journey.

\n

For example, what goal they hope to achieve, how does a CIAM platform fits into the picture, and identify the right solution to get the job done. LoginRadius allows you to equip and support your viewers well so you can adapt to the new way of entertainment.

\n

\"book-a-demo-loginradius\"

\n","frontmatter":{"date":"May 25, 2021","updated_date":null,"title":"How Entertainment Companies Use the LoginRadius CIAM platform","tags":["LoginRadius"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5151515151515151,"src":"/static/4559801deea09db3f388c50be7cd7366/58556/media-entertainment-use-loginradius-platform-cover.webp","srcSet":"/static/4559801deea09db3f388c50be7cd7366/61e93/media-entertainment-use-loginradius-platform-cover.webp 200w,\n/static/4559801deea09db3f388c50be7cd7366/1f5c5/media-entertainment-use-loginradius-platform-cover.webp 400w,\n/static/4559801deea09db3f388c50be7cd7366/58556/media-entertainment-use-loginradius-platform-cover.webp 800w,\n/static/4559801deea09db3f388c50be7cd7366/cc834/media-entertainment-use-loginradius-platform-cover.webp 1024w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Navanita Devi","github":null,"avatar":null}}}},{"node":{"fields":{"slug":"/identity/okta-acquires-auth0/"},"html":"

With COVID-19 forcing businesses of all sizes to move to remote working and connect with consumers online, Okta plans to leverage Auth0's consumer identification product to fuel growth in the $55 billion identity industry that splits as $25B for customer identity and $30B for workforce identity.

\n

What does this acquisition imply, and why is it relevant?

\n

For starters, this announcement reveals the dynamics of the historical and present-day scenario of the global consumer identity and access management (CIAM) market. Recent acquisition and investments show that a cloud-based customer identity platform to deliver secure digital experience and protect consumer privacy is gaining outrageous momentum.

\n

Here are some of the notable events in CIAM in recent times:

\n\n

There were no pure-play CIAM vendors a decade ago and big players such as IBM, Oracle, Microsoft tried to extend their Employee IAM offering to customer identity use cases (which did not work). However, the newer players like Auth0, Gigya, ForgeRock, and LoginRadius have more recently driven innovation and accelerated adoption of Customer IAM technology. There's no doubt that identity is taking over as a strategic imperative for winning big in the digital economy.

\n

Why are businesses investing like never before?

\n

With massive penetration of smartphones, Internet and cloud, the world has gone digital and consumers expect everything online. Especially in this pandemic period, consumers have become increasingly reliant on online purchases.

\n

Brands have no choice but to build frictionless and secure digital experience for their customers while protecting their privacy. Consumers expect to access most of the services via a variety of devices and web applications, prompting businesses to invest in advanced technology that prevents cybercriminals from gaining access to sensitive information. Among security requirements include global compliances like the GDPR and CCPA. Customer IAM is emerging as foundational technology.

\n

Even analysts firms like Forrester, Gartner and KuppingerCole reported about this new and exciting category, where LoginRadius has been emerging as a leading vendor, time and again. In the recent Forrester Wave on CIAM, LoginRadius’ technology was ranked #1 above Auth0 and Okta.

\n

What does the future look like?

\n

Current CIAM players represent the tip of the iceberg of $25B revenue opportunity in Customer IAM space. My estimate is that less than 1.5% of this revenue opportunity is tapped so far. More importantly, the total addressable market is growing exponentially as the world gets digitized.

\n

This is an exciting phase of the IAM space particularly for the new category, Customer IAM (CIAM).

\n

I see three key trends emerging in coming years:

\n\n

I’m excited for all the CIAM players.

\n

Together, let's build a world which is more secure, where privacy is protected and where consumers have delighted digital experience.

\n

\"book-a-free-demo-loginradius\"

\n","frontmatter":{"date":"March 04, 2021","updated_date":null,"title":"CIAM Continues to Draw Attention as Okta acquires Auth0","tags":["LoginRadius"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":0.8,"src":"/static/9ba0a1dc94fe524d0ff0fcb19d33e694/3b245/loginradius-blog.webp","srcSet":"/static/9ba0a1dc94fe524d0ff0fcb19d33e694/61e93/loginradius-blog.webp 200w,\n/static/9ba0a1dc94fe524d0ff0fcb19d33e694/1f5c5/loginradius-blog.webp 400w,\n/static/9ba0a1dc94fe524d0ff0fcb19d33e694/3b245/loginradius-blog.webp 701w","sizes":"(max-width: 701px) 100vw, 701px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.webp"}}}},{"node":{"fields":{"slug":"/engineering/electronic-identity-integration/"},"html":"

E-commerce business is growing day by day as it saves time and cost for people traveling to meet or perform businesses in person. More people are conducting business online by creating accounts using email or phone verification. This has posed a challenge for everyone to identify the persons who we are claiming online. Online hackers have used false Identity to deceive or defraud someone else. Hence, Electronic Identity ( eID) provides a way for businesses to verify a person's identity online and reduce the chances of Identity Fraud.

\n

What is an electronic identity?

\n

Electronic identity is an electronic card or device with a unique identity number issued by either a government agency or some banks. A consumer needs to go to the government agency or some banks and show valid identity documents. After the document verification, an Electronic Identity is issued to the consumer. Examples of e-IDs are Danish NemID, Swedish BankID, and Dutch DigiD.

\n

Most service providers such as financial institutions and insurance firms provide services online and are recognizing an opportunity in implementing eID due to strict Know Your Customer (KYC) and Anti-Money Laundering (AML) requirements.

\n

eIDs are used to authenticate consumers online across multiple platforms and services. eIDs also allow the consumers to sign documents online, and the companies can trust the signature as the electronic identity is issued by the government or banks based on physical identity documents. This is fast, convenient, and secure for the consumers as they are saved from completing registration forms for multiple services. Hence, this increases the conversion for the businesses.

\n

Integrating eID authentication with LoginRadius

\n

LoginRadius supports all the major industry federated SSO methods. Hence, you can integrate eID authentication with LoginRadius using some third application like Criipto, which supports the industry-standard SSO methods. Criipto allows the integration of an eID with the LoginRadius application using JWT SSO Login flow. Jason Web Token ( JWT) is a signed token that transfers the information from one service to another securely.

\n

Prerequisite

\n\n

Register your LoginRadius app in your Criipto account

\n
\n

Please see the following steps to register your LoginRadius app in your Criipto account.

\n
    \n
  1. Login in to your Criipto account.
    2. \n
  2. Click + sign to add an application under the Applications tab.
    3. \n
  3. \n

    Add the following information:\n\"criipto

    \n\n
    4. \n
  4. Click the save button.
    5. \n
\n

Configure the Criipto settings in the LoginRadius

\n
    \n
  1. Login into the Admin Console
    2. \n
  2. Navigate to Platform Configuration>Authentication Configuration>Custom IDPs>JWT Provider\n\"JWT
    3. \n
  3. Click + Add A New Provider button highlighted on the above screen, and the following JWT configuration form fields will appear:\n\"JWT
    4. \n
  4. \n

    Complete the following details in the JWT provider

    \n\n
    5. \n
  5. Click the Add button
    6. \n
\n","frontmatter":{"date":"January 29, 2021","updated_date":null,"title":"Integration with electronic identity (eID) ","tags":["Electronic Identity","Bank ID","Criipto","LoginRadius"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/b916d567b9e41b342cccd7613d625bf6/8829b/Integration_with_eID.webp","srcSet":"/static/b916d567b9e41b342cccd7613d625bf6/61e93/Integration_with_eID.webp 200w,\n/static/b916d567b9e41b342cccd7613d625bf6/1f5c5/Integration_with_eID.webp 400w,\n/static/b916d567b9e41b342cccd7613d625bf6/8829b/Integration_with_eID.webp 680w","sizes":"(max-width: 680px) 100vw, 680px"}}},"author":{"id":"Jitender Agarwal","github":null,"avatar":null}}}},{"node":{"fields":{"slug":"/engineering/user-authentication-react-application/"},"html":"

This guide uses LoginRadius API for authenticating React apps. It provides React developers with a more straightforward way to add user authentication to react apps. To handle a lot of authentication implementation information, LoginRadius offers a high-level API. Using security best practices, now you can protect your response apps while writing less code.

\n

This article focuses on helping developers learn how to integrate user authentication in the React application. Practice the following security principles to improve authentication on React applications:

\n\n

In the React application, we can easily and quickly add authentication by using LoginRadius. If you already have a customized login/registration page ready, then I'll guide you to the next step of adding authentication in react apps.

\n

Configure LoginRadius for React Application

\n

A new application was created for you when you signed up for LoginRadius. From here, you get some essential information.

\n
    \n
  1. API Key How to get API Key?
    2. \n
  2. Sott Work with Sott
    3. \n
\n

Add following LoginRadius JS library into your application

\n
<script type="text/javascript" src="https://auth.lrcontent.com/v2/LoginRadiusV2.js"></script>
\n

Add Authentication when you have customized Login Page

\n

Add Login to your react application

\n

We will use an API framework to call LoginRadius APIs for authentication. Create a new file LoginPage.js, and add the following code.

\n
    import  React, { useState } from  "react";\n    const  lrconfig = {\n    apiKey:  "*************************", //LoginRadius API key\n    };\n    const  loginradius = {};\n    if (window.LoginRadiusV2) {\n      loginradius = new  window.LoginRadiusV2(lrconfig);\n      loginradius.api.init(lrconfig);\n    }\n    const  LoginButton = () => {\n      const  loginButtonHandler = () => {\n      loginradius.api.login({emailid:  emailValue,\n      password:  passwordValue},\n      (successResponse)=>{\n      //Here you will get the access Token of \n      \n      \n      console.log(successResponse);\n      },\n      (errors) => {\n      console.log(errors);\n      });\n      }\n      const [emailValue, updateEmailValue] = useState("");\n      const [passwordValue, updatePasswordValue] = useState("");\n      return (\n      <React.Fragment>\n      <input  type="text"  value={emailValue}  onChange={(e)=>{updateEmailValue(e.target.value)}}  placeholder={"email"}/>\n      <input  type="password"  value={passwordValue}  onChange={(e)=>{updatePasswordValue(e.target.value)}}  placeholder={"Password"}  />\n      <button  onClick={() =>  loginButtonHandler()}>Log In</button>\n      </React.Fragment>\n      );\n      };\n      export  default  LoginButton;
\n

In the above code, you will see the lrConfig object, which has apikey that you will get from the LoginRadius account. After calling loginradius.api.login, you will get the response in which you will get the access Token. Through this access token, you can get the user profile.

\n

Add Logout to your react application

\n

Create LogoutPage.js file and add following code:

\n
    import React, { useState } from "react";\n\n    const lrconfig = {\n      apiKey: "*************************", //LoginRadius API key\n    };\n\n    const loginradius = {};\n    if (window.LoginRadiusV2) {\n      loginradius = new window.LoginRadiusV2(lrconfig);\n      loginradius.api.init(lrconfig);\n    }\n\n    const LogoutButton = () => {\n      const token  = '************'; // Access Token that you got after login\n      const logoutButtonHandler = () => {\n        //Note: Call invalidate token api to invalidate the token.**\n        loginradius.api.invalidateToken(\n               token,\n               (successResponse)=>{\n           console.log(successResponse);\n           },\n               (errors) => {\n                 console.log(errors);\n               }\n             );\n       }\n      return (\n        <React.Fragment>\n       <button onClick={() => logoutButtonHandler()}>Logout</button>\n       </React.Fragment>\n       );\n    };\n    export default LogoutButton;
\n

In the above code, we have called invalidated token api, which expires your access token.

\n

Add Signup to your react application

\n

Create SignupPage.js file and add the following code:

\n
    import  React, { useState } from  "react";\n    const  lrconfig = {\n    apiKey:  "*************************", //LoginRadius API key\n    sott:  "***************************"  //Secure Token for signup functionality\n    };\n    const  loginradius = {};\n    if (window.LoginRadiusV2) {\n      loginradius = new  window.LoginRadiusV2(lrconfig);\n      loginradius.api.init(lrconfig);\n    }\n    const  SignupButton = () => {\n      const  signupButtonHandler = () => {\n      loginradius.api.registration({\n        email: [{ type: "Primary", value: emailValue }],\n              password: passwordValue\n            },\n      (successResponse)=>{\n      //Here you will get the response after registration\n      console.log(successResponse);\n      },\n      (errors) => {\n      console.log(errors);\n      });\n      }\n      const [emailValue, updateEmailValue] = useState("");\n      const [passwordValue, updatePasswordValue] = useState("");\n      return (\n      <React.Fragment>\n      <input  type="text"  value={emailValue}  onChange={(e)=>{updateEmailValue(e.target.value)}}  placeholder={"email"}/>\n      <input  type="password"  value={passwordValue}  onChange={(e)=>{updatePasswordValue(e.target.value)}}  placeholder={"Password"}  />\n      <button  onClick={() =>  signupButtonHandler()}>Log In</button>\n      </React.Fragment>\n      );\n      };\n      export  default  SignupButton;
\n

In the above code, You will get a success/error response after calling the registration api.

\n

Wrap up

\n

The most common authentication use case for a React application gets covered in this tutorial: quick login and logout. However, LoginRadius is an expandable and versatile platform that can help you accomplish much more. In this guide, We have used the LoginRadius API Framework. If you want to incorporate our hosted page into your application, follow this documentation.

\n

Let me know what you think of this tutorial in the comments below. Thanks for reading :)

\n","frontmatter":{"date":"December 10, 2020","updated_date":null,"title":"A Guide To React User Authentication with LoginRadius","tags":["Authentication","LoginRadius","React"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/a877f5fa04ac6dd24b63bb101cc8302d/58556/authentication-main.webp","srcSet":"/static/a877f5fa04ac6dd24b63bb101cc8302d/61e93/authentication-main.webp 200w,\n/static/a877f5fa04ac6dd24b63bb101cc8302d/1f5c5/authentication-main.webp 400w,\n/static/a877f5fa04ac6dd24b63bb101cc8302d/58556/authentication-main.webp 800w,\n/static/a877f5fa04ac6dd24b63bb101cc8302d/99238/authentication-main.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/loginradius-opensource-repos-for-hacktoberfest-2020/"},"html":"

LoginRadius Open Source Projects

\n

Just 1 week left in hacktoberfest 2020 and being part of it, we at LoginRadius are all set with lots of our projects going open source this year.

\n
\n

To get LoginRadius swags see our Hacktoberfest Launch Blog. We have around 500 swags for our open source contributors.

\n
\n

Here is a list of our open source projects available on Github for hacktoberfest 2020

\n

\"loginradius-hacktoberfest\"

\n\n
\n

Check the open issues on each of the projects as well as Pull Request before creating a new one. Happy Coding!\nStay tuned for more updates from LoginRadius and don't forget to check our Hacktoberfest Page to get around 500 swags from LoginRadius.

\n
\n","frontmatter":{"date":"September 25, 2020","updated_date":null,"title":"LoginRadius Open Source For Hacktoberfest 2020","tags":["hacktoberfest","open-source","LoginRadius"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5873015873015872,"src":"/static/9a2056972f92077b2af8b32ecc2fcbdd/58556/hacktober-fest-banner.webp","srcSet":"/static/9a2056972f92077b2af8b32ecc2fcbdd/61e93/hacktober-fest-banner.webp 200w,\n/static/9a2056972f92077b2af8b32ecc2fcbdd/1f5c5/hacktober-fest-banner.webp 400w,\n/static/9a2056972f92077b2af8b32ecc2fcbdd/58556/hacktober-fest-banner.webp 800w,\n/static/9a2056972f92077b2af8b32ecc2fcbdd/e30b5/hacktober-fest-banner.webp 1000w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hridayesh Sharma","github":"vyasriday","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/loginradius-supports-hacktoberfest-2020/"},"html":"

Have you ever thought about what the world would be like if open-source didn't exist?

\n

It's hard to imagine a world without open source these days. Open source powers the biggest organizations of today's world. Open-source software like Linux runs most of today's servers and also powers the Android Operating System.

\n

Introducing Hacktoberfest 2020

\n

In a gist hacktoberfest is a festival of \"giving back to the community\".

\n

Hacktoberfest is a month-long celebration of open-source software in October month run by DigitalOcean in partnership with GitHub and DEV. Hacktoberfest is open to everyone in our global community!

\n

From Official Website:

\n
\n

Hacktoberfest is open to everyone in our global community. Whether you’re new to development, a student, long-time contributor, event host, or company of any size, you can help drive the growth of open source and make positive contributions to an ever-growing community. All backgrounds and skill levels are encouraged to complete the challenge.

\n
\n

The purpose of this month-long celebration is to get people started in open source and give back to the open-source community.

\n

It is the easiest way to get into open source for people who have never contributed to open-source community or find it difficult to contribute.

\n

How to contribute to Hacktoberfest?

\n

Anyone can contribute to hacktoberfest by registering at hacktoberfest website anytime between 1st October to 31st October.

\n

During this time, anyone who wishes to be part of this month-long fest needs to open four quality pull requests on any of the open-source projects on Github.

\n

How to find Projects?

\n

Finding projects can be a bit challenging. It can be the tools you are already using, or different tools can be used to find the issues based on various labels. Tools like issuehub are really helpful for the same.

\n

This year LoginRadius is going to be part of Hacktoberfest by open-sourcing a lot of its projects and accepting contributions on them including its Engineering Blog.

\n

Getting LoginRadius branded swags

\n

Like I said, this year LoginRadius will be part of hacktoberfest and yes, we are here with some cool swags. We have got around 500 t-shirts for people contributing to our open source repositories. We will soon share details on how to get LoginRadius swags as well as our open source repositories on our Blog.

\n

Stay tuned and don’t forget to mention your open-source projects for us to contribute.

\n","frontmatter":{"date":"September 18, 2020","updated_date":null,"title":"LoginRadius Supports Hacktoberfest 2020","tags":["hacktoberfest","open-source","LoginRadius"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5873015873015872,"src":"/static/9a2056972f92077b2af8b32ecc2fcbdd/58556/hacktober-fest-banner.webp","srcSet":"/static/9a2056972f92077b2af8b32ecc2fcbdd/61e93/hacktober-fest-banner.webp 200w,\n/static/9a2056972f92077b2af8b32ecc2fcbdd/1f5c5/hacktober-fest-banner.webp 400w,\n/static/9a2056972f92077b2af8b32ecc2fcbdd/58556/hacktober-fest-banner.webp 800w,\n/static/9a2056972f92077b2af8b32ecc2fcbdd/e30b5/hacktober-fest-banner.webp 1000w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hridayesh Sharma","github":"vyasriday","avatar":null}}}},{"node":{"fields":{"slug":"/identity/announcing-new-look-of-loginradius/"},"html":"

LoginRadius is happy to announce that we have a new logo now. 

\n

Yes! We loved the old one, but we decided to upgrade it as part of our ever-evolving branding metrics. After all, progress is impossible without change. 

\n

So, here’s our new look.

\n

\"LoginRadius

\n

As a leader in cloud-based Customer Identity and Access Management (CIAM) solution that the following two core principles are reflected in the branding:

\n

Putting users at the center

\n

Our platform is all about consumer-brand relationships and to strengthen the relationship we believe we need to put the consumer at the center. So, everything we design and develop, we keep the very end-users i.e. your consumers at the centre. 

\n

Our first priority is to benefit them -- giving them peace of mind by protecting their data, account and privacy; and offering them a delightful experience.

\n

Security is the foundation of our business

\n

Security is not a feature but the foundation of our business. Protecting consumers’ data, account and privacy is the most important function of our business and platform. We and our customers never compromise on security. Period.

\n

Intend Behind The Change

\n

Over the years, LoginRadius has exponentially grown from a simple social login provider to an industry-leading customer identity and access management (CIAM) platform. 

\n

Therefore, it is important that we align our designing goals to reflect how we serve our customers, what our milestones are and most importantly, symbolize our future on what more do we intend to achieve.

\n

Keeping designing and user experience at the core of innovation, our creative thinkers came up with a logo that is crisp, smart, minimalistic and feels connected.

\n

Needless to say, they got exactly what we intended to project out to the world – user-centric CIAM platform with a strong security foundation.

\n

What Has Changed?

\n

First, we would like to take a moment to highlight the retirement of our current logo. After all, it had been serving the spirit of LoginRadius since our inception. 

\n

Fast-forward to the present day, the new logo marks a crucial milestone towards representing our brand-building process.

\n

\"LoginRadius

\n\n

Letting go of our core designing heritage was never our objective. Our color palette is the testimony of what we have been for our customers and promotes authenticity in every form.

\n

Logo Color Combinations

\n

\n

A Final Word

\n

The new logo is an attempt at modernizing our brand and helping it connect more with our customers. 

\n

Amidst the huge chunk of workload that rebranding brings along, we are super thrilled to share this news and would like to take a moment to thank our loyal customer base. Do share your comments about the change.

\n

\n","frontmatter":{"date":"March 25, 2020","updated_date":null,"title":"Announcing New Look of LoginRadius","tags":["LoginRadius","industry-news"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.408450704225352,"src":"/static/b196244089e513074aca00b6736f8973/c0524/Announcing-New-Look-of-LoginRadius.webp","srcSet":"/static/b196244089e513074aca00b6736f8973/61e93/Announcing-New-Look-of-LoginRadius.webp 200w,\n/static/b196244089e513074aca00b6736f8973/1f5c5/Announcing-New-Look-of-LoginRadius.webp 400w,\n/static/b196244089e513074aca00b6736f8973/c0524/Announcing-New-Look-of-LoginRadius.webp 769w","sizes":"(max-width: 769px) 100vw, 769px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.webp"}}}},{"node":{"fields":{"slug":"/identity/loginradius-business-continuity-covid-19-outbreak/"},"html":"

COVID-19 is a global epidemic that demands decisive and robust action.

\n

Following the announcement by the World Health Organization (WHO) to address the coronavirus (COVID-19) threat as a pandemic, organizations across the globe are looking to their Business Continuity Management (BCM) plan to make sure they are covered.

\n

For LoginRadius, as a SaaS-based customer identity platform,  planning ahead to counter any disruption has always been an essential aspect of its resilience program. 

\n

Consequently, we have put our contingency plan to action to fight the current and future risks to our business, and our customers' businesses, due to the COVID-19 outbreak.

\n

Mitigating Risk by LoginRadius

\n

As the developing situation changes with respect to world health outlook, we have outlined three key areas to ensure our readiness towards workplace mitigation. They include:

\n\n

Thereafter, we are prepared to react accordingly to ensure business continuity. Here’s what our plan looks like:

\n

Employee Health and Safety

\n

We are mindful of our employees and are up to date on the officially mandated actions related to hygiene and safety at our workstations. Likewise, we have rolled out the following policies:

\n\n

Service Operations

\n

As an automated, fully cloud-based software solution redundantly hosted on industry-leading infrastructure providers like Amazon Web Services and Microsoft Azure, the LoginRadius platform is inherently insulated from the business and commercial impacts of the virus. 

\n

This includes impacts from regional staffing and manpower shortages or disruptions in global supply chains.

\n

We have been working for several weeks with impromptu and scheduled drills to help ensure that operations run without disruption in the eventuality of an outbreak or other critical event which may impact our organization.

\n

Business Operations

\n

Similarly, we have rolled out remote working policies for all LoginRadius team members. Employees can work offsite as they would on-premises, guaranteeing no disruption to business operations, including our customer-facing sales, customer success, support, and account management teams.

\n

Conclusion

\n

We place the highest value on the partnerships that we've established with our customers and stakeholders. Rest assured, we are committed to ensuring uninterrupted success, even in times of hardship and challenges.

\n

In the end, we wish our customers health, security, and good fortune.

\n

\n","frontmatter":{"date":"March 17, 2020","updated_date":null,"title":"LoginRadius Announces Its Business Continuity Plan to Fight COVID-19 Outbreak","tags":["LoginRadius","industry-news"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.408450704225352,"src":"/static/cbe783d369681847892f38c91f3084cf/c0524/loginradius-business-continuity.webp","srcSet":"/static/cbe783d369681847892f38c91f3084cf/61e93/loginradius-business-continuity.webp 200w,\n/static/cbe783d369681847892f38c91f3084cf/1f5c5/loginradius-business-continuity.webp 400w,\n/static/cbe783d369681847892f38c91f3084cf/c0524/loginradius-business-continuity.webp 769w","sizes":"(max-width: 769px) 100vw, 769px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.webp"}}}},{"node":{"fields":{"slug":"/identity/loginradius-named-ciam-leader-owi/"},"html":"

LoginRadius is one of 415 identity companies selected from a pool of over 2,000 to be featured in the report.

\n

VANCOUVER, BC – December 2, 2019 – LoginRadius, a leader in cloud-based customer identity and access management (CIAM) solutions, is pleased to announce that 

\n

One World Identity (OWI) has named LoginRadius as a leader in customer identity and access management (CIAM) in its 2019 Identity Industry Landscape.

\n

OWI is a leading market intelligence and strategy firm focused on identity, trust, and the data economy. Its annual Identity Landscape provides a comprehensive and holistic view of leading companies in the identity space. This includes an unparalleled overview of how digital identity applications are evolving, as well as how companies and markets are shaping the next generation of digital identity. 

\n

“Since 2017, the number of identity companies has more than quadrupled, from 500 companies to over 2,000,” said Travis Jarae, CEO and Founder of OWI. “With the wave of data breaches and privacy scandals, there is a rapid expansion of identity products and solutions.

\n

The OWI team interacts with identity companies every day, from startups to enterprise. We’re proud to share the Identity Landscape each year to distill how new companies, products, and solutions are shaping the future of identity.”

\n

“LoginRadius is honoured to be one of the 415 identity companies selected from a pool of over 2,000 companies in the industry,”. “We are committed to empowering businesses to safely secure their customers’ identities while complying with existing and future regulations and delivering a unified digital experience

\n

\"modern-ciam\"

\n

The OWI Identity Landscape is a tool to help companies keep track of market growth and trends and understand the strategic importance of digital identity moving into 2020 and beyond. OWI will be releasing a more detailed research report delving into the details of each market segment and how companies within the industry overlap and intersect in upcoming months. 

\n

Download a complimentary copy of OWI’s 2019 Industry Landscape at www.oneworldidentity.com/landscape. 

\n

About OWI

\n

OWI is a market intelligence and strategy firm focused on identity, trust, and the data economy. Through advisory services, events and research, OWI helps a wide range of public and privately held companies, investors and governments stay ahead of market trends, so they can build sustainable, forward-looking products and strategies. OWI was founded in 2015 and is the host of the KNOW Identity Conference that takes place in Vegas April 5-8, 2020.

\n

About LoginRadius

\n

LoginRadius is a leading cloud-based customer identity and access management (CIAM) solution securing more than one billion user identities worldwide.

\n

The LoginRadius Identity Platform empowers business and government organizations to manage customer identities securely, deliver a unified digital experience, and comply with all major privacy regulations such as the EU’s General Data Protection Regulation (GDPR).

\n

\"book-a-demo-loginradius\"

\n","frontmatter":{"date":"December 02, 2019","updated_date":null,"title":"One World Identity Report Names LoginRadius a Customer Identity and Access Management (CIAM) Industry Leader","tags":["media-and-publication","LoginRadius"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.408450704225352,"src":"/static/57a7390f435ce9a0c99194bcda65a867/7f8e9/blog-graphic-one-world-identity.webp","srcSet":"/static/57a7390f435ce9a0c99194bcda65a867/61e93/blog-graphic-one-world-identity.webp 200w,\n/static/57a7390f435ce9a0c99194bcda65a867/1f5c5/blog-graphic-one-world-identity.webp 400w,\n/static/57a7390f435ce9a0c99194bcda65a867/7f8e9/blog-graphic-one-world-identity.webp 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.webp"}}}}]}},"pageContext":{"tag":"LoginRadius"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}