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.
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.
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
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
Click on “Add Application” button and then select Single-page app option.
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.
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.
