Menu
I'm building an android application which requires authentication from an external auth provider.So I'm using react-native-oauth package to handle this.
The redirect_uri defined is a deep link which should ideally open my app itself after successful authentication.But the WebView seems to not handle this redirection and I'm getting response as 404-page not found.
This is the service that I have written to handle the auth:
const manager = new OAuthManager('<app_name>')
manager.addProvider({
'provider': {
auth_version: '2.0',
authorize_url:'<auth-url>',
access_token_url: '<auth-url>/token',
callback_url: 'http://localhost/provider',
}
});
manager.configure({
provider: {
client_id: '<id>',
client_secret: '<secret>',
redirect_uri: '<redirect-uri>' //DEEP LINK HERE
}
});
module.exports = {
authManager: () => {
manager.authorize('<provider>')
.then(resp => console.log(resp))
.catch(err => console.log(err));
}
}
Also I have defined my intent-filter as specified in the Android docs on how to declare the deep links for your apps.The deep link works fine when opened with Linking.openURL() from the app components.
Any help in this is much appreciated.
335
Create a function called webviewRef and attach it to the WebView component. Next, create a function called sendDataToWebView and add the code below to it. Inside the “script” tag, use window. addEventListener to listen to the event from the React Native app.
WebViews offer developers opportunities to render any web components in a React Native application. A web component can be anything from a whole webpage/application or just a simple HTML file. The package react-native-webview makes it super simple to embed WebViews into your React Native apps!
A WebView is an embedded browser that can be used to display web pages inside your React Native applications. It can display anything (from custom HTML elements to entire web applications) inside React Native. In React Native, we can use WebView by using a third-party package called react-native-webview.
If you simply want to set global variable, you can use injectedJavaScript prop which will inject your js code into the web page when the view loads. Where you can simply pass js code as string. And if you want to set global variable from any function then you can do the following: First of all take ref of webview.
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>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.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
