Implement Authentication in Angular 2+ application using LoginRadius CLI in 5 mins
In this tutorial, you will learn about how to implement the authentication for Angular 2+ application in just 5 mins. We will be using LoginRadius for authentication.
Hello Guys!!!, today we will be implemented the authentication in the Angular 2+ application within 5 mins using LoginRadius.
Configuring LoginRadius
To implement authentication in the angular app first let's start with registering in the Loginradius and creating the application using LoginRadius CLI.
Why LoginRadius CLI
Developer 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.
LoginRadius CLI Setup
Mac or Linux
-
Install the tap via:
-
Then, you can install LR CLI via:
Other Platforms
- Download packaged binaries from the release page.
After installing the CLI, you can register into the LoginRadius via the below command.
This command will open the Loginradius in the browser to register yourself and create the app.
Once 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.
Get Your Application API Credentials
Once you login/register using the CLI, You can now run the command to get your API credentials.
Configuring Callback URLs
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.
To get the list of whitelisted domains, you can run command from the cmd prompt. And to add a domain in the list using command.
If you are following this tutorial, you should set the as a whitelisted domain. Check the below image for how to add the domain using LoginRadius CLI.
Setup Angular application
You can implement the LoginRadius authentication in your existing Angular application, or you can start from scratch by following this tutorial.
You need to enable the routing for this tutorial if you are not aware of how to enable routing in the angular application, kindly follow this tutorial
- Create and add the below application configuration
Add Login to Your Application
If you have already created the login component, add the following code in the file else, generate the login component using ng CLI . Which will create a component inside the folder. Add the following code to the
Here we are redirecting the application to the LoginRadius Auth Page where we are passing the as the current origin, so after successful login, the LoginRadius Auth Page will redirect to the angular application with as a query param. Later we will use for all the user-related actions.
Add Profile Page
As you have seen in the above code on successful login, we redirect to page. So let us create a profile component using CLI . And let's modify the file in the folder generated by ng CLI.
Similary add the below code to file.
The profile component will call the LoginRadius API to fetch the profile details and store them in the variable. Using that , we are displaying the email in the HTML. It also has the function where we pass the 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.
- ProfileService - This is the service to fetch the user profile using the token.
- Profile - The model which will be used to store the profile information.
You can generate the service in the angular using CLI by using this command which will create with required configuration. Add the below code in the file.
We will use the HTTP module to call the Rest API so let's add the in the file.
Now let's create a model which will be used for storing the user profile.
- Add
Add Routes for Login and profile.
Lets modify the and add the below Routes in it.
Finally, to gather all, we need to modify the and add the routing logic.
And add the to the file.
You can find the full code in github
Testing the application
Run to start the local server, and you will be able to see the output on locahost:4200.
Adding Login Methods
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 and command. Check the below image on how to add the social configuration.
After adding, visit the LoginRadius Auth Page either by visiting and log out. Or using the command . You will find the new login method added.
Customizing theme for LoginRadius Auth Page
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.
You can also get/set your current theme using LoginRadius CLI by using the commands like and .
Adding/Updating Registeration Schema for LoginRadius Auth Page
LoginRadius Auth Page supports 3 predefined fields for LoginRadius Auth Page i.e Email, Password, Confirm Password. With the help of LoginRadius CLI, you can manage the registration schema for your LoginRadius Auth Page.
Check out the below commands to add the new registration field in your LoginRadius Application. After adding the new schema field you can always check your LoginRadius Auth Page by running command from the terminal.
LoginRadius Site Management
LoginRadius Dashboard provides a feature where you can create and manage multiple applications for your multiple products.
With the help of LoginRadius CLI you can manage your sites via terminal using commands like , , , .
Contributing to LoginRadius CLI
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.
Your Take
With 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.
I hope you like this tutorial. Kindly provide feedback suggestions in the comment section below.
Cheers!!!
