Hey devs! 👋 Today, we’re diving into how to secure your API using OAuth 2.0 and OpenID Connect (OIDC) with Okta. Whether you’re building an Angular app or setting up RBAC (Role-Based Access Control), this guide will walk you through the Okta setup from scratch—no prior experience needed!
🚀 What We’ll Cover
✅ Setting up Okta from the very beginning (no account? No problem!)
✅ Creating user groups and assigning access (RBAC in action)
✅ Setting up an OAuth 2.0 app in Okta
✅ Configuring authentication & API policies
🔧 Step 1: Get an Okta Developer Account
First thing we need is an Okta Developer Edition account. It’s free and gives us everything we need for secure authentication.
1️⃣ Go to Okta Developer and click Sign Up.
2️⃣ Select Developer Edition
3️⃣ Fill in your email, company name, and region. Note: Okta requires business email, if you don't have one you can quickly buy it for a cheap price (e.g. domain can be bought on GoDaddy while custom email address on proton)
4️⃣ Verify your email and log in to your Okta Admin Dashboard.
Once you’re in, you’ll see your Okta domain at the top (something like https://dev-xxxxxx.okta.com). Save this—it’s important!
👥 Step 2: Set Up User Groups for RBAC
Using groups in Okta makes access control easy. Instead of manually managing users, we’ll create a group and assign access at the group level.
📌 Create a Group
1️⃣ In the Okta Admin Dashboard, go to Directory → Groups.
2️⃣ Click "Add Group".
3️⃣ Give it a name and add short description.
4️⃣ Your new group can be found here ⬇️
📌 Add Users to the Group
1️⃣ Go to Directory → Groups.
2️⃣ Inside groups locate the desired group and click on it
3️⃣ Click "Assign people".
4️⃣ Click on plus button near the desired user.
🎯 Why This Matters:
RBAC (Role-Based Access Control) ensures only the right users can log in to your app. Later, we’ll restrict API access to this group.
🛠️ Step 3: Create an OAuth 2.0 App in Okta
Now, let’s register our Angular app in Okta so it can use OAuth 2.0 and OpenID Connect (OIDC) for authentication.
📌 Create a New App
1️⃣ Go to Applications → Applications → Create App Integration.
2️⃣ Choose "OIDC - OpenID Connect" as the sign-in method.
3️⃣ Select "Single Page Application (SPA)" as the app type.
4️⃣ Click Next.
📌 Give it a name and configure redirect URIs
1️⃣ Base URI → http://localhost:4200
2️⃣ Login Redirect URI → http://localhost:4200/login/callback
3️⃣ Logout Redirect URI → http://localhost:4200
📌 Enable OAuth 2.0 Grant Types
1️⃣ Inside grant type section enable:
✅ Authorization Code (more secure than implicit flow).
✅ Refresh Token (for session persistence).
📌 Set Controlled Access
1️⃣ Select "Limit access to selected groups".
2️⃣ Choose the groups (this restricts access to only assigned users).
3️⃣ Click Save.
Now our Angular app is registered with Okta and ready to authenticate users! 🎉
🔒 Step 4: Configure Authentication & API Access Policies
Okta uses authentication policies to control who can log in and API policies to manage who gets access tokens. Let’s configure both!
📌 Set Up Authentication Policy (2FA Required!)
We want our users to log in with password + Okta Verify (TOTP) for extra security. By default Okta applies 'Any two factors' to new apps, but we have to ensure on it.
1️⃣ Go to Security → Authentication Policies and ensure the 'Any two factors' policy was applied to our app.
If not - then create the new one and apply it to the app:
2️⃣ Click Create Policy → Name it 'Angular Users Policy'.
3️⃣ Under Rules, set:
✅ Require Password (Knowledge Factor).
✅ Require Okta Verify - TOTP (Possession Factor).
4️⃣ Click Save and assign this policy to our Angular app.
📌 Configure API Authorization Policies
🚀 Why Restrict API Tokens at the User Level, Not Just the App?
Imagine an attacker registers another app inside Okta—if API policies only checked app authentication, this fake app could get valid access tokens! 😱
By locking API tokens to specific user groups, we ensure that only authorized users within trusted apps can access our API. 🔐
1️⃣ Prepare the ClientId of our angular app
2️⃣ Go to Security → API → Authorization Servers.
3️⃣ Click "default" Authorization Server → Go to Access Policies.
4️⃣ Click "Add Policy", give it a name (e.g. 'angular_app_policy'), and assign it to your angular app using its ClientID.
5️⃣ Add a Rule:
✅ Allow Authorization Code with PKCE.
✅ Apply it only to desired groups.
✅ Allow Scopes (optional): openid, profile, email (restrict access to only necessary data).
6️⃣ Click Save.
🎯 Why This Matters:
✅ Ensures only authenticated users can get API tokens.
✅ Restricts API access based on user groups.
✅ Uses scopes to limit what data users can access.
🔥 What’s Next? Frontend & Backend Integration!
Now that Okta is fully set up, it’s time to connect it to our Angular app and backend.
🚀 Next Article: How to authenticate users in Angular & secure API requests.
🔐 Upcoming: Backend token verification & advanced security best practices.
🛎 Stay tuned & follow for updates!
🔑 Wrapping Up
In this guide, we:
✅ Created an Okta Developer account from scratch.
✅ Set up user groups for RBAC.
✅ Registered an OAuth 2.0 app in Okta.
✅ Configured authentication policies (password + 2FA).
✅ Set API authorization rules to restrict access.
With this setup, your app is now secure using OAuth 2.0, OpenID Connect, and Role-Based Access Control. 🚀
Let me know in the comments if you have any questions, and check out my next posts on frontend and backend authentication & token verification! 🔥
Top comments (0)