Hi all,
I am at the moment trying to implement the PKCE authorization in react native using expo. This works flawlessly in chrome, but gives me a 401 error when I test the app on android. The error is specifically:
"error": "access_denied",
"error_description": "Unauthorized"
Does anyone have any idea why this is?
The API calls are implemented as a custom hook:
import * as AuthSession from 'expo-auth-session';
import { useEffect, useState } from 'react';
const auth0ClientId = {ClientID};
const authorizationEndpoint ={authEndpoint}/authorize;
const accessTokenUrl = {authEndpoint}/oauth/token;
export function usePKCEFlow() {
const [redirectUri] = useState(AuthSession.makeRedirectUri());
const [authorizationCodeResponse, setAuthorizationCodeResponse] = useState();
const [request, result, promptAsync] = AuthSession.useAuthRequest(
{
redirectUri,
clientId: auth0ClientId,
codeChallengeMethod: AuthSession.CodeChallengeMethod.S256,
responseType: 'code',
scopes: ['openid'],
usePKCE: true,
extraParams: {
audience: {audienceURL},
},
},
{ authorizationEndpoint },
);
useEffect(() => {
if (result) {
if (
result.type === 'success' &&
result.params &&
result.params.code &&
result.params.state === request?.state &&
request.codeVerifier
) {
const { code } = result.params;
const data = new URLSearchParams();
data.append('code', code);
data.append('redirect_uri', redirectUri);
data.append('client_id', auth0ClientId);
data.append('grant_type', 'authorization_code');
data.append('code_verifier', request?.codeVerifier);
fetch(accessTokenUrl, {
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
body: data,
})
.then(res => {
return res.json();
})
.then(js => {
setAuthorizationCodeResponse(js);
});
}
}
}, [result]);
return [promptAsync, authorizationCodeResponse];
}