Manage Okta Resources - Implicit flow

Questions API
, , ,
1

Hi,
I’m sorry if I am not aware or have missed something. I’ve implemented an Implicit Flow, even the validation part. But I also need to manage Okta’s Users and Groups API.

I have an API Token and it works perfectly, using curl, for example:

curl -v -X POST \
-H "Accept: application/json" \
-H "Content-Type: application/json" \
-H "Authorization: SSWS ${api_token}" \
-d '{
  "profile": {
    "name": "West Coast Users",
    "description": "All Users West of The Rockies"
  }
}' "https://dev-000000.oktapreview.com/api/v1/groups"

But when I’ve tried to get them from my Client (Angular SPA) I get the CORS error :

XMLHttpRequest cannot load https://dev-000000.oktapreview.com/api/v1/groups. Origin http://localhost:4200 is not allowed by Access-Control-Allow-Origin.

when I already had enabled CORS for the required origins

http://some.domain.s3-website.us-east-2.amazonaws.com
CORS
Redirect
http://localhost:8080	
CORS
Redirect
http://localhost:4200	
CORS
Redirect
https://developer.okta.com	
CORS
Redirect

The code for the request is the following:

getAll(): Observable<any> {
    let httpHeaders = new HttpHeaders().set('Accept', 'application/json')
       .set('Content-Type', 'application/json')
       .set('Authorization', 'SSWS ${api_token}')
    return this.http.get('https://dev-000000.oktapreview.com/api/v1/groups', { headers: httpHeaders});
    }
}

I also tried with:

.set('Authorization', 'Bearer ' + this.authService.getAccessToken());

please, what am I missing?

Thanks,
Sergio

2

Hey Sergio!

The reason it’s not working is because you should not use an API token from your frontend code. Code that runs in the browser (like a single-page app) should not store or handle sensitive things like client secrets or API tokens.

This is why you have to use the implicit or authorization code (w/ PKCE) flows in frontend code, because those let you get access and ID tokens for the user without requiring a client secret in the browser. All of the Okta management APIs (Users, Groups, Factors, etc) require an API token, so they should not be called from the browser.

So what should you do if you need to manage users and groups? You need to put the code that calls the Okta management APIs in your backend server or API. Here’s a rough sketch of the “layers”:

  • Angular SPA
    Uses the implicit flow to get access and ID tokens

  • Backend API
    Can keep an API token (SSWS) safe

  • Okta management APIs
    Users API, Groups API, etc.

For example, if you need your frontend to retrieve a list of groups, you could create a backend route called /api/groups. That would accept the access token you already have on the frontend, validate it, and then call the Groups API.

If you are already using our Spring Boot Starter, the Java management SDK is included for free. You just need to inject it and use client.listGroups() to call the Groups API.

3

Wow, thanks! I think I understood this, it’s difficult when english is not your language, you always missed something.

Regards.

4

No problem!

Let us know if you need further help. :+1: