React-native-auth0: Webauth not returning to app when using React Native Navigation

[rayshih]

It can open the login page, and I can log in with my google account, which can be confirmed by checking the dashboard.

However, after the google login, it will stop there. Won't redirect/close the login screen.

I've used "Deep Link Tester" to confirm that the intent filter works.

[rayshih]

Seems like this problem doesn't limit to Google login

[rayshih]

I think I found the problem, seems like the onHostResume get called way faster than the Linking event handler callback.

The process is like following:

1. user press login button -> trigger the authorize function
2. this library helps us to open the login page which may be by CustomTabsIntent or by using startActivity and the system will launch an external browser for that
3. after the user logged in, it will use the deep link to go back to the app
4. react native's Linking event callback should catch the URL of the deep link.

It will register the linking event handler between step 1 and 2. And there are two callbacks will be triggered after landing back the app:

• The LInking event callback
• The onHostResume callback

And you can see in the onHostResume, because the callback has never been cleared, so it will trigger the user-canceled-login callback:

    @Override
    public void onHostResume() {
        if (this.callback != null) { // because callback hasn't been cleared
            final WritableMap error = Arguments.createMap();
            error.putString("error", "a0.session.user_cancelled");
            error.putString("error_description", "User cancelled the Auth");
            this.callback.invoke(error);
            this.callback = null;
        }
    }

      // this callback will be triggered with err
      NativeModules.A0Auth0.showUrl(url, closeOnLoad, (err) => { 
        Linking.removeEventListener('url', urlHandler);
        if (err) {
          reject(err);
        } else if (closeOnLoad) {
          resolve();
        }
      });

and within this callback, it will remove the deep link event handler.

This is a race condition, if the onHostResume got triggered before Linking event callback, it won't work.

---

I can modify it to make it somehow act as it works:

• remove the function body of onHostResume, and
• force it uses startActivity

For the former modification, it is an incomplete solution, we should have a correct way to clear the callback and also ensure the error handle still works.

And for the later modification, it seems like the CustomTabsIntent won't close itself. And because of that, the app will stay in inactive state, and cannot receive the linking event.

I'm not sure whether it is related to this https://github.com/auth0/react-native-auth0/issues/47

[rayshih]

Here is a little more information about the package versions:

react-native: 0.42.3
react-native-auth0: 1.1.1

[madbean]

Great !
I have the same problème and can t find what is the mistake 😭

Can you make some gist for the temporary fix ?
This could be awesome !
Thx for this.

[rayshih]

@madbean Thanks, but I don't think the method I used can be qualified as a valid temporary fix. Still waiting the project owner's opinion

[renrizzolo]

@rayshih I'm having a similar problem

currently if I close the tab manually after login, I get user cancelled auth error (even though the login is successful).

I've managed to get the deep link to close the custom tab by adding:

            customTabsIntent.intent.addFlags(Intent.FLAG_ACTIVITY_NO_HISTORY);
            customTabsIntent.intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);

before customTabsIntent.launchUrl(activity, Uri.parse(url)); in A0Auth0Module.java

However the problem of the onHostResume callback is still there - it thinks the user closed the tab/cancelled login so the error is thrown.

The only way I can get it to login is by removing the onHostResume body, but this means I have no error handling :/

[rayshih]

@renrizzolo Cool! What if we add some delay for the onHostResume body? Of course, it is a hot fix but should work in most of the case. What do you think?

[cocojoe]

@rayshih @renrizzolo I just tried a Google connection Login with the Sample Project. https://github.com/auth0-samples/auth0-react-native-sample
I did not have any issues with authentication, the browser was closed after authentication was complete (I was also using MFA)

Please can you try the the sample and see if you can recreate the issue and provide steps to do so. Thx

[renrizzolo]

@rayshih I have zero Java experience but this hack is working for me!
```
@Override
public void onHostResume() {
this.callback = callback;
new android.os.Handler().postDelayed(
new Runnable() {
public void run(){
if (callback != null) {
final WritableMap error = Arguments.createMap();
error.putString("error", "a0.session.user_cancelled");
error.putString("error_description", "User cancelled the Auth");
callback.invoke(error);
callback = null;
}
}
}, 1000);

}

```

@cocojoe I am doing some investigation with the example app, I have boiled it down to react-native-navigation (I already suspected this as this started happening after I switched to that from react-navigation).

I added RNN to the example project and the custom tab does not close.
Manually closing the tab after successful login causes a0.session.user_cancelled.
Opening the tab in chrome then logging in will return to the app, but cause the error as above.
Regular deep links/intent works.

@rayshih are you using RNN also?

RNN has you extend NavigationApplication in your MainApplication rather than the regular ReactApplication

I'm not sure if this is of any help but this is the main NavigationActivity:
NavigationActivity.java

There's also IntentDataHandler.java

[rayshih]

@renrizzolo Cool!! Yes, I use RNN, too

Sounds like we found the exact cause of this issue. It indeed is a race condition. And I think the solution provided by @renrizzolo is ok. Not sure whether there is a better way

