Authorization Flow with PKCE - How to authenticate backend REST calls

I’m looking to authenticate REST calls made from my React SPA app frontend to a Django REST backend.
The frontend React handles the Authorization flow just fine. I’m wondering now how am I able to check on the backend that the ID/Access token that I’ve generated are valid?
My initial thought is to use introspect and I followed the instructions here to skip authorization and use my client id in the body but I get an invalid_client error.

Anyone have any experience with this?

Thanks!

Hi @BirdThunderford. You said you passed client id in the body, but take note from the docs:

For public clients (such as single-page and mobile apps) that don’t have a client_secret , you must include the client_id as a query parameter when calling the /introspect endpoint. Make sure that you aren’t passing the Authorization header in the request.

Give that a shot and see if that works for you.

Also - this is a great way to validate tokens and generally the most secure way. It comes at a cost of relying on an external network call, however. Another option is local token validation using a JWT verifier. We have a Python one in development right now, but it’s unfortunately not public yet. Here’s an example of a Node JWT verifier we made: @okta/jwt-verifier - npm

There are definitely reputable open-source Python JWT verifiers out there, but I don’t want to link to any to seem like it’s an official Okta recommendation.

But if the /introspect flow works for your purposes, that approach would be great.

So this is my POST out of postman:
https://{my okta}/oauth2/default/v1/introspect?client_id={my_client_id}
I’m passing my access token under the token key and access_token under the token_type_hint key.

This is the response I’m still getting:

{
    "errorCode": "invalid_client",
    "errorSummary": "No client credentials found.",
    "errorLink": "invalid_client",
    "errorId": "oae_84DoAbHRbCAYwSfgSikzA",
    "errorCauses": []
}

The client id is valid. It’s what I used to generate the token in the first place. I’m using the access token. Not sure what I might have missed here.

Are you using our collection? Make sure in the Authorization tab that you have “No Auth” selected, and then in the Headers tab, make sure the “Authorization” header is unchecked.

Screen Shot 2021-06-04 at 12.17.58 PM

Hah. that did it.

But how secure is this approach if the access_token is freely available in localStorage? I’m using a combination of okta-auth-js and okta-react to authenticate completely on the front end.

Since I’m working with a backend as well, what would be the recommended approach? Handle completely on the front end (auth flow with pkce), handle on the back end ie as a web-app with client secret or perhaps some sort of hybrid (callback is handled on the backend, etc)?