How to add a react-native expo user login in the app - react-native

I basically made a login page which could grab user/password from the text input, but if I want to use these to get auth from my website which has a REST API, where should I start it, is any lib that I can use?

I don't know how deeply you want to make. So I'll guess your concerning.
If you want to just send and get response from server
You can use fetch() method in js. Luckily react-native have documentation. https://reactnative.dev/docs/network Look this documents. React-Native have own fetch method for communicating with server.
If you want to manage state of your client-side data
Redux : You might probably hear this one. you can include redux in your package. we can use redux in react-natvie not only react. I just googled articles. https://www.digitalocean.com/community/tutorials/react-react-native-redux
MobX : Redux is pretty much complicate way to deal with state. So If you need simple things. you can try MobX. try this one. (also googled) https://www.smashingmagazine.com/2020/08/mobx-state-manager-react-native-applications/
Hope this idea helps you.
Best regards.

Related

NuxtJS Vue application: Best practice to use store

I am trying to use nuxtjs for ssr. I am not sure should I use vuex for all api calls. I could use asyncData hook to call api and use it in page directly without using vuex. I read online tutorials which advice to use store in for almost all api call and use store in page/component. I really don't see the benefit of using vuex for api call and use store for page/component.
Can anyone point me to right direction and point me to the correct article, link or code base?
You're free to design your state the way you want!
Vuex store isn't mandatory at all. Once you really understand how it works, you can decide whether it's worth it or not for your case. It's a matter of personal judgment.
I advise you to forget about using Vuex if you feel like it will be simpler to store your data in your page / components.
Vuex store is mainly designed to share data across different pages / component to avoid having a long chain of props / events. If you don't need that in your case, don't go for it, it will add unnecessary complexity.

Is there any way of knowing (via code) if a user is in the app and using it right now?

I'm trying to incorporate a feature into one of my apps that allows you to message users that are, at that moment, in and using the app. I've searched for a while now, but with no luck finding any article, API, npm package, etc, that supports this concept - if it even is possible.
I'd rather use an API than see when the user was last on the app via a timestamp and then "guess" if the user is still using the app.
I'm using React Native.
Check that AppState equals to 'active'.
https://facebook.github.io/react-native/docs/appstate

React-admin | Easiest way to warn user of a newer available version

I have a react-admin app where we are making frequent changes.
Is there an existing plugin or a way to detect a new version of app and provide user with a toast to refresh the application so that they are working with latest version?
If not with react-admin, is anyone familiar with a way to do this easily with react?
I have found some manual way to do this in following places but I am asking here in case there is an existing package or a more elegant solution that I can leverage directly.
How to force update Single Page Application (SPA) pages?
https://medium.com/#kellyrmilligan/create-react-app-let-your-users-know-when-the-app-has-been-updated-with-a-notification-21335d85481c
Any help is appreciated even if its, nothing exist and I should just hand-roll.
Thanks for reading.
This is not the responsibility of React Admin to handle this kind of issue.
You can think of RA as a simple React component that helps you define an admin.
Hence, RA doesn't provide any helper to manage code update or something similar.
You have to implement this refresh system by hand, and your links are a good start for that.
With the serviceWorker you can do that :
https://github.com/marmelab/react-admin/blob/master/examples/tutorial/src/registerServiceWorker.js
But i don't know why in the demo the service worker is not used ?
https://github.com/marmelab/react-admin/tree/master/examples/demo/src

Is Vuex Store accessible from console or from client's browser?

I'm building this Vue 2 app, and I keep reading that one should use Vuex State management, in the beginning I didn't quite understand it's concept, but now after playing around with Vue, I can see it's a most for a larger app.
But my question is can someone from Dev console or in any form access data which are stored in store.js, I mean those data which I do not render to browser?
Can I keep sensitive data on store, by sensitive, I mean, user clicked this link, sent message to this user, spent so much time on this page etc... and in mean time upload all this data to my db..
Is Vuex Store for this kind of work/job ?
Cheers
Yes they can.
The invocation I use is
document.getElementsByTagName('a')[0].__vue__.$store.state
This assumes the first link has vue properties, which is almost always the case. If not, try other tags. The UI is unpleasant, but adequately self-documenting. It's a useful debugging tool and something a user could do.
Of course, a determined and skilled user could write a browser plugin to put a good UI on this. Or maybe that's what the Vue.js devtools extension for Chrome does? I haven't actually used that.
2022 Answer
Vue 2:
Array.from(document.querySelectorAll('*')).find(e => e.__vue__).__vue__.$store.state
Vue 3:
Array.from(document.querySelectorAll('*')).find(e => e.__vue_app__).__vue_app__.config.globalProperties.$store.state
This code works on all production sites, including remote mobile debugging, and does not require dev mode.
dspeyer's answer was the basis for my answer, but based on an <a> tag does not work on all applications. All other answers assumed that Vue was in dev mode, not applicable for a production site on mobile web browser. Thank you Joe Maffei for the Vue 3 update.
you can use
__VUE_DEVTOOLS_GLOBAL_HOOK__.store
You can use Vue devtools in Chrome to see the store:
This just worked for me:
_this.$store
can someone from Dev console or in any form access data which are stored in store.js
short answer: no
longer answer: depends on sneaky they are. but I would not be too worried about this... because since (I assume) you plan to send the collected data to some type of API, even if they can't access the Vuex store... they could still see the AJAX request going out.
Can I keep sensitive data on store
It's generally not a good idea keep any type of private or sensitive data on the client. But in your particular case I think it's fine because what you define as "sensitive" is just some metadata about the users actions (aka: their history).
Is Vuex Store for this kind of work/job ?
You can store just about anything in Vuex. There is no real limitation on the type of data... only on how much (I would not recommend turning a 500mb images to a string and putting it in the store...)

Is there a simple Synchronous Storage option for react native?

I have a use case for synchronous storage for my react native app.
Before app renders a home view, I want to check if there is a session token stored on the local storage and proceed if it is available, otherwise want to render login component instead as the initial view.
Using sync storage will simplify the code.
I don't think there is a simple synchronous storage option. According to this answer localstorage is not implemented in the core IOS javascript engine. AFAIK the other options such as those used in this localstorage polyfill don't work. That leaves us with needing a react native module which are asynchonous by design. From the docs:
React Native bridge is asynchronous, so the only way to pass a result to JavaScript is by using callbacks or emitting events
So I think Async is the way to go.
For those who are searching for this,
I found this npm package that served this need
react-native-sync-localstorage
I have a similar situation and found Realm supports synchronous read, which is what I need. Realm is a bit big for single token storage. I use AsyncStorage for everything else. Let me know if you find a simpler solution.
There's no solution similar with Native Mobile development such as SharedPreferences in Android.
Native Way: most of the operations are synced. (such as read from storage, etc), some of the operations are async.(http request, load image)
React Native way: almost all of the operations are asynced. this is explained by #Ryan Harmuth 's answer.
So, let's start to use Redux as a solution. :)