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

Question

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];
}
...

@hardikparmar I am literally using `$(PRODUCT_BUNDLE_IDENTIFIER)`, that is not a place holder representation. That is what the `CFBundleIdentifier ` in the info.plist was initially set to via create-react-native-app. If I open the project in xcode, the bundle identifier is `org.reactjs.native.example.Dieta` — Jamie Buck, Nov 27 '18 at 13:27
@hardikparmar I tried replacing `$(PRODUCT_BUNDLE_IDENTIFIER)` with `org.reactjs.native.example.Dieta` in both locations in the Info.plist and am still seeing the same issue — Jamie Buck, Nov 29 '18 at 20:14
Go to safari and type this same url (`org.reactjs.native.example.Dieta`) and see if it opens the app or not. — hardik parmar, Nov 30 '18 at 02:27
@hardikparmar it does not - it just runs a google search for that — Jamie Buck, Dec 01 '18 at 18:33
I meant try the callback URL: `org.reactjs.native.example.Dieta://` — hardik parmar, Dec 01 '18 at 18:37
@hardikparmar entered `org.reactjs.native.example.Dieta://dieta.auth0.com/ios/org.reactjs.native.example.Dieta` into safari on the iOS emulator and got the same "Safari cannot open because the address is invalid" modal. — Jamie Buck, Dec 04 '18 at 01:14
Open this URL that I earlier mentioned in the comment: `org.reactjs.native.example.Dieta://` — hardik parmar, Dec 04 '18 at 05:04
@hardikparmar same thing... "Safari cannot open the page because the address is invalid." — Jamie Buck, Dec 04 '18 at 22:56
@JamieBuck for me it ended up being a combination of using react-native-rename, and checking info.plist making sure the bundle id is consistent with the one listed in XCode. Hope that helps. Dieta - sounds like dieta and data.. cool name — bneigher, Feb 05 '19 at 18:25
@bneigher that's how I got it working too! Spot on with the name... Dieta = Diet + Data. Got something big cooking — Jamie Buck, Feb 08 '19 at 02:21

score 1 · Answer 1 · answered Aug 19 '20 at 17:36

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

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
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.

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

1 Answers1

Linked