React Native integration with identity server - react-native

I have a react native app which is created using react-native-cli.
In official react native documentation it recommends to use react-native-app-auth which has too many issues reported.
However since it’s used by many i have started my implementation but came across many issues related Android.
Is there a recommended library that is maintained or tutorial that provides the guide to implement authentication using authorization code flow with PKCE?
Thanks in advance

AppAuth are the official libraries, though they are easier to integrate into a Kotlin based app, since the tech gets quite native in places:
Opening a Chrome Custom Tab
Registering redirect schemes
An Authorization Code Flow redirect
An Authorization Code Grant POST
A Refresh Token Grant POST
Secure storage of tokens on the device
Good login usability
Handling error and expiry conditions
AppAuth is primarily a pattern though, from RFC8252, so you could implement the above in Javascript code.
Start by implementing the above 3 OAuth messages and ensure that you understand payloads. Post back if you get stuck on areas such as PKCE and I can point you to some relevant JS code.
TRICKY AREAS
My Android Blog Posts may help you to clarify your requirements and explains some common problems and resolutions. There is a detailed code sample you can run locally also.
MOBILE TECH
I had a React Native sample in the past, but found the tech too painful in some areas:
Missing error details in responses from React-Native-App-Auth
Red screens when tracing HTTPS requests.
Therefore I switched everything to Kotlin where there are fewer tech layers to deal with.

Related

React native Plaid Link OAuth iOS - after completing oauth authentication in external browser, redirects to app but not starts from where its left off

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!)

Tendermint web application - customize

I am new to blockchain development and to tendermint as well.
I already have a blockchain running locally.
Using this command starport scaffold vue I could mount a local web application. Inspecting a bit I could replicate some network requests (localhost) and I can get the ballance of current wallet (hard-coded on the request), get the current wallet from the localstorage. I'm struggling on authentication (mnemonic, wallet name and password).
However I also would like to costumize it according to my needs and I thought I could start a web application from scratch. I can see that the generated web project is importing this project https://github.com/tendermint/vue which is making a lot of "magic behind the scenes" and importing UI elements as well and I would like to have my own elements.
I don't want to re-invent the wheel and I can make some imports to help me on connection to wallet, validate authentication (mnemonic, wallet name and password), create wallet and so on.
I am trying to build a web application to connect to wallet, make transations.... but I would like to control the styles and the connections (and if possible using reactjs instead of vuejs, otherwise I dont mind learn vuejs as well).
Is this possible or reasonable? Where I can find good documentation or tutorial to guide me on customize a web application using tendermint. Honestly I searched but I am kind of lost.
Thanks
UPDATE: I found good examples and here and here. It helped me to validate mnemonics and make transactions, with my stack tech.
Because Starport generates both plain Javascript and VUE controllers, you have few options:
Create your own site re-using VUE components
Take plain JS part and build a website using whatever technology you like
Use a plain JS client for standard cosmos modules you can find on GitHub
Use Protobuf generator to generate light client code yourself
If you only need wallet functionality, #2 and #3 may work best for you because the bank module is stable and hasn't changed much in a long time.
You can find plain JS file for bank in your project:
vue/src/store/generated/cosmos/cosmos-sdk/cosmos.bank.v1beta1/module/index.ts
There is a link to starport discord channel related to frontend: https://discord.gg/CvbdYh9AWQ

Flutter and DialogFlow Chatbot

I am trying to make a chatbot for my Flutter app using DialogFlow. At first I used the API V2, and I get this error :
I searched online, and the only answer I found is to switch to "flutter_dialogflow.dart" package instead of the "dialogflow_v2.dart" package everything seemed to work just fine at the first glance, but when I wrote "Hi how are you doing?" the flowing error appears:
P.S: Everything is activated on DialogFlow
Please help! Thank you
Flutter has many advantages so the Flutter apps implementation will be common. Integrating the Dialogflow on the flutter app will be more beneficial and helps to handle the end-user queries most effectively. There are two approaches to incorporating Dialogflow into your Flutter APP.
Create the middleware code and build your own chat UI
Using the REST API, the middleware code is responsible for transferring the message from the Flutter app to the Dialogflow agent and build UI components to send and receive the message. You will probably be really happy to only see text messages going back and forth when you get started. But finally, you may want to add rich answers, such as buttons, clickable hyperlinks, cards, and other rich answers like that. Dialogflow does not as it turns out, has any defaults on this front. Which is a tedious process
Integrate with the Third-party tools
Since Dialogflow does not support the UI to make the bot response, search the platform that will allow you to add the bot to your mobile application. And I recommend using Kommunicate
The Dialogflow bot can be directly integrated with kommunicate and positioned with Flutter by adding Kommunicate dependency pubspec.yaml and import as well as install the package, More detailed instruction can be found here. You can further customise the chat widget to match your APP colours and theme.
PS: I work for Kommunicate

React Native PayPal integration without server dependency?

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.

IBM Worklight login Page

I'm in the process of building an end-to-end application.
I want to incorporate a simple login page that will verify credentials against a database. I need the page to be the first page that is displayed when I run the application. I have read the various modules on authentication but their design is a little different.
I have found other resources on like Sunil's notes on how to enable form-based login but this involves modifying auth.js that isn't present in Worklight v6.0.
I'm also unsure if I should use the single sign on approach, but that would mean getting additional software like Websphere Portal which I'm not too keen on.
FYI, my UI is entirely built using dojo/dojo mobile.
Are you using Worklight 6.0? If you are seeing some of our older sample projects may help you out. You should check out one of our older samples based around form-based authentication, here is a link to all tutorials and samples:
http://www-01.ibm.com/support/knowledgecenter/SSZH4A_6.0.0/com.ibm.worklight.getstart.doc/start/c_gettingstarted.html
Here is a link to form based authentication tutorial and below the form based authentication sample:
Tutorial: http://public.dhe.ibm.com/software/mobile-solutions/worklight/docs/v600/08_02_Form_based_authentication.pdf
Sample: http://public.dhe.ibm.com/software/mobile-solutions/worklight/docs/v600/FormBasedAuthenticationProject.zip