![\"Book](\"/8fce571f703a5970dbb1359a2fe0e51a/book-a-demo-loginradius.webp\")
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\n\n
Google reCAPTCHA is a security service that helps protect your websites from fraud and abuse.
\nCurrently, LoginRadius supports two different versions of Google v2reCAPTCHA.
\nYou 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.
\nIf you're new to LoginRadius, follow our Getting Started documentationdocs/references/javascript-library/getting-started/) to get going.
\nSo, you will need to do the following client-side setup for adding the invisible reCAPTCHA on a specific page only — for example, on the login page.
\nraasoption.invisibleRecaptcha = false;Now, add the following code to render the captcha only at the login page, and here beforeFormRender hook is used.
LRObject.$hooks.register('beforeFormRender', function(name, schema){\nLRObject.options.invisibleRecaptcha = false;\nif (name == 'login' ) {\n LRObject.options.invisibleRecaptcha = true;\n LRObject.util.addRecaptchaJS();\n LRObject.util.captchaSchema("loginradius-recaptcha_widget_login", schema);\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.
The last step is to stop resetting the reCAPTCHA before reCAPTCHA submission. So, add the following code:
\nLRObject.$hooks.register('eventCalls', function(name){\nLRObject.options.invisibleRecaptcha = false;\nLRObject.options.optionalRecaptchaConfiguration.IsEnabled = true;\nif (name == 'login' ) {\n LRObject.options.invisibleRecaptcha = true;\n LRObject.options.optionalRecaptchaConfiguration.IsEnabled = false;\n}\n});When you check your hosted page, invisible reCAPTCHA will appear only on the login page.
\nSimilarly, you can follow the above steps to enable invisible reCAPTCHA on the registration(signup) page or any other page.
\nYou 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,"description":"If you only want to integrate reCAPTCHA invisibly on specific pages, LoginRadius can help you. This tutorial explains how you can quickly integrate invisible reCAPTCHA.","title":"How to Integrate Invisible reCAPTCHA for Bot Protection","tags":["reCAPTCHA","LoginRadius"],"pinned":null,"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":{"excerpt":"Protecting customer data is paramount to every business organization. Even though businesses deploy the most stringent security measures to…","fields":{"slug":"/engineering/okta-and-the-lapsus-breach/"},"html":"Protecting customer data is paramount to every business organization. Even though businesses deploy the most stringent security measures to safeguard data, malicious actors somehow find security shortcomings to access network systems and cause data breaches, compromising the confidentiality, integrity, and availability of information.
\nCybersecurity firms like Okta, which provides identity management solutions and deals in authentication space, make the backbone of an organization's cybersecurity posture. Okta serves 15000+ customers worldwide. The Okta data breach by Lapsus$ is a recent example of what can happen if business organizations depend on third-party solution providers who show laxity in implementing robust cybersecurity strategies, frameworks, and controls.
\nIt is also a cautionary tale for cybersecurity MSPs (Managed Services Providers) and ITSPs (IT Solution Providers) to ensure that they have the best of security controls in place to prevent incidents like this.
\nOkta is an identity platform and offers identity and access management solutions such as Single sign-on (SSO), Multi-Factor Authentication (MFA), etc., for an organization's customers and employees.
\nOkta’s CSO (Chief Security Officer) David Bradbury recently published an official statement about a support engineer whose computer was accessed by malicious actors for five days in mid-January (between January 16 to 21, 2022) and said they detected the unsuccessful attempt early on.
\nOkta has now confirmed that malicious actors had access to one of its employees' laptops for five days in January 2022 but maintained there has been no data breach and remains fully operational. However, they concede that around 2.5% of its customers (about 366) might have been affected.
\nHere is how the attack happened.
\nNews reports show that a group of unscrupulous actors identifying themselves as Lapsus$ in their Telegram channel was behind this Okta breach. They were aided by a customer support engineer working for a third-party service provider whose laptop was accessed by these hackers to gain vital information. Lapsus$ is also known as a notorious threat actor group — DEV-0537. This group has a history of taking over individual user accounts to drain their crypto holdings at cryptocurrency exchanges.
\nThe forensics report cited by Okta's CSO did not state how the hackers managed to gain access to the support engineer’s laptop, but the fingers point towards negligence by the engineer. However, the hackers claim to have had access to Okta's systems for more than a month before the January 2022 incident. If these claims are valid, it indicates a significant security breach at Okta's network center.
\nThe Okta breach exposed the security frailties of the Okta network system and put 15,000 Okta customers’ data at risk. However, Okta stated it had contacted the affected 2.5% of customers, appraising them of the matter. Okta further noted that the customers need not take any precautionary measures as their data is safe.
\nThe CSO blog post went on to add that the damage was restricted to the access that support engineers have, such as Jira tickets and lists of users. Though customer support engineers facilitate password resetting and MFA, the hackers did not seem to have obtained this information. The CSO also confirmed that customer service engineers could not create or delete users.
\nNotably, Okta's customers include high-profile enterprises like FedEx Corporation and Moody's Corporation. Hence, Okta's shares plunged 11% immediately after hackers claimed the breach that has put thousands of Okta customers at risk.
\nLimiting access and permissions to the employees is the first step to take. Employees and contractors should only be provided access on a 'need-to-know' basis and must be provided on a ‘least privilege’ basis (minimum access needed to perform a task or job). For example, support engineers shouldn't be able to access internal HR, accounting, or payroll systems. At the same time, marketing personnel should not have access to network configuration or applications that they do not use.
\nIn an increasing multi-cloud and hybrid-cloud environment, it's paramount to understand the s IT ecosystem, third-party APIs (Application Programming Interfaces) and applications, and Software as a Service (SaaS) solutions deployed. Requesting SOC reports from vendors and contractors can help understand how their information systems are maintained and secured.
\nImplementing robust processes around Identity and Access Management (IAM) and Privileged Access Management (PAM) can help strengthen the cybersecurity posture by making it almost impossible for attackers to barge into the organization’s periphery.
\n'People' are the most valuable asset for any organization but can also be the weakest link in the cybersecurity chain. Therefore, organizations must regularly review the processes around training and educating employees, vendor-contractors, customers, and users to follow basic cyber hygiene.
\nOrganizations must continue to monitor and audit the control environments. Leveraging automated monitoring and alerting tools can help overcome many challenges SOC teams face.
\nOrganizations should perform internal audits and review the systems and monitor the traffic and access permission more frequently. It is also advisable to engage third-party audit firms to get an external and independent view of the cybersecurity posture.
\nIn case of a security incident, it is essential to be transparent to the employees, customers, vendors, and regulators and communicate with them immediately about the incident. Organizations should also provide specific guidance on how to safeguard the information assets.
\nThe Okta breach shows that no business organization is 100% safe from malicious attacks. One simplest security issue is sufficient for malicious actors to wreak havoc.
\nIn this specific example, the hackers accessed the laptop of one of Okta's customer service engineers to gain vital insights into the company's customer data. Such incidents prove that customers can never be sure that their information is safe and leak-proof.
\nHowever, it offers a valuable learning experience that business entities should not ignore the minutest of details regarding network security. It surfaces the adage that ' A chain is only as strong as its weakest link.'
\n
To create secure applications, you need a way to authenticate and authorize your users. In this tutorial, you will learn to authenticate users in your NestJS apps using LoginRadius Authentication API.
\nAuthentication and authorization are often seen as similar concepts, but they are not. Authentication is the process of verifying that a user is who they claim to be, while authorization is verifying which resources the user has access to.
\nAuthentication always comes first before authorization since you first need to identify the user before determining what level of access to give them.
\nYou can either choose to implement your own authentication strategy or leverage the benefits of a third-party identity platform. A do-it-yourself solution is prone to security errors, takes up a lot of time, and can increase the complexity of your application.
\nWith a third-party solution, you get access to multiple authentication methods, advanced security features, and you write less code.
\nLoginRadius is a no-code identity platform offering authentication, authorization, account security, and privacy solutions.
\nThe Authentication API provided by LoginRadius allows you to authenticate a user using an email and a password. Once the user is verified, LoginRadius responds with an access token. The user will, in turn, use the access token to send requests to protected endpoints.
\nNestJS is a Node.js framework built on Express.js with an Angular-like architectural structure. It is used to build scalable and modern server-side applications. The following sections will guide you in creating a simple NestJS application with authentication.
\nCreate a new NestJS project by running the following commands
\n// Install NestJS CLI\nnpm i -g @nestjs/cli\n\n// Create a new project\nnest new nest-loginradius-auth\n\ncd nest-loginradius-authTo authenticate a user using LoginRadius in NestJS, you need credentials: an API key and an API secret.
\nGet your account credentials by creating a free LoginRadius account and head over to the dashboard.
\nCreate an app and select configuration and then get your app's credentials from the API credentials panel.
\nSince the API key and API secret from the LoginRadius dashboard are sensitive, you will store them in the .env file.
You will need the dotenv module to access the your environment variables. Run the following command to install it.
\nnpm install dotenvAdd the API key, API secret, and Secure One Time Token(SOTT) to the.env file.
\nAPP_NAME=<your app name>\nAPI_KEY=<your api key>\nAPI_SECRET=<your api secret>\nSOTT= <your sott>In this project, you will be authenticating the user using their email and password. The following are the major steps you will be following:
\nGenerate an auth module, controller, and service by running the following code.
\nnest generate module auth\nnest generate controller authTo create a user, you need to create a signup route that will accept the email and password.
\nSince you are using TypeScript, define the DTO (Data Transfer Object) schema to validate the user data passed in the request body.
\nIn the auth folder, add the dto folder and create a UserDTO class in the user.dto.ts file.
export class UserDto {\n email: string;\n password: string;\n}Next, inside the AuthController, import the DTO to be used to validate the request body.
import { Injectable } from '@nestjs/common';\nimport { UserDto } from './dto/user.dto';\n\n@Injectable()\n@Controller('auth')\nexport class AuthController {\n @Post('signup')\n async signup(@Body() registerUserDto: UserDto) {\n // Register user\n }\n}A service file is used to abstract the business logic away from the controller. You will be handling the actual authentication and authorization process in this file.
\nGenerate a service for auth by running the following command.
\nnest g service authNext, populate the auth.service file by adding the signup method.
\nimport { Injectable } from '@nestjs/common';\nimport { UserDto } from './dto/user.dto';\nimport * as LRAuthPrrovider from 'loginradius-sdk'\n\n@Injectable()\nexport class AuthService {\n async signup(registerUserDto: UserDto) {\n console.log('sign up')\n }\n}Note that you are also importing the user DTO and the loginradius-sdk at the top of the file.\nTo execute the signup method in the signup route, inject it in the auth.controller.ts file.
import { Injectable } from '@nestjs/common';\nimport { UserDto } from './dto/user.dto';\nimport { AuthService } from './auth.service';\n\n@Injectable()\n@Controller('auth')\nexport class AuthController {\n constructor(private readonly authService: AuthService) { }\n\n @Post('signup')\n async signup(@Body() registerUserDto: UserDto) {\n let response = await this.authService.signup(registerUserDto)\n return response\n }\n}Before registering the user, validate if the email is already in use.\nFirst, install loginradius-sdk using the following command.
npm i loginradius-sdkNext import loginradius-sdk and configure it and since you will be using variables from the .env file, remember to also configure dotenv.
import * as dotenv from 'dotenv';\ndotenv.config()\nimport * as LRAuthPrrovider from 'loginradius-sdk'\n\nlet config = {\n apiDomain: "api.loginradius.com",\n apiKey: process.env.API_KEY,\n apiSecret: process.env.API_SECRET,\n siteName: process.env.APP_NAME,\n apiRequestSigning: false,\n proxy: {\n host: "",\n port: "",\n user: "",\n password: "",\n },\n };\nlet lrv2 = LRAuthPrrovider(config);\n\nlet sott = process.env.SOTTNext, check if the email is already in use.
\n@Injectable()\nexport class AuthService {\n async signup(registerUserDto: UserDto) {\n try {\n const response = await lrv2.authenticationApi\n .checkEmailAvailability(registerUserDto.email)\n if (response.isExist) {\n return "Email already in use"\n }\n catch(error) {\n return error\n }\n }\n}If the email is not already in use, register the user.
\n@Injectable()\nexport class AuthService {\n async signup(registerUserDto: UserDto) {\n try {\n // check if email is already in use\n const response = await lrv2.authenticationApi\n .checkEmailAvailability(registerUserDto.email)\n if (response.isExist) {\n return "Email already in use"\n }\n // create registration model\n let authUserRegistrationModel = {\n email: [\n {\n type: "primary",\n value: registerUserDto.email,\n },\n ],\n password: registerUserDto.password,\n };\n // register user\n let user = await lrv2.authenticationApi\n .userRegistrationByEmail(authUserRegistrationModel, sott)\n if(user) {\n return "Sign up successful"\n }\n } catch (error) {\n return error\n }\n }\n}In the above code, you register a new user by passing in the user data to the authentication API. The authUserRegistrationModel object defines how the email and password will be stored in the database.
To log in the user, pass in the email and password to the authentication API of LoginRadius.
\nIn auth.service.ts, add the login function.
@Injectable()\nexport class AuthService {\n async signup(registerUserDto: UserDto) {\n // register user\n }\n async login(loginUserDTO: UserDto) {\n // login user\n }\n}Since you are expecting the same type of data from the request body, i.e., the email and password, like in the signup route, you can reuse the user DTO.
\nNext, add the login functionality.
\n@Injectable()\nexport class AuthService {\n async signup(registerUserDto: UserDto) {\n // register user\n }\n async login(loginUserDTO: UserDto) {\n try {\n let emailAuthenticationModel = {\n email: loginUserDTO.email,\n password: loginUserDTO.password,\n };\n let user = await lrv2.authenticationApi\n .loginByEmail(emailAuthenticationModel)\n return {\n accessToken: user.access_token,\n }\n } catch (error) {\n return error\n }\n }\n}In the above code, you are logging in the user through loginradius-sdk. If successful, send back the accessToken in the response body. The user will use the access token to access protected routes.
Inject the login method in the auth.controller.ts file to use it in the login route.
import { Injectable } from '@nestjs/common';\nimport { UserDto } from './dto/user.dto';\nimport { AuthService } from './auth.service';\n\n@Injectable()\n@Controller('auth')\nexport class AuthController {\n constructor(private readonly authService: AuthService) { }\n\n @Post('signup')\n async signup(@Body() registerUserDto: UserDto) {\n // register user\n }\n async login(@Body() loginUserDto: UserDto) {\n // login user\n }\n}For protected routes, like accessing a user dashboard, the user will need to send the access token with the request. The access token will then be verified, and if valid, the application will be granted access.
\nThe user will need to store the accessToken. In this tutorial, you will be storing the token in the authorization header as a bearer token. Another alternative would be to use HTTP-only cookies.
In NestJS, guards are responsible for handling authorization. They determine whether a request will be handled by the route.
\nIn auth.guard.ts, add the following code.
import {AuthService } from './auth.service';\nimport { Request } from 'express';\n\n@Injectable()\nexport class AuthGuard implements CanActivate {\n\n constructor(\n private readonly authService: AuthService,\n ) {}\n\n async canActivate(context: ExecutionContext): Promise<boolean> {\n const request: Request = context.switchToHttp().getRequest();\n\n // Extract the access token from the authorization header\n const authheader = request.header('Authorization');\n const token = authheader && authheader.split(" ")[1];\n try {\n let authorizedMsg = await this.authService.authenticate(token);\n // Attach the authorized message to the request. You could also attach the user information.\n request['isAuthorized'] = "Authorized"\n return true;\n } catch (error) {\n throw new UnauthorizedException();\n }\n }\n}In the above code, you define the auth guard that will be used to decorate the protected routes. The token is extracted from the request authorization header and passed to the authenticate method defined in AuthService. This method will be responsible for verifying the token.
In auth.service.ts, create the authenticate method. This method will send the access token to LoginRadius for verification.
import { Injectable, UnauthorizedException } from '@nestjs/common';\nimport { UserDto } from './dto/user.dto';\nimport * as LRAuthPrrovider from 'loginradius-sdk'\n\n@Injectable()\nexport class AuthService {\n async signup(registerUserDto: UserDto) {\n // signup user\n }\n async login(loginUserDTO: UserDto) {\n // login user\n }\n async authenticate(accessToken: string) {\n try {\n const response = await lrv2.authenticationApi\n .authValidateAccessToken(accessToken)\n return response\n } catch (error) {\n throw new UnauthorizedException();\n }\n }\n}Now, create a protected route. In auth.controller.ts, add the following.
import { Controller, Get, Body, Post, UseGuards } from '@nestjs/common';\nimport { UserDto } from './dto/user.dto';\nimport { AuthService } from './auth.service';\nimport { AuthGuard } from './auth.guard';\n\n@Controller('auth')\nexport class AuthController {\n constructor(private readonly authService: AuthService) { }\n\n @Post('signup')\n async signup(@Body() registerUserDto: UserDto) {\n // signup user\n }\n @Post('login')\n async login(@Body() loginUserDto: UserDto) {\n // login user\n }\n @UseGuards(AuthGuard)\n @Get('protected')\n async protected() {\n return "Access granted"\n }\n}Now, every route you add UseGuards to will require a valid access token.
Use Postman or any other REST client of your choice to test the routes you have created.
\nFirst, create a test user by sending a POST request to the signup endpoint. Remember to include the email and password of the user in the request body.
\nPOST http://localhost:3000/auth/signupYou should receive a \"Sign up successful\" message if the request is successful.
\n![\"Create](\"/c629b0b9f9d7c2a9babd4c29934fd9aa/signup-route.webp\")
Next, log in the user by sending the login credentials to the login endpoint of your application.
\nPOST http://localhost:3000/auth/loginIf successful, you should receive the access token.
\n![\"Sign](\"/8c2450f6f8cd95eadbd9d5ef63256c06/login-route.webp\")
Finally, use the access token to access the protected route. Add the token to the authorization header.
\nGET http://localhost:3000/auth/protected![\"Sign](\"/c06de4f99d2b0cda2772852de3a873a6/protected-route.webp\")
In this tutorial, you have learned how to implement NestJS authentication using the LoginRadius Authentication API. You have seen how to log in a user and use an access token to protect specific routes.
\nYou can find the source code used in this tutorial on Github.
\nLearn more about the LoginRadius Authentication API from the documentation files. It has more identity management features than discussed in this tutorial. You can use these features to further enhance authentication as you need in your NestJS projects.
\n","frontmatter":{"date":"March 23, 2022","updated_date":null,"description":"Want to authenticate users on your NestJS app? Follow this tutorial to learn how to authenticate users using a password and perform authorization using access tokens.","title":"NestJS User Authentication with LoginRadius API","tags":["NestJS","Node.js","Authentication"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/ff122b5b50ce0f2b3f855935f99838f6/58556/coverimage.webp","srcSet":"/static/ff122b5b50ce0f2b3f855935f99838f6/61e93/coverimage.webp 200w,\n/static/ff122b5b50ce0f2b3f855935f99838f6/1f5c5/coverimage.webp 400w,\n/static/ff122b5b50ce0f2b3f855935f99838f6/58556/coverimage.webp 800w,\n/static/ff122b5b50ce0f2b3f855935f99838f6/99238/coverimage.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Mary Gathoni","github":null,"avatar":null}}}},{"node":{"excerpt":"In this tutorial, I’ll talk about adding authentication in a Svelte application using LoginRadius Authentication APIs. You'll understand…","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:
\nYou'll also learn how to consume REST APIs in a Svelte app using Fetch API and update user information in your Svelte store.
\nSvelte 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.
\nBut 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.
\nSo in this post, I’ll talk about how to add authentication in a Svelte application.
\nYou'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.
\nTo 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.
\nHere's a little demo of what your Svelte App would look like by the end of the tutorial:
\n\nLooks exciting? Let's jump right into it!
\nLet's start by creating a new Svelte project and adding some boilerplate code.
\nNavigate into the directory of your choice and create a new Svelte project by running:
\nnpx degit sveltejs/template svelte-auth-appThat should create a new Svelte project with a simple starter template.
\nAdditionally, you'll need to install svelte-navigator package to set up routing in your Svelte app:
\nnpm i svelte-navigatorYou need to add environment variable support in your Svelte app to store and use your LoginRadius API Keys and Secrets.
\nFirst, install a package called dotenv that let's create and use a special .env file to define your environment variables.
npm i dotenvNext, 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:
\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],You can refer to the complete rollup.config.js file for this project here.
Besides the initial set of files, your project will have the following directory structure:
\n![\"Directory](\"/7ff6a22848efd6f0ca45f4ef24257176/Directory-Structure-Svelte-App.webp\")
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.
\nYour starter template should come with the following styles inside your App.svelte file:
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}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.
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.
Create a global object called user inside your /src/stores.js file:
import { writable } from "svelte/store"\n\nexport const user = writable(\n localStorage.user ? JSON.parse(localStorage.getItem("user")) : null\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.
The root component in your Svelte app is the App Component. This is located inside /src/App.svelte.
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>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.
Let's head over to the /src/Login.svelte file to create the Login Page.
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>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.
After the form, you have a simple link with an on:click handler that allows the user to navigate to the Signup page.
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.
<script>let email; let password; export let sdkoptions;</script>You also need to create a function called handleSubmit that is the on:submit handler for your Login form:
<script>\n\t...\n const handleSubmit=(e)=>{\n let loginFields={email,password};\n\t console.log(loginFields)\n }\n const navigateToSignup=()=>{}\n</script>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.
Let's render the Login component inside your App.svelte file:
<main>\n <Login />\n</main>![\"Login](\"/7804c05118f523c534443446c37d8939/Login-Page.webp\")
Awesome! Let's follow the same process to create your Signup form.
\nHead over to the /src/Signup.svelte file to create your Signup Page.
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>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.
\nHere's what the script section of your Signup.svelte file should look like:
<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>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.
Let's render the Signup component inside your App.svelte file:
![\"Signup](\"/a18f23d4ceb0fe893dd8d49789a5b911/Signup-Page.webp\")
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:
{#if user && _user}\n<h3>Welcome {_user?.profile?.FullName}</h3>\n<button on:click="{logout}">Logout</button>\n{/if}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>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.
The next step is to set up LoginRadius, so you can start using its Authentication APIs from your Svelte App.
\nHead over to LoginRadius and create a new account by filling in the following details:
\n![\"Signup](\"/07e3f97860f329f52e8fd676c7ca73fb/Signup-2.webp\")
You'll then see a form with the name of your App, a URL, and a Data Center:
\n![\"Signup](\"/fdeb64de0e13dcf68954b8d6a8c801b5/Signup-3.webp\")
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](\"/a7d6dc1dd6df5add1461011a1a270cb3/Signup-4.webp\")
Once you do that, you'll be shown a pre-built authentication page of your LoginRadius app:
\n![\"LoginRadius](\"/54605addc29f464b1e42e5e254d71222/LoginRadius-Auth-Page.webp\")
However, for this tutorial, all you need are the LoginRadius APIs since you already have a frontend (your Svelte App) in place.
\nOnce 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](\"/33760eee3a762ea61cb29f2f95e3bdfe/LoginRadius-Configuration-Tab.webp\")
Inside that, you should see your APP Name, API Key, and API Secret.
\n![\"LoginRadius](\"/9a345c5c29b7bf85649af7394a806147/LoginRadius-API-Credentials.webp\")
Head back to the Svelte App's .env file and add the above credentials inside it:
APP_NAME=<YOUR_APP_NAME>\nAPI_CLIENT_KEY= <YOUR_APP_API_KEY>\nAPI_SECRET= <YOUR_APP_API_SECRET>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.
/node_modules/\n/public/build/\n\n.DS_Store\n\n.envFinally, you need to extract these environment variables in your sdkoptions variables inside your App component file.
...\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...And pass this variable as props to both the Login and Signup component:
\n...\n<Login {sdkoptions} />\n<Signup {sdkoptions} />\n...Great! Now you're ready to integrate LoginRadius APIs in your Svelte app.
\nYou'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.
\nconst endpoint = `${BASE_URL}?apikey=${sdkoptions.apiKey}&apisecret=${sdkoptions.apiSecret}`So in the above endpoint, you'll only change the BASE_URL according to which API you're hitting.
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.
<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>Since an API request is an asynchronous process, you also have a' loading' variable to disable the submit button until the API responds.
\nYou 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:
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}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.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...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...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} ...And that's it! Let's give your Signup functionality a whirl. Create a new account first:
\n![\"Signup](\"/d6d0033b0fcf1b74c7ccf39658e1f036/Signup-Success-with-API.webp\")
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.
\nLet's also test an erroneous flow. What if you signup via the same credentials again?
\n![\"Signup](\"/6f7b551dfb5856a6f944dac271fc31fa/Signup-Failure-Existing-Email.webp\")
The LoginRadius Signup API returns the error message, details, error code, etc., that you've handled accordingly.
\nAlso, if you use a simple password, the LoginRadius API returns an error based on a validation mechanism.
\n![\"Signup](\"/40d4723bf56be75f912462de00e42e33/Signup-Error-Password-Validation.webp\")
That's great because it makes your authentication workflow more air-tight.
\nSimilarly, you can now integrate the Login API as well in your Login.svelte file:
<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>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.
Let's also test this out:
\n![\"Login](\"/431c32e3326ed149d1fccfa746e5829a/Login-API-Success.webp\")
Let's also test an erroneous Login flow by entering the credentials for a user that doesn't exist:
\n![\"Login](\"/df37014cbbe64aa85cd395d049a791fa/Login-Error.webp\")
Great! Let's now tie all these individual pages together by setting up routing in your Svelte app.
\nYou'll use the svelte-navigator package that you previously installed to configure routing in your app.
First, you'll define the routes for the Signup, Login, and Home pages inside your App.svelte file:
<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>If you visit /login, you should see the Login Page. Similarly, if you go to /signup, you should see the Signup Page.
Remember, you had a link to the Signup page at the bottom of the Login page and vice versa?
\nAlso, 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.
To use this hook, import useNavigate and save its invoked reference inside a variable, as follows:
<script>\n import {useNavigate} from "svelte-navigator"; const navigate = useNavigate();\n ...\n</script>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:
<script>... const navigateToLogin=()=>navigate('/login'); ...</script>Similarly, you can also complete the navigateToSignup function inside your Login component:
<script>... const navigateToSignup=()=>navigate('/signup') ...</script>Finally, you'll also navigate to the Home page on a successful response from your Login API inside your Login component's handleSubmit function:
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>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.
\nIf 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.
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.
<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}You can then wrap another higher order Route component on top of the RouteGuard component inside the PrivateRoutes.svelte file, as follows:
<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>Now, all you need to do is use this PrivateRoute component to wrap your Home component instead of a regular Route component:
...\n\t<PrivateRoute path="/" let:location>\n\t\t<Home />\n\t</PrivateRoute>\n...And now you should be able to access the / route or the Home page only when you're authenticated:
![\"Home](\"/0b7bfdfedf02190c8f4cf508c3d5ae7d/Home-Component.webp\")
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.
\nYou can refer to the entire source code for this tutorial here.
\nYou 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,"description":"Are you building Svelte apps? In this tutorial, you'll learn to add secure user authentication in your Svelte apps using LoginRadius APIs.","title":"How to Authenticate Svelte Apps","tags":["Authentication","Svelte","LoginRadius"],"pinned":null,"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":{"excerpt":"Github is great, as you may already know. But, did you ever think to make your profile attractive for potential employers, followers…","fields":{"slug":"/engineering/build-your-github-profile/"},"html":"Github is great, as you may already know.
\nBut, did you ever think to make your profile attractive for potential employers, followers, recruiters, and visitors?
\nLet's make a better version of it.
\nIt's up to you to decide how you want this frame — photo-less, cartoon avatar, or best explaining image.
\nFor the best image, take a quality click; quality means not blurred, perfect lighting, and good posture.\nIf someone looks at the photo, it shall explain your personality.
\nGithub has a feature called README if you do not know already.
\nCheck out some listing of awesome GitHub profiles.
\nTo start this, first, you need to create a project that is the same as your GitHub username.
\nExample: My user name is abhir9, and I need to create a repo with the same name abhir9 with a README.md file.
This README.me will act as the profile page: abhir9
It is the actual README file created using a repo with my GitHub username: abhir9
\nHere you can add your quotes, hello statement, greetings, etc. It is connected to the viewer on your behalf.
\nSo write a short paragraph or a brief story to introduce yourself.
\nThere are some apps from contributors that extract the information based on your profile name and share stats and charts.
\nhttps://github-readme-stats.vercel.app/api?username=abhir9&show_icons=true&count_private=true&theme=reacthttps://readme-typing-svg.herokuapp.com?size=50¢er=true&vCenter=true&width=800&height=100&lines=Namaste%20%F0%9F%99%8F%3BPranam%20%F0%9F%99%8F%3BKhamma%20Ghani%20%F0%9F%99%8F%3BVanakkam%20%F0%9F%99%8F%3BSat%20Sri%20Akaal%20%F0%9F%99%8F%3BAssalam%20Alaikum%20%F0%9F%99%8F%3Bhttps://views.whatilearened.today/views/github/abhir9/abhir9.webp?cache=removehttps://github-readme-streak-stats.herokuapp.com/?user=abhir9&theme=reacthttps://raw.githubusercontent.com/devicons/devicon/master/icons/ubuntu/ubuntu-plain.webpMany other online apps can be used per your need — e.g., how you want to decorate your profile page.
\nGithub allows you to pin up to 6 repos.
\nTry to pin the best of your projects' repos. Mostly, people do visit these repos if they land on your profiles.
\nThere is a heat map that represents your contributions.
\nHeat map graph will automatically generate as per your contributions. Try to keep it greener by contributing usefully to your favorite projects.
\nWhether it's a minor or significant project, add a well-descriptive README file. It helps anyone clearly understand what your project does and how they can contribute if they want to.
\nFormat it in a better way; if you don't know very much about Markdown format, you can use an online tool like Pandao
\nYou can use images, screenshots, gifs, resources list, contribution guidelines, license, etc.
\n","frontmatter":{"date":"February 28, 2022","updated_date":null,"description":"Your GitHub profile is vital in showcasing your programming skills. Learn how you can leverage GitHub profile to showcase your skills and expertise.","title":"How to Build Your Github Profile","tags":["Github"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/9538f6a4bb1b02fa3b5daf9e83f0e026/58556/index.webp","srcSet":"/static/9538f6a4bb1b02fa3b5daf9e83f0e026/61e93/index.webp 200w,\n/static/9538f6a4bb1b02fa3b5daf9e83f0e026/1f5c5/index.webp 400w,\n/static/9538f6a4bb1b02fa3b5daf9e83f0e026/58556/index.webp 800w,\n/static/9538f6a4bb1b02fa3b5daf9e83f0e026/99238/index.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null}}}},{"node":{"excerpt":"As human interactions become more and more digitalized, your business and personal websites have become far more important than a couple of…","fields":{"slug":"/engineering/importance-of-search-functionality-for-websites/"},"html":"As human interactions become more and more digitalized, your business and personal websites have become far more important than a couple of decades ago.
\nWhen a user lands on your website, it's essential to help the user find the right information as effectively as possible. Otherwise, the user may leave the website, losing potential business opportunities or visibility.
\nOne of the important ways to improve website design and help users find the information they want is to make the site searchable using the search functionality. It enables users to find content by searching for particular words without understanding or exploring the entire website or app, a quick or less complex way to find content.
\nLet's discuss why your website needs to have search functionality and its benefits.
\nIf you have a large site -- assuming an e-commerce website or having hundreds of pages, users could find it extremely challenging to navigate to what they're looking for. In this situation, a search box allows your users to see what they need with a quick search.
\nRegardless of where each user lands on your website, a search box will help them quickly find specific topics or pages.
\nSimply, the more straightforward it is for users to navigate around your entire website, the more probable that they will explore it.
\nIf it's difficult for users to track down what they're looking for, they'll head off to somewhere else that can fulfill their requirements. Help your users engage quite a bit on your site with a search textbox.
\nAssuming you can incorporate your search bar into your Google Analytics, you'll have the option to track how frequently individuals look for a specific term. You can utilize this data for on-page content, order details, or billing plans.
\nFor example, if the most searched item on your website is Perfume, you could create a separate section or link on the home page so that users can directly navigate to that item faster.
\nIn this mobile era, it's critical to ensure your site and applications are mobile-friendly. Whenever users are on their mobile phones, they could be out and in a hurry, and a search feature will allow them to search and navigate to a specific page rapidly.
\nPeople are habitual to using some features to the level that they don't think much before using them. Search functionality is one of them. In this digital world, you can't have a site that doesn't offer an ideal user experience. Keep in mind that this minor component can significantly help increase your website’s engagement rates.
\nAs the number of site visits increases, it indicates an improvement in brand engagement. Users visit your site because they are happy with the information and experience. This helps to raise your brand image among other competitors in your market.
\nA positive user experience will lead to more visits to your site. As the visitors' count and time spent on your website increase, search engines like Google will consider your website performing well and of good quality, which will further elevate your page rankings in search results.
\nYou will also find some new keywords from users' searches to search for similar or different information on Google or other search engines. These search keywords can be those words that you want to target in SEO and other marketing and search strategies.
\nAs you expand your website with new content, blog posts, or new products, it can make your website cumbersome and affect user experience. Accordingly, finding an exact item can become difficult. However, with the right site search strategy, website size or navigation does not hamper the user experience. Users can find what they need and get ideas for other related items.
\nIn a nutshell, search functionality on your website helps offer a smooth, consistent experience for your users. And a well-implemented search functionality has more potential to ensure the website's success.
\nTry not to stop your users from exploring all the features your site offers; add search functionality to your site soon!
\n","frontmatter":{"date":"February 24, 2022","updated_date":null,"description":"Adding a search functionality is important for any website to improve user experience. Read more to understand the benefits of enabling search on your website.","title":"Why Implement Search Functionality for Your Websites","tags":["Search"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/455ec841671081b53edc59522c28a138/58556/search-functionality.webp","srcSet":"/static/455ec841671081b53edc59522c28a138/61e93/search-functionality.webp 200w,\n/static/455ec841671081b53edc59522c28a138/1f5c5/search-functionality.webp 400w,\n/static/455ec841671081b53edc59522c28a138/58556/search-functionality.webp 800w,\n/static/455ec841671081b53edc59522c28a138/99238/search-functionality.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Neha Vyas","github":"nehavyasqa","avatar":null}}}}]},"markdownRemark":{"excerpt":"Introduction Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT…","fields":{"slug":"/engineering/how-to-integrate-jwt/"},"html":"Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT, or JSON Web Tokens, a compact, stateless method for securely transmitting user identity and session data across services.
\nWith JWT token authentication, identity information is embedded in a signed token, allowing you to maintain user sessions without server-side storage. This approach is highly scalable and ideal for modern architectures like SPAs, mobile apps, and microservices.
\nIn this blog, we’ll walk you through what is JWT, why use it, and how to implement JWT authentication using LoginRadius.
\nYou’ll learn what JWT is, why it’s effective, and how it works in real-world applications. We'll cover both integration methods (IDX and Direct API), generating your signing key, managing sessions, storing the JWT token securely, and applying best practices throughout.
\nWhether you're a developer, product manager, or IAM architect, this guide offers a complete foundation for implementing JWT token authentication into your application stack.
\nJSON Web Token (JWT) is an open standard (RFC 7519) used to transmit information securely between parties as a JSON object. It’s compact, self-contained, and digitally signed, making it a reliable format for authentication and authorization across modern applications.
\nA JWT consists of three parts:
\nExample of a token structure:
\n<base64Header>.<base64Payload>.<signature>
\n![\"Flowchart](\"/f29edbf2978577390c7ffa02e9bc4dda/lr-JWT-authentication.webp\")
JWT simplifies identity verification, especially when you're building apps that talk to APIs or need to scale without centralized session storage.
\nLoginRadius provides robust support for JWT (JSON Web Token) authentication, which allows for flexible and secure access control across different digital platforms. Whether you're building a fully custom identity flow or using a pre-built interface, the platform supports various integration approaches depending on your architecture.
\nIf you're looking to understand how to implement JWT token authentication effectively, LoginRadius offers two primary implementation models that cater to different levels of customization and control:
\nThe IDX-hosted login approach enables secure, standards-compliant, JWT-based authentication without requiring you to build a custom login interface. This is a strategic option for fast, compliant, and user-friendly deployments.
\n![\"Screenshot](\"/9fb19dd9c88c7916aeebd03ab6e661b7/lr-admin-console.webp\")
{
\n\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR...\",
\n\"expires_in\": 1800
\n}
\nThis integration approach works best for all teams that want effective identity workflows without the complexity of building proprietary login screens, something that is crucial for customer portals, onboarding of mobile applications, and even managing access for business partners.
\nIf you’re building a custom login UI or working in a headless environment, LoginRadius lets you generate and handle JWTs directly through its Authentication APIs. Here’s how you can programmatically perform token authentication using the classic method:
\nSend a POST login request to the LR Authentication URL:
\nPOST /identity/v2/auth/login
\nInclude the user’s credentials (email + password) in the request body.
\n{
\n\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...\",
\n\"expires_in\": 3600
\n}
\nWith LoginRadius, it is possible to customize the payload to include user roles and/or any additional metadata. You can set custom JWT claims on the Admin Console.
\nWith this method, you have complete customization over login flows while using LoginRadius to issue signed JWTs for user session management.
\nNOTE- With either method, LoginRadius ensures that JWTs are securely signed, optionally short-lived, and compatible with standard token validation libraries, making integration seamless for everyone.
\nTo get started with JWT implementation, you can read our complete developer documentation.
\n![\"Illustration](\"/15ec02ac98d24a9f1f28e5d0f06b9174/IDX-vs-Direct-API-JWT.webp\")
Session management is how your app keeps track of a user after they log in so they don’t have to prove who they are with every request.
\nIn traditional apps, sessions are stored on the server using session IDs. Every time a request comes in, the server checks that session ID to verify the user.
\nIn modern apps, especially SPAs and APIs, JWTs are used to manage sessions without needing server-side storage; this is called stateless session management. The token itself carries the user’s identity, roles, and expiration details. As long as the token is valid, the user stays logged in.
\nGood session management ensures:
\nUser Logs In
\nClient Stores the Token
\nAccess Token Expiry
\nToken Renewal
\nWhen the user logs out, both the access token and refresh token should be cleared from client storage.
\nHowever, access tokens are stateless and cannot be revoked mid-lifecycle unless:
\nCombining these strategies gives you greater control over token misuse and enables a robust, enterprise-grade logout flow.
\n![\"illustration](\"/e55ae4bbc8ce62e13f03e46e29ebe7cc/api-economy.webp\")
When you implement JWT-based authentication, the client (browser or mobile app) needs a way to store the access token and, optionally, the refresh token after they are issued by the authentication server. This stored token is then attached to every subsequent request to prove the user's identity.
\nChoosing where to store the JWT is a crucial security decision. The most common storage options are:
\nEach option has trade-offs between security, accessibility, and persistence, and the right choice depends on your application's architecture and threat model.
\nAccess Tokens
\nRefresh Tokens
\nJWT authentication with LoginRadius offers a modern, stateless approach to managing sessions across distributed systems. The IDX integration is ideal for rapid deployment, while the Direct API model is best for organizations needing deep customization and integration flexibility.
\nWith robust token signing, refresh capabilities, and centralized control, LoginRadius provides a future-ready foundation for secure, scalable identity architecture. Contact us to know more about JWT authentication and implementation guide.
\nA: JWT authentication securely verifies user identities, enabling stateless session management across web, mobile apps, and microservices without server-side session storage.
\nA: LoginRadius simplifies JWT integration by offering hosted IDX login pages and direct API-based authentication methods, enabling rapid deployment and deep customization.
\nA: Yes, JWT authentication is secure when implemented with best practices like short-lived tokens, secure storage methods, signature validation, and refresh token rotation.
\nA: Yes, LoginRadius allows revocation of JWT refresh tokens explicitly, and supports strategies like short-lived tokens and key rotation to manage token lifecycles securely.
\n","frontmatter":{"date":"April 15, 2025","updated_date":null,"description":"Discover JWT (JSON Web Token) authentication, its advantages, and how to integrate it seamlessly using LoginRadius' hosted IDX and Direct API methods for secure, scalable identity management.","title":"JWT Authentication with LoginRadius: Quick Integration Guide","tags":["JWT","JSON Web Token","Authentication","Authorization"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":0.7782101167315175,"src":"/static/4cedb7829f98208cbc6d5a9aea4e983d/58556/how-to-integrate-jwt.webp","srcSet":"/static/4cedb7829f98208cbc6d5a9aea4e983d/61e93/how-to-integrate-jwt.webp 200w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/1f5c5/how-to-integrate-jwt.webp 400w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/58556/how-to-integrate-jwt.webp 800w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/1cc9f/how-to-integrate-jwt.webp 896w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},"pageContext":{"limit":6,"skip":18,"currentPage":4,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}