React Native Linking Listener? - react-native

Description:
Built an app, need to implement Swedish BankID. This means, when user presses a button, the Swedish BankID App opens, and when the user has signed in, the Swedish BankID App sends the user back to my app (which it does automatically), in which I need to retrieve data (if sign in was successful or not).
What needs to be accomplished:
Open Swedish BankID on the device from my app. Need to be able to receive a payload from Swedish BankID App in my app (Swedish BankID sends user automatically back to my app).
Current Code:
const url = `https://app.bankid.com/?${autoStartToken}`;
const supported = await Linking.canOpenURL(url);
if (supported) {
const answer = await Linking.openURL(url);
} else {
Alert.alert(`Don't know how to open this URL: ${url}`);
}
Currently, the Swedish BankID App opens correctly, my question is, is there any way to receive data from the other app? I know this is possible with Native Modules (running Objective-C etc), however I am using Expo Client and do not wish to eject.
I have yet to find anything that suggests that React-Native can listen to the other app.

You can use expo WebBrowser to open url.
For authentication you will want to use WebBrowser.openAuthSessionAsync, and if you just want to open a webpage WebBrowser.openBrowserAsync
Exemple:
...
import * as WebBrowser from 'expo-web-browser';
....
const handleLinkAsync = async () => {
let result = await WebBrowser.openBrowserAsync('https://google.com');
console.log(result)
};

Since the BankID app can even be on another device (if you present the url as a QR code) it's kind of hard to communicate with the app. Also, from a privacy perspective the app isn't supposed to give a lot of information away.
What you can do is to "bounce" information via the app using the "redirect" parameter. That's especially useful when you want to tie back to the existing session. There are however a few caveats, especially when using multiple browsers, so make sure to read the Relying Party Gudelines.

Related

can we pass invitation code in url in react native?

I'm trying to signup User in React Native. There are 2 steps to do it
When I enter the info of user Like (FirstName, LastName, and email), the User got a link in his/her mail.
When the User is clicking on this link, its redirecting to New Signup Page with two more fields Like Password and Address.
I want to send a inviation code to a user through a link.
How can we send invitation code along with app link and how to handle this when user open app??
Let's break down the problem into sub-problems.
1. Deep link and Universal Linking
Register your app for the deep link with custom myapp://path/to/resource and universal link https:yourcompany.com/path/to/ressource.
Note: Apple required domain name ownership verification for universal linking.
React Native CLI - https://venturedevs.com/en/blog/implementing-deep-linking-react-native-apps/
Expo - https://docs.expo.dev/guides/linking/
2. Sending verification code to email.
Logic to send email should be handled on the backend or using third-party mail services like sendGrid.
Assume that the user receives an email with a verification link like https://auth.yoursecret-server.com/myapp?authCode=35467809876
3. Deep link to the code verification screen
React Navigation has first-class support for deep linking, I recommend it for handling screen-based deep linking. Consult their documentation for further.
https://reactnavigation.org/docs/deep-linking
I am not sure if I understand your query completely but, you would need to use react-native-branch or react-navigation-linking.
Please follow through with the documents to get a roadmap.
In such case what we have done is we have added invitation code in custom URL like below
testapp://singup/invite/abc123456
and completed android and ios native setups
next in app
import { Linking } from "react-native"
React.useEffect(() => {
Linking.addEventListener("url", _handleDeepLinkURL)
return () => {
Linking.removeEventListener("url", _handleDeepLinkURL)
}
}, [])
const _handleDeepLinkURL= async ({ url }) => {
let inviteCode = parseUrlForCode(url)
let validation = await api.validate(inviteCode,userEmail)
}

React Native Expo app how to unregister from Notifications

