I was building my chat app and i prepared the login page to authenticate the user logging into the application not the question if what should i do with it, I used POST method to get the credentials and compared it with the database, now how should i send this to the front end page so as to make user logg in and send message by the username they have logged in.
i do not want a piece of code but rather I'd like to have a suggestion on what should i do next and what should i do next, if i just send the plain username into the frontend then i am afraid that users can change its value and pretend that they are someone else.
You don't send it to the frontend page. You never send password or any other sensitive information to the clientside/frontend/browser
The flow is roughly like this.
Frontend has a login form that posts to the server
Server gets the username and password
Server authenticates and creates a session
Frontend gets information that this user is now logged in.
Every action this user takes has to be check on the server side.
You can also check my answer on similar thougt:
VueJS Secure with Auth0 - How is it secure?
Where the author asks:
If I set some variable like isLoggedIn = true or isAdminUser = true,
what stops the user from manipulating the DOM and forcing these values
to true?
The short answer is nothing. You don't do any authentication on the client side. Its ok to have some variables like isLoggedIn or isAdminUser to make the interface make sense but the server code should always to the actual authentication or authorization.
Related
I have a react app and a nodejs server. I set a httpOnly-cookie containing a JWT for authentication. This works. The problem is: I need some logic client-side to check if the user is logged in. When the user logs in, I could store this "state" in-memory (eg. useState), but when the browser reloads, this state is gone (while the cookie is still there).
I'm tried using js-cookie but obviously this won't work because it's a httpOnly cookie.
How can I check - without doing a (test) axios request to my server - if the user is logged in, when opening the react app in the browser?
Edit:
The answer in this question recommends to store the token in LocalStorage, but other resources (lik the discussion in the answer of this question) says cookies are the way to go.
to be clear, I don't need direct access to the token in the cookie, the cookie is send with every axios request ({withCredentials: true}) and it works like expected. But I just need to know if the cookie is set (and so the user is logged in).
There can be multiple approaches for this scenario. What I think you can do.
1 - You can send a http request to check if the JWT is valid on initial app load and whenever app is reloaded (Same thing basically) and then preserve some authentication state inside the app (Context Api or Redux) and this way you control the routes, etc.
2 - Make sure that whenever the JWT is expired you clear the cookie and whenever client receives 401 you refresh whatever authenticated state you have and redirect the user to login page or any page that does not need authentication.
Just to add to the selected answer.
a loading component and an isLoading state will help prevent the split-second showing of authenticated / protected screens. ex, isLoading ? <LoadingComponent /> : <ProtectedComponent />
You can just update the isLoading state when the request finishes, and should the request yield an unauthenticated response code, you can then perform a redirect.
i am just a beginning, with node/express and i kinda have a problem.
i have built a todo application using, node js express and mongo db which actually has an login/register form...i.e, u get to register and login (/register) and(/login) before you can get access to the todo application(/todoapp).
My problem is, if user A logs in with his email and password, inputs some todos and logout, later on user B also get to login with his own different email and password, he gets to see the todos of user A.
but then i want it to be different, user A should be able to see just his own todo, user B should also be able to see just his own todos, please how do i do that?
Please my algorithm is below
-user registers (/register)
-user gets redirected to (/login)
***successfully logins and gets to (/todos)
this works perfectly and sends all logged in users to the same (/todo)
Generally you need to store the user _id in a session or a cookie (in the client side) when the user login successfully, then when the user make get/post request first you check if the _id in his seesion/cookie match to the _id in the db and sending back to the user only the items with his _id (items that belong to the user).
you can register a session when the user logs in but keep in mind you must to protect against csrf.
You can also use JWT for this.
I will suggest you to find good tutorial for JWT or authorisation with session and csrf protect.
Its a big subject and its better to watch a good video or read a good article than copy paste code from here.
Here's the sitch
I've got a handy button on my app that will eventually let you sign in seamlessly with Google. It's a link to /auth/google on my Node server, which uses passportjs to do authentication, and thus redirects you to the Google url where you authorize the application. Upon successful auth, the redirect url (auth/google/callback) is hit and it works up a user object given the user's Google info.
The quesiton
Now the server can redirect the user to wherever it wants, and however that happens, the Angular app needs to get a user object. As far as I know, I can't put the user object in a redirect. What's the best practice for telling my Angular app that the user is auth'd and getting the app a copy of the user object?
I've considered redirecting it to some url on the front end that tells it to call the server asking for a new user object, but for some reason I'm thinking there's a classier way...
I found this description of how to implement SPA and nodejs-based authentication useful:
https://www.matthewtyler.io/handling-oauth2-with-node-js-and-angular-js-passport-to-the-rescue/
Maybe combine it with JWT stored in a HTTPS cookie instead of sessions:
https://stormpath.com/blog/token-auth-spa
What is the common way in React to read value stored in session on server side (express) in React Component?
I have an auth method that stores token in session (on server). For every next action that require an auth token, i can get it on server side, but i would need to have my UI look different for authorized and non-authorized users. How could i do it?
Usually you interact with your server through an API but what you're suggesting is not something you'd want to do. The authentication is usually done on a per-route basis, and the UI would send a key that maybe gets stored in local storage or as a cookie.
For example, you could have all your routes authenticate by requiring the user's "auth cookie". If it is missing, the user is redirected to "sign in" after which the server sends back the auth key and the UI stores it. The UI can then send it with each request using credentials: 'include'.
This is only one of many solutions out there, not really related to React at all but more broadly to UIs. Hopefully this will help your search!
You can get a value from session storage:
const val1 = sessionStorage.getItem("username");
const val2 = sessionStorage.getItem("useremail");
I am trying to setup a user login system with Node.js (Express), Socket.io, and Redux/ReactJS. This is the approach I'm taking:
The user connects through Socket.io as soon as he/she gets to the web app.
Through socketio-auth the user is required to authenticate and passes their username and password to the server.
Then, using socket.io-express-session, like in this example, I set a cookie with the user's username and password, so that every time they come back to the website they can be re-authenticated through socketio-auth. (I realize I could probably save a unique token in the cookie instead, would this be better?)
On the server, upon authentication, I just save their details with their socketId to the Redux store for use with every Socket.io request while the session lasts.
Assuming this is all done over SSL, is this safe? What changes would you suggest? I'm trying to make it as simple as possible yet still very safe.
It seems like point 3, with Local Storage, is the best way to go for now.
See someone else interrogation: https://github.com/hueniverse/hawk/issues/138#issuecomment-196989520