react-native-keycloak icon indicating copy to clipboard operation
react-native-keycloak copied to clipboard

Cannot redirect to a specific screen after a successful login.

Open HammadAhm3d opened this issue 2 years ago • 2 comments

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]);

HammadAhm3d avatar Apr 18 '23 10:04 HammadAhm3d

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.

nemanjarocks avatar Aug 29 '23 14:08 nemanjarocks

Have you found a solution @HammadAhm3d ?

0xmtn avatar Nov 04 '23 12:11 0xmtn