Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native iOS "Safari cannot open the page because the address is invalid" after valid login

Getting the following after successful login. The login flow is working as expected on Android, and correctly returns token, refresh, etc...

"Safari cannot open the page because the address is invalid"

Screen Recording of Error

Auth0 Callback Config

Info.plist

...
<key>CFBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>None</string>
        <key>CFBundleURLName</key>
        <string>auth0</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
        </array>
    </dict>
</array>
...

AppDeligate.m

...
#import <React/RCTLinkingManager.h>
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  return [RCTLinkingManager application:application openURL:url
                      sourceApplication:sourceApplication annotation:annotation];
}
...
like image 543
Jamie Buck Avatar asked Oct 19 '25 01:10

Jamie Buck


1 Answers

I ran into the same issue (while working with Auth0, and the answer sort of depends on the solution they have provided here - https://auth0.com/docs/quickstart/native/react-native)

Also, some inputs from another answer from here - "Safari cannot open the page because the address is invalid" appearing when accessing Branch link with app uninstalled

Eventually, it boils down to this

  1. Starting from iOS 9.2, Apple no longer officially supports URI schemes for deep linking, and developers are strongly advised to implement Universal Links in order to get equivalent functionality on iOS
  2. To get over this, you have to enable this app linking to work. One option is that (check the linked stack answer) the service provider who wants this to happen will provide a universal link.

Another option (code snippets below) is to add a 'URLScheme'

#import <React/RCTLinkingManager.h>

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options
{
  return [RCTLinkingManager application:app openURL:url options:options];
}

Step Two

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>None</string>
        <key>CFBundleURLName</key>
        <string>auth0</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
        </array>
    </dict>
</array>

That is what fixed the issue for me (when working with Auth0 library, but whatever library you are using should have something similar to work with). This essentially overcomes the apple/iOS limitation of app links which is the reason you got the original safari error.

like image 143
Jay Avatar answered Oct 21 '25 16:10

Jay



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!