Login/Register
How to redirect user inside mobile app after email verification, react-native?
Asked Answered
react-nativedeep-linkingfirebase-dynamic-links
D

1

6

Description::

I am working on react native app. My app is having login and signup page. After signup I am sending an email to user to verify account. User will get a link to verify account, after clicking on that link I am redirecting user to url where I am verifying him. Now I want to redirect the user inside "my app" verification screen if he is verifying using mobile phone.

How it's done using react native?

Here how I can move user inside "my app" after redirecting to email verification link?

I am using Deep Link concept to redirect user inside app. Step I have followed are mentioned below:

For Android::

I have added this inside AndroidManifest.xml file::

 <activity
    android:name=".MainActivity"
    android:launchMode="singleTask"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize">

and added data as follows::

<intent-filter android:label="filter_react_native">
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data
      android:scheme="http"
      android:host="myurl"
      android:pathPrefix="/verify-email"/>
</intent-filter>

After this I have added this code inside my app.js file::

componentDidMount() {
    console.log('hi');
    Linking.addEventListener('url', this._handleOpenURL);
}
componentWillUnmount() {
    Linking.removeEventListener('url', this._handleOpenURL);
}
_handleOpenURL(event) {
    console.log('url', event.url);

When I am hitting this url "http://myurl/verify-email/demo" I am not getting any data in console and it's not opening my app. I am running my app on debug mode.

This is also possible with Firebase Dynamic Links, but can someone tell me which method is best among them?

And for "Firebase Dynamic Link" where should I add code to handle dynamic link throughout the app??

Debbi answered 25/12, 2019 at 10:31 Comment(0)
R
1

You can't directly set redirect_uri to your mobile app ( because most auth providers doesn't support custom OAuth scheme ).

But you can create some web page that will accept redirect from OAuth providers and will open your app ( and send all redirect params, like token ). For example you create page https://example.com/oauth/ and set callback_url to https://example.com/oauth/XXXXX_provider, so when user will be redirected to page https://example.com/oauth/XXXXX_provider&token=xxx it will open you app using appName://example/oauth/google?token=xxx You can handle appName://example/oauth/google?token=xxx using Deeplink ( it will open your mobile app when it is installed on device )

Example of page to handle redirects:

<html><head></head><body>
<p>Please wait while we redirect you to Your APP NAME...</p>
<p><a href="javascript:redirectToApp()">Open appname</a></p>
<script>
var redirectToApp = function() {
var scheme = "appnameapp";
var openURL = "appname" + window.location.pathname + 
window.location.search + window.location.hash;
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
var Android = /Android/.test(navigator.userAgent);
var newLocation;
if (iOS) {
  newLocation = scheme + ":" + openURL;
} else if (Android) {
  newLocation = "intent://" + openURL + "#Intent;scheme=" + scheme + 
";package=com.appnameapp;end";
} else {
  newLocation = scheme + "://" + openURL;
}
console.log(newLocation)
window.location.replace(newLocation);
} window.onload = redirectToApp;
</script>
</body></html>

But yes WebView by default doesn't share cookies/session data with Safari/Chrome. So it is not ideal for login flow since it doesn't use the existing logged in session in Chrome/Safari.

Expo provides a WebBrowser api that will open Safari/Chrome instead of webview. Note that it opens Safari/Chrome inside the app, instead of redirecting you the browser using Linking. So users always have a button in the browser to get back to your app.

You can use WebBrowser.openAuthSessionAsync(url) to open a secure session which shares cookie/session info with the native browser in the device.

Expo also provides another api called AuthSession that simplifies a lot of boilerplate and provides a simple api.

Deeplinking orignal

Respiratory answered 25/12, 2019 at 10:38 Comment(7)
Hey, actually I am asking about how I can redirect user inside "my-app" when verifying user through browser link? Whenever I am clicking on verify-email link it opens "very-url" in browser now after it's success response how I can redirect user inside "mobile-app"?? – Debbi
I am already using deep link concept. I have added componentDidMount() { Linking.addEventListener('url', this._handleOpenURL); }, componentWillUnmount() { Linking.removeEventListener('url', this._handleOpenURL); }, _handleOpenURL(event) { console.log(event.url); } this code inside my aap.js file and updated android manifest file. when I am hitting url nothing happened. Any solution? That's why I asked how to redirect inside app because I got stuck on very first step. – Debbi
create a html page and do like i updated html in my answer – Respiratory
Is this necessary to add this code inside my html page(where I am redirecting user)?? because "deep link" docs not having anything depends on html page, they simply told to add code inside react native source to handle response and native code to detect url inside android and iOS. – Debbi
yes you have to set a link in html , so it will know where to push user after auth. – Respiratory
I have added this code inside my html page but nothing happened. Please tell me what will be the AndroidManifest.html file code?? Is there any change inside AndroidManifest?? – Debbi
read the orignal documentation of deep linking there will be a minor error , cheack my answers last line , i cant able to locate error in yur code because your code is all clear. – Respiratory

© 2022 - 2024 — McMap. All rights reserved.