react-keycloak / react-native-keycloak

React Native components for Keycloak
MIT License
170 stars 45 forks source link

Cannot redirect to a specific screen after a successful login. #123

Open HammadAhm3d opened 1 year ago

HammadAhm3d commented 1 year ago

Hey. I am trying to redirect to the home screen after a successful login attempt. I have implemented deep linking as well. But as soon as the login request completes, the in-app browser closes and I return back to the login screen. The expected behavior here should be to redirect to the home screen. Take a look at the code:

import { ReactNativeKeycloakProvider } from "@react-keycloak/native";
import { SafeAreaView } from "react-native";
import Navigation from "./core/navigation";

import { NavigationContainer } from "@react-navigation/native";
import keycloak from "./keycloak";
import "./utility/i18n";

export default function App() {
  const linking = {
    prefixes: ["mynexi://"],
    config: {
      screens: {
        HomeScreen: "home",
      },
    },
  };
  return (
    <ReactNativeKeycloakProvider
      authClient={keycloak}
      initOptions={{
        redirectUri: "mynexi://home",
        inAppBrowserOptions: {
          modalPresentationStyle: "fullScreen",
          enableBarCollapsing: false,
          modalEnabled: true,
          ephemeralWebSession: true,
          dismissButtonStyle: "ok",
        },
      }}
      isLoadingCheck={(keycloak) => !keycloak.authenticated}
      onEvent={(event, error) => {
        console.log("onKeycloakEvent", event, error);
      }}
      onTokens={(tokens) => console.log(tokens)}
    >
      <NavigationContainer linking={linking}>
        <SafeAreaView style={{ flex: 1 }}>
          <Navigation />
        </SafeAreaView>
      </NavigationContainer>
    </ReactNativeKeycloakProvider>
  );
}

The Navigation component is like this:

<Stack.Navigator initialRouteName="SplashScreen">
      <Stack.Screen
        name="Login"
        component={Login}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="HomeScreen"
        component={MyTabs}
        options={{ headerShown: false }}
      />
</Stack.Navigator

Here's how I call the login function:

const { keycloak, initialized } = useKeycloak();
  const navigation = useNavigation();

  const handleLogin = async () => {
    try {
      await keycloak.login();
    } catch (error) {
      console.log(error);
    }
  };
  useEffect(() => {
    // console.log(keycloak);
    if (keycloak?.token || keycloak?.authenticated) {
      navigation.navigate("HomeScreen");
    }
  }, [keycloak]);
nemanjarocks commented 1 year ago

In my case, after successful login in-app-browser is just closed and I am on the same screen I was before, although I specified different screen in redirectUri. Deeplinking is working, i tested it through console and browser.

0xmtn commented 10 months ago

Have you found a solution @HammadAhm3d ?