I am trying to pass authentication information (JWT) to react native webview and I am wondering what is the best way to do it.
I am currently sending token value with injectedJavaScriptBeforeContentLoaded props of react-native-webview library and load token at session-storage on web side.
I also tried using postMessage, but event didn't fire expected.
<WebView
injectedJavaScriptBeforeContentLoaded={sessionStorage.setItem('auth', '${TOKENVALUE}')}
/>
Related
I have an application that shares backend with a web. This application has basic email/password login that returns Access Token which is being sent as a header for any other requests. The application also has a screen that is a WebView which displays the web version of this app.
My problem is that I don't know how to share user session between RN app and the WebView. When the user logs in the application it should also log him in the WebView page and if the user logs out it should log him out the WebView aswell.
Is there any way, to inform the WebView that user has logged in and that he should be logged in in the WebView as well?
I tried sending the Authorization header in the WebView source but it doesn't work. https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#working-with-custom-headers-sessions-and-cookies
Any auth is based on a secret. First, you need to decide what is your secret, it can be a session identifier or jwt token. Then you can communicate between React Native -> Web and back Web -> React Native
follow this guide communicating-between-js-and-native and share your knowledge about this secret and use it for your requests.
Related to custom headers this will set the header on the first load, but not on subsequent page navigations.
I am using coinbase commerce in a react-native application. I am using webView to achieve it but I am facing a problem that after authorization, the callback doesn't works. Is there anyway to handle it?
I am trying to test a react native app on android which uses a native library which does oauth-based authentication using a webview. Detox does not support webviews (yet) so I was wondering if I could tap on the keyboard using coordinates in order to get through the auth (bad I know, but gets me unstuck for now).
Since the oauth screen is outside your app, I'd recommend you do the following:
Create E2E tests for your login up to the oauth screen
Get a CLI for your oauth provider or figure out how to authenticate via node.js to get the auth token
Create a deep link path in your app that accepts the token as a param and stores it the way you'd store it normally and trigger a continuation of the login flow (you may need to reverse engineer your native lib slightly)
This is generally the approach you want to take if you are using an external authentication party. If the party providing the auth package doesn't support 2 and 3, you should raise the issue with them.
I am trying to build an SSO login flow on a React Native app using Okta's oauth 2.0 api.
Here is the flow that I am trying to achieve:
(1) webview renders login page from /oauth2/:authorizationServerId/v1/authorize?response_type=code&response_mode=query&client_id=&scope=&redirect_uri=___.
(2) user logs in.
(3) webview renders redirect_uri with authorization code in url.
(4) I extract authorization code and send it along with client id, client secret, and other necessary params to /oauth2/:authorizationServerId/v1/token.
(5) endpoint responds with accessToken.
I am able to get the accessToken through this process using postman and curl so I know that this works. I have also verified that this exact flow works on a Xamarin app.
However, when trying to hit the /oauth2/:authorizationServerId/v1/token route from my React Native app after getting the authorization code, I always get a 403 without an error message.
I am using fetch for my api calls and used the not-CRNA way of creating my app.
Has anyone ever come across this issue before? In general, has anyone been able to get this type of Okta flow to work with React Native?
At first I thought it was a CORS issue but followed the CORS test here and verified that this was not the case.
I also thought it was an issue with making a fetch request and rendering a webview at the same time. I built my own Okta sign-in page so I wouldn't have to use a webview and used this flow but got the same 403.
Any and all help on this would be greatly appreciated.
Thanks!
If you create a WebView within a react-native application, is it possible to access the cookie from the WebView to be passed in subsequent requests?
An example would be presenting the User with a login page with reCaptcha in a WebView. Then using the authentication cookies from a successful login to make subsequent API requests to the same site.
React Native is just a bridge on top of the native code. Anything you can write in objective-c/java can be used in React Native by creating native modules.
I am not sure if there is JavaScript code present for clearing the cache of a webview, but you can certainly write native code for it and then bridge it using native module.
Here is the link for the native code(iOS) : https://stackoverflow.com/a/5606703/2164029
Tutorial for creating native moduels : https://facebook.github.io/react-native/docs/native-modules-ios.html
I believe this https://github.com/joeferraro/react-native-cookies should provide you what you want.I have used this to clear cookies successfully.