Hello,
On my React native application, i’m trying to make a web browser authentication with Keycloak.
I’m using SDK40
, Managed flow
and i’m on an Android platform (Android studio Emulator)
.
I’m using expo-auth-session and the function useAuthRequest
and exchangeCodeAsync
.
I have no problem, getting the code with useAuthRequest.
I’m getting an object like this :
Object {
"authentication": null,
"errorCode": null,
"params": Object {
"code": "6ad0ebfb-4769-4e68-81d3-f32d74d0c0c5.e0a7841b-a455-4974-a33d-403647faf6b7.6e69c949-4e6a-418c-8c45-783b64cc6bc4",
"exp://192.168.1.38:19000/--/expo-auth-session": "",
"session_state": "e0a7841b-a455-4974-a33d-403647faf6b7",
},
"type": "success",
"url": "exp://192.168.1.38:19000/--/expo-auth-session#session_state=e0a7841b-a455-4974-a33d-403647faf6b7&code=6ad0ebfb-4769-4e68-81d3-f32d74d0c0c5.e0a7841b-a455-4974-a33d-403647faf6b7.6e69c949-4e6a-418c-8c45-783b64cc6bc4",
}
But when I try to convert this code to access_token, I get Network request failed error.
Here you can see my code :
export default function AuthHome({ navigation }: BasicNavigationProps) {
const dispatch = useDispatch()
const { t } = useTranslation()
const [request, response, promptAsync] = useAuthRequest({
clientId: 'client-mobile',
redirectUri: makeRedirectUri({ useProxy: true, native: 'myapp://redirect' }),
scopes: ['openid', 'profile'],
clientSecret: 'rrrrrr',
prompt: Prompt.Login,
extraParams: {
nonce: 'none',
},
}, {
authorizationEndpoint: "https://mysite.com/auth/realms/myrealm/protocol/openid-connect/auth",
tokenEndpoint: 'https://mysite.com/auth/realms/myrealm/protocol/openid-connect/token'
})
useEffect(() => {
if (response && 'params' in response) {
if (response.params && 'code' in response.params) {
(async function getToken() {
console.log('-----------------------')
console.log(response.params.code)
console.log('-----------------------')
try {
// @ts-ignore
const { accessToken } = await exchangeCodeAsync({
code: response.params.code,
clientId: 'client-mobile',
redirectUri: makeRedirectUri({useProxy: true, native: 'myapp://redirect'}),
//scopes: ['openid', 'profile'],
clientSecret: 'rrrrrr',
extraParams: {
nonce: 'none',
},
}, {
tokenEndpoint: 'https://mysite.com/auth/realms/myrealm/protocol/openid-connect/token' // Sera utilisé pour le refresh
})
console.log('-----------------------')
console.log(accessToken)
console.log('-----------------------')
} catch (e) {
console.log(e)
console.log(e.status)
console.log(e.message)
}
})()
}
}
}, [response]);
return (
<View>
<Button classic text={'Connect')} onPress={() => promptAsync({ useProxy: true })} />
</View>
)
}
Here the complete error :
Network request failed
- node_modules\whatwg-fetch\dist\fetch.umd.js:535:17 in setTimeout$argument_0
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:383:16 in callTimers
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue
Did I forget something in my configuration ?
Thanks