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.
Related
I've integrated plaid using react-native-plaid-link-sdk in my react-native ios project. For OAuth flow, as mentioned in the document, I've added the redirect uri for OAuth flow. It works fine, where I was successfully able to redirect and connect the User's bank account in the external browser. Once done, it redirects back to the application. But in the app it is not resumed from where it left off from the plaid view, instead the app restarts where the HANDOFF event in plaid is not invoked. So I'm unable to update the selected accounts and other details to the server.
I've followed the OAuth requirements given here https://github.com/plaid/react-native-plaid-link-sdk#oauth-requirements
react-native version is 0.68.0
plaid sdk version is 7.4.0
Please clarify if any other additional implementations should be done to handle OAuth flow in react native ios. Thanks.
Two suggestions:
First, make sure the appdelegate is correctly set up, if relevant to your application, as described in https://plaid.com/docs/link/oauth/#react-native-on-ios:
"The PlaidLink component handles Universal Links by default. For integrations that use PlaidLink.openLink, Universal Links will not be handled by default. The useDeepLinkRedirector hook must be invoked by the component that calls PlaidLink.openLink."
Second, upgrade to the latest version of the React Native SDK, which has improved handling of OAuth redirects.
If neither of these suggestions works, please go ahead and submit a ticket to Plaid Support.
(Credit for this answer goes to Nathan from Plaid Developer Support, I am just passing along his troubleshooting suggestions!)
when login using Auth0 Webauth in React-Native it opens the browser for login.
I want to create a smooth login so that the user should not able to experienced whether I logged in using App or Browser jut like a webview anyone any idea?
Just to be clear are you asking if Auth0 supports doing this without a browser? Given that it's likely using OAuth2 or OpenID Connect then the short answer is no.
Further to that WebAuthn is a browser-based Javascript API so by definition would require a browser with these features to be available.
That said, there's probably nothing preventing you from implementing a native WebAuthn-like experience using CTAP2 (the protocol that sits underneath WebAuthn) directly or a platform-specific wrapper around the same.
I have tried with using Web view and having a Node server with paypal-rest-sdk as backend.
The flow seems to be a work around. Is there any way to directly integrate the Paypal with React Native code without any server calls or web views.
This isn't really a React question -- if no server is used, then you would be doing a client-only HTML/JS integration such as this one: https://developer.paypal.com/demo/checkout/#/pattern/client
That's possible to do. It would all be happening in a full mobile web experience, which then becomes the PayPal Checkout.
If your question was whether it's technically possible to do "server"-style REST API calls from a purely native React app, please put that thought out of your mind. Your 'secret' API key should never be in the possession of a client-side App.
I’ve been using Auth0 in my React web app. I also have a rule that works with new user sign ups. In my web (React) app, I use the Lock library and everything works fine.
Now, I created a React Native mobile app and because I have a custom login/sign up UI, I had to use the API method as opposed to using an Auth0 library such as Lock, etc.
My SignUp API calls work fine and create new users but my rule is NOT working with API calls. I checked to see if rules apply only to my web app but I don’t see any setting for that so I assume all rules should work for all apps that appear on my dashboard – including my new React Native mobile app.
The rule I created on Auth0 creates and assigns a new my_app_id to the new user. This rule has worked flawlessly with all sign ups coming from my web app which uses the Lock library but it doesn't seem to be firing when a new sign up comes in through the sign up API end point.
Is there anything I need to do so that my rule will work with my API calls?
Rules only run after a successful authentication event. This would not include a successful signup endpoint call, where no credentials are authenticated.
The recommended way to hook to a signup would be through a registration hook.
I want to migrate an existing Android+iOS native app to a react-native Expo app.
In current native app, we store an auth token. I'd like this auth token to be available through ReactNative AsyncStorage api out of the box, without requiring RN native code (ie, ejecting Expo).
Is this possible, in current native app, to start writing to the same place as AsyncStorage will read after the migration?
We aim for the smoothest transition from native app to RN app, and user should stay authenticated after the upgrade.
Depends on what you're current app is using for storage. I recently used this library (https://github.com/kevinresol/react-native-default-preference) to get the data from user defaults then move it into async storage. I only migrate the refresh token and auth token.
If they are using core data, then you'll need to setup the same models etc - https://github.com/realm/realm-js/issues/584
The other storage mechanisms you can easily find a native package to get the data.
if the app is under same app name scheme you may be able to access after upgrade i guess.