[renrizzolo]

@rayshih ahh, there we go.

@cocojoe FYI fork of example app with RNN added here https://github.com/renrizzolo/auth0-react-native-sample

[cocojoe]

@renrizzolo thanks for your example, I added iOS support to it and just to confirm that works fine. (I need to check both platforms)

My test setup is using Emulator - Nexus 5X API 23. I am unable to use the Google connection, I am thrown back with user cancelled. In your notes you are able to navigate to google auth?

The close tabs appear to be an issue in general and is raised/confirmed in #87

I'm not an Android guy so let me discuss this internally, Thx.

[renrizzolo]

Hi @cocojoe, thanks for your help on this

OK I tried with Nexus 5X API 23, seems that because it opens in the external browser it will return to the app (but still has the race condition with the callback). The delay added to onHostResume makes it work.

Also worth noting that https://github.com/auth0/react-native-auth0/pull/90 does not fix the custom tab closing for this react-native-navigation version, I also need to add FLAG_ACTIVITY_NEW_TASK.

And to clarify, this issue is for any auth (not just google) despite the title.

[rayshih]

Hey guys, I've forked and added some hotfix here. Would you mind that I create a PR?

[cocojoe]

@rayshih PRs are always encourage, so please do. There are enough people in this thread to help test. Thx

[cocojoe]

@rayshih @renrizzolo please confirm no issues now with react-native-navigation and react-native-auth0 1.2.1?

It would be great if you could help both confirm the version of react-native and react-native-navigation you are using along with your test setup e.g. API version, browser used.

Thanks

[renrizzolo]

@cocojoe just tested and working with my setup of [email protected] and [email protected]
I'm using customtabs:25.0.1

[chenbekor]

the fix suggested by @renrizzolo is not working for me on real Android device. Auth0 is opened in an external browser and there is an endless progress bar. if I manually close the app and reopen it, I can see that I'm logged-in, meaning, Auth0 call was OK but the navigation back to the app is broken.

I also tried to increase the delay in the workaround code from 100ms to 1000ms and 5000 ms without any success.

Any idea how to fix that?

[cocojoe]

No idea without more information, the first step in any issue is being able reproduce it.

Please open a new issue and provide a simple reproducible project forked from the sample login. https://auth0.com/docs/quickstart/native/react-native

What version of Android SDK, what browser/version etc
Also a video would be great.

Thanks

[davidroman0O]

The problem still persist in 1.2.1 :/
react-native 0.49.3

[cocojoe]

@davidroman0O My advice is the same as my last post. I can investigate but I need a reproducible sample and specifics to replicate your own testing environment. Thanks

[kristiansorens]

Hi Guys,

Also ran into this issue and have not been able to fix it. Tested on the fork from @renrizzolo with latest react-native-navigation (v.1.1.407) and latest react-native-auth0 (v.1.2.2). As reported, after login the page will stay in loading mode and never return to the app.

@renrizzolo did you manage to get past this issue, or can anyone else chip in?

All help is really appreciated!

[renrizzolo]

@kristiansorens @cocojoe this PR is the cause #126

Putting

customTabsIntent.intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); 

back in at Line 63 will fix the problem with not returning to the app after logging in.

I guess this conflicts with the problems described in #124 (needing to switch to another app to copy verification code) - I'm not sure if / how we can satisfy both.

With the above fix, the Sign In tab will always be in the recent apps stack, even after logging in. (maybe this is already the case for the current version of the lib).

[cocojoe]

@lbalmaceda can you have a look at this please.

[kristiansorens]

@renrizzolo tried your fix above, but I still experience the same. Do you have a working example with RNN and Auth0 that i can have a look at?

[renrizzolo]

@kristiansorens I just tested with https://github.com/renrizzolo/auth0-react-native-sample (upgraded to [email protected] and [email protected]) and it works after adding the FLAG_ACTIVITY_NEW_TASK flag back in.

Are you sure everything is right in your AndroidManifest.xml? e.g launch mode and Intent filter.
Could be an android version thing?? I'm running on a 7.0 device.

[lbalmaceda]

@renrizzolo I think that's because of how react-native-navigation works. According to this they handle everything on a new activity, so the callbacks defined in our library won't work because they are overridden on the ReactActivity rather than with the setActivityCallbacks method available for SplashActivity.

[renrizzolo]

@lbalmaceda I see.
Is it possible to hook into those callbacks instead? (something along the lines of this issue for using the facebook sdk with RNN https://github.com/wix/react-native-navigation/issues/410)

Apologies as I'm not really familiar with java or android dev.

[lbalmaceda]

I don't think so, at least not generically since adding that modification will force users that are not using react-native-navigation to require that library anyway AFAIK.
I'll look in the future if this is possible without affecting other users too much, but note this is not a priority for us right now since it's not an SDK issue. On the meantime, the alternative is that anyone using react-native-navigation modifies this class and calls the correct callbacks. I'll reopen the issue as a reminder. 👍

[renrizzolo]

@lbalmaceda No worries, I understand. Thanks!