Mar 6
React Native Deep Linking Tutorial — Real Life Case
Hello everyone,
In this post, I am going to talk about the email verification problem from my current project and explain how I fixed it with deep linking.
I have a function which is consumed by web and mobile applications. (react-native / Android — iOS) The process is simple. A customer is going to enter its new email address and the function is going to send an email to the customer. If the customer clicks the link from the email, a verification process is going to start on the mobile or web app.
The source code has a similar verification process from the past but it is not suitable. Because, it creates a specific link by the consumer type. If a customer starts its process from the mobile app, the backend function creates a mobile specific verification link and the customer can not complete the process from the web app. Also, if the customer starts its process from the web app, it creates a web specific verification link and the customer can not complete the process from the mobile app. It is possible to complete the process from the mobile device’s browser but not from the app.
As a result of this link problem, I decided to integrate deep linking to the project. I used the Universal Links and the URL scheme as types of deep linking. The integration steps are;
- Verification in the web application. (With separate json files for android and iOS)
- Verification in the React native App. (With separate configurations for android and iOS)
- Specific redirections in the react-native app.
Let’s get started from the first step.
I have to verify the mobile apps in the web app. For this, I created apple-app-site-association and assetlinks.json files in the root/.well-known folder. Both of them json files but Apple’s one does not include a file extension. It is a rule decided by Apple. Basically, those json files have some application information and if a mobile device has those defined applications, the website is suggesting a customer to use the application or using it directly.(It depends OS / previous usage.) It is possible to define some extra properties in those json files but I am going to use a basic integration.
A sample json file for Apple is like the above. It is possible to define multiple applications. In this json file, the appID field should be updated with team id + package information. It is possible to find the package information from iOS/projectName/info.plist file and also, it is possible to find TeamID information from the Apple Developer account. The URL for this information is in here. Also after deploying the json file to the server, it is possible to verify it from here.
A sample json file for the android app is like the above. I have 4 different items in my json file because I am using different keystore files and package names for each environment. It is possible to find the package name from android/app/build.gradle file and to get SHA256 cert fingerprints, the following command should be run in the command prompt/terminal.
keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
Now, the first step is done. In the second step, I am going to do a similar process in the react-native app. The app should have some information about the website. (URL)
To complete the second step for Apple, the project should be opened via Xcode. After opening the project, from the left side bar, the project properties should be opened. (Double click to the project tree root.) In the opened page, the mobile app should be selected. (Usually it’s the first one.) After selecting the right project, the Signing & Capabilities tab should be selected from tabs. As a last step, the website domain/domains should be added to Associated Domains part.
A sample;
applinks: example.com
applinks: subdomain.example.com
It is possible to add multiple domains but each domain should have apple-app-site-association json file in the server.
To complete this step for Android, the AndroidManifest.xml file should be updated. I am going to define my domain/domains for the android app. This change is going to be in the AndroidManifest/Activity tag. A sample change is like the following. I have multiple domains and because of that I defined a lot of data tags. It is possible to define a single tag. Also I used .* path pattern because I am going to handle multiple URLs in the app. The app is going to open the home page for unmatched URLs.
Now, all definitions are ready for the current problem. The website knows mobile apps and mobile apps know the website. Now, I have to match URLs with the specific screens.
Now, the application is ready to listen to Links from permitted URLs. I am going to create a new file for all defined redirection cases and a new function to recognize the web url and match it internally.
This function is going to be in the App.tsx/App.js file and going to work on each launch. This function checks the initial URL and if it is null or empty, the app works normally. Also, the function creates an event listener. With this event listener, the app can recognise defined urls even if it works in the backend.
This function calls validateDeepLinking function internally and uses the recognised page url as a parameter. The validateDeepLinking tries to parse incoming URL and if it has a matched case, it returns react-navigation parameter and the app redirects.
Additional Information: Sometimes Gmail or other mail providers change the URL in the email because of the security. In this case, if a customer clicks the link from the email, the URL does not redirect to the mobile app.
I wanted to share my problem and a basic deep linking integration. Hopefully it might be helpful. :)
Please contact me for any additions or wrong information.
