code and preview here
I am new to React and I have set up a very basic front-end session.
The user has to sign in on that page (https://react-vc551s.stackblitz.io/signin) in order to get access to https://react-vc551s.stackblitz.io/dashboard. He is also able to log out on that page (https://stackblitz.com/edit/react-vc551s). If the user is logged out and try to access the /dashboard page, he is going to be redirected to the /signin page.
What I have hard time to do is to move the login / logout button to the navbar. My Navbar is a separate component and I don't know how to do it.
If you only need to show button based on user auth. state then, do this-
Save user auth status in local storage or cookie. Initialize the status in state variable(true or false), then in your navbar component add a condition inside your return statement.
{isAuthenticated? <button>Logout</button>:<button>Login</button>}
If I were you, I would use useContext to make my life easier to manage the auth state. The useContext is a global state which can be accessed from everywhere by calling the context. Learn more in React Context
Related
I want to display on the Header the button "Login" when the user is logged out, and "Logout" when the user is logged in.
I decided to use Redux for this with the stated "loggedIn". This works fine, except when I reload the page. The "loggedIn" is reset to its default (false).
Is Redux a good approach for this? Note: I am using JWT for authentification
It depends on your app scale, for bigger app use redux to prevent props drilling.
I have a simple login page, when the informations are correct, I redirect the user to another url via window.open() with _self parameter. Eg: window.open("/home", "_self");
The problem is, I save this login information to the Redux store, but naturally Redux resets the store because of window.open()'s page load. I can't use Link on Login button.
So is it possible to redirect to another URL without page load (not using Link as I mentioned) or avoid Redux reset state action?
You might want to use Redux Persist which allows you to store your redux state in the local storage of your device and when your react app renders initially hydrate your redux from the redux persist OR you can pass in query param that indicates somethings like
yourURL.com?isLoggedIn=true
and trap in the query param and render your component as needed.
Hope this helps.
I had to solve it via Link, giving to parameter's value with ternary operator.
When user navigation to app ex: http://myapp.mydomain.com
I initialize a bunch of stuff, make requests to auth the user based on a cookie etc. This setup the main state of my main-reducer.
If a user navigation directly by pasting let say: http://myapp.mydomain.com/userProfile
The main state, will never be setupped. So the trick I'm using is putting the last part of the url (userProfile) in a cookie (or somewhere else) and redirecting to http://myapp.mydomain.com. After auth and requests, I the redirect back to the page the user wants to view. This works, but feels wrong. I was wondering: is there a better way of doing that?
Thanks!
Why don't you just make the route /userProfile as protected route.
Only if the user is authenticated he can see that page if not redirect to root page and re-validate the user.
For example, if I have page called home.
When a user logs in, he will see his avatar on the navigation bar.
If a user does not log in, he can see a log in button on the navigation bar.
I use Redux to manage state, and React Router to do the routing.
My problem is, on the server side, how to know which view to render.
You can create sessions and maintain the state in react accordingly. For every page request you can check that if the sessionid is present in the request headers. Then check wether it is the correct session id on the server side and return true value or thatever you want to return. And then maintain the sate accordingly. Now as you have got the state so you can render whatever you want to render.
I was trying to implementing login feature in my react-router redux app.
Following is the scenario
User logs in and he is redirected to his dashboard.
For this when the person enters ID/pass and presses on submit and on success on API call I replace the browserHistory with /app/dashboard. So far so good.
User can select sub sections inside dashboard
So now he can choose sub pages under dashboard and goes to /app/dashboard/:page and it all works fine.
Now say if he reloads the page here it gets redirected to /app/dashboard. This is mainly because on my mount point which is my App Component(/app) is dispatch an action for initial authentication.
This action checks if user is already logged in(which I track from cookies). If he is, he is redirected to dashboard else he is taken to login page.
When I reload /app/dashboard/:page it takes me /app/dashboard because of this initAuth() action is dispatch on App Component.
To handle this what I did was I use the location from props under the components.
This takes of 2 scenarios.
Scenario 1
When I fire initAuth() I fire by passing pathname from location as parameter. If it is login I redirect to the homepage else I leave it.
Scenario 2
Similarly when I log in I read ownProps from mapDispatchToProps and check if the pathname if login I redirect it to /app/dashboard.
This way only if he user is coming from login he is re-directed to dashboard and other pages are not redirected to dashboard.
So I created a function which handles both above scenarios
if(path === constants.LOGIN_URL_PATHANAME){
browserHistory.replace(constants.DASHBOARD_URL_PATHNAME)
}
So though I implemented this but I think there can be a better solution to handle this. Can you please share your feedback?