Auth0 React Native - Safari cannot open the page because the address is invalid

Question

I have done this in all the right ways and have encountered such a problem.

Answer 1

Native configuration

Auth0 will need to handle the callback of the hosted login authentication.

Android

In the file android/app/src/main/AndroidManifest.xml you must make sure the main activity of the app has launchMode value of singleTask and that it has the following intent filter.

 <activity
  android:name=".MainActivity"
  android:label="@string/app_name"
  android:launchMode="singleTask"
  android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
  android:windowSoftInputMode="adjustResize">
  <intent-filter>
      <action android:name="android.intent.action.MAIN" />
      <category android:name="android.intent.category.LAUNCHER" />
  </intent-filter>
  <intent-filter>
     <action android:name="android.intent.action.VIEW" />
     <category android:name="android.intent.category.DEFAULT" />
     <category android:name="android.intent.category.BROWSABLE" />
      <data
        android:host="yakupad.eu.auth0.com"
        android:pathPrefix="/android/${applicationId}/callback"
        android:scheme="${applicationId}" />
   </intent-filter>
  </activity>

iOS

In the file ios//AppDelegate.m add the following:

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

Next you will need to add a URLScheme using your App's bundle identifier.

Check the info.plist for the existing bundle identifier e.g.

 <key>CFBundleIdentifier</key>
 <string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier).    </string>

You can then register the identifier by adding the following snippet:

 <key>CFBundleURLTypes</key>
 <array>
    <dict>
       <key>CFBundleTypeRole</key>
       <string>None</string>
       <key>CFBundleURLName</key>
       <string>auth0</string>
       <key>CFBundleURLSchemes</key>
       <array>
         <string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier).   </string>
    </array>
</dict>