Navigation is unreachable in Chrome Custom Tabs when redirecting from B2C login screen back to Android Custom URI scheme

Question

We have an Android app we are building in Flutter, that uses Azure B2C for authentication.

We previously had our authentication flow running in a WebView, we got the authorisation grant, opened the login url, entered the credentials then were redirected back into the app using our custom uri scheme and received an access token.

Since using a WebView for authentication is considered bad practice we have moved the authentication flow to use Chrome Custom Tabs as recommended by Google.

But since moving to Chrome Custom Tabs, we cannot get the browser to redirect back to our custom URI, we get the following error when inspecting the browser in Google Chrome DevTools...

Navigation is unreachable: msauth://com.ourapp.app/ourdevelopmenthash/?code=eyJraWQ...

We have setup our Android manifest, development hash and custom uri scheme according to this MSDN article. Our AndroidManifest is configured with the following activity intent to handle the redirect to the custom uri scheme as below...

How do we get our redirect URI to work with Chrome Custom Tabs, as it did with the WebView?

Answer 1

@Greg Quinn

To change this behavior, open the app/src/main/res/raw/auth_config_b2c.json file. Then add the authorization_user_agent attribute with the BROWSER value.

"authorization_user_agent" : "BROWSER"	

If this does not solves the issue then please share the B2C Default View code for integration.

Also, the following browsers have been tested to see if they correctly redirect to the "redirect_uri" specified in the configuration file:

Update1:

I'm glad that you were able to resolve your issue and thank you for posting your solution so that others experiencing the same thing can easily reference this! Since the Microsoft Q&A community has a policy that "The question author cannot accept their own answer. They can only accept answers by others ", I'll repost your solution in case you'd like to "Accept " the answer.

Issue: Cannot get the browser to redirect back to our custom URI when using Chrome Custom Tabs , we get the following error when inspecting the browser in Google Chrome DevTools...

Navigation is unreachable: msauth://com.ourapp.app/ourdevelopmenthash/?code=eyJraWQ...

Solution: Moving from the chrome_custom_tabs flutter package to flutter_app_auth package resolved the issue.

If you have any other questions or are still running into more issues, please let me know. Thank you again for your time and patience throughout this issue.

Please remember to "Accept Answer" if any answer/reply helped, so that others in the community facing similar issues can easily find the solution.

Thanks,

Akshay Kaushik

Answer 2

We resolved the issue by moving from the chrome_custom_tabs flutter package to flutter_app_auth package which resolved the issue.