In my react native expo app I am successfully registering to the notification service with Notifications.getExpoPushTokenAsync() and it is working without issue, my question is, how do I stop receiving notifications? Is there a way to clear the push token on the device only?
The problem I am having is if a user logs out and a different user logs in on the same device, they will still receive the previous users notifications since the device still is still registered. Notifications.removePushTokenSubscription() seemed like it may work but it only removes the push token listener created with Notifications.addPushTokenListener() which (I think) is unrelated to this issue
My current logout function attempt looks like this:
const logOutUser = async(notificationToken) => {
if(notificationToken){
var subscription = await Notifications.addPushTokenListener(notificationToken);
await Notifications.removePushTokenSubscription(subscription);
}
}
Am I thinking about this problem wrong? Thanks!
You can't unregistered from Notifications, there is no function that does that simply because the expo token is related to your device,not your account, instead you can do this:
When user login you should send the expo token to your back end
and store it in an array of expoTokens, because user can have his
account open in multiple phones.
Store the expo token in your
AsyncStorage.
When the user logout you should delete the expo token from array of expoTokens array in your Backend Database.
and finely delete it from AsyncStorage .
Hope it works for you!

How to get data associated with branch.io deeplinks in the desktop redirected website?

I am generating a branch.io deeplink in my react native app using the below code
let branchUniversalObject = await branch.createBranchUniversalObject(
canonicalIdentifier,
{
locallyIndex: true,
title,
contentImageUrl,
contentDescription: contentDescription || '',
contentMetadata: {
customMetadata,
},
}
)
It gives me a link something like https://xyz.abc.com/OrzOISGRP0
I have kept my localhost for desktop url in branch.io settings.
Now my question is, is there a way i can get the customMetadata associated with this deeplink in the website?
I tried using branch.init() web sdk, but its not returning the required data if i open the link directly, it redirects me though and also appends branch_match_id.
It sends the data in listener registered on site if someone have clicked the link and opened it on phone, i dont know whats the use of that.
Thanks

React Native Linking vs. React Native Navigation

I have a use case in which the user should be able to click on a slider that has its data served from server.
The data contains some information that would be used to:
Open another view and initialize it with some parameters.
Open external app(s) and send data to it.
Can I use the Linking api in react to make it navigate internally within the app or is that reserved only for react navigation? My intuition is to use something like this:
Linking.canOpenURL(retrievedDate).then(supported => {
if (!supported) {
// use react navigation
} else {
Linking.openURL(retrievedData);
}
}).catch(err => console.error('An error occurred', err));
But I'm not sure if that's going to be the best practice/most generic one?
Your suggestions are highly appreciated.
Linking means you are online and running a web application.
React-Native is for developing (with React type coding) MOBILE apps. A mobile app is not running in a browser and its pages are not linked to URLs. So you should be using the navigation, which creates a certain UI for Android devices and a different UI for IOS (Apple) devices, and allows the user (and/or the programmer) to "navigate" between the "screens".
If for some obscure reason you are developing a web app with React-Native, you can of course use the linking api. https://facebook.github.io/react-native/docs/linking

Office 365 JavaScript API, redirect back to WP app after launching Store

I am creating a Windows Phone app using HTML And JavaScript. I am able to add connected services and have selected "Users and Groups" and given it Read permissions.
I am then making the following calls on button click:
var authContext = new O365Auth.Context();
authContext.getIdToken("https://TestDomain.onmicrosoft.com/TestWebApi").then(
function (token){
}
);
Services/Office365/Settings.js has been edited to the following:
Settings.clientId = "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
Settings.authUri = "https://login.windows.net/common/";
Settings.redirectUri = "ms-app://s-1-15-2-xxxxxxxxxx-xxxxxxxxxx-xxxxxxxxxx-xxxxxxxxxx-xxxxxxxxx-xxxxxxxxxx-xxxxxxxxxx/";
I got the redirectUri value by calling the following function:
Windows.Security.Authentication.Web.WebAuthenticationBroker.getCurrentApplicationCallbackUri();
I do get the login screen for my organization and I am able to provide credentials and it tries to redirect it back to my application, but then I get asked the following question:
"You need to install an app for this task. Would you like to search for one in the Store?"
If I click on yes, it takes me to the store and says "No apps found". If I click on no, it doesn't do anything.
How could I possibly get it redirected back to my app?
The connected services experience only works in Multi-device hybrid apps (a.k.a. Cordova), not in Windows Phone apps.