Supabase Redirect URL not working for Deeplinking

Question

I am using Supabase for Auth with React Native and using React Navigation. When the user requests for password reset I set a redirect URL myApp://updatepassword. This link comes back with the link in the email but only always opens the initialRoute/first route on the navigation stack. I am using React Navigation. Note: myApp://updatepassword works as expected when I run it in the browser on the device or simulator. Is it possible Supabase only takes the first part of my route? That is myApp://?

I tried to set the redirect directly on the Supabase console as well as in the callback directly. I always get the right link (https://...supabase.co/auth/v1/verify?token=&type=recovery&redirect_to=myApp://updatepassword/) but still matches only the initial or first route on the stack. I saw an issue that says it needs the trailing slash but still doesn't work. Any ideas why would be appreciated.

Answer 1

In case anybody runs into something similar. Turns out it's as a result of the # URL fragment in Supabase and React Navigation does not work with #. Using the getStateFromPath we can get the URL and replace # to access the URL properly with React Navigation. Like so:

import { getStateFromPath } from '@react-navigation/native';

const linking: LinkingOptions<RootStackParamList> = {
  prefixes: [prefix],
  config: {
    screens: {
      updatepassword: 'updatepassword'
    }
  },
  getStateFromPath: (path, options) => {
    const accessiblePath = path.replace("#", "?");

    return getStateFromPath(accessiblePath, options);
  },
};

This was answered here by @suchardao https://github.com/supabase/supabase/discussion/10754#discussioncomment-4401396.