Who is responsible for exchanging Access Token? SPA or backend?

[baominwang]

When I check SPA and public client with PKCE, the doc mentions that redirect_uri should be set to "https://myapp.com/callback". That's to say, backend server should receive the request. I have two questions:

1. Who is responsible for exchanging Access Token? SPA or backend?
2. If backend is responsible for that, it seems that PKCE is not needed for SPA?

[vinckr]

Hello @baominwang

In the OAuth2 Authorization Code Flow with PKCE (Proof Key for Code Exchange), the client application (in this case, the Single Page Application or SPA) is responsible for initiating the authorization flow and exchanging the authorization code for an access token.
Here's a brief overview of the process:

1. The SPA constructs an authorization URL with the required parameters, including the PKCE code_challenge_method and code_challenge, and redirects the user to the Authorization Server to start the authorization flow. Source

const clientId = "your_client_id"  
const authorizationUrl = `https://{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}`  
  
// Redirect the user to the Authorization Server to start the authorization flow  
window.location = authorizationUrl

2. After the user has granted permission, the SPA receives the authorization code via the provided redirect URI (https://myapp.com/callback).
3. The SPA then exchanges the authorization code for an access token by making a POST request to the token endpoint of the Authorization Server. The code_verifier parameter is included in this request to validate the authorization code and prevent code injection attacks. Source

const code = "authorization_code_received_from_auth_server"  
const tokenUrl = "https://{project.slug}.projects.oryapis.com/oauth2/token"  
const requestBody = `grant_type=authorization_code&client_id=${clientId}&code_verifier=${codeVerifier}&code=${code}`  
  
fetch(tokenUrl, {  
 method: "POST",  
 headers: { "Content-Type": "application/x-www-form-urlencoded" },  
 body: requestBody,  
})  
 .then((data) => console.log(data))  
 .catch((error) => console.error(error))

PKCE is used in this scenario to ensure that the authorization code cannot be intercepted and used by an attacker. Even though the backend server is not directly involved in the token exchange process, PKCE is still necessary for the SPA to securely handle the authorization code and access token.

Let me know if that helps.