CODEWITHSUNDEEP
expokeycloakexpo-auth-session
Pablo Darde
Pablo Darde

Reputation: 6402

How to config Expo auth session with keycloak?

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

Upvotes: 3

Views: 712

Answers (1)

unbreakable163
unbreakable163

Reputation: 51

In order for this to work in the iOS simulator with the bare workflow the redirect URI would be your apps scheme. For instance myScheme://

In a managed project scheme should be specified inside app.json/app.config.js/app.config.ts. For bare workflow this would reside in Info.plist (iOS) and AndroidManifest.xml (Android).

You would typically set up myScheme://* under valid redirect URIs in Keycloak.

For local testing with web you would also like to add http://localhost:8081/* as a valid redirect URI if you run your expo project on the default port.

For testing with Expo Go you could add exp* as a valid redirect URI.

Upvotes: 2

Related Questions