Access protected resource server from SPA

Configuration
A basic CRUD app. We need access controls on both the frontend and backend.

  • Frontend: a React SPA, registered as an OpenID PCKE app. We’re using the @okta/react library to manage this
  • Backend: a protected Spring-boot REST API resource server registered as an OpenID web app. We’re using okta-spring-boot-starter

Workflow

  • User visits the SPA and authorises access.
  • SPA makes requests to the backend using the authorisation granted by the user.

What works

  • Logging into the SPA
  • Making authorised requests to the backend when generating the access token through https://oauthdebugger.com

Question
How does the SPA get the access token required for use of the protected backend using the authorisation it has already obtained?
When I try to pass the SPA’s access token through to the backend (via the ‘Authorized: Bearer …’ header) the backend responds with

WWW-Authenticate: Bearer error=“invalid_token”, error_description=“An error occurred while attempting to decode the Jwt: Signed JWT rejected: Another algorithm expected, or no matching key(s) found”, error_uri=“RFC 6750 - The OAuth 2.0 Authorization Framework: Bearer Token Usage

1 Like

Hi @hbriese! Are you using the Okta Org Authorization Server or the default template Custom Authorization Server - Authorization Servers | Okta Developer?

Thank you very much sigama. Both were configured to use separate authz servers.
It works as expected using the default custom authz server (/oauth/default).

What are the downsides of using the default custom authz server in our use case?

Please correct me if I’m incorrect with any of these statements. I know that the frontend has access to the OIDC ID token and associated information such as user groups.
However as it stands we only communicate the access token to the resource server (the backend) which authorises it (oauth2) but doesn’t give the backend further information about the user as that is contained within the OIDC ID token.
Is there a way that the resource server can get this ID token or user information (e.g. groups) from Okta using the access token?

Hi @hbriese! Do you mean you are using the same default custom authz server for both frontend and backend? To validate the access token we look to your authz server’s /keys endpoint to confirm/validate the token was signed by the given keys see - OpenID Connect & OAuth 2.0 API | Okta Developer. If the authz servers are different then the keys won’t match.

You definitely want to use a custom authz server (i.e. the default template) as you can set custom scopes like groups in your access token see - Create Scopes | Okta Developer.

Hi
I am literally going through the exact same problem you did. How did you manage to resolve this.

I have an SPA (HTML/CSS/JS) that logs in to Okta. When creating the Okta app, choosing SPA automatically uses PKCE.

But the spring boot resource server (which I have made an API gateway too) is a web app when creating it in Okta. So the things needed to get a token are different.

How did you manage to solve this please?