Add login to an Angular app using Asgardeo

Do you want to add authentication to your Angular app? Gone are the days when you had to implement the backend logic to manage users and then write the frontend logic to manage user sessions. With Asgardeo, you can manage your users easily and securely while using Asgardeo’s Angular SDK to easily integrate Asgardeo with your Angular app. In this article, we will see how we can integrate Asgardeo with an Angular app in no time.

To begin with, let’s create an application using Asgardeo’s Console app. Log in to the Console app by providing your username and password and switch to the Develop tab. Then, click on Applications from the side panel and click on New Application.

You will land on a page where you can choose an application template. Since we are trying to integrate with an Angular app, let’s select “Single-Page Application”. This will pop up a modal. Enter a name for your application. Next, we need to provide a redirect URL. This is the URL to which Asgardeo will redirect the user after a successful authentication. Since our Angular app will not include any routing, we will enter the root URL of our app. I am going to use “http://localhost:4200” as there is where an Angular app runs by default locally.

Once you click on Register, you will be taken to the Quick Start page. Choose Angular as the technology. The “Integrate your application” section gives you the necessary instructions. Let’s use these instructions to quickly integrate Asgardeo with our Angular app.

I have created a simple Angular app using the Angular CLI. The app will show a login button when the user is not authenticated and show a greeting when the user is authenticated.

In order to store the authentication state, I use a class variable called “isAuthenticated”. Following a successful sign-in, this variable should be set to true.

Here is how the HTML template of the Angular component looks like.

Now, let’s integrate Asgardeo with our app. Let’s begin by installing the SDK.

npm install @asgardeo/auth-angular --save

Once installed, we can import the AsgardeoAuthModule into the app.module.ts file.

import { AsgardeoAuthModule } from "@asgardeo/auth-angular";

Then, we can initialize the SDK by passing the AsgardeoAuthModule with the necessary configurations into the imports array. We have made your life easy by automatically generating the configurations for you. All that you need to do is to copy the code segment from line number 12 to 18 in the second instruction of the Quick Start page.

Now, your app.module.ts file should look like this. Here, I have masked my client id and tenant name for obvious reasons.

Now, let’s move on to our component. I am going to use only one component in this example to keep things simple. In order to use the SDK in our component, we need to use the AsgardeoAuthService which is an injectable service. Let’s import that into our component.

import { AsgardeoAuthService } from "@asgardeo/auth-angular";

Now, let’s create a constructor and inject the service into our component.

public constructor(private auth: AsgardeoAuthService) { }

We are almost there. Let’s now create a method called login and call the sign-in method of the SDK inside.

  public login() {
    this.auth.signIn();
  }

There is one more thing to do. After a successful authentication, we need to set the “isAuthenticated” state to true. We can use the on method provided by the SDK to do this. The on method fires a callback function after certain events such as sign-in and sign-out. We can specify the event type as the first argument and the callback function as the second argument of the on method. Since we need the callback to fire after sign-in, we can pass “sign-in” as the first argument. Alternatively, we can use the Hooks enum and pass the SignIn attribute of it as the first argument. In the callback function, let’s update the “isAuthenticated” to true. And let’s call this on method within the constructor.

Now, your app component should look like this.

Let’s go ahead and try our sample application. We should be first greeted with a login button. Once we click on this button, we should be taken to the login page of Asgardeo. After we enter our credentials and sign in, we should be redirected back to our app and we should see the greeting.

How easy! We have now added login to an Angular app without breaking a sweat. You can find the source code of this sample apphere.