react-keycloak / react-native-keycloak

React Native components for Keycloak
MIT License
171 stars 48 forks source link

Invalid Parameter: redirect_uri on Android #127

Open 0xmtn opened 1 year ago

0xmtn commented 1 year ago

Describe the bug

Cannot login and redirect to the app gracefully. It shows the following error:

Screenshot 2023-11-04 at 15 43 19

To Reproduce

keycloak.js

const keycloak = new RNKeycloak({
  url: 'keycloak-url',
  realm: 'realm',
  clientId: 'clientId',
});

App.js

<ReactNativeKeycloakProvider
      authClient={keycloak}
      initOptions={{
        redirectUri: 'com.appname://hostname/home/map',
        // if you need to customize "react-native-inappbrowser-reborn" View you can use the following attribute
        inAppBrowserOptions: {
          // For iOS check: https://github.com/proyecto26/react-native-inappbrowser#ios-options
          // For Android check: https://github.com/proyecto26/react-native-inappbrowser#android-options
        },
      }}
      isLoadingCheck={_keycloak => !_keycloak.authenticated}
      onEvent={(event, error) => {
        console.log('onKeycloakEvent', event, error);
      }}
      onTokens={tokens => console.log(tokens)}>
        <NavigationContainer linking={linking}>
          <Stack.Navigator
            initialRouteName="LoginScreen"
            screenOptions={{headerTitle: ''}}>
            <Stack.Screen
              name="LoginScreen"
              component={Login}
              options={{headerShown: false}}
            />
            <Stack.Screen
              name="HomeScreen"
              component={AfterLogin}
              options={{headerShown: false}}
            />
          </Stack.Navigator>
        </NavigationContainer>
</ReactNativeKeycloakProvider>

Keycloak Redirect URI Config:

Screenshot 2023-11-04 at 15 46 11

AndroidManifest.xml:

<intent-filter>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:scheme="com.appname" android:host="hostname" android:pathPrefix=""/>
      </intent-filter>

I also have tried to add the exact path into Keycloak Redirect Uri in the UI as com.appname://hostname/home/map. Still the same issue.

Also, npx uri-scheme open "com.appname://hostname/home/map" --android works well. So, I guess there isn't anything wrong with the navigation.

Expected behavior

I expected the the login screen in the inappbrowser and after login it should close the browser and redirect the app to the redirectUri. Instead, the minute the inappbrowser is open,it shows the invalid parameter: redirect_uri error.

BTW, it works perfectly fine in our web app with the same keycloak config.

Screenshots

Smartphone

Additional context

I have checked every url I can find in the issues and in the google. I have also checked the example folder. No Luck.

0xmtn commented 1 year ago

Any ideas anyone?

dg0005 commented 11 months ago

Even I’m facing the same issue.