Categories
Articles

Okta custom login widget with Angular

Authentication is often a time-consuming task. Developing a service, using active directory, creating database tables to hold information and most importantly securing credentials all of this soon becomes a very complex process. Besides that, it is very vital to securely exchange the information and validate tokens to ensure user session is valid for the duration of a transaction. But this entire process can be simplified with market-ready solutions like Okta.

What will we build?

Okta is an industry-leading solution and it has been recognized by Gartner in 2017 as Leader in Identity and Access management. Okta can be integrated with a technology of your choice. It provides a guided interface to configure the setting of your application. In this article, we will build custom Sign-in widget in the Angular application using Okta utilities. Don’t worry, even if you don’t know Angular, you can easily get started with this article. Instead of using built-in sign-in widget of Okta, we will build our very own login widget and invoke Okta services from it.

Angular Okta
Angular Okta

Pre-requisites

Before you begin, let’s configure the development environment. You must have following resources installed on your machine

Ubuntu

I am using Ubuntu 16.04.4 LTS and hence the screenshot of this article are based on Ubuntu

NodeJS – The detailed instructions for every platform can be found at Official Ubuntu page.

The following command will download NodeJS 8.X version on your machine.

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -

After executing above command, proceed with the following command

sudo apt-get install -y nodejs

To ensure NodeJS has been properly installed on the machine, go to Terminal (Ctrl + Alt + T) and type “nodejs”. You should see a prompt, like the one depicted in the following picture. Enter a mathematical expression and an appropriate result should be displayed.

NodeJS on Ubuntu
NodeJS on Ubuntu

Windows

The installation process on Windows is very easy and can be achieved using multiple ways. You can visit NodeJS website¬†and download the installer. Alternatively, you can also configure NodeJS using chocolatey. The detailed instruction on installing NodeJS using Chocolatey can be found on NodeJS official site. Make sure after installing NodeJS, the path variables are updated to include Node binaries. As described in the screenshot for Ubuntu, you can execute a “nodejs” command at a console and check the output.

Angular

We will install Angular CLI to speed up the process of project template generation, compiling and building up UI project. The details instruction on installing Angular can be found at Angular.io official site. Go to a terminal in Ubuntu or Command prompt in Windows and execute the following command to install Angular CLI at a global location.

npm install -g @angular/cli

The Node Package Manager will start downloading required packages to install Angular CLI. The completion of command can take more than minute and it may vary depending on the internet speed.

In case you are facing a permission issue on Ubuntu, you can refer to the solution listed on official NodeJS website.

Microsoft Visual Studio Code

To edit the Angular Code, we must have a nice, feature-rich code editor. I personally prefer Microsoft Visual Studio Code, but you can choose your favorite IDE/editor. Visual Studio Code is very lightweight and provides a developer-friendly interface and it’s completely free. You can download it at Official Code Website.

Create Sample Angular Application

It is time to generate an Angular application using Angular CLI. Angular provides very intuitive commands to generate sample application. Enter the following command at the console. Change to the appropriate directory where the project should be generated.

ng new okta-widget

Angular CLI will create a template project and it will also download required dependencies to build/run the project. Once all the required dependencies are downloaded, open the “okta-widget” folder in Visual Studio Code. The project structure should look like following

Angular in Code
Angular in Code

Switch back to console and execute the following command to verify all the required modules for an Angular project are correctly downloaded.

ng e2e

This command will execute default tests configured in the project and you should see the following message after the completion of the command

Executed 1 of 1 spec SUCCESS in 1 sec.

Installation of Okta Sign-in Widget

Okta provides a very handy module to customize the login interface. Go to the terminal and switch directory to the “okta-widget” project. Enter the following command to install Okta Sign-in widget. The installation should get completed within a minute.

npm install --save @okta/okta-signin-widget

Sign-Up Developer account at Okta

Now that we have configured okta sign-in widget, we need to setup developer account with Okta. Visit Okta Developer site and sign-up for a free account. Make sure that you check your email for username/password and Okta subdomain details. You need to login using the temporary password available in the email (Click on SignIn link received in the email).

Setup the application

After account activation in Okta, you will be redirected to your custom domain homepage. Click on “Applications” link in the top menubar in Okta Web page and you should find an option to create new application similar to following

Okta application menu
Okta application menu

Click on “Add Application” button and then select Single-page app option.

Okta Single Page App
Okta Single Page App

Click “Next” button and enter “http://localhost:4200” in Base URI, Login Redirect UI fields. Enter a name of the application as “Angular Okta App” and click submit button.

You are now done with the Okta configuration. Scroll down the page and note the Client ID from the page. We will require it to configure in the Angular project.

Configure Okta Sign-In Widget

Switch to Visual Studio Code and open “src > styles.css” file in the editor. Add the following lines at the top of the file.

@import '~@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';
@import '~@okta/okta-signin-widget/dist/css/okta-theme.css';

Save the file contents and create new folder “shared” under “src/app”. Switch to the terminal, go to the “src/app/shared” folder. Enter¬†following command to create new Okta service

ng generate service okta

You should now have two files okta.service.spec.ts and okta.service.ts under src/app/shared folder. Open okta.service.ts file in Visual Studio Code and replace the contents with following

import { Injectable } from '@angular/core';
import * as OktaSignIn from '@okta/okta-signin-widget';

@Injectable()
export class Okta {
  widget;

  constructor() {
    this.widget = new OktaSignIn({
      baseUrl: 'https://{yourOktaDomain}.com',
      clientId: '{clientId}',
      redirectUri: 'http://localhost:4200',
      authParams: {
        issuer: 'default'
      }
    });
  }

  getWidget() {
    return this.widget;
  }
}

Note that in above code, replace the placeholder {yourOktaDomain} with the URL available in the Okta dashboard. Click on Dashboard link in Okta web. Refer to below screenshot to locate your organization URL.

Okta Dashboard URL
Okta Dashboard URL

Replace Cliend ID with the ID noted in the previous step. If you don’t remember the Client ID, just click on Applications link in Okta web and you should see a list of applications. The Client ID for each application should be available in summary. The initialization of this.widget should look like below

this.widget = new OktaSignIn({
      baseUrl: 'https://dev-192246.oktapreview.com',
      clientId: '0oaeupadfuUB1QNCK0h7',
      redirectUri: 'http://localhost:4200',
      authParams: {
        issuer: 'default'
      }
    });

The baseUrl and clientId will change as per your application. Save the file contents and then open src > app > app.module.ts file. Import the Okta service using a following line in the top

import { Okta } from './shared/okta.service';

Also, initialize providers array with value as Okta. The providers statement should look like below

providers: [Okta]

Save the file and open src > app > app.component.ts in editor. Replace the contents of the file with following

import { Component, ChangeDetectorRef, OnInit } from '@angular/core';
import { Okta } from './shared/okta.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  user;
  oktaSignIn;

  constructor(private okta: Okta, private changeDetectorRef: ChangeDetectorRef) {
    this.oktaSignIn = okta.getWidget();
  }

  showLogin() {
    this.oktaSignIn.renderEl({el: '#okta-login-container'}, (response) => {
      if (response.status === 'SUCCESS') {
        this.user = response.claims.email;
        this.oktaSignIn.remove();
        this.changeDetectorRef.detectChanges();
      }
    });
  }

  ngOnInit() {
    this.oktaSignIn.session.get((response) => {
      if (response.status !== 'INACTIVE') {
        this.user = response.login;
        this.changeDetectorRef.detectChanges();
      } else {
        this.showLogin();
      }
    });
  }

  logout() {
    this.oktaSignIn.signOut(() => {
      this.user = undefined;
      this.changeDetectorRef.detectChanges();
      this.showLogin();
    });
  }
}

Now the final step – include okta sign-in widget in html. Open src > app > app.component.html file and replace the file contents with following

<div *ngIf="!user" id="okta-login-container"></div>

<div *ngIf="user">
  Hello {{user}}

  <button (click)="logout()">Logout</button>
</div>

Thats all required to integrate Okta Sign-in widget. Now lets run the application and see it in action. Go to the terminal and then switch the directory to the root of the project. Enter following command to compile the project.

ng serve

If there are no errors reported, open browser and enter following URL

http://localhost:4200

You should now see, Okta Widget asking for username/password for authentication. Enter the credentials you used to configure Okta developer account and you should then see a welcome message.

By Carbon Rider

Hi this is Yogesh, welcome to my world. Being passionate about learning new technologies and building frameworks, I end up spending most of my time in front of computer. But over last few months, I realised apart from being good coder and designer (Yes I am) I have something hidden in me. And thats called ART.

Leave a Reply