Get Started - Angular

The tutorial lets you implement LoginRadius user registration, login, and view profile on your Angular application.

Create an account to get started if you don’t have one yet!

When you signed up for the LoginRadius account, it created an app for you. This app is linked to a ready to use web page - Auth Page (IDX).

Auth Page (IDX) reflects the configuration changes that you make in LoginRadius Dashboard. You can utilize this webpage for authentication requirements on your Angular application.

Choose Theme

In your LoginRadius Dashboard, select your app, then navigate to the Auth Page (IDX) section located in the left navigation bar and click the Theme Customization section. There you can select a design theme for your login page, or further customize the content displayed:

alt_text

To preview your login page’s theme, click Go to your Login Page link highlighted on the above screen.

Features like Email and Password login, User registration, Forgot password, and Remember me are already configured on your Auth Page(IDX).

Get Credentials

Before using any of the APIs or Methods that LoginRadius provides, you need to get your App Name, API Key, and API Secret.

In your LoginRadius Dashboard, navigate to Configuration > API Credentials and click the API Key And Secret subsection to retrieve your API Credentials.

alt_text

Setup Angular

This example uses a sample Angular application based on the Angular official tutorial. A shortened version of the process is provided below, and for more information, visit the Angular Documentation page.

  • To install the Angular CLI tool, run the following command:

    npm install -g @angular/cli

  • Navigate to the folder where you would like to setup the project. From there, run the following command to create the Angular boilerplate application:

    ng new lr-demo-application --routing

    This will create a new (sample) application in the current folder named lr-demo-application, and enable Routing, which is important for this tutorial.

  • Remove the placeholder landing page so it is less cluttered, and we can see the data in later steps more easily. From the project root, navigate to src/app/app.component.html and modify the content to be as follows:

    <style>
    div {
      font-family: Arial, Helvetica, sans-serif;
    }
    </style>
    
    <div>Application home</div>
    <br />
    
    <router-outlet></router-outlet>

Configure Registration and Login URLs

This tutorial uses Auth Page(IDX) for authentication, where Registration and Login functionality is already implemented.

Navigate your Register or Login links or buttons to the following URLs:

Registration Page URL:

https://<LoginRadius APP Name>.hub.loginradius.com/auth.aspx?action=register&return_url=<Return URL>

Login Page URL:

https://<LoginRadius APP Name>.hub.loginradius.com/auth.aspx?action=login&return_url=<Return URL>

Where:

  • LoginRadius App Name is the name of your app as mentioned in Get Credentials step.
  • return_url is where you want to redirect users upon successful registration or login. Whitelist your domain if you are not using Local Domain for this tutorial.

return_url can be your website, frontend app, or backend server url where you are handling the access token.

Retrieve User Data using Access Token

Once the authentication is done using Auth Page (IDX), the default script of LoginRadius sends an access token in the query string as a token parameter with the returnurl. The returnurl should be your application’s web page where you would like to receive the access token. The following is an example of the access token in the query string with the Return URL:

<Return URL>?token=745******-3e8e-****-b3**2-9c0******1e.

Point return_url to a route in your Angular application to capture the access token and retrieve the user profile data.

  • From the Angular application, we will implement a new Login component to capture the access token and fetch user data accordingly. Start by using Angular CLI to generate a new login component. From the project root folder, run the following command:

    ng generate component login

    A new folder and default files will be generated for Login component. We can proceed to register the new component with the app.

  • Navigate to src\app\app.module.ts and update the content as follows:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { LoginComponent } from './login/login.component';
    
    @NgModule({
    declarations: [
      AppComponent,
      LoginComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }
  • Navigate to src\app\app-routing.module.ts and update content as follows:

    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { LoginComponent } from './login/login.component';
    
    const routes: Routes = [
    { path: 'login', component: LoginComponent },
    ];
    
    @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
    })
    export class AppRoutingModule { }

    From here, we can proceed to implement the Login component view and logic.

  • Navigate to src\app\login\login.component.html and update the content as follows:

    <style>
    span {
      white-space: pre-wrap;
      text-align: left;
      font-family: Arial, Helvetica, sans-serif;
    }
    </style>
    
    <div>
    <div class="apiResponse">
      <span>{{ apiResponse }}</span>
    </div>
    </div>
  • Update src\app\login\login.component.tswith the following snippet:

    import { Component, OnInit } from '@angular/core';
    import { ActivatedRoute } from '@angular/router';
    
    const apiKey = {{YOUR API KEY}};
    
    @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
    })
    
    export class LoginComponent implements OnInit {
    token: string;
    apiResponse: string;
    
    constructor(private activatedRoute: ActivatedRoute) {
      this.token = "";
      this.apiResponse = "";
    }
    
    ngOnInit(): void {
      this.activatedRoute.queryParams.subscribe(params => {
        this.token = params['token'];
    
        if (this.token) {
          fetch("https://api.loginradius.com/identity/v2/auth/account?apikey=" + apiKey, {
            method: 'GET',
            headers: {
              'Authorization': 'Bearer ' + this.token
            },
          })
            .then(res => res.json())
            .then(res => {
              this.apiResponse = JSON.stringify(res, null, 4);
            })
            .catch(e => {
              console.log(e);
            })
        }
      });
    }
    }
  • Replace the following placeholder in the above code: {{YOUR API KEY}} : API Key obtained in the Get Credentials step.
  • Once the Login component is implemented. Set the return_url to point to the /login subdomain of your application. For example, in the local Angular instance, it can point to http://localhost:4200/login. This way, after logging in through the Auth Page (IDX), your user will be redirected to the Login component that we just implemented.

Run and See Result

  • From your command line, run the Angular application:

    ng serve --open

  • Wait for the application to finish launching
  • Open your Auth Page(IDX) registration URL https://<LoginRadius APP Name>.hub.loginradius.com/auth.aspx?action=register&return_url=http://localhost:4200/login. It will display the following screen:

    alt_text

  • Register a user here and then log in. Upon successful login, it will redirect you to the return url with the access token. In response, you will get a user profile in the JSON format displayed in the “/login” route. The following displays a sample JSON response:

    alt_text

In addition to Registration and Login actions, the Auth Page (IDX) supports more actions. Refer to this document for more information.

Whitelist Your Domain

For security reasons, LoginRadius processes the API calls that are received from the whitelisted domains. Local domains (http://localhost and http://127.0.0.1) are whitelisted by default.

To whitelist your domain, in your LoginRadius Dashboard, navigate to Configuration > Whitelist Your Domain and add your domain name:

alt_text

Explore Node.js Demo

As an alternative to handling all API calls in the Angular frontend, you may also opt to access the LoginRadius API from a Node backend. If you wish to do so, you can check out our Node.js demo to learn how to implement various LoginRadius features using SDK and its functions.

GitHub Demo Link | Download Demo

How to manage email templates for verification and forgot password

How to personalize interfaces and branding of login pages

How to configure SMTP settings for sending emails to consumers

How to implement Social Login options like Facebook, Google

How to implement Phone Login

How to implement Passwordless Login

Node-js SDK Reference

Node-js SDK

API Reference

APIs

Go Back to Home Page