To set up the correct audience in your access token for your SPA using PKCE with Ory Network, you need to follow these steps: ## Setting the Audience When using OAuth2 with Ory, the audience of an access token refers to the resource servers that the token is intended for. For SPAs using the Authorization Code flow with PKCE, you need to: 1. Configure the audience in your OAuth2 client: When creating or updating your OAuth2 client, you need to specify the allowed audiences. 2. Request the audience during authorization: When redirecting to the authorization endpoint, include the

audience

parameter in your request. Here's how to implement this: ### 1. Add audiences to your OAuth2 client First, make sure your OAuth2 client has the intended audiences configured in its settings:

json {   "client_id": "...",   "audience": ["<https://api.my-cloud.com/user>", "<https://some-tenant.my-cloud.com/>"],   // other client settings }

These URLs define where your access token can be used [Hydra Guides: OAuth2 token audience](https://www.ory.sh/docs/hydra/guides/audiences). ### 2. Request the audience during authorization When using oidc-client-ts, you can specify the audience in your UserManager configuration or when you call the signinRedirect method:

javascript const { codeChallenge, codeVerifier } = await generatePKCES256() const clientId = "your_client_id" const authorizationUrl = `https://$<http://PROJECT_SLUG.projects.oryapis.com/oauth2/auth?response_type=code&client_id=${clientId}&redirect_uri=https://myapp.com/callback&scope=openid&state=12345&code_challenge_method=S256&code_challenge=${codeChallenge}&audience=https://api.my-cloud.com/user+https://some-tenant.my-cloud.com/|PROJECT_SLUG.projects.oryapis.com/oauth2/auth?response_type=code&client_id=${clientId}&redirect_uri=https://myapp.com/callback&scope=openid&state=12345&code_challenge_method=S256&code_challenge=${codeChallenge}&audience=https://api.my-cloud.com/user+https://some-tenant.my-cloud.com/>`  // Redirect the user to the Authorization Server window.location = authorizationUrl

The

audience

parameter can contain multiple values separated by a URL-encoded space (

+

or

%20

). The values must be URL-encoded [Hydra Guides: OAuth2 token audience](https://www.ory.sh/docs/hydra/guides/audiences). ### 3. Handle audience in your consent flow If you have a custom consent flow, you'll need to accept the requested audience:

javascript // When accepting the consent request return await ory.acceptOAuth2ConsentRequest({   consentChallenge: consentChallenge,   acceptOAuth2ConsentRequest: {     // Accept the requested token audience     grant_access_token_audience: data.requested_access_token_audience,   }, })

## Troubleshooting Audience Issues If you're experiencing issues with the audience: 1. Check for audience mismatch errors: If you see "token audience didn't match allowed audiences" errors, make sure the audience in your token matches what's expected by the resource server [Social sign-in troubleshooting](https://www.ory.sh/docs/kratos/social-signin/google#troubleshooting). 2. Custom domain considerations: If you're using a custom domain, you may need to update your OAuth2 Issuer URL to match your custom domain [Troubleshooting OAuth2 JWT Profile](https://www.ory.sh/docs/troubleshooting/oauth2-trust-audience). By following these steps, your SPA should be able to obtain access tokens with the correct audience values for your API resources. I hope this helps with your implementation!