Okta Authentication Using Angularjs or JavaScript — Phpflow.com
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.