I'm a Java Android developer and been experimenting with React Native lately. What I've been looking into is something similar to the navigation as that of Android Java code.
First, I want to get to SplashScreen. Then check if the user is logged inor not, then take the user into the app or to the login screen.
Now, to achieve this, I need to know if the user is logged in. How do I do that? I don't want to maintain global variables in index.js nor do I want index.js to be the central routing system. Can I store somewhere a flag that says that the user is already logged in, and what's the access-token of the logged in user?
I'm able to visualize this well in native Java code, but failing to figure out how to do in React Native.
In my React Native app, I store all my data in a Redux store. So, when the user initially puts their username and password in the input, I send it up to the server which then sends down an access token. Once I receive the access token, I store this in the Redux store. Therefore, if the user returns to the app later, I just check the Redux store to see if the access token is present. If it is, I know that the user is logged in. I check for the presence of this token all over the place in my app, and further need it for when I make more request to the server.
So to answer your question, you need some way to store the state, and for this I highly recommend checking out the Redux framework which works very well with both React and React Native. http://redux.js.org/
Related
A while ago I made an app using React Native and was not able to store data like token and user ID for future use. Currently I am making a Point transaction app in React Native using Expo and was wondering if there is a way of storing required data to all the pages just like the web has a localStorage.
App Functionality:
Users can login to their account and the response has the token, user ID, user Name and member No. On the dashboard it shows points gained, redeemed and points available.
Still on the dashboard it can show the last five transactions and if one is clicked, it navigates to a transaction details page which its API requires the token, user ID and member No.
A profile page to edit user details or logout.
I was able to achieve all that by passing those details as route params but after adding a bottom tab navigation the app crashed since stack Navigator differs from Tab Navigation.
P.S. I have tried Async Storage but the app requires a page refresh to get those data (ie. token, id, memberNo)
If I don't misunderstand what you want is to be able to share the AsyncStorage values with the rest of your application, for cases in which you want to share states (such as tokens or values of a user's identity) use parameters navigation becomes deficient and uncomfortable to use when wanting to send states or state values from a higher level to a lower one, even more so in large applications that already have many layers. For this you have two options, the use of Redux to make it easy to access your data throughout your application, or you can also use the useRef hook which is a quick output that is already plugged into the react native libraries useRef hook
I've been working with react from past 1.5 years. When I came across redux it's good library for state management of an app but when it comes to local storage I think it's good to store user session because redux store will change because of page refresh. So I'm little bit confused what to do with redux also it's little complex writing code. Can somebody help me which is better to use for storing user session? Thank you :)
The purpose of Redux (or any other state management tool for SPAs) is to help you manage your app's state when the app is loaded in the browser. You can't "keep it" after you close the app. Use JWT or cookies for storing info about user sessions in the browser.
Also, you don't have to use Redux for your state management if you find it too complex. React's Context Api may be sufficient. But again, not for storing user sessions.
I am currently learning by doing. So I've created the backend using FeathersJS and am authenticating through the endpoint just fine. When the user gets authenticated I set the 'isLoggedIn' state to true and then pass that along to other components to make sure that the user is logged in so they can access that component.
Now when I see and test it using the REACT DOM Tools, I can see that I can just login by clicking on isLoggedIn and it will give me access to my app bypassing the whole login system.
What is the correct way to create a login setup? Can the isLoggedIn state be hidden somehow? Please help!
I've been looking around for information on how to do this but I haven't found anything that useful yet..
Screenshot
You could make use of session cookies. Or I often find myself using Passport.js. But of course this implys that you have control over the server and database.
BACK STORY: I am creating a react app which uses back-end-api JSON based authentication for log-in, after user is validated back-end returns a JSON token for future requests.
WHAT AM I DOING NOW: I am passing down that token from one component to another using props (and yes, that's not very elegant nor clean).
WHAT I AM LOOKING FOR: Someone after seeing the project suggested me to store the token & other redundant data in browser memory. Now, I don't know how to do that nor I was able to find any resources.
BUT: I believe that this problem can be solved by redux. But I want to create a react only app first before jumping to redux or some other advanced stuffs.
So, how do I store these type data in browser memory itself?
Or, is there any more elegant solution to this?
Also, gimme some advice about session management. Like when token expires the user is shown a dialog and redirected back to login page.
why not you simply go for LocalStorage ? like this
localStorage.setItem('user_info', JSON.stringify(response));
For more info refer here
https://www.w3schools.com/html/html5_webstorage.asp
https://www.w3schools.com/html/html5_webstorage.asp
Update
To get values from locastorage you can use the syntax below -
localStorage.getItem('user_info');
Redux is a state container for react. It helps you to manage all states in react app. But you can still live without it (barely) using local state and props. Besides, you can use localStorage and cookies to store whatever you want.
I'm a noob, starting my very first project with Node, Express, and React.
I got the authentication working, I have a Component that calls an action, which calls a store (or should), but this is where I get confused. I don't know where to go.
My LoginActions.login makes an api call to login the user, it comes back successfully and stores a cookie with the session ID. After that, how do I tell the UI to go to the dashboard? How do I make the UI KNOW that the user is actually authenticated, and if it's not, kick him out?
Where am I supposed to check for all that? Is it the store? The component itself?
Any help would be greatly appreciated.
You're not really "supposed" to do it in any specific way. React is more of a library than a framework. You can use it however you see fit.
One option would be to use react-router's onEnter function to verify logged in status and user it's replace method to redirect accordingly.
You could also have your components themselves verify logged in status and instead render your login form if not logged in yet.
Or you could even store your login form at a unique uri and handle all of the authentication via the server, using 302 redirects based on logged in status.
Up to you!