Hello Guys!!!, today we will be implemented the authentication in the Angular 2+ application within 5 mins using LoginRadius.
\nTo implement authentication in the angular app first let's start with registering in the Loginradius and creating the application using LoginRadius CLI.
\nDeveloper Experience plays a crucial role for us. We always think about the ways we can minimize the juggling between a quickstart tutorial, dashboard, and terminal. The LoginRadius CLI will simplify your flow by just using some simple commands to register, create an application, log in, etc., and enables you to get the job done in very little time without leaving the terminal.
\nInstall the tap via:
\n$ brew tap loginradius/tapThen, you can install LR CLI via:
\n$ brew install lrAfter installing the CLI, you can register into the LoginRadius via the below command.
\n$ lr registerThis command will open the Loginradius in the browser to register yourself and create the app.
\nOnce you successfully register you will be able to see the below message on the browser, you can close the tab and come back to the CLI.
\nYou are Successfully Authenticated, Kindly Close this browser window and go back to CLI.Once you login/register using the CLI, You can now run the lr get config command to get your API credentials.
A callback URL is a URL in your application where LoginRadius redirects the user after they have authenticated. The callback URL for your app must be added to your Application Configuration. If this field is not set, users will be unable to log in to the application and get an error.
\nTo get the list of whitelisted domains, you can run lr get domain command from the cmd prompt. And to add a domain in the list using lr add domain command.
\n\nIf you are following this tutorial, you should set the
\nhttp://localhostas a whitelisted domain. Check the below image for how to add the domain using LoginRadius CLI.
app/profile folder generated by ng CLI.
import { Component, OnInit } from '@angular/core';\nimport { Router } from '@angular/router';\nimport config from '../config';\nimport { ProfileService } from '../profile.service';\nimport { Profile } from './profile';\n\n@Component({\n selector: 'app-profile',\n templateUrl: './profile.component.html',\n styleUrls: ['./profile.component.scss'],\n})\nexport class ProfileComponent implements OnInit {\n profile: Profile;\n loginRadius: any;\n\n constructor(private configService: ProfileService, private router: Router) {\n const token = localStorage.getItem('token');\n }\n\n ngOnInit(): void {\n this.configService.getProfile().subscribe(\n (data: Profile) => {\n this.profile = { ...data };\n },\n (err: any) => {\n if (err.status === 403) {\n localStorage.removeItem('token');\n this.router.navigate(['login']);\n }\n }\n );\n }\n\n logout() {\n localStorage.removeItem('token');\n window.location.href = `https://${config.APP_NAME}.hub.loginradius.com/auth.aspx?action=logout`;\n }\n}Similary add the below code to profile.component.html file.
<div class="container">\n <h1>Hello {{ profile?.Email[0]?.Value }}</h1>\n <button (click)="logout()">LogOut</button>\n</div>The profile component will call the LoginRadius API to fetch the profile details and store them in the profile variable. Using that profile, we are displaying the email in the HTML.\nIt also has the logout() function where we pass the action=logout in the LoginRadius Auth Page, which will help us log out the user.
In the profile component, you can see the two things are used.
\nYou can generate the service in the angular using ng CLI by using this command ng generate service profile which will create profile.service.ts with required configuration. Add the below code in the profile.service.ts file.
import { HttpClient } from '@angular/common/http';\nimport { Injectable } from '@angular/core';\nimport config from './config';\nimport { Profile } from './profile/profile';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class ProfileService {\n\n constructor(private http: HttpClient) {}\n\n getProfile() {\n // now returns an Observable of Config\n return this.http.get<Profile>(\n `https://api.loginradius.com/identity/v2/auth/account?access_token=${localStorage.getItem(\n 'token'\n )}&apikey=${config.API_KEY}`\n );\n }\n}We will use the HTTP module to call the Rest API so let's add the HttpClientModule in the app.module.ts file.
import { HttpClientModule } from '@angular/common/http';\n...\n\n@NgModule({\n imports: [\n ...\n HttpClientModule\n ...\n ],\n})\nexport class AppModule { }Now let's create a Profile model which will be used for storing the user profile.
Add src/app/profile/profile.ts
export interface Profile {\n Email: {\n Type: string;\n Value: string;\n }[];\n}Lets modify the app-routing.module.ts and add the below Routes in it.
import { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { AppComponent } from './app.component';\nimport { LoginComponent } from './login/login.component';\nimport { ProfileComponent } from './profile/profile.component';\n\nconst routes: Routes = [\n {\n path: 'login',\n component: LoginComponent\n },\n { path: 'profile',\n component: ProfileComponent\n }\n];\n\n@NgModule({\n imports: [RouterModule.forRoot(routes)],\n exports: [RouterModule]\n})\nexport class AppRoutingModule { }Finally, to gather all, we need to modify the app.component.ts and add the routing logic.
import { Component, OnInit } from '@angular/core';\nimport { Router } from '@angular/router';\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.scss'],\n})\nexport class AppComponent implements OnInit {\n constructor(private router: Router) {}\n\n ngOnInit() {\n if (window.location.pathname === "/") {\n if (localStorage.getItem('token')) {\n this.router.navigate(['/profile']);\n } else {\n this.router.navigate(['/login']);\n }\n }\n }\n}And add the router-outlet to the app.component.html file.
<router-outlet></router-outlet>\n\nYou can find the full code in github
\n
Run ng serve to start the local server, and you will be able to see the output on locahost:4200.
You can configure the LoginRadius Auth Page by adding social login methods like Facebook, Google, etc. To add the login method, you can use the command lr get social and lr add social command. Check the below image on how to add the social configuration.
After adding, visit the LoginRadius Auth Page either by visiting locahost:4200 and log out. Or using the command lr demo. You will find the new login method added.
LoginRadius Dashboard Support three pre-defined themes for you. You can check out the Theme Customization section in the LoginRadius Dashboard for all the customization options available.
\nYou can also get/set your current theme using LoginRadius CLI by using the commands like lr get theme and lr set theme.
The LoginRadius CLI is opensourced in the LoginRadius Organization and you can contribute to it if you find any bugs or improvement by following the contributing guidelines. You can also checkout our open source page if you wish to contribute more in LoginRadius.
\nWith the help of LoginRadius CLI, you can setup the authentication for your Angular application in just 5 minutes. LoginRadius will take care of all the authentication-related stuff for your application so that you can focus on your application development.
\nI hope you like this tutorial. Kindly provide feedback suggestions in the comment section below.
\nCheers!!!
\n","frontmatter":{"date":"April 14, 2021","updated_date":null,"title":"Implement Authentication in Angular 2+ application using LoginRadius CLI in 5 mins","tags":["Authentication","Angular","CLI","LoginRadius CLI"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/7c2ac2ca4ca6e495e226891293c79e92/14b42/angulat_demo_auth.jpg","srcSet":"/static/7c2ac2ca4ca6e495e226891293c79e92/f836f/angulat_demo_auth.jpg 200w,\n/static/7c2ac2ca4ca6e495e226891293c79e92/2244e/angulat_demo_auth.jpg 400w,\n/static/7c2ac2ca4ca6e495e226891293c79e92/14b42/angulat_demo_auth.jpg 800w,\n/static/7c2ac2ca4ca6e495e226891293c79e92/47498/angulat_demo_auth.jpg 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Mohammed Modi","github":"mohammed786","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/angular-state-management-with-ngxs/"},"html":"In this article, we will learn about state management in Angular with NGXS. Here we will understand the basic concept of NGXS and create a simple TO-DO App.
\nIn the bigger apps, managing the data states is very complicated. In angular, each component has its own state, to share the data/state between the components we normally use @Input and @Output decorators, but when the application goes bigger, its challenging to maintain the data consistency. So to solve this problem, redux was introduced. It provides a central store that holds all states of your application. Each component can access the stored state without sending it from one component to another.
\nNGXS is modeled after the CQRS pattern popularly implemented in libraries like Redux and NgRx but reduces boilerplate by using modern TypeScript features such as classes and decorators. NGXS is very simple to use as compared to other state management patterns like redux and Akita. NGXS takes full advantage of angular and typescript over the redux pattern.\nThere are majors 4 concepts to NGXS It is a global state container and manages the states of the application.We can dispatch the actions to perform certain operations. An action is a type of command which should be called when something happens or you want to trigger at any event like adding a new todo, listing todos etc. States are classes along with decorators to describe metadata and action mappings. Selects are functions that slice a specific portion of the state from the global state container i.e. to get the data from the specific global state whenever you want to use. Install the Here we have created a component that dispatches actions to create a to-do and for other operations. Apart from that, we are using a selector Put this code in the Create a folder Here we have created the state of the todo, it contains the global state of the todo list.\nCreate a folder Here we have created a form that we use to create todo and listed all todos.\nput this code in your After lots of code, it's time to see the results. So here is the UI you will get. To get the complete code please go to Github Repo.\n We have gone through the basic concepts of NGXS and built a simple to-do app. There are a lot of advanced features and plugins by NGXS, but beyond the scope, we could not add, but hopefully, we will be exploring in future blogs.How NGXS works:
\n1. Store:
\n
\n this.store.dispatch(new TodoActions.AddTodo(form));2. Actions
\n
\nexport class AddTodo {\n static readonly type = '[Todo] Add';\n constructor(public payload: ITodo) { }\n}3. State
\n
\nimport { Injectable } from '@angular/core';\nimport { State } from '@ngxs/store';\n\n@State<ITodoStateModel[]>({\n name: 'todoList',\n defaults: {\n todoList: [],\n },\n})\n@Injectable()\nexport class TodoState {}4. Select
\n
\n @Select(TodoState) todoList$: Observable<ITodo>;Let's build a To-Do App:
\n1. Get started
\nnpm install @ngxs/store --save then import the below code in app.module.ts
\n//File name app.module.ts\nimport { NgxsModule } from '@ngxs/store';\n@NgModule({\n imports: [\n NgxsModule.forRoot([ToDoState], { // here login state \n developmentMode: !environment.production\n })\n ]\n})\nexport class AppModule {}2. Create your store
\nTodoState, from which we are listening for the updated to-do list.app.component.ts
\n// File name app.component.ts\nimport { Component } from '@angular/core';\nimport { Store, Select } from '@ngxs/store';\nimport { TodoActions } from './state/todo-actions';\nimport { FormGroup, FormControl, Validators } from '@angular/forms';\nimport { TodoState, ITodo } from './state/todo-state';\nimport { Observable } from 'rxjs';\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.scss']\n})\nexport class AppComponent {\n title = 'ngxs-todo-app';\n\n @Select(TodoState) todoList$: Observable<ITodo>;\n\n addForm = new FormGroup({\n title: new FormControl('', [Validators.required])\n });\n constructor(private store: Store){}\n onSubmit(form: any){\n this.store.dispatch(new TodoActions.AddTodo(form));\n }\n markDone(id: string, is_done: boolean){\n this.store.dispatch(new TodoActions.markDone(id, is_done));\n }\n}3. Create your actions
\nstate and put the todo-actions.ts file and add below code
\n// File name todo-actions.ts\nexport class AddTodo {\n static readonly type = '[Todo] Add';\n constructor(public payload: any) { }\n}\n\nexport class EditTodo {\n static readonly type = '[Todo] Edit';\n constructor(public payload: any) { }\n}\n\nexport class FetchAllTodos {\n static readonly type = '[Todo] Fetch All';\n}\n\nexport class DeleteTodo {\n static readonly type = '[Todo] Delete';\n constructor(public id: number) { }\n}4. Create your State:
\nstate and put the todo-state.ts file and add below code
\n// File name todo-state.ts\nimport { Injectable } from '@angular/core';\nimport { State, NgxsOnInit, Action, StateContext } from '@ngxs/store';\nimport { TodoActions } from './todo-actions';\nimport { patch, updateItem } from '@ngxs/store/operators';\n\nexport interface ITodo {\n id: string;\n title: string;\n is_done: boolean;\n}\nexport interface ITodoStateModel {\n todoList: ITodo[];\n}\n@State<ITodoStateModel>({\n name: 'todoList',\n defaults: {\n todoList: [],\n },\n})\n@Injectable()\nexport class TodoState implements NgxsOnInit {\n ngxsOnInit(ctx) {\n ctx.dispatch(new TodoActions.FetchAllTodos());\n }\n @Action(TodoActions.markDone)\n markDone(\n ctx: StateContext<ITodoStateModel>, \n { payload, is_done }: TodoActions.markDone\n ) {\n ctx.setState(\n patch({\n todoList: updateItem(\n (item: ITodo) => item.id === payload, \n patch({ is_done: !is_done })\n )\n })\n );\n }\n\n @Action(TodoActions.AddTodo)\n add(\n ctx: StateContext<ITodoStateModel>,\n { payload }: TodoActions.AddTodo,\n ) {\n const state = ctx.getState();\n ctx.setState({\n ...state,\n todoList: [\n ...state.todoList,\n {\n ...payload,\n id: Math.random().toString(36).substring(7),\n is_done: false\n }\n ],\n }\n );\n }\n\n}5. Create your html view
\napp.component.html
\n<!-- File name app.component.html -->\n<form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">\n <input type="text" formControlName="title" class="form-control todo-list-input" placeholder="What do you need to do today?">\n <button class="add btn btn-primary font-weight-bold todo-list-add-btn">Add</button> \n</form>\n<ul class="d-flex flex-column-reverse todo-list">\n <li *ngFor="let todo of (todoList$ | async) ?. todoList" [ngClass]="{'completed': todo.is_done}">\n <div class="form-check"> \n <label class="form-check-label"> \n <input (click)="markDone(todo.id, todo.is_done)" class="checkbox" type="checkbox" [checked]="todo.is_done">{{todo.title}} <i class="input-helper"></i></label> \n </div>\n </li>\n </ul>Conclusion
\n