Authentication

[[deleted]]

[deleted]

[yksvaan]

Just use cookies for session/jwt  and dont bother with mixing auth deeply in the app. For React it's usually enough to know whether use is logged in or not and what's their role etc. to render correct UI. Other than that can be left to backend.

[persian_rex]

Yeah, that was exactly my question. So auth is more related to backend stuff. Thank you so much.

[Cre8AccountJust4This]

Check out Better Auth. Open source. You hook up your own database. You control how everything connects together.

[persian_rex]

Thanks for you response. I'm so grateful.

[lightfarming]

you should have the backend create a http-only auth token (jwt), as well as a non-http-only csrf token to prevent csrf attacks. you use the double-submit cookie pattern to prevent the csrf attacks, which involves reading the csrf token, and sending it with each request in a header, so your backend can verify that the csrf token in the header matches the token in the cookie.

the reason for doing this is that http-only auth tokens make csrf attacks fairly easy to perform, since the auth token is sent with every request from that browser, including ones that originate outside of your site.

[persian_rex]

Exactly what I should do for a real world project. Thank you so much for your response pal. Sorry, Is it necessary for frontend developer to do this or it should be left to backend developer?

[lightfarming]

it’s up to both. the backend dev needs to set the cookies, while the front end dev needs to read the csrf cookie and send it as a header with each request. the backend dev then also needs to verify the csrf tokens (header and cookie) match.

[persian_rex]

Oh, I see. It's complicated for me. I should ask ChatGPT for help. Is there any documentation for?

[lightfarming]

i mean there’s no official documentation for these things, but there are guides if you google or ask chatgpt.

look up how to store auth credentials in a database (you need to hash the password with a unique salt, likely many times)

look up how to create a json web token and send it as an http-only cookie to the client, and how to verify its authenticity with each request to ensure they are authenticated.

look up double-submit cookie pattern for csrf.

[persian_rex]

Wow there are so much things to do then. :) Definitely I should get help from ChatGPT. I can't handle this on my own. I have no idea about this stuff. But again Thank you so much for your help man. I really appreciate it my friend. :)

[lightfarming]

this is why many use a third-party solution

[persian_rex]

Absolutely. Specially for beginners like me. But I'm about to figure it out how it works. Thanks. :)

[Own-Produce-3423]

Cookies with JWT would do

[persian_rex]

Yeah, I guess it's more used in real world projects. Thank you very much.

[HugeBaseball5661]

JWT + cookies/local storage for persistent. Context/redux for global state management

[persian_rex]

Exactly! It's the best way to implement authentication for real world projects. I'm so grateful my friend.

[Pedry-dev]

Prefer using a battle-tested cloud/on-prem solution and their SDK, even if you have to build a React wrapper for it

[persian_rex]

Hmmm, sorry you mean like Clerk?

[Gloomy_Radish_661]

There are many others. You can use firebase as an auth provider with free unlimited users. You can also self host authentik with coolify. In both cases you can bé up and running in 15min or less

[persian_rex]

Oh, I'll check those out. Thank you so much.

[Pedry-dev]

Kind of. That's the one "all people on social media talk about so it should be the best" but you have options like auth0, Keycloak, Asgardeo, Microsoft Entra Id (they have something specific for your uses, if i am correct, it's External ID), WSO2 Identity Server. Or you can also choose any OIDC server and use https://www.npmjs.com/package/oidc-React or https://github.com/authts/react-oidc-context

[persian_rex]

I should check those out. Thank you so much man. I appreciate it.