exchangeCodeAsync : Network request failed

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

1 Like