Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
HammadAhm3d opened this issue Apr 18, 2023 · 2 comments
Open

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

HammadAhm3d opened this issue Apr 18, 2023 · 2 comments

Comments

@HammadAhm3d
Copy link

HammadAhm3d commented Apr 18, 2023

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
Copy link

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
Copy link

0xmtn commented Nov 4, 2023

Have you found a solution @HammadAhm3d ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants