Okta Authentication Using Angularjs or JavaScript — Phpflow.com

3 min readNov 13, 2021

This article will show you how to integrate Okta login capabilities into an AngularJS application. I couldn’t find any information on how to use angularjs 1.6 to develop an okta authentication app.

The okta stated that they did not support angularjs app, You need to use VanillaJS to add support with okta.

What is Okta?

Okta is a cloud service that allows developers to create, edit, and securely store user accounts and data, as well as connect them to one or more apps. You can use our API to do the following:

Authenticate and authorize your users
Store data about your users
Perform password-based and social login
Secure your application with multi-factor authentication

What’s Okta JavaScript SDK

Auth.js is a library wrapper for the Okta Authentication API. Use it when you need complete control of your sign in experience, or use the Okta Sign-In Widget for a pre-built, customizable experience

The Pre-Requisites:

Create Angularjs applicationApp

Let’s create an angular js application, I have created a hello-ang/ app folder into the workspace.

cd > hello-ang/

Create a main.js file and paste the below code into his folder:

install http-server package here for developement server:
$hello-ang> npm install -g http-server

Create and Configure a New Okta applicationApp

Let’s Create a app into developer console.I assumed, You have developer account and logged in.

Navigate to Applications in the sidebar navbar and then click Create Application button.

Now select OpenID and SPA as the platform and click Next.

Enter app_name, sign-in and sign-out redirect UI.

Finally, ensure that Login redirect URIs contains http://localhost:8080 and click Done.

User Authentication Using Okta

Let’s walk you through adding user authentication to your angularjs or JavaScript app.

Get Okta App Details

Open app details page from okta developer dashboard, Copy okta client-id and okta domain name from here:

Configure Angularjs app

We will paste above details into main.js file:

Replace oktadomain and client-id with your app details.

Start app

Your HTTP server should startup. Open a browser and navigate to http://localhost:8080.

$hello-ang>http-server -o You will get the below page:

Originally published at https://www.phpflow.com on November 13, 2021.