v.5.0.0-beta2 and beta4 After login with `authorize` app deep links to the callback url which causes the app to land on the not found screen.

[letidev]

Checklist

• The issue can be reproduced in the react-native-auth0 sample app (or N/A).
• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

After upgrading to Expo SDK 53, I upgraded the auth0 package to v5.0.0-beta4 but after taking a look at issue #1259 I downgraded to beta2 as it mentions that it's more stable than beta4. The issue was present with both versions.

Here's the setup:

app
|--- (app) <-- protected routes
|    |--- (tabs)
|    |    |--- _layout.tsx
|    |    |--- index.tsx
|    |--- _layout.tsx
|
|--- _layout.tsx
|--- login.tsx

In the RootLayout which is in app/_layout.tsx we have:

export default RootLayout = () => {
  const { isLoggedIn } = useAuthContext()

  console.log("Pathname: ", usePathname())

  return (
   <Stack>
      <Stack.Protected guard={isLoggedIn}>
        <Stack.Screen name="(app)" />
      </Stack.Protected>

      <Stack.Screen name="login" />
    </Stack>
  )
}

On the login screen, after authorize from useAuth0 resolves successfully I do router.replace("/")

If we monitor the pathname that is console logged in the root layout we observe the following:

Pathname: /login
Pathname: /the-auth0-callback-url (which has this layout - <BUNDLE_IDENTIFIER.auth0://DOMAIN/ios/BUNDLE_IDENTIFIER/callback>
Pathname: /

It seems like the app tries to deeplink to a screen with the callback url route (which obviously doesn't exist) so we end up at the not found screen and then the redirect from the login screen takes place.

Reproduction

see above

Additional context

No response

react-native-auth0 version

5.0.0-beta2

React Native version

0.79.5

Expo version

53.0.0

Platform

iOS

Platform version(s)

IOS 18.5

[subhankarmaiti]

Hi @letidev,
The redirection from the callback is managed internally by the library, so you don't need to define any explicit route to handle it manually.

For Expo applications, you can follow the setup instructions in the Expo section of the Auth0 React Native SDK README.
Additionally, please refer to the Auth0 React Native Expo Quickstart guide for a detailed walkthrough of the setup.

Also check the migration guide here, if you are migrating from previous version.

[letidev]

Hey @subhankarmaiti,

I've taken a look at the setup instructions and the migration guide. I am migrating from v4 and I have been using Auth0 in my app for over a year now. It seems like I have set up everything properly the problem still persists.

On the login screen I have:

const onLoginPress = async (loginType: LoginType) => {
  const credentials = await loginUser(loginType)

  if (credentials) {
    router.replace("/")
  }
}

where loginUser is a custom method but in the end it just calls authorize and returns the credentials. After a successful login - I replace the login screen with the home screen of the app.

But what started happening after upgrading to expo 53 and auth0 to v5 is that after log in, I see the not found page for about a second and then it snaps back to the actual home screen.

When I monitor the changes in the navigation, I see that something causes the app to try to navigate to a url that is /the-callback-url so we land on the not-found screen.

Monitoring the changes in the history shows:

Pathname: /login
Pathname: /my-bundle-id.auth0://my-domain/ios/my-bundle-id/callback
Pathname: /

Something is causing the app to navigate to a screen with a URL of the callback URL and after that the login screen replaces the current screen with / so we see the jump from /login -> not found -> /.

This is what I am trying to figure out - why does this happen and what causes the app to try to navigate to this non existent URL.

[letidev]

@subhankarmaiti An update from my side: I switched to a branch where I'm still on Expo 52 and Auth0 v4 and logged the navigation changes again and this doesn't happen there:

• I'm on /login
• I start logging in - the browser opens on top of the app
• after successful log in, the browser closes
• /login screen redirects to /

There is no intermediary navigation going on. So the logs I see are just:

Pathname: /login
Pathname: /

So in v5 something in authorize makes the app to try and navigate to /callback-url instead of to just close the browser.

[subhankarmaiti]

@letidev would you be able to share your navigation configuration and a sample application.
also which SDK version you are migrating from ?

[wongk]

I am able to reproduce this issue. Social login with either Google or Apple. We have been using Auth0 and the 5.0.0 beta since beta 2 without issue. Today I updated from beta.3 to beta.4 and now I am seeing this error:

[wongk]

I just rolled back to beta.3 and this is working again.

[subhankarmaiti]

Hi @wongk ,
Thanks for the update. We’ll review it and share our findings here.

[hugoecken]

Hi,
I'm using react-native-auth0 v5.0.0-beta2 and experiencing the same issue already discussed.

It was working well with V4 in the past.

When I log in, the app navigates to the callback URL (which isn’t defined as a route), showing the "Unmatched Route" screen (screenshot below).

The callback URL looks like:

blockout:///dev-xxx.eu.auth0.com/ios/com.blockoutproject.blockout/callback

My file structure:

app/
├── _layout.tsx
├── sign-in.tsx
├── (app)/
│   ├── _layout.tsx
│   └── index.tsx ← main/home screen

Routing setup

app/_layout.tsx:

function RootNavigator() {
  const { session } = useSession();

  return (
    <BottomSheetModalProvider>
      <Stack screenOptions={{ headerShown: false }}>
        <Stack.Protected guard={session}>
          <Stack.Screen name="(app)" />
        </Stack.Protected>
        <Stack.Protected guard={!session}>
          <Stack.Screen name="sign-in" />
        </Stack.Protected>
      </Stack>
    </BottomSheetModalProvider>
  );
}

Auth logic

SessionProvider.tsx:

const { user, authorize, clearSession } = useAuth0();

const signIn = async () => {
  await authorize(
    {
      audience: 'https://api.blockoutproject.com/',
      scope: 'openid profile email offline_access',
    },
    { useSFSafariViewController: true }
  );
};

const signOut = async () => {
  await clearSession();
};

Let me know if there’s any additional configuration I should be applying to handle this properly. Thanks!

[letidev]

Hey, @subhankarmaiti I am unable to provide a sample application at the moment (I'm on my phone) but I have found a workaround for now.

@hugoecken - here's what worked for me for now:

In app/ create a special file called +native-intent.tsx and in it:

export function redirectSystemPath ({ path, initial }: { path: string, initial: boolean }) {
  if (path.includes("auth0")) {
    return "/"
  }

  return path
}

And that's all! This is executed before expo-router starts routing, otherwise if you try with some hooks etc in the layout files and to use Linking - it's already too late. Here's also the reference in the Expo docs (this took some time to find that this even exists haha) - https://docs.expo.dev/router/advanced/native-intent/

Hope this helps!

edit: I tested both on beta v2 and v4 and experienced the same issue as described above.

[hugoecken]

Thanks @letidev, it works for me. Hope this issue gets patched soon 😃

[subhankarmaiti]

Hi @letidev ,
Although the navigation was working for me but I do able to see the below log. and it looks like its only iOS specific.

🔄 Navigation changed - Pathname: /my-bundle-id.auth0://my-domain/ios/my-bundle-id/callback

We plan to address this in an upcoming release.

[letidev]

@subhankarmaiti great, thank you!