Skip to content
This repository was archived by the owner on Jan 20, 2026. It is now read-only.
This repository was archived by the owner on Jan 20, 2026. It is now read-only.

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

Description

@HammadAhm3d

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions