API Access - Authorized Party (azp) claim mismatch in the ID token

Help
,
1

Hi, I am trying to login to Auth0 using a Vue js SPA and a redirect login, and call my PHP API with that access token to get the user on the backend and ensure we are verified to make API calls. The docs generally imply that these acquired JWTs can be used directly from the SPA to the API.

Things that work:

  • Vue SPA is getting a JWT token back
  • PHP backend, when using the test JWTs from the Auth0 dashboard works fine, verification works great.

What doesn’t work:
If I take the JWT I get from logging in on my SPA and pass that to my PHP API, it will return the error:
Authorized Party (azp) claim mismatch in the ID token:

Authorized Party (azp) claim mismatch in the ID token; expected \"https://localhost/graphql, 62fXXXXXXX02b8e\", found \"yN5XXXXXXXwCJ\""

Vue.use(Auth0Plugin, {
  domain,
  clientId,
  audience: audience,
  onRedirectCallback: appState => {
    router.push(
      appState && appState.targetUrl
        ? appState.targetUrl
        : window.location.pathname
    );
  }
});

I am following the setup instructions listed here:

The redirect link it creates looks correct to me:
https://ekitabu.eu.auth0.com/authorize?clientId=yN5gXXXXXXXXwCJ&responseType=token%20id_token&audience=https%3A%2F%2Flocalhost%2Fgraphql&client_id=yN5gnXXXXXXXXQEpyXwCJ&redirect_uri=http%3A%2F%2Flocalhost%3A8080&scope=openid%20profile%20email&response_type=code&response_mode=web_message&state=dERrMTNXXXXXXXXX285VndCVA%3D%3D&nonce=cHlrWWhEV3lTdXXXXXXXXXXXXXXmdXeQ%3D%3D&code_challenge=HZ7K_XXXXXXXXXXXYuc&code_challenge_method=S256&prompt=none&auth0Client=eyJuYXXXXXXXXXXXXXXXuMSJ9

I have tried the permutations of having the clientId be the

  1. SPA’s client ID
  • The above mentioned Authorized Party (azp) claim mismatch in the ID token
  1. The ID under “general settings” for the PHP API
  • this gives an “unknown client” and a misconfiguration screen for the auth0 login redirect page.
  1. The client id given in the test section for PHP API.
  • this gives me a 401 from the token retrieval auth0 call

Based on this thread, it is my understanding that any issues with azp have been fixed in a PR a few years back. All of the Auth0 examples imply that we can simply get the VueJS JWT and pass it right along to the API, and then with version 8 use the auth0->decode($jwt) function.

I am using a modified version of the jwt-auth-bundle since the official auth0 library is not yet compatible with the 8.0+ PHP SDK. You can see my modified jwt-auth-bundle here

SDK:

            "name": "auth0/auth0-php",
            "version": "8.2.1",

  • Platform Version:
    Symfony 6

  • Code Snippets/Error Messages/Supporting Details/Screenshots:
    Authorized Party (azp) claim mismatch in the ID token

Relevant threads:

Relevant PR:

2

In a SPA + backend API scenario, the token that should be sent to the backend is the Access Token and not the ID token. The ID token is meant as a user identifier and a place to get the user profile info for the SPA only. The backend authorization should be done with the Access Token.

If you are already passing the Access Token but still getting this error, it could be due to the SDK assuming it’s an ID Token. The Auth0 PHP SDK assumes a token is an ID token by default [1]. We need to explicitly tell it that we are validating an Access Token. Eg:

$token = new Token($sdkConfig, $accessToken, Token::TYPE_TOKEN);

The azp check does not happen when an Access Token is decoded this way so you shouldn’t get into the original error.

In case it helps, this document’s got a bit more details on authorizing an API with PHP: Auth0 PHP API SDK Quickstarts: Authorization

[1] auth0-PHP/Token.php at bd785080772275d7769e9d046b188a8364db8fbe · auth0/auth0-PHP · GitHub

2 Likes
3

That worked, thank you very much!

1 Like