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!
Related
I am creating a React app as a personal project. I am using OAuth with implicit grant flow, which has my user redirect to a different page for auth, then redirects back to my app. Everything is working as I expect, but when the user is redirected, all my state is cleared.
For example, my user finds a specific book from a list of books, this takes the user from the index page to that specific book's show page, and the book's ID is saved in component's state. When the user wants to save this book to their personal account, they log in through OAuth and come back. Now the book is no longer saved in the state and the user needs to search and find it again as a logged in user. I want to avoid using redux and react-router if possible, and the only workaround that I've thought of so far is to save the book ID into localStorage, which I'm not sure is a good practice.
Is there any other way I can get around this?
When you redirect the user to the login page, you can provide a URL param like afterLoginRedirectionUrl that contains the book id, e.g. /books?activeBookId=3
In the log in component, after success, redirect to that url if the param afterLoginRedirectionUrl is present. This way, when going back to /books?activeBookId=3, you can set the initial state of your component to the active book id present in the URL.
About your comment:
I want to avoid using redux and react-router if possible
Redux or react-router won't solve this problem. They store the data in the same way you do it right now, In memory, and as soon as you refresh or close the page all the data will be lost.
About using localStorage: if it is working for you, you can continue using it. It is standard and supported in all major browsers. In case you are dealing with very structured data, maybe it will be good to take a look to IndexedDB too.
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.
I'm creating a portal in React, and I need to allow login/logout of users, where if you are logged you can see some pages, otherwise you can't.
So far I've thought about having a variable 'isLogged' in the state of each component which need the user to be logged to be seeen, and pass the variable in the props among the these components.
Then, I saw I can also use the localStorage to save this variable (I'm ok with the fact that the user would remain logged as long as he will clear his chace).
The question I have is: is this ok, or it is not the right way to manage the session user (also considering security issues)?
If so, which is the correct one?
If it's useful to know, I'm not using Redux, and probably the portal will exploit only https protocol.
It may be very late but still You could try out this which is one of the best way to handle auth user
React - What is the best way to handle authenticated/logged in state?
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/
I have auth component working greatly till I implemented a page for the user to change the user's info. I experienced some unknown results till I found out that after user's info being changed by that action, the user data loaded by auth component in session still remains the same. I wanted to know if there is any way to force auth component reload the user data from database again?
I considered re-logging in the user but it makes the logs complicated and places some bad traces in program. is there any more beautiful way to do so?
$this->Session->write('Auth', $this->User->read(null, $user_id));
you got to update it, cake does not do everything for you ;)