Deep linking issue on Android

[joe307bad]

I believe I am running into an issue with linking on Android. It seems to be the #state=... portion that is throwing react-navigation off from picking up the link. Testing deeping linking works via CLI: npx uri-scheme open io.act.auth://CreateCheckin --android.

Heres is my linking config:

prefixes: ["io.act.auth://"],
config: {
  screens: {
   CreateCheckin: {
     path: "CreateCheckin"
    }
  }
}

Here is the redirect URI that react-navigation is trying to parse:

io.act.auth://CreateCheckin#state=978f7de7-42a1-424d-bacd-53a746c030ab&session_state=0436a428-d734-490f-a3bc-812712458efd&code=6627fcff-abac-4139-99b7-54ed2d2a9fee.0436a428-d734-490f-a3bc-812712458efd.011ac3f2-b54f-419d-8108-6b1b67bd3f12

What would be the proper config to match the #state... portion?

Originally posted by @joe307bad in #27 (comment)

[oneil-marcelo]

Hi @joe307bad.
We set it up this way and it worked perfectly.
I hope it helps you

import 'react-native-gesture-handler';
import React, { useRef, useEffect } from 'react';
import { StatusBar } from 'react-native';
import { useLinking, NavigationContainer } from '@react-navigation/native';
import { RNKeycloak, ReactNativeKeycloakProvider } from '@react-keycloak/native';

import Routes from './routes';

const keycloak = new RNKeycloak({
  url: "my_url_keycloack",
  realm: "name_my_realm",
  clientId: 'my_client_id',
});


const App: React.FC = () => {
 
 const ref = useRef(null);

  const { getInitialState } = useLinking(ref, {
    prefixes: ['my_prefix://'],
    config: {
      screens: {
        signinkeycloak: 'signinkeycloak',
      },
    },
  });

  const [isReady, setIsReady] = useState(false);
  const [initialState, setInitialState] = useState<any>();

  useEffect(() => {
    getInitialState().then((state) => {
      if (state !== undefined) { setInitialState(state); }
      setIsReady(true);
    });
  }, [getInitialState]);

  if (!isReady) return null;

  return (
    <ReactNativeKeycloakProvider
      authClient={keycloak}
      initOptions={{
        redirectUri: 'my_prefix://signinkeycloak',
        inAppBrowserOptions: {
          modalPresentationStyle: 'fullScreen',
          enableBarCollapsing: false,
          modalEnabled: true,
          ephemeralWebSession: true,
          dismissButtonStyle: 'ok',
        },
      }}>
      <NavigationContainer initialState={initialState} ref={ref}>
            <StatusBar barStyle="default" backgroundColor="transparent" />
            <Routes />
      </NavigationContainer>
    </ReactNativeKeycloakProvider>
  );
};

export default App;

[joe307bad]

Thanks @oneil-marcelo! What does your Routes component look like?

[oneil-marcelo]

The Component was like this

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';

import SignInKeycloak from '../screens/SignInKeycloak';
import OthersPage from '../screens/OthersPage';

const Routes: React.FC = () => {
  const { Navigator, Screen } = createStackNavigator();

  return (
    <Navigator>
      <Screen name="signinkeycloak" component={SignInKeycloak} />
      <Screen name="othersPage" component={OthersPage} />
    </Navigator>
  );
};

export default Routes;

[joe307bad]

Thanks a ton @oneil-marcelo, I did get it working it seems.

I added this as my valid redirect URI in keycloak:

io.act.auth://io.act.host/CreateCheckin/*

Then I had this as my ReactNativeKeycloakProvider:

<ReactNativeKeycloakProvider
      authClient={keycloak}
      initOptions={{
        redirectUri: 'io.act.auth://io.act.host/CreateCheckin/'
      }}
    >
      <Root.make />
</ReactNativeKeycloakProvider>

And then finally my linking config:

linking: {
    prefixes: ["io.act.auth://io.act.host/"],
    config: { screens: { CreateCheckin: "CreateCheckin/:id" } } 
}

[oneil-marcelo]

Excellent, congratulations @joe307bad !