![\"LoginRadius](\"/0d7ac3f6bd1f6f3ad31570d5b79c1ebd/app_window.webp\")
User authentication is the process of validating a user's identity to ensure that they are who they claim to be. Implementing user authentication in your application is critical to prevent unauthorized users from accessing sensitive information.
\nThis tutorial focuses on implementing user authentication and registration in Flutter applications using the LoginRadius API.
\nIf you wish to follow along with this tutorial, you must have the following set up:
\nThis tutorial is verified with Flutter v2.5.1 and Android Studio v3.5.
\nLoginRadius is a cloud-based, SaaS Customer Identity and Access Management (CIAM) platform that provides developers and businesses simplified and robust features for managing customer identity, privacy, and access. LoginRadius offers high-level, secure, and well-documented APIs for integrating User Authentication and Single Sign-on (SSO) into your application.
\nLoginRadius offers:
\nSo, with everything out of the way, let's get started.
\nAfter creating an account with LoginRadius, it sets up a free app for you. This is the app in which you would integrate the LoginRadius API with Flutter. Here my app name is “tayy”.
\n
Next, you need to obtain your LoginRadius API credentials. To do so, login to your Dashboard and navigate to the Configuration tab in the sidebar menu. You will find your API credentials under the API Key and Secret section. Copy and store your APP Name, API Key, and API Secret somewhere safe and easily accessible.
![\"LoginRadius](\"/8a552a2950ebab3006e383386c6a11ef/configuration_tab.webp\")
Create a new Flutter project and navigate to the folder of the application by running the following commands in your terminal:
\nflutter create loginradius_example\ncd loginradius_exampleNext, you need to install the dio package as a dependency in our project. The dio package is a powerful HTTP client used for making network requests.
Run the following command to get the newest version of the dio package in your project.
flutter pub add dioThen, install the dependency by running flutter pub get in your terminal.
The project is being structured in this order:
\n![\"Folder](\"/cb6ed60c36b1e957eec023d28a260df7/folder-structure.webp\")
Create a new dart file named api_client.dart and import the dio package into the file, as follows:
import 'package:dio/dio.dart';Now let’s create a class named ApiClient and initialize the Dio object in it. The ApiClient class will contain several methods for making network requests based on your features, including User Registration, User Login, Get User Profile Data, and User Logout.
import 'package:dio/dio.dart';\n\nclass ApiClient {\n final Dio _dio = Dio();\n\n Future<Response> registerUser() async {\n //IMPLEMENT USER REGISTRATION\n }\n\n Future<Response> login() async {\n //IMPLEMENT USER LOGIN\n }\n\n Future<Response> getUserProfileData() async {\n //GET USER PROFILE DATA\n }\n\n Future<Response> logout() async {\n //IMPLEMENT USER LOGOUT\n }\n}Before implementing the user registration functionality, you must first obtain the user registration endpoint URL from the LoginRadius API Docs.
\nAfter retrieving the endpoint URL, you need to send a POST request to the endpoint using the Dio package by passing in:
apiKey you obtained earlier as a query parameter;userData as the request body; and,SOTT key as a header, as shown below.class ApiClient {\n //...\n Future<Response> registerUser(Map<String, dynamic>? userData) async {\n try {\n Response response = await _dio.post(\n 'https://api.loginradius.com/identity/v2/auth/register', //ENDPONT URL\n data: userData, //REQUEST BODY\n queryParameters: {'apikey': 'YOUR_API_KEY'}, //QUERY PARAMETERS\n options: Options(headers: {'X-LoginRadius-Sott': 'YOUR_SOTT_KEY', //HEADERS\n }));\n //returns the successful json object\n return response.data;\n } on DioError catch (e) {\n //returns the error object if there is\n return e.response!.data;\n }\n }\n }The below code snippet shows how you’ll send a POST request to the LoginRadius login endpoint URL https://api.loginradius.com/identity/v2/auth/login, passing in your apiKey as a query parameter and the email and password of the user as the request body.
class ApiClient {\n //...\n Future<Response> login(String email, String password) async {\n try {\n Response response = await _dio.post(\n 'https://api.loginradius.com/identity/v2/auth/login',\n data: {\n 'email': email,\n 'password': password\n },\n queryParameters: {'apikey': 'YOUR_API_KEY'},\n );\n //returns the successful user data json object\n return response.data;\n } on DioError catch (e) {\n //returns the error object if any\n return e.response!.data;\n }\n }\n }To retrieve the user profile details, send a GET request to the Read Profile Endpoint URL https://api.loginradius.com/identity/v2/auth/account, passing in your apiKey as a query parameter and the user's access token as the header.
\n\nThe user’s access token is gotten from the successful response object of the User Login endpoint.
\n
class ApiClient {\n //...\n\n Future<Response> getUserProfileData(String accesstoken) async {\n try {\n Response response = await _dio.get(\n 'https://api.loginradius.com/identity/v2/auth/account',\n queryParameters: {'apikey': 'YOUR_API_KEY'},\n options: Options(\n headers: {\n 'Authorization': 'Bearer ${YOUR_ACCESS_TOKEN}',\n },\n ),\n );\n return response.data;\n } on DioError catch (e) {\n return e.response!.data;\n }\n }Finally, to implement the user logout functionality, you would send a GET request to the Invalidate User Access Token endpoint URL https://api.loginradius.com/identity/v2/auth/access_token/InValidate. This API call invalidates the user's active access token, requiring them to re-authenticate if they want to access their data.
class ApiClient {\n //...\n\n Future<Response> logout(String accessToken) async {\n try {\n Response response = await _dio.get(\n 'https://api.loginradius.com/identity/v2/auth/access_token/InValidate',\n queryParameters: {'apikey': ApiSecret.apiKey},\n options: Options(\n headers: {'Authorization': 'Bearer $accessToken'},\n ),\n );\n return response.data;\n } on DioError catch (e) {\n return e.response!.data;\n }\n }\n }That concludes the ApiClient class. Next, you'll build the UI for your Flutter application, making use of the methods you just created in the ApiClient class.
Your Flutter application will consist of four screens, which include:
\nLet’s begin by building the Registration Screen.
\nThe RegistrationScreen has two TextFormField widgets that serve as our email and password fields, as well as an ElevatedButton to handle event submission, as shown in the code snippet below from the register.dart file.
//...\n @override\n Widget build(BuildContext context) {\n Scaffold(\n backgroundColor: Colors.blueGrey[200],\n body: Form(\n key: _formKey,\n child: SizedBox(\n width: size.width,\n height: size.height,\n child: Align(\n alignment: Alignment.center,\n child: Container(\n width: size.width * 0.85,\n padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 30),\n decoration: BoxDecoration(\n color: Colors.white,\n borderRadius: BorderRadius.circular(20),\n ),\n child: SingleChildScrollView(\n child: Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: <Widget>[\n const Center(\n child: Text(\n "Register",\n style: TextStyle(\n fontSize: 30,\n fontWeight: FontWeight.bold,\n ),\n ),\n ),\n SizedBox(height: size.height * 0.05),\n TextFormField(\n validator: (value) =>\n Validator.validateEmail(value ?? ""),\n controller: emailController,\n keyboardType: TextInputType.emailAddress,\n decoration: InputDecoration(\n hintText: "Email",\n isDense: true,\n border: OutlineInputBorder(\n borderRadius: BorderRadius.circular(10),\n ),\n ),\n ),\n SizedBox(height: size.height * 0.03),\n TextFormField(\n obscureText: _showPassword,\n validator: (value) =>\n Validator.validatePassword(value ?? ""),\n controller: passwordController,\n keyboardType: TextInputType.visiblePassword,\n decoration: InputDecoration(\n hintText: "Password",\n isDense: true,\n border: OutlineInputBorder(\n borderRadius: BorderRadius.circular(10),\n ),\n ),\n ),\n SizedBox(height: size.height * 0.06),\n Row(\n mainAxisAlignment: MainAxisAlignment.center,\n children: [\n Expanded(\n child: ElevatedButton(\n onPressed: _handleRegister,\n style: ElevatedButton.styleFrom(\n primary: Colors.indigo,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.circular(10)),\n padding: const EdgeInsets.symmetric(\n horizontal: 40, vertical: 15)),\n child: const Text(\n "Register",\n style: TextStyle(\n fontSize: 20,\n fontWeight: FontWeight.bold,\n ),\n ),\n ),\n ),\n ],\n ),\n ],\n ),\n ),\n ),\n ),\n ),\n ),\n );\n }\n //...In the onPressed callback of the ElevatedButton widget, you'll handle the validation of your form data.
If the form is validated, you pass your userData to the registerUser method from the ApiClient class for processing.
If the response is an error, you show a snackbar with the error message. Otherwise, the user is redirected to the Login Screen.
\n\n\nIn the following example, you've provided only a few user attributes as
\nuserData. To view the complete list of user attributes, please look at the body parameters of the User Registration API here.
Future<void> _handleRegister() async {\n if (_formKey.currentState!.validate()) {\n //show snackbar to indicate loading\n ScaffoldMessenger.of(context).showSnackBar(SnackBar(\n content: const Text('Processing Data'),\n backgroundColor: Colors.green.shade300,\n ));\n\n //the user data to be sent\n Map<String, dynamic> userData = {\n "Email": [\n {\n "Type": "Primary",\n "Value": emailController.text,\n }\n ],\n "Password": passwordController.text,\n "About": 'I am a new user :smile:',\n "FirstName": "Test",\n "LastName": "Account",\n "BirthDate": "10-12-1985",\n "Gender": "M",\n };\n\n //get response from ApiClient\n dynamic res = await _apiClient.registerUser(userData);\n ScaffoldMessenger.of(context).hideCurrentSnackBar();\n\n //checks if there is no error in the response body.\n //if error is not present, navigate the users to Login Screen.\n if (res['ErrorCode'] == null) {\n Navigator.push(context,\n MaterialPageRoute(builder: (context) => const LoginScreen()));\n } else {\n //if error is present, display a snackbar showing the error messsage\n ScaffoldMessenger.of(context).showSnackBar(SnackBar(\n content: Text('Error: ${res['Message']}'),\n backgroundColor: Colors.red.shade300,\n ));\n }\n }\n}The LoginScreen UI code is similar to the RegistrationScreen in that it also has two TextFormField widgets that serve as our email and password fields, as well as an ElevatedButton to handle event submission. So, for the sake of brevity, I’ll be leaving out the LoginScreen UI code and focusing mainly on the code to be written in the ElevatedButton onPressed callback in the login_screen.dart file.
//...\n //...\n Future<void> loginUsers() async {\n if (_formKey.currentState!.validate()) {\n //show snackbar to indicate loading\n ScaffoldMessenger.of(context).showSnackBar(SnackBar(\n content: const Text('Processing Data'),\n backgroundColor: Colors.green.shade300,\n ));\n\n //get response from ApiClient\n dynamic res = await _apiClient.login(\n emailController.text,\n passwordController.text,\n );\n ScaffoldMessenger.of(context).hideCurrentSnackBar();\n\n //if there is no error, get the user's accesstoken and pass it to HomeScreen\n if (res['ErrorCode'] == null) {\n String accessToken = res['access_token'];\n Navigator.push(\n context,\n MaterialPageRoute(\n builder: (context) => HomeScreen(accesstoken: accessToken)));\n } else {\n //if an error occurs, show snackbar with error message\n ScaffoldMessenger.of(context).showSnackBar(SnackBar(\n content: Text('Error: ${res['Message']}'),\n backgroundColor: Colors.red.shade300,\n ));\n }\n }\n }\n //...The code snippet above is a method that first validates the form before passing the email and password values to the login method from the ApiClient class for handling.
If the response is successful, you obtain the user’s access_token from the response data and pass it over to the HomeScreen. Otherwise, you display a snackbar with the error message that occurred.
Then, you pass the loginUsers method you created above to the onPressed property of the ElevatedButton widget in the LoginScreen, as shown below.
ElevatedButton(\n onPressed: loginUsers, //<--\n style: ElevatedButton.styleFrom(\n primary: Colors.indigo,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.circular(10)),\n padding: const EdgeInsets.symmetric(\n horizontal: 40, vertical: 15)),\n child: const Text("Login",\n style: TextStyle(\n fontSize: 20,\n fontWeight: FontWeight.bold,\n ),\n ),\n ),\n ),Next, you need to provide a screen that reveals the user's profile data when they successfully log in, and the HomeScreen is there to do so.
The HomeScreen displays the user’s profile details using a FutureBuilder widget that accepts a future getUserData.
Future<Map<String, dynamic>> getUserData() async {\n dynamic userRes;\n userRes = await _apiClient.getUserProfileData(widget.accesstoken);\n return userRes;\n }The getUserData method above is used to retrieve details of a user by passing in the access_token obtained earlier from the LoginScreen to the ApiClient getUserProfileData method.
To display the result of your getUserData method on our screen, use a FutureBuilder widget. The code snippet below shows how to use the FutureBuilder to get the results of the getUserData future in the home.dart file.
class HomeScreen extends StatefulWidget {\n final String accesstoken;\n const HomeScreen({Key? key, required this.accesstoken}) : super(key: key);\n @override\n State<HomeScreen> createState() => _HomeScreenState();\n }\n class _HomeScreenState extends State<HomeScreen> {\n //instance of ApiClient class\n final ApiClient _apiClient = ApiClient();\n\n //get user data from ApiClient\n Future<Map<String, dynamic>> getUserData() async {\n dynamic userRes;\n userRes = await _apiClient.getUserProfileData(widget.accesstoken);\n return userRes;\n }\n @override\n Widget build(BuildContext context) {\n var size = MediaQuery.of(context).size;\n return Scaffold(\n backgroundColor: Colors.white,\n body: SizedBox(\n width: size.width,\n height: size.height,\n child: FutureBuilder<Map<String, dynamic>>(\n future: getUserData(), //<---\n builder: (context, snapshot) {\n if (snapshot.hasData) {\n if (snapshot.connectionState == ConnectionState.waiting) {\n return Container(\n height: size.height,\n width: size.width,\n color: Colors.blueGrey,\n child: const Center(\n child: CircularProgressIndicator(),\n ),\n );\n }\n //get results from snapshot\n String fullName = snapshot.data!['FullName'];\n String firstName = snapshot.data!['FirstName'];\n String lastName = snapshot.data!['LastName'];\n String birthDate = snapshot.data!['BirthDate'];\n String email = snapshot.data!['Email'][0]['Value'];\n String gender = snapshot.data!['Gender'];\n return Container(\n width: size.width,\n height: size.height,\n color: Colors.blueGrey.shade400,\n child: SingleChildScrollView(\n physics: const BouncingScrollPhysics(),\n //...\n //...Finally, let's add the logout feature.
\nAdd an ElevatedButton widget to the HomeScreen.
TextButton(\n onPressed: (){},\n style: TextButton.styleFrom(\n backgroundColor: Colors.redAccent.shade700,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.circular(5)),\n padding: const EdgeInsets.symmetric(\n vertical: 15, horizontal: 25)),\n child: const Text('Logout',\n style: TextStyle(color: Colors.white), ),\n ),\n ),On pressing the button, you'll call the logout method on the ApiClient class and pass in the access_token value, and then you route the user to the LoginScreen.
TextButton(\n onPressed: () async {\n await _apiClient.logout(widget.accesstoken);\n Navigator.pushReplacement(\n context, MaterialPageRoute(builder: (context) => const LoginScreen()));\n },\n style: TextButton.styleFrom(\n backgroundColor: Colors.redAccent.shade700,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.circular(5)),\n padding: const EdgeInsets.symmetric(\n vertical: 15, horizontal: 25)),\n child: const Text('Logout',\n style: TextStyle(color: Colors.white),\n ),\n ),![\"Preview](\"/968d860d94a6f5f996e709e22dcec84a/demo-project.gif\")
LoginRadius provides high-level, secure, and well-documented APIs to ease the implementation of authentication and user identity management. This tutorial has discussed LoginRadius's benefits and how to use the LoginRadius APIs to handle user authentication and registration in a Flutter application.
\nThe complete source code of the demo application is available on GitHub.
\n","frontmatter":{"date":"February 17, 2022","updated_date":null,"description":"Developing Flutter apps? Learn how to implement user authentication and registration in your Flutter applications quickly with LoginRadius APIs.","title":"Flutter Authentication: Implementing User Signup and Login","tags":["Authentication","Flutter","API"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/97c4aaf6f0e898b457c0574ba1f8c979/58556/user-authentication-for-flutter-apps.webp","srcSet":"/static/97c4aaf6f0e898b457c0574ba1f8c979/61e93/user-authentication-for-flutter-apps.webp 200w,\n/static/97c4aaf6f0e898b457c0574ba1f8c979/1f5c5/user-authentication-for-flutter-apps.webp 400w,\n/static/97c4aaf6f0e898b457c0574ba1f8c979/58556/user-authentication-for-flutter-apps.webp 800w,\n/static/97c4aaf6f0e898b457c0574ba1f8c979/99238/user-authentication-for-flutter-apps.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Yusuf Ahmed","github":null,"avatar":null}}}},{"node":{"excerpt":"Authentication and authorization are critical in every software application to secure user data and allow access to trusted users. In some…","fields":{"slug":"/engineering/guest-post/loopback-rest-api-authentication/"},"html":"Authentication and authorization are critical in every software application to secure user data and allow access to trusted users. In some cases, implementing authentication and authorization is not an easy process.
\nHowever, LoopBack 4 offers an authentication package @loopback/authentication that helps secure your application's API endpoints. It provides custom authentication strategies and a @authenticate decorator that requires minimal boilerplate code.
\nAccording to the LoopBack 4 documentation:
\n\n\nLoopBack is a flexible, open source Node.js and TypeScript framework built on Express. It helps you quickly develop APIs and microservices built on backend systems such as databases and SOAP or REST services.
\n
Loopback provides several features that allow you to build your application with less boilerplate code.
\nJSON Web Token (JWT) is an open standard defined by Internet Engineering Task Force (IETF) in RFC 7519.
\nIt is a standard used for securely transferring claims between two parties over the internet. It uses JSON Web Signature (JWS) for the secure transfer of claims and eliminates the possibility of tampering. Accordingly, JWTs can be signed with either a secret (HMAC technique) or a public/private key pair (RSA or ECDSA).
\nIn simple words, it is used for authentication and secure information sharing. A JWT token is made up of three components that are separated by three dots:
\n\n\nYou can learn more about JWT and its best practices here.
\n
This tutorial is a hands-on demonstration. To follow along, be sure you have the following in place:
\nTo start building your LoopBack REST API, first install LoopBack CLI, which provides the quickest method to create a LoopBack 4 project that follows best practices.
\nUse the command below to install the Loopback CLI globally:
\nnpm i -g @loopback/cliYou can grab a cup of coffee while you wait for the installation to complete. Then open your command line, create an AuthWithLooback folder, and change the directory to the AuthWithLooback folder with commands below:
mkdir AuthWithLooback\ncd AuthWithLoobackSo, you've installed Loopback CLI and created a project directory. Let's run the following command to create a LoopBack project:
\nlb4 appSelect the options as in the following screenshot to complete the prompts.
\n![\"Creating](\"/982c31e4e0a8b99735b9e920e72e898f/l5wg0nTQ.webp\")
After completing the prompts, LoopBack will configure the TypeScript compiler and install all the required dependencies. Change directory to the auth-with-loopback folder.
cd auth-with-loopbackYou've successfully created your Loopback application. Now, let’s create a Model to store the news details with the command below:
\nlb4 modelSelect the options as in the following screenshot to complete the prompts.
\n![\"Creating](\"/3f73bef6f5422b16cc466d5f279701a9/lSCGXHs.webp\")
After the date_created property definition, press the enter key to exit the prompt.
Loopback will create a NewsModel file in the src/models — the folder where NewsModel will be defined.
Next, you need to create a data source to connect to your preferred database. For demonstration, this tutorial connects to a MongoDB database.
\nRun the following command in your terminal to create a data source:
\n lb4 datasourceSelect the options as in the following screenshot to complete the prompts.
\n![\"Creating](\"/aa8582e5de5c7011c46a43242342a5d2/pHvPgEQA.webp\")
After completing the prompts, LoopBack will create the News file in the src/datasource folder.
Then, create a Repository for CRUD operations of your NewModel with the command below:
\nlb4 repositoryAfter completing the prompts, LoopBack will create the NewsModelRepository file in the src/repository folder.
Select NewsDatasource as the data source, NewsModel as the model for generating the repository, and DefaultCrudRepository as the base repository class.
Your selection for the prompts shall look like the screenshot below.
\n![\"Creating](\"/7789349e93d10cfc0800e4f822e581ca/WWH5tYJQ.webp\")
After completing the prompts, LoopBack will create the NewsModelRepository file in the src/repository folder.
Lastly, create a controller for the NewsModel you created with the command below:
lb4 controllerYour selection for the prompts should look like the screenshot below.
\n![\"Creating](\"/a22f45625db4bd560279a422e127665f/iHD6lPCg.webp\")
After completing the prompts, LoopBack will create the NewsController file in the src/controller folder. So far, your project structure, omitting the node_modules folder, should look as follows.
📦auth-with-loopback
\n┣ 📂public
\n┃ ┗ 📜index.html
\n┣ 📂src
\n┃ ┣ 📂tests
\n┃ ┃ ┣ 📂acceptance
\n┃ ┃ ┃ ┣ 📜home-page.acceptance.ts
\n┃ ┃ ┃ ┣ 📜ping.controller.acceptance.ts
\n┃ ┃ ┃ ┗ 📜test-helper.ts
\n┃ ┃ ┗ 📜README.md
\n┃ ┣ 📂controllers
\n┃ ┃ ┣ 📜README.md
\n┃ ┃ ┣ 📜index.ts
\n┃ ┃ ┣ 📜news-controller.controller.ts
\n┃ ┃ ┗ 📜ping.controller.ts
\n┃ ┣ 📂datasources
\n┃ ┃ ┣ 📜README.md
\n┃ ┃ ┣ 📜index.ts
\n┃ ┃ ┗ 📜news.datasource.ts
\n┃ ┣ 📂models
\n┃ ┃ ┣ 📜README.md
\n┃ ┃ ┣ 📜index.ts
\n┃ ┃ ┗ 📜news-model.model.ts
\n┃ ┣ 📂repositories
\n┃ ┃ ┣ 📜README.md
\n┃ ┃ ┣ 📜index.ts
\n┃ ┃ ┗ 📜news-model.repository.ts
\n┃ ┣ 📜application.ts
\n┃ ┣ 📜index.ts
\n┃ ┣ 📜migrate.ts
\n┃ ┣ 📜openapi-spec.ts
\n┃ ┗ 📜sequence.ts
\n┣ 📜.dockerignore
\n┣ 📜.eslintignore
\n┣ 📜.eslintrc.js
\n┣ 📜.gitignore
\n┣ 📜.mocharc.json
\n┣ 📜.prettierignore
\n┣ 📜.prettierrc
\n┣ 📜.yo-rc.json
\n┣ 📜DEVELOPING.md
\n┣ 📜Dockerfile
\n┣ 📜README.md
\n┣ 📜package-lock.json
\n┣ 📜package.json
\n┗ 📜tsconfig.json
Now that you have the Model setup, run the server, and add some custom data to the News collection in MongoDB.
\n #start the server\n npm run startThe above command will start the TypeScript compiler, which will build the project and check for possible errors. If everything goes well with the code, you should see the output on the terminal, as follows:
\n![\"Starting](\"/cf1c4681ababa5101284b580193e8bf3/lSCGXHnw.webp\")
Next, open your favorite browser and navigate to http://localhost:3000. You should see an output as follows:
![\"LoopBack](\"/321018f4c7be6074ce493ab2f711a5c2/hL9y8IIg.webp\")
Now, click on the explorer link, where you can make requests to your LoopBack application. On the explorer page, locate the post endpoint and add some custom data to the news collection by clicking the try it out button with the data below on the request body.
{\n "title": "Upgrade to Loopback V4",\n "body": "The developers of Loopback urges the V3 users to upgrade to V4 as soon as possible",\n "date_created": "2021-12-14T00:57:43.197Z"\n}Then, click the execute button to run the query.
![\"Executing](\"/905e332f7af326f984c298c9a6239c41/jiC_1P0A.webp\")
You can add as many records as you like to experiment with the endpoints. The important thing to note here is that the endpoints are not protected. Anyone may create, read, update, and delete records.
\nIn a moment, this tutorial explains how to secure the endpoints so that only logged-in users can access them.
\nTo begin, install LoopBack authentication and authentication-jwt, as follows:
npm i --save @loopback/authentication @loopback/authentication-jwtTo protect the application, you'll implement user authentication and authorization, which implies that only logged-in users will be able to access your APIs. You'll create two endpoints in the User controller:
\n/Signup endpoint: To handle user’s sign up./Login endpoint: To handle user’s login.You’ll start with the signup controller to enable users to create an account. Create an empty controller with the command below:
\n lb4 controllerYour selection for the prompts should be as follows:
\n![\"Creating](\"/c0653ec5c8a0f68a48e55ff2159137d4/6LCgT-Gw.webp\")
Then, open the src/controllers/user.controller.ts file, and import the required modules with the following code snippet:
import { authenticate, TokenService } from '@loopback/authentication';\n import {\n Credentials,\n MyUserService,\n TokenServiceBindings,\n User,\n UserRepository,\n UserServiceBindings,\n } from '@loopback/authentication-jwt';\n import { inject } from '@loopback/core';\n import { model, property, repository } from '@loopback/repository';\n import {\n get,\n getModelSchemaRef,\n post,\n requestBody,\n SchemaObject,\n } from '@loopback/rest';\n import { SecurityBindings, securityId, UserProfile } from '@loopback/security';\n import { genSalt, hash } from 'bcryptjs';\n import _ from 'lodash';\n ........Next, set up your user credential objects, and verify the user credentials using the UserService, injecting MyUserService into the authentication-jwt extension.
@model()\n export class CreateUser extends User {\n @property({\n type: 'string',\n required: true,\n })\n password: string;\n }\n\n const UserSchema: SchemaObject = {\n type: 'object',\n required: ['email', 'password'],\n properties: {\n email: {\n type: 'string',\n format: 'email',\n },\n password: {\n type: 'string',\n minLength: 6,\n },\n },\n };\n\n export const RequestBody = {\n description: 'The input of login function',\n required: true,\n content: {\n 'application/json': { schema: UserSchema },\n },\n };\n\n export class UserController {\n constructor(\n @inject(TokenServiceBindings.TOKEN_SERVICE)\n public jwtService: TokenService,\n @inject(UserServiceBindings.USER_SERVICE)\n public userService: MyUserService,\n @inject(SecurityBindings.USER, { optional: true })\n public user: UserProfile,\n @repository(UserRepository) protected userRepository: UserRepository,\n ) { }\n ..........Finally, you'll build your signup endpoint, which will listen to POST requests. Here, you shall save the hashed version of the user's password in the database to keep it safe.
\n @post('/signup', {\n responses: {\n '200': {\n description: 'User',\n content: {\n 'application/json': {\n schema: {\n 'x-ts-type': User,\n },\n },\n },\n },\n },\n })\n async signUp(\n @requestBody({\n content: {\n 'application/json': {\n schema: getModelSchemaRef(CreateUser, {\n title: 'NewUser',\n }),\n },\n },\n })\n newUserRequest: CreateUser,\n ): Promise<User> {\n const password = await hash(newUserRequest.password, await genSalt());\n const savedUser = await this.userRepository.create(\n _.omit(newUserRequest, 'password'),\n );\n\n await this.userRepository.userCredentials(savedUser.id).create({ password });\n\n return savedUser;\n }\n .........Now that you've set up the signup endpoint, create the login endpoint so that registered users may log in to the API.
\nUsing the code snippet below, set up the login route in the src/controllers/user.controller.ts file. In the event of a successful log-in, a token is sent to the user.
@post('/signin', {\n responses: {\n '200': {\n description: 'Token',\n content: {\n 'application/json': {\n schema: {\n type: 'object',\n properties: {\n token: {\n type: 'string',\n },\n },\n },\n },\n },\n },\n },\n })\n async signIn(\n @requestBody(RequestBody) credentials: Credentials,\n ): Promise<{ token: string }> {\n const user = await this.userService.verifyCredentials(credentials);\n const userProfile = this.userService.convertToUserProfile(user);\n const token = await this.jwtService.generateToken(userProfile);\n return { token };\n }Perhaps, you can show the currently logged-in user by adding a /whoami endpoint.
In the src/controllers/user.controller.ts file, get the details of the currently logged-in user using the code snippet below. Users should access this endpoint only when they are logged in.
@authenticate('jwt')\n @get('/whoami', {\n responses: {\n '200': {\n description: 'Return current user',\n content: {\n 'application/json': {\n schema: {\n type: 'string',\n },\n },\n },\n },\n },\n })\n async whoAmI(\n @inject(SecurityBindings.USER)\n loggedInUserProfile: UserProfile,\n ): Promise<string> {\n return loggedInUserProfile[securityId];\n }Now, open src/application.ts and bind the authentication components to your application class. First, import Loopback AuthenticationComponent, JWTAuthenticationComponent, and NewsDataSource from your datasources using the following code snippet:
//...\nimport { AuthenticationComponent } from "@loopback/authentication"\nimport {\n JWTAuthenticationComponent,\n UserServiceBindings,\n} from "@loopback/authentication-jwt"\nimport { NewsDataSource } from "./datasources"\n//...Then, mount the jwt authentication system and bind your NewsDataSource to the UserService data source.
//...\n// ------ ADD SNIPPET INSIDE THE CONTRUCTOR BLOCK ---------\nthis.component(AuthenticationComponent)\nthis.component(JWTAuthenticationComponent)\nthis.dataSource(NewsDataSource, UserServiceBindings.DATASOURCE_NAME)\n//...Finally, add the authenticate action in the Sequence. Also, modify the error when authentication fails to return status code 401 (Unauthorized). Open the src/sequence.ts file and add the code snippet below:
import { FindRoute, InvokeMethod, MiddlewareSequence, ParseParams, Reject, RequestContext, Send, SequenceActions, SequenceHandler } from '@loopback/rest';\n import {\n AuthenticateFn,\n AuthenticationBindings,\n AUTHENTICATION_STRATEGY_NOT_FOUND,\n USER_PROFILE_NOT_FOUND,\n } from '@loopback/authentication';\n import { inject } from "@loopback/core"\n export class MySequence implements SequenceHandler {\n constructor(\n @inject(SequenceActions.FIND_ROUTE) protected findRoute: FindRoute,\n @inject(SequenceActions.PARSE_PARAMS)\n protected parseParams: ParseParams,\n @inject(SequenceActions.INVOKE_METHOD) protected invoke: InvokeMethod,\n @inject(SequenceActions.SEND) protected send: Send,\n @inject(SequenceActions.REJECT) protected reject: Reject,\n @inject(AuthenticationBindings.AUTH_ACTION)\n protected authenticateRequest: AuthenticateFn,\n ) { }\n async handle(context: RequestContext) {\n try {\n const { request, response } = context;\n const route = this.findRoute(request);\n //call authentication action\n await this.authenticateRequest(request);\n // Authentication successful, proceed to invoke controller\n const args = await this.parseParams(request, route);\n const result = await this.invoke(route, args);\n this.send(response, result);\n } catch (error) {\n if (\n error.code === AUTHENTICATION_STRATEGY_NOT_FOUND ||\n error.code === USER_PROFILE_NOT_FOUND\n ) {\n Object.assign(error, { statusCode: 401/* Unauthorized */ });\n }\n this.reject(context, error);\n return;\n }\n }\n }So far, you've implemented user authentication for your API. Now, protect your News endpoints so that only authenticated users can access those routes.
\nOpen the src/controllers/news.controller.ts file, and import authenticate from jwt authentication.
import { authenticate } from "@loopback/authentication"Then on each of the endpoints in your news controller, add @authenticate('jwt') before the NewsController class, which will protect all the routes in NewsController.
//...\n @authenticate('jwt')\n //...Perhaps, you may not want to protect all the routes, simply add the @authenticate('jwt') method before the route you wish to protect. You can protect the POST route as follows:
@authenticate('jwt')\n @post('/news-models')\n @response(200, {\n description: 'NewsModel model instance',\n content: { 'application/json': { schema: getModelSchemaRef(NewsModel) } },\n })\n async create(\n @requestBody({\n content: {\n 'application/json': {\n schema: getModelSchemaRef(NewsModel, {\n title: 'NewNewsModel',\n exclude: ['id'],\n }),\n },\n },\n })\n newsModel: Omit<NewsModel, 'id'>,\n ): Promise<NewsModel> {\n return this.newsModelRepository.create(newsModel);\n }You've implemented user authentication in your REST API and secured the routes against unauthorized users. Let's put your application to the test. Press CTRL-C to exit the server and restart it with the following command:
npm startIf you open the explorer page, you should see the UserController endpoints.
![\"User](\"/1f93015b74e330c7dd57e99d9145a9d8/IaV4R43g.webp\")
If you try to execute any query on NewsController, you get a 404 (Unauthorized) error. So, sign up by clicking the /signup endpoint — and log in from the /users/login endpoint. On successful login, copy the token, scroll to the top, click on the Authorize button, and paste the token.
![\"Authorizing](\"/3308ca6960b64dab62adf3646b42032a/atU6nqmA.webp\")
Now you can execute queries on the NewController endpoints.
LoginRadius is a customer identity and access management (CIAM) platform for developers.
\nWhat does this mean for developers like you?
\nLoginRadius simplifies the process of user authentication, authorization, and management across web and mobile apps and APIs. It helps developers quickly implement this functionality so that developers, like you, can focus more on building core features that are essential to their apps.
\nLoginradius includes a plethora of enticing CIAM features such as passwordless authentication and social SSO (Twitter, Facebook, etc., based single sign-on).
\nImplementing user authentication with LoginRadius is a simple procedure. First, sign up for a Developer Pro trial or simply sign up for a forever free account here.
\nAnd you can explore what LoginRadius can do by using it for a Node.js application. You can learn more by going through LoginRadius Node.js developer documentation
\nThis tutorial taught you how to create user authentication in a LoopBack REST API by creating a small news database application.
\nYou can use the steps outlined in this tutorial to create any type of LoopBack REST API that requires user authentication and authorization.
\nI hope you enjoyed this tutorial! Feel free to contact me on Twitter.
\n","frontmatter":{"date":"February 04, 2022","updated_date":null,"description":"Are you building dynamic REST APIs with LoopBack? In this tutorial, you'll learn how to implement user authentication and authorization in a Loopback REST API.","title":"How to Secure Your LoopBack REST API with JWT Authentication","tags":["Authentication","LoopBack","JWT","Node.js"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/4a5b6d544acaf9e9a42893f7df9dd057/58556/secure-loopback-rest-api-with-jwt.webp","srcSet":"/static/4a5b6d544acaf9e9a42893f7df9dd057/61e93/secure-loopback-rest-api-with-jwt.webp 200w,\n/static/4a5b6d544acaf9e9a42893f7df9dd057/1f5c5/secure-loopback-rest-api-with-jwt.webp 400w,\n/static/4a5b6d544acaf9e9a42893f7df9dd057/58556/secure-loopback-rest-api-with-jwt.webp 800w,\n/static/4a5b6d544acaf9e9a42893f7df9dd057/99238/secure-loopback-rest-api-with-jwt.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Ekekenta Odionyenfe Clinton","github":"icode247","avatar":null}}}},{"node":{"excerpt":"Authentication remains at the core of any application with user data and accounts. It ensures that only the authorized person is accessing…","fields":{"slug":"/engineering/developers-can-get-rid-of-password-based-authentication/"},"html":"Authentication remains at the core of any application with user data and accounts. It ensures that only the authorized person is accessing the data and account. So far, Password-based authentication has been prevalent that developers mostly use.
\nUnfortunately, passwords are no longer a wise choice for developers to ensure secure and seamless authentication. Let’s see why:
\nBefore talking about the solution in detail, let’s get deeper into the problem and see what are the common cyber-attacks faced by password-based authentication.
\nThe following is the list of common password attacks. It also explains what additional efforts developers need to put in to fight these cyber-attacks and protect user data:
\nTo protect against this attack, developers have to develop security features like suspending or locking user accounts on multiple subsequent attempts to log in with an incorrect password.
\nTo protect against this attack, developers have to ensure that users are not using insecure or previously breached passwords.
\nTo protect against this attack, developers need to introduce 2FA (two-factor authentication). Stakes are high in this case as a lot depends on how users take security measures.
\nThat is where developers have to be cautious, keeping all the data-in-transit encrypted.
\nLuckily getting rid of passwords from the authentication mechanism can address all the above-stated problems. Eliminating passwords from internet space is certainly not a 1-day thing, but the responsibility lies with developers.
\nDevelopers should introduce more secure and user-friendly authentication methods to their application users such as magic links, single sign-on (SSO), biometric, hardware-based authentication.
\nIt does the user authentication based on the \"possession factor.\" That is where developers find passwordless authentication trustworthy, as the authentication uses a phone number, email ID, or authenticator app to cater to an OTP, one-time link, or code respectively to verify the user.
\nThrough this, developers can improve the user experience of the application and reduce risk while minimizing the total cost of storing the login credentials. Users will employ the one-time link or OTP only if they are logged into their email or possess the phone for SMS. This assures the developer a better security.
\nAlmost all websites demand some form of authentication to access their content and features. Single sign-on authentication has become a standard authentication method for website logins.
\nDevelopers can integrate the single sign-on feature in their web applications to facilitate users to securely authenticate multiple apps and websites by leveraging one set of login credentials.
\nThrough SSO, developers can implement multi-factor authentication implicitly. It uses a federated identity management architecture that relies on open standard protocols to exchange identity and authentication information among these protocols. That makes implementing the security easier for developers.
\nBiometrics refers to the user's physical characteristics allowing them to identify uniquely on a digital platform. Instead of typing letters, numbers, and symbols (for passwords), biometric authentication uses biometric systems to calculate and estimate the user's physical attributes. Facial recognition, tiny impressions made by fingerprints, and vocal cadence are well-known biometric authentication techniques.
\nIt is gaining traction because developers do not have to maintain a separate database of usernames and passwords since the authentication takes place from the user device rather than the application's database.
\nMost in-house developers and smart device vendors leverage this authentication technique to avoid password authentication. This authentication mostly uses QR codes or link-based login approaches. Here the one-time link or the QR code uniquely generates the verification process that helps initiate the user login process without any password.
\nIn this approach, the authentication uses a dedicated plug-and-run physical device belonging to the authorized user. These versatile security devices help users log in to desktops, Wi-Fi, websites, and other applications.
\nFIDO2 devices are touch-sensed USB sticks that enable hardware authentication and follow the FIDO Alliance standards and specifications. Leveraging this authentication mechanism is a plus point as the developers do not have to maintain a secure database for the login credentials.
\nFor decades, password-based authentication has been the mainstay for security and user verification. On average, almost all online users have 20 to 30 login credentials for different applications and sites. Password logins have become so common that changing the authentication trend and adopting a new authentication approach will take time.
\nAll the alternatives mentioned in this article can help minimize using passwords to a significant level. It's time developers should seriously ponder the problems that passwords can create for themselves and opt for reasonable alternatives as per the situation, requirements, or policy standards.
\nPasswords are becoming more like a liability rather than a security asset. Hence, to get rid of them, developers are leveraging other means of authentication that are more reliable and less susceptible to security breaches and threats.
\nWorried about efforts involved in implementing these alternative authentication methods from scratch? LoginRadius identity platform comes with these authentication techniques so that developers do not have to implement them from scratch in their applications to provide alternate authentication.
\n","frontmatter":{"date":"January 31, 2022","updated_date":null,"description":"Authentication remains at the core of any application with user data and accounts. It ensures that only the authorized person is accessing the data and account. So far, Password-based authentication has been prevalent that developers mostly use.","title":"When Can Developers Get Rid of Password-based Authentication?","tags":["Authentication"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/c9cb7d184cd59f1d58470baae77763e1/58556/password-dev.webp","srcSet":"/static/c9cb7d184cd59f1d58470baae77763e1/61e93/password-dev.webp 200w,\n/static/c9cb7d184cd59f1d58470baae77763e1/1f5c5/password-dev.webp 400w,\n/static/c9cb7d184cd59f1d58470baae77763e1/58556/password-dev.webp 800w,\n/static/c9cb7d184cd59f1d58470baae77763e1/99238/password-dev.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},{"node":{"excerpt":"BigCommerce is a great eCommerce platform with rich features, and millions of people benefit from it. But there are limitations when you…","fields":{"slug":"/engineering/extend-ciam-capabilities-of-bigcommerce/"},"html":"BigCommerce is a great eCommerce platform with rich features, and millions of people benefit from it. But there are limitations when you want to extend the platform for the following identity and access management requirements:
\nLet’s talk about how you can extend BigCommerce and add on the above-mentioned features hassle-free.
\nThe answer is to utilize a CIAM (Consumer Identity and Access Management) that provides BigCommerce integration. You can easily configure and implement these features with minimal development effort using the CIAM provider. One such CIAM provider is LoginRadius.
\nYou are required to create an account with the CIAM provider, enable BigCommerce Integration, and do needed configurations in both BigCommerce and CIAM Provider. For more details, refer to this guide here.\nThis guide also explains the modifications required in your Stencil or Blueprint themes of BigCommerce. As a result of this implementation, you can enable the desired authentication method(s) for customers of your BigCommerce Application. Consequently, making the eCommerce experience smoother for your customers.
\nBoth customer and business will see several benefits (described below) from using CIAM solutions for features such as SSO, Phone Login, Prefilled Customer Information, and Analytics.
\nSSO lets customers log in with an existing identity. Allowing customers to use their existing identity increases conversions and return rates. It also improves security by allowing your customers to manage lesser digital identities and credentials.\nThe movement toward Bring Your Own Identity(BYOI) is gaining prominence as customers look to control their digital profiles, and SSO enables customers to bring their own digital identity.
\nPhone login via OTP allows customers to easily log into their account without remembering a username or password. They only need to provide the Phone Number and then enter the received OTP to log in.
\nThis process makes sign-up and sign-in seamless for the customers and improves customer engagement. Also, businesses get fewer or no forgot password requests from customers, which reduces the support efforts.
\nThe top reason behind the cart abandonment is the long or confusing checkout process. Using the prefilled customer information with the LoginRadius Social Login feature, you can reduce the overall time involved in the checkout process.
\nPrefilled customer information such as name, city, email address during checkout allows customers to place orders quickly.
\nLet’s say a customer logged in using a social account and during checkout. With the customer’s permission, LoginRadius can retrieve basic information like name, email, birth date, gender from their social account. Thus, the customers need not enter data manually and experience a shorter and smoother checkout process.
\nWhen you use LoginRadius as CIAM, it stores your customer data with your desired data centers. Also, LoginRadius Dashboard allows you to access the customer analytics related to identity, demographics, login, communication, etc. These analytics and charts help you understand your customers and their preferences better.
\nFor example:
\nIn addition to the benefits mentioned above, you experience below additional benefits:
\nExtending the capabilities of your great eCommerce platform is like a cherry on the cake. Signup for free and get in touch with us to take your eCommerce platform a level ahead.
\n","frontmatter":{"date":"January 27, 2022","updated_date":null,"description":"Want to add Phone Login or Single Sign-on for customers of your BigCommerce application? This article explains it all. Towards the end, it talks about how LoginRadius can help you improve upsell and cross-sell.","title":"4 Ways to Extend CIAM Capabilities of BigCommerce","tags":["BigCommerce","Authentication","CIAM"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/8c9fb8572282ac70e1a960bc7c47ec2b/58556/4-ways-to-extend-ciam-capabilities.webp","srcSet":"/static/8c9fb8572282ac70e1a960bc7c47ec2b/61e93/4-ways-to-extend-ciam-capabilities.webp 200w,\n/static/8c9fb8572282ac70e1a960bc7c47ec2b/1f5c5/4-ways-to-extend-ciam-capabilities.webp 400w,\n/static/8c9fb8572282ac70e1a960bc7c47ec2b/58556/4-ways-to-extend-ciam-capabilities.webp 800w,\n/static/8c9fb8572282ac70e1a960bc7c47ec2b/99238/4-ways-to-extend-ciam-capabilities.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Archna Yadav","github":null,"avatar":null}}}},{"node":{"excerpt":"Introduction Creating a user registration form employs the management of the registered user. This is where user role authentication comes…","fields":{"slug":"/engineering/guest-post/nodejs-authentication-guide/"},"html":"Creating a user registration form employs the management of the registered user. This is where user role authentication comes into play. Role authentication ensures that non-admin users cannot make changes or access exclusive information. It grants administrative privileges to admin users and basic privileges to basic users.
\nYou can build your own authentication functionality with web tokens like JSON Web Token (JWT) or use a trusted third-party customer identity and access management (CIAM) software like LoginRadius.
\nThis tutorial helps you:
\nYou have installed the following:
\nYou already understand JavaScript E56 Syntax.
\nNow that everything is in place, let's set up your database.
\nYou'll store all your user data — which includes username, password, and role — in MongoDB.
\nInstall a node package called Mongoose that will connect to MongoDB. Then create a user schema for your application.
npm init\nnpm install mongoosenpm init sets up your new project and creates a package.json file with the credentials.
After installing mongoose, create a new file db.js in the project's directory and require mongoose.
const Mongoose = require("mongoose")With the help of mongoose, you can connect your application to MongoDB:
\n// db.js\nconst Mongoose = require("mongoose")\nconst localDB = `mongodb://localhost:27017/role_auth`\nconst connectDB = async () => {\n await Mongoose.connect(localDB, {\n useNewUrlParser: true,\n useUnifiedTopology: true,\n })\n console.log("MongoDB Connected")\n}\nmodule.exports = connectDBThe code snippet here connects to mongodb://localhost:27017 and then specifies the name of the database /role_auth.
The function connectDB awaits for the connection, which contains the URI and options as a second parameter. If it connects without errors, it will log out MongoDB Connected. Error issues will be fixed while connecting to the database. After this, it exported the function for use in the server.
You need to install some dependencies that you'll use in this tutorial.
\n npm i express nodemonExpress.js is a Node.js framework for building web applications quickly and easily.
\nNodemon is a tool that watches the file system and automatically restarts the server when there is a change.
\nYou require express in your application to listen for a connection on port 5000. Create a new file server.js in the root directory and create the listening event:
const express = require("express")\nconst app = express()\nconst PORT = 5000\napp.listen(PORT, () => console.log(`Server Connected to port ${PORT}`))The next step is to test your application. Open up your package.json file and add the following to scripts:
"scripts": {\n "start": "node server.js",\n "dev": "nodemon server.js"\n}Open your terminal and run npm run dev to start the server.
Earlier, you've created a function that connects to MongoDB and exported that function. Now import that function into your server.js:
const connectDB = require("./db");\n...\n//Connecting the Database\nconnectDB();You also need to create an error handler that catches every unhandledRejection error.
const server = app.listen(PORT, () =>\n console.log(`Server Connected to port ${PORT}`)\n)\n// Handling Error\nprocess.on("unhandledRejection", err => {\n console.log(`An error occurred: ${err.message}`)\n server.close(() => process.exit(1))\n})The listening event is assigned to a constant server. If an unhandledRejection error occurs, it logs out the error and closes the server with an exit code of 1.
Schema is like a blueprint that shows how the database will be constructed.
\nYou'll structure a user schema that contains username, password, and role.
\nCreate a new folder model in the project's directory, and create a file called User.js. Now open User.js and create the user schema:
// user.js\nconst Mongoose = require("mongoose")\nconst UserSchema = new Mongoose.Schema({\n username: {\n type: String,\n unique: true,\n required: true,\n },\n password: {\n type: String,\n minlength: 6,\n required: true,\n },\n role: {\n type: String,\n default: "Basic",\n required: true,\n },\n})In the schema, the username will be unique, required, and will accept strings.
You've specified the minimum characters(6) the password field will accept. The role field grants a default value (basic) that you can change if needed.
Now, you need to create a user model and export it:
\nconst User = Mongoose.model("user", UserSchema)\nmodule.exports = UserYou've created the user model by passing the UserSchema as the second argument while the first argument is the name of the model user.
You'll create functions that handle:
\nAs the name implies, this function will handle the registrations of users.
\nLet's create a new folder named Auth. It will contain the Authentication file and the Route set-up file.
After creating the Auth folder, add two files — Auth.js and Route.js.
Now open up our Auth.js file and import that User model:
const User = require("../model/User")The next step is to create an async express function that will take the user's data and register it in the database.
You need to use an Express middleware function that will grant access to the user's data from the body. You'll use this function in the server.js file:
const app = express()\napp.use(express.json())Let's go back to your Auth.js file and create the register function:
// auth.js\nexports.register = async (req, res, next) => {\n const { username, password } = req.body\n if (password.length < 6) {\n return res.status(400).json({ message: "Password less than 6 characters" })\n }\n try {\n await User.create({\n username,\n password,\n }).then(user =>\n res.status(200).json({\n message: "User successfully created",\n user,\n })\n )\n } catch (err) {\n res.status(401).json({\n message: "User not successful created",\n error: error.mesage,\n })\n }\n}The exported register function will be used to set up the routes. You got the username and password from the req.body and created a tryCatch block that will create the user if successful; else, it returns status code 401 with the error message.
You'll create a route to /register using express.Router. Import the register function into your route.js file, and use it as the route's function:
const express = require("express")\nconst router = express.Router()\nconst { register } = require("./auth")\nrouter.route("/register").post(register)\nmodule.exports = routerThe last step is to import your route.js file as middleware in server.js:
app.use("/api/auth", require("./Auth/route"))The server will use the router middleware function if there is a request to /api/auth.
You'll use Postman to test all the routes.
\nOpen up Postman to send a POST request to http://localhost:5000/api/auth/register and pass the username and password to the body:
![\"Register](\"/1ac77cdb1d6c5ebf46cf5171d74cf4a0/registerRoute.webp\")
You've created a function that adds registered users to the database. You have to create another function that will authenticate user credentials and check if the user is registered.
\nOpen the Auth.js file and create the Login function, as follows:
// auth.js\nexports.login = async (req, res, next) => {\n const { username, password } = req.body\n // Check if username and password is provided\n if (!username || !password) {\n return res.status(400).json({\n message: "Username or Password not present",\n })\n }\n}The login function returns status code 400 if the username and password were not provided. You need to find a user with the provided username and password:
exports.login = async (req, res, next) => {\n try {\n const user = await User.findOne({ username, password })\n if (!user) {\n res.status(401).json({\n message: "Login not successful",\n error: "User not found",\n })\n } else {\n res.status(200).json({\n message: "Login successful",\n user,\n })\n }\n } catch (error) {\n res.status(400).json({\n message: "An error occurred",\n error: error.message,\n })\n }\n}Here, it returns status code 401 when a user isn't found and 200 when a user is found. The code snippet wrapped all this in a tryCatch block to detect and output errors, if any.
To set up the login route, import the login function into your route.js:
const express = require("express");\nconst router = express.Router();\nconst { register, login } = require("./auth");\n...\nrouter.route("/login").post(login);\nmodule.exports = router;Make a POST request at http://localhost:5000/api/auth/login and pass a valid username and password to the body:
![\"login](\"/bdcb632806567d22933fc46296bc322c/loginroute.webp\")
This function will be responsibile for updating the role of a basic user to an admin user. Open the auth.js file and create the update function, as follows:
//auth.js\nexports.update = async (req, res, next) => {\n const { role, id } = req.body\n // Verifying if role and id is presnt\n if (role && id) {\n // Verifying if the value of role is admin\n if (role === "admin") {\n await User.findById(id)\n } else {\n res.status(400).json({\n message: "Role is not admin",\n })\n }\n } else {\n res.status(400).json({ message: "Role or Id not present" })\n }\n}The first if statement verifies if role and id are present in the request body.
The second if statement checks if the value of role is admin. You should do this to avoid having over two roles.
After finding a user with that ID, you'll create a third if block that will check for the role of the user:
exports.update = async (req, res, next) => {\n const { role, id } = req.body;\n // First - Verifying if role and id is presnt\n if (role && id) {\n // Second - Verifying if the value of role is admin\n if (role === "admin") {\n // Finds the user with the id\n await User.findById(id)\n .then((user) => {\n // Third - Verifies the user is not an admin\n if (user.role !== "admin") {\n user.role = role;\n user.save((err) => {\n //Monogodb error checker\n if (err) {\n res\n .status("400")\n .json({ message: "An error occurred", error: err.message });\n process.exit(1);\n }\n res.status("201").json({ message: "Update successful", user });\n });\n } else {\n res.status(400).json({ message: "User is already an Admin" });\n }\n })\n .catch((error) => {\n res\n .status(400)\n .json({ message: "An error occurred", error: error.message });\n });\n\n ...The third if block prevents assigning an admin role to an admin user, while the last if block checks if an error occurred when saving the role in the database.
\n\nThe numerous
\nifstatements might be a little bit tricky but understandable. Please read the comments in the above code block for better understanding.
Import the update function in your route.js, as follows:
const { register, login, update } = require("./auth");\n...\nrouter.route("/update").put(update);Send a put request to http://localhost:5000/api/auth/update:
![\"update](\"/0a64d4ef9c1c8955d9aed82aaf869472/updateroute.webp\")
The deleteUser function will remove a specific user from the database. Let's create this function in our auth.js file:
exports.deleteUser = async (req, res, next) => {\n const { id } = req.body\n await User.findById(id)\n .then(user => user.remove())\n .then(user =>\n res.status(201).json({ message: "User successfully deleted", user })\n )\n .catch(error =>\n res\n .status(400)\n .json({ message: "An error occurred", error: error.message })\n )\n}You remove the user based on the id you get from req.body.
deleteUser RouteOpen your route.js file to create a delete request to /deleteUser, using the deleteUser as its function:
const { register, login, update, deleteUser } = require("./auth");\n...\nrouter.route("/deleteUser").delete(deleteUser);deleteUser RouteSend a delete request to http://localhost:5000/api/auth/deleteUser by passing a valid id to the body:
![\"Delete](\"/5f7478fb8c45b5a5def8d442ab1d259c/deleteroute.webp\")
Saving user passwords in the database in plain text format is reckless. It is preferable to hash your password before storing it.
\nFor instance, it will be tough to decipher the passwords in your database if they are leaked. Hashing passwords is a cautious and reliable practice.
\nLet's use bcryptjs to hash your user passwords.
Lets install bcryptjs:
npm i bcryptjsAfter installing bcryptjs, import it into your auth.js
const bcrypt = require("bcryptjs")Instead of sending a plain text format to your database, lets hash the password using bcrypt:
exports.register = async (req, res, next) => {\n const { username, password } = req.body;\n\n ...\n\n bcrypt.hash(password, 10).then(async (hash) => {\n await User.create({\n username,\n password: hash,\n })\n .then((user) =>\n res.status(200).json({\n message: "User successfully created",\n user,\n })\n )\n .catch((error) =>\n res.status(400).json({\n message: "User not successful created",\n error: error.message,\n })\n );\n });\n};bcrypt takes in your password as the first argument and the number of times it will hash the password as the second argument. Passing a large number will take bcrypt a long time to hash the password, so give a moderate number like 10.
bcrypt will return a promise with the hashed password; then, send that hashed password to the database.
Send a POST request to http://localhost:5000/api/auth/register and pass the username and password to the body:
![\"Register](\"/1ac77cdb1d6c5ebf46cf5171d74cf4a0/Hashedregisterroute.webp\")
exports.login = async (req, res, next) => {\n const { username, password } = req.body\n // Check if username and password is provided\n if (!username || !password) {\n return res.status(400).json({\n message: "Username or Password not present",\n })\n }\n try {\n const user = await User.findOne({ username })\n if (!user) {\n res.status(400).json({\n message: "Login not successful",\n error: "User not found",\n })\n } else {\n // comparing given password with hashed password\n bcrypt.compare(password, user.password).then(function (result) {\n result\n ? res.status(200).json({\n message: "Login successful",\n user,\n })\n : res.status(400).json({ message: "Login not succesful" })\n })\n }\n } catch (error) {\n res.status(400).json({\n message: "An error occurred",\n error: error.message,\n })\n }\n}bcrypt.compare checks if the given password and the hashed password in the database are the same.
Send a POST request to http://localhost:5000/api/auth/login and pass a valid username and password to the body:
![\"Hashed](\"/632b08fece37d70e9641393af6d9dbcd/hashedloginroute.webp\")
JSON Web Token helps shield a route from an unauthenticated user. Using JWT in your application will prevent unauthenticated users from accessing your users' home page and prevent unauthorized users from accessing your admin page.
\nJWT creates a token, sends it to the client, and then the client uses the token for making requests. It also helps verify that you're a valid user making those requests.
\nYou've to install JWT before using it in your application:
\nnpm i jsonwebtokenWhen a user registers, you'll send a token to the client using JWT as a cookie. To create this token, you need to set a secret string. You'll use the node's in-built package called crypto to create random strings:
node\nrequire("crypto").randomBytes(35).toString("hex")Output:
\n![\"Crypto\"](\"/ffc516c1cf1c578ae020aab9ea7bef3d/crypto.webp\")
Storing this secret string in an environment variable is a safe practice. If this secret string is leaked, unauthenticated users can create fake tokens to access the route.
\nStore your secret string in a variable:
\nconst jwtSecret =\n "4715aed3c946f7b0a38e6b534a9583628d84e96d10fbc04700770d572af3dce43625dd"Once you've created your jwtSecret, import jsonwebtoken as the token in the register function:
...\nconst jwt = require('jsonwebtoken')\nconst jwtSecret = '4715aed3c946f7b0a38e6b534a9583628d84e96d10fbc04700770d572af3dce43625dd'\nexports.register = async (req, res, next) => {\n const { username, password } = req.body;\n\n ...\n\n bcrypt.hash(password, 10).then(async (hash) => {\n await User.create({\n username,\n password: hash,\n })\n .then((user) => {\n const maxAge = 3 * 60 * 60;\n const token = jwt.sign(\n { id: user._id, username, role: user.role },\n jwtSecret,\n {\n expiresIn: maxAge, // 3hrs in sec\n }\n );\n res.cookie("jwt", token, {\n httpOnly: true,\n maxAge: maxAge * 1000, // 3hrs in ms\n });\n res.status(201).json({\n message: "User successfully created",\n user: user._id,\n });\n })\n .catch((error) =>\n res.status(400).json({\n message: "User not successful created",\n error: error.message,\n })\n );\n });\n};The code snippet created the token using JWT's sign function. This function takes in three parameters:
jwtSecret as the second parameter; and,After passing all these arguments, JWT will generate a token. After the token is generated, send it as a cookie to the client.
\nAlso, generate a token for logged in users:
\nexports.login = async (req, res, next) => {\n\n ...\n\n bcrypt.compare(password, user.password).then(function (result) {\n if (result) {\n const maxAge = 3 * 60 * 60;\n const token = jwt.sign(\n { id: user._id, username, role: user.role },\n jwtSecret,\n {\n expiresIn: maxAge, // 3hrs in sec\n }\n );\n res.cookie("jwt", token, {\n httpOnly: true,\n maxAge: maxAge * 1000, // 3hrs in ms\n });\n res.status(201).json({\n message: "User successfully Logged in",\n user: user._id,\n });\n } else {\n res.status(400).json({ message: "Login not succesful" });\n }\n });\n }\n } catch (error) {\n res.status(400).json({\n message: "An error occurred",\n error: error.message,\n });\n }\n};To prevent unauthenticated users from accessing the private route, take the token from the cookie, verify the token, and redirect users based on role.
\nYou'll get the token from the client using a node package called cookie-parser. Let's install the package before using it:
npm i cookie-parserAfter installing it, import it into your server.js file and use it as a middleware:
const cookieParser = require("cookie-parser");\n...\napp.use(cookieParser());You'll create your middleware that verifies the token and grants access to your private route.
\nLet's create a new folder in the project's folder named middleware and create a file called auth.js.
Open the auth.js file and create the middleware:
const jwt = require("jsonwebtoken")\nconst jwtSecret =\n "4715aed3c946f7b0a38e6b534a9583628d84e96d10fbc04700770d572af3dce43625dd"\nexports.adminAuth = (req, res, next) => {\n const token = req.cookies.jwt\n if (token) {\n jwt.verify(token, jwtSecret, (err, decodedToken) => {\n if (err) {\n return res.status(401).json({ message: "Not authorized" })\n } else {\n if (decodedToken.role !== "admin") {\n return res.status(401).json({ message: "Not authorized" })\n } else {\n next()\n }\n }\n })\n } else {\n return res\n .status(401)\n .json({ message: "Not authorized, token not available" })\n }\n}The code snippet requests a token from the client, checks if a token is available, and verifies that token.
\nJWT verifies your token with your jwtSecret and returns a callback function. This function returns status code 401 if the token fails the authentication test.
When you've created the token, you passed a payload that contained the user's credentials. You'll get the role from the credentials and check if the user's role is admin. If the user is not an admin, you return status code 401, but you'll call the next function if the user is an admin.
You'll also authenticate basic users before granting them access to the users route. Let's create another middleware in your auth.js file that will authenticate basic users:
exports.userAuth = (req, res, next) => {\n const token = req.cookies.jwt\n if (token) {\n jwt.verify(token, jwtSecret, (err, decodedToken) => {\n if (err) {\n return res.status(401).json({ message: "Not authorized" })\n } else {\n if (decodedToken.role !== "Basic") {\n return res.status(401).json({ message: "Not authorized" })\n } else {\n next()\n }\n }\n })\n } else {\n return res\n .status(401)\n .json({ message: "Not authorized, token not available" })\n }\n}You'll have two routes: one for the user and the other for the admin. Let's import this middleware into your server.js file and protect your routes:
const { adminAuth, userAuth } = require("./middleware/auth.js");\n...\napp.get("/admin", adminAuth, (req, res) => res.send("Admin Route"));\napp.get("/basic", userAuth, (req, res) => res.send("User Route"));Updating user roles and deleting users should be done by an Admin, so you need to import this auth.js middleware into your route.js file to protect the update and delete routes.
route.js:
const { adminAuth } = require("../middleware/auth")\nrouter.route("/update").put(adminAuth, update)\nrouter.route("/deleteUser").delete(adminAuth, deleteUser)You need to create an admin user in your database. Open up your terminal, and let's run some MongoDB methods:
\nmongoAfter mongo is started, you need to use the role_auth database:
use role_authBefore adding your admin user to the database, you need to hash the password using bcrypt in the node terminal. Open node terminal in your project's directory:
const password = require("bcryptjs").hash("admin", 10)\npasswordAfter you've created the constant password, you need to enter the password in the node terminal to get your hashed password.
![\"Node](\"/d3c1b2d70849b827aac61c69995a2f8f/nodebycrypt.webp\")
You'll use the hashed password to create your admin:
\ndb.users.insert({\n username: "admin",\n password: "$2a$10$mZwU9AbYSyX7E1A6fu/ZO.BDhmCOIK7k6jXvKcuJm93PyYuH2eZ3K",\n role: "admin",\n})To check if it was successfully created, run db.users.find().pretty() — this will output all users in the database.
You'll use Embedded JavaScript (EJS) to create a front-end for your application.
\nInstall the ejs package:
npm i ejsAfter you've installed ejs, you need to set ejs as your default view engine in your server.js file:
app.set("view engine", "ejs")When making a GET request to specific routes, you'll render an ejs file:
app.get("/", (req, res) => res.render("home"))\napp.get("/register", (req, res) => res.render("register"))\napp.get("/login", (req, res) => res.render("login"))\napp.get("/admin", adminAuth, (req, res) => res.render("admin"))\napp.get("/basic", userAuth, (req, res) => res.render("user"))By default, your application will look into the views folder when rendering an ejs file. You need to create the views folder in your project's folder and add your ejs files to it
Your home page will contain the links to /login and /register ejs file. Open up home.ejs and add these links:
<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Home page</title>\n </head>\n <body>\n <h1>Home Page</h1>\n <a href="/register"> Register</a> <br />\n <a href="/login">Login</a>\n </body>\n</html>Embedded JavaScript (EJS) supports HTML syntax. You'll create the registration form in register.ejs using HTML syntax:
<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Register Page</title>\n </head>\n <body>\n <h1>Register Page</h1>\n <form>\n <div class="error" style="background-color: red;"></div>\n <br />\n <label for="username">Username</label><br />\n <input type="text" id="username" required /><br />\n <label for="password">Password</label><br />\n <input type="password" id="password" required /><br />\n <input type="submit" value="register" /><br />\n </form>\n <a href="/login">Already registered? Login</a>\n </body>\n</html>You need to get the username and password that the user entered and pass it to the body when making the POST request:
...\n<script>\n const form = document.querySelector('form')\n const username = document.querySelector('#username')\n const password = document.querySelector('#password')\n const display = document.querySelector('.error')\n form.addEventListener('submit', async (e) => {\n e.preventDefault()\n display.textContent = ''\n try {\n const res = await fetch('/api/auth/register', {\n method: 'POST',\n body: JSON.stringify({ username: username.value, password: password.value }),\n headers: { 'Content-Type': 'application/json' }\n })\n const data = await res.json()\n if(res.status === 400 || res.status === 401){\n return display.textContent = `${data.message}. ${data.error ? data.error : ''}`\n }\n data.role === "admin" ? location.assign('/admin') : location.assign('/basic')\n } catch (err) {\n console.log(err.message)\n }\n })\n</script>\n</body>\n</html>The code snippet uses JavaScript's in-built library called fetch to send a POST request to /api/auth/register.
After the request has been sent, it stores the response to a constant res.
res.json will return the JSON you've passed as a response in the API.
When res.json returns the data, you store that data in a constant data.
If you get an error while making the request, display the error to the user. If an error isn't found, redirect the user based on their role on different routes.
\nCreating your login form and adding functionality to it will be similar to that of your registration. Open login.ejs and create this form:
<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Login Page</title>\n </head>\n <body>\n <h1>Login Page</h1>\n <form>\n <div class="error" style="background-color: red;"></div>\n <br />\n <label for="username">Username</label><br />\n <input type="text" id="username" required /><br />\n <label for="password">Password</label><br />\n <input type="password" id="password" required /><br />\n <input type="submit" value="login" /><br />\n </form>\n <a href="/register">Don't have an accout? Register</a>\n </body>\n</html> <script>\n const form = document.querySelector('form')\n const username = document.querySelector('#username')\n const password = document.querySelector('#password')\n const display = document.querySelector('.error')\n form.addEventListener('submit', async (e) => {\n e.preventDefault()\n display.textContent = ''\n try {\n const res = await fetch('/api/auth/login', {\n method: 'POST',\n body: JSON.stringify({ username: username.value, password: password.value }),\n headers: { 'Content-Type': 'application/json' }\n })\n const data = await res.json()\n if (res.status === 400 || res.status === 401) {\n return display.textContent = `${data.message}. ${data.error ? data.error : ''}`\n }\n data.role === "admin" ? location.assign('/admin') : location.assign('/basic')\n } catch (err) {\n console.log(err.message)\n }\n\n })\n </script>\n </body>\n </html>Once you've redirected users based on role to different routes, display all registered users on that route. You need to send a GET request to /getUsers.
Open auth.js file in Auth folder:
exports.getUsers = async (req, res, next) => {\n await User.find({})\n .then(users => {\n const userFunction = users.map(user => {\n const container = {}\n container.username = user.username\n container.role = user.role\n return container\n })\n res.status(200).json({ user: userFunction })\n })\n .catch(err =>\n res.status(401).json({ message: "Not successful", error: err.message })\n )\n}The User.find method returns an array of users. After mapping through this array, it stores the username and role in the constant container and returns the container.
user RouteYou've rendered user.ejs when accessing the /user route. Now, you'll display all registered users to that route.
user.ejs:
<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta http-equiv="X-UA-Compatible" content="IE=edge" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>User page</title>\n </head>\n <body>\n <h1>Users</h1>\n <ul></ul>\n <script>\n const ul = document.querySelector("ul")\n const getUsers = async () => {\n const res = await fetch("/api/auth/getUsers")\n const data = await res.json()\n data.user.map(mappedUser => {\n if (mappedUser.username !== "admin") {\n let li = `<li> <b>Username</b> => ${mappedUser.username} <br> <b>Role</b> => ${mappedUser.role} </li>`\n ul.innerHTML += li\n } else {\n return null\n }\n })\n }\n getUsers()\n </script>\n </body>\n</html>You'll also display registered users to the admin route but add update and delete functionality to the route:
admin.ejs:
<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta http-equiv="X-UA-Compatible" content="IE=edge" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Admin page</title>\n </head>\n <body>\n <div class="display" style="background-color: red;"></div>\n <h1>Users</h1>\n <ul></ul>\n <script>\n const ul = document.querySelector("ul")\n const display = document.querySelector(".display")\n const getUsers = async () => {\n const res = await fetch("/api/auth/getUsers")\n const data = await res.json()\n data.user.map(mappedUser => {\n if (mappedUser.username !== "admin") {\n let li = `<li> <b>Username</b> => ${mappedUser.username} <br> <b>Role</b> => ${mappedUser.role} </li> <button class="edit">Edit Role</button> <button class="delete">Delete User</button>`\n ul.innerHTML += li\n } else {\n return null\n }\n const editRole = document.querySelectorAll(".edit")\n const deleteUser = document.querySelector(".delete")\n })\n }\n getUsers()\n </script>\n </body>\n</html>You'll create an event listener that will listen for a click on the Edit Role button. When the button is clicked, you'll send a PUT request to /api/auth/update:
<script>\n\n ...\n\n const editRole = document.querySelectorAll('.edit')\n const deleteUser = document.querySelector('.delete')\n editRole.forEach((button, i) => {\n button.addEventListener('click', async() => {\n display.textContent= ''\n const id = data.user[i+1].id\n const res = await fetch('/api/auth/update', {\n method: 'PUT',\n body: JSON.stringify({ role: 'admin', id}),\n headers: { 'Content-Type': 'application/json' }\n })\n const dataUpdate = await res.json()\n if (res.status === 400 || res.status === 401) {\n document.body.scrollTop = 0\n document.documentElement.scrollTop = 0\n return display.textContent = `${dataUpdate.message}. ${dataUpdate.error ? dataUpdate.error : ''}`\n }\n location.assign('/admin')\n })\n });\n\n ...\n</script>Deleting Users from the database should be the duty of an admin.
\nadmin.ejs:
<script>\n\n ...\n\n const editRole = document.querySelectorAll('.edit')\n const deleteUser = document.querySelector('.delete')\n deleteUser.forEach((button, i)=> {\n button.addEventListener('click', async ()=> {\n display.textContent =''\n const id = data.user[i+1].id\n const res = await fetch('/api/auth/deleteUser', {\n method: 'DELETE',\n body: JSON.stringify({id}),\n headers: {'Content-Type': 'application/json'}\n })\n const dataDelete = await res.json()\n if (res.status === 401){\n document.body.scrollTop = 0\n document.documentElement.scrollTop = 0\n return display.textContent = `${dataUpdate.message}. ${dataUpdate.error ? dataUpdate.error : ''}`\n }\n location.assign('/admin')\n })\n })\n\n ...\n</script>You've created an event listener that listens for a click on the Delete User button. When the button is clicked, you'll send a DELETE request to /api/auth/deleteUser.
\n\nPlease ensure the admin user is first on the list to avoid populating the database with an admin user again.
\n
To log out users, you need to remove the token from the client and redirect the client to the home page.
\nYou'll create a GET request to /logout in the server.js file:
app.get("/logout", (req, res) => {\n res.cookie("jwt", "", { maxAge: "1" })\n res.redirect("/")\n})The code snippet replaced the JWT token with an empty string and gave it a lifespan of 1 second.
\nAfter creating the GET request, add a logout button to the admin's route and user's route:
...\n<ul></ul>\n<button class="logout"><a href="/logout">Log Out</a></button>\n...You can simply replace the many steps discussed above using LoginRadius. In turn, it helps you focus more on developing core application features while letting you quickly implement user signup and login and manager users.
\nIn other words, LoginRadius is a SaaS-based customer identity and access management (CIAM) system with features to manage customer identity, privacy, and access. It is a simple, implementable solution for adding user authentication and authorization to your website.
\nBasically, LoginRadius handles user registration, login, and authentication. Other features of LoginRadius include:
\nJWT, you can use this token to authenticate usersTo get started with LoginRadius, you need to create an account with either the free plan or the Developer plan, customize your registration and login forms, and start managing your users.
\nThis section briefly covers how authentication works with LoginRadius.
\nAfter signing up for LoginRadius, choose a name for your Node.js app.
\n\n\n\n
After completing your LoginRadius signup process, you can get your App Name, API Key, and API Secret from the configuration link on the sidebar. With these configurations, you can easily link the server-side of our application to LoginRadius.
![\"LoginRadius](\"/3c5de91ef87963f5ea96eb10556ba358/loginradius1.webp\")
LoginRadius automatically generates a link that will be used to authenticate users. This link contains the name of your LoginRadius application and a URL that authenticated users will be redirected to:
![\"LoginRadius](\"/faed37adab3b93cbf078cb49970ff8a6/loginradius.webp\")
https://<LoginRadius-APP-Name>.hub.loginradius.com/auth.aspx?action=login&return_url=<Return-URL>An instance of the link is given below:
\nhttps://noderoleauth.hub.loginradius.com/auth.aspx?action=login&return_url=http://localhost:5000You've successfully learned how to perform CRUD operations using MongoDB as a database, hash passwords, authenticate using JWT, and render Embedded JavaScript (EJS). You can put all these together to build more complex applications.
\nIn this article, you'll learn about authentication in Next.js and how you can authenticate Next.js applications with LoginRadius.
\n\n\nNote: An understanding of React, Hooks, and Next.js is beneficial to follow this tutorial.
\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.
\nYou 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.
\nAuthentication deals with identifying a user, while authorization checks what resources or data an authenticated user has permission to access.
\nSome of the methods used to implement authentication are:
\nAuthentication is one of the most critical parts of an application’s security, so you should address it adequately.
\nA few aspects you should consider when assessing if you should build your authentication system or use a third-party solution:
\nIdentity Provider Support: How many identity providers do you plan to support, if any? With third-party solutions, you can authenticate users with email/password as well as identity providers such as Google, Github, Facebook, and more. Third-party solutions are always working hard to add support to even more providers. They also provide other authentication methods like Magic Link for passwordless authentication.
\nCan you build an authentication system that allows users to use their preferred authentication method, or will they be restricted?
\nAdvanced Security Features: Security and authentication go beyond email/password sign-in. Most third-party solutions provide necessary features, such as email confirmation, two-factor authentication (2FA), etc.
\nYou should let the security experts such as LoginRadius do what they do best while focusing on your main tasks — building excellent applications.
\nConsidering 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\n\nLoginradius 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
LoginRadius provides no-code services for authorization, authentication, account security, and much more. It has several interesting features, and some of them are:
\nNext.js offers two authentication patterns — client-side and server-side authentication.
\nWith 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.
\nWhen 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.
\nThe following example shows how to handle client-side redirects:
\nimport { 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}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.
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.
This is a simple illustration of client-side authentication and redirection.
\nWith 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.
A benefit of this pattern is that non-authenticated users do not see flashes of unauthenticated content before they are redirected.
\nThe following example below shows how to handle server-side redirects:
\nexport 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}Using getServerSideProps enables rendering pages on the server. You can take advantage of that to also handle the redirection on the server.
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.
Now that you’ve understood the authentication patterns available, let’s see how to authenticate a Next.js application with LoginRadius.
\nThe steps below highlight how you can integrate and authenticate your Next.js applications with LoginRadius:
\nYou should create an account to get started with LoginRadius. There is a free plan you can start with.
\nNow 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.
Run the following command in your terminal to create a new Next.js application:
\nnpx create-next-app <name-of-project>\n//or\nyarn add create-next-app <name-of-project>Next, install the React SDK into the project:
\n```javascript\nnpm install loginradius-react\n//or\nyarn add loginradius-react\n```You need to wrap the root component with the SDK’s authentication provider.
\nYou also need to pass the account credentials to the provider. You can get these credentials from your LoginRadius account dashboard.
\nNavigate to pages/_app.js and update it with the code below:
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 MyAppThe 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/.
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.
Now that you've integrated the SDK, let’s add the authentication functionality.
\nYour users should be able to log in and out of our application, so let’s set that up.
\nWe will add the log in and log out functionality to a Nav component. Let’s set up the component.
Create a layout folder in the root directory, and create a Nav.js file there. Add the following code to Nav.js:
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}Here, Chakra UI is used for UI components.
\nFirst, it imports the useLRAuth hook from the SDK. Next, it accesses the loginWithRedirect and logout methods from the useLRAuth hook.
Then, it passes loginWithRedirect and logout to the login and logout buttons’ onClick event handlers, respectively.
Having created the Nav component, we need to create the Layout component we mentioned earlier.
Create an index.js file in the layout folder, and paste the code below:
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}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.
\nThe SDK also provides error and user objects, along with isLoading and isAuthenticated booleans. You'll use these to track the authentication state.
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.
isAuthenticated returns true if there is an authenticated user and false if there is not.
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.
Let’s update the Nav.js file with the code below to fix that:
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}We conditionally display the login and logout buttons based on the authentication state.
\nIf there is a logged-in user, we want to redirect them to the profile page.
\nNavigate to pages/index.js file and update it with the code below:
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}Let’s break down the above code snippet:
\nuseEffect, it checks if there is a user object and if isAuthenticated is true. If these conditions are true, it redirects the user to their profile page. These conditions will only be true when the user has logged in. You'll set up the profile page later.isLoading boolean. If true, it displays “loading…”. In a production-ready application, you would display a loading spinner.error object and displays it to the user.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:
\nimport { 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}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.
You can create protected routes to ensure only authenticated users can access those routes.
\nimport { 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});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.
The image below shows an authenticated user's profile page.
\n![\"An](\"/628d48eec1fa72e582fdd05f76b085e4/profile-page.webp\")
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.
\nThen, 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.
\nA working version of the code used in this tutorial is available on Github.
\n","frontmatter":{"date":"January 13, 2022","updated_date":null,"description":"This tutorial describes Next.js authentication patterns and helps you learn step-by-step how to authenticate a Next.js application.","title":"Your Ultimate Guide to Next.js Authentication","tags":["Authentication","React","Next.js","LoginRadius"],"pinned":null,"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}}}}]},"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":24,"currentPage":5,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}