React-starter-kit: Is there anyone who developed email, password authentication using this starter kit?

[harshakakumanu]

I need help in understanding the whole flow. I come from traditional flux background I have a hard time understanding and implementing authentication.

[langpavel]

Can you be a more concrete?

I have some basic on this but I started from scratch (on this kit but without any any special package)

• At first, you should decide if you go through server or not. If you want email, you should.
• Then choose backend storage. Note that sequelize here is simple but you may want more fitting toy, like PostgreSQL, my favorite :-)
• Then you can implement traditional <form method="POST">. It is the best from start, your browser will offer you save password dialog. You can enhance this later.
• Then you should handle a POST in server.js. You should implement all the locking which prevents brute-force guessing etc... You should have a function which needs request object from express, username and password, you should be aware of CORS, etc..
• After you verify the user, you can set HttpOnly SameSite Secure cookie. This cookie will not be readable in your app, but it will be readable for your server. Do not forget to sign cookie by server! I'm using JWT as a cookie content.
• Then you can load ACL on server in express middleware based on cookie.

My cookie have this information encoded:

• userId
• ACL list
• time issued
• time renewed

Note that there is no sensitive information.

I renew cookie automatically after some time, that way you can trust user more in some situations and you can require refresh of ACL from DB ar complete reauth if user wants do something dangerous/irrevertible.

Hope this will help you :wink:

[WiktorKa]

@langpavel Could you tell a little bit more about the structure of your ACL? What do you keep there? I.e. user role name?

[Andriy-Kulak]

You can also use a third party software like Google's firebase or Amazon's aws cognito. These are agnostic to whatever front-end framework you use. I know there is some hesitation to rely on a third party since you will have to keep using them but the security that amazon provides between its front-end authentication and making secure requests to backend via API Gateway make it worth it for me.

[langpavel]

@WiktorKa my ACL is simple list with all allowed privileges. I have some functions which will allow me extend rules in future but now I have queries like module:view:action

[WiktorKa]

@langpavel So, when user logs in, you fetch a list which is structured like follows:
["admin:user:add", "admin:user:delete", ...], right? Sorry if this is a really basic question, but I'm coming from client<->server apps where we use to handle ACL differently.
If I'm right with above assumption, how do you make sure that user won't manipulate his ACL list manually? Do you sign it with JWT?

[langpavel]

@WiktorKa User can manipulate this list manually only on client side. On server, ACLs are fetched from session by cookie, user cannot manipulate ACLs on server.
Every validation must be done on server, on client it is only hint for UI which it should render.

["admin:user:add", "admin:user:delete", ...]

Yes, this is my way, it is simple list which can be queried for existence of privilege. I'm using helper functions so I can easily change this implementation detail

[WiktorKa]

@langpavel Could you recommend any library with these helper functions? Or you wrote them yourself?

[langpavel]

@WiktorKa Yes, it is few function, I write them myself. But there are hundreds of libraries you can try: https://www.npmjs.com/search?q=acl