How to config Expo auth session with keycloak?

187 Views Asked by At

I'm building a React Native app with Expo SDK 49 (Bare workflow) using the keycloak configuration provided by Expo Auth. However, when I hit the Login button, I'm receiving invalid_parameter: redirect_uri.

This is my Login page:


import * as React from 'react'
import * as WebBrowser from 'expo-web-browser'
import { makeRedirectUri, useAuthRequest, useAutoDiscovery } from 'expo-auth-session'
import { Button, Text, View } from 'react-native'

WebBrowser.maybeCompleteAuthSession()

export default function App() {
  const discovery = useAutoDiscovery('http://localhost:8080/auth/realms/todo-app')

  // Create and load an auth request
  const [request, result, promptAsync] = useAuthRequest(
    {
      clientId: 'react-native-client',
      redirectUri: makeRedirectUri({
        scheme: 'poc-expo-router',
        path: '/home',
      }),
      scopes: ['openid', 'profile'],
    },
    discovery
  )

  const handleOnPress = async () => {
    const result = await promptAsync()
    console.log('handler result: ', result)
    return result
  }

  console.log('results: ', JSON.stringify(result, null, 2))
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Login!" disabled={!request} onPress={handleOnPress} />
      {result && <Text>{JSON.stringify(result, null, 2)}</Text>}
    </View>
  )
}


I setup my keycloak realm locally using docker. Another question, since I'm using react native, I don't know what client id url I must use, since I'm not running my app on the browser using a normal url, I'm running from iOS simulator.

enter image description here

0

There are 0 best solutions below