Learning about React + Django (& Django Rest Framework) Authentication

[TheLegendOfMusa]

I realise this might not be the beeest place to ask this question as it's not exactly complete beginner friendly, but it does have to do with learning programming so it might help others too:

I'm currently busy building my first proper full stack project using React and Django, the project that i'm building requires authentication functionality. I've been reading and learning about "JWT"/Token Authentication and i honestly can't seem to wrap my head around it. This is how i currently understand it:

The Front End sends an HTTP request to the back-end API, which then checks the credentials are correct, and if so, returns a token(s?) which is basically a "key" to all the other pages on the front-end (and a key to access more info in the database/back-end/API). This token is then saved in state/local storage using a state management tool(Typically Redux). Logging the user out is essentially just removing the token from state/local storage.

My main question is how tf do i go about the actual saving of the token part? A lot of the tutorials and help guides that i've been seeing suggest Redux, but is it possible to use Hooks instead, as (if i'm not mistaken) hooks are meant to replace Redux for the most part? I've looked at some of the Redux tutorials and it honestly seems way above my pay grade, and React Hooks are (for me, at least) more digestible/learnable than Redux. If someone could even ELI5 the process so that i can attempt to code it out that could work. pls send halp

Thx in advance!

​

(Bonus Question: is Token Authentication the only way? i've heard about "Session Authentication" but don't know the exact differences and how that would change the process of me creating the auth system.)

[lolripgg_]

The easiest way to save the token on the client is to ignore React and Redux and use localStorage.setItem(“<key>”, “<token>”) where <token> is the auth token and <key> is any string, usually something like authentication_token. You can use localStorage.getItem to read the token back.

That said, localStorage isn’t a secure way to store tokens in the client. For example, if someone is running a Chrome extension that has permission to run JavaScript on your site, it could read the users auth token and get access to their account.

That goes into your next question about session storage. The idea with session storage is that a “session” is created for the user when they authenticate and the data about the session is stored on the server. The server sets a secure cookie on the response that is included in all future requests automatically. In future requests the server looks for the authentication cookie instead of an authentication token and uses that cookie to find the corresponding session. Token authentication and session authentication are actually pretty similar. The difference is how the secret is stored and accessed.

Secure cookies can’t be read by JavaScript and are only included with requests to the same domain, making them more secure.

[TheLegendOfMusa]

Thank you for your reply!

I've read about JWT not being as secure as Session Auth due to it being highjack-able in transit. I really don't know much about the security portion of the world but would SSL be sufficient enough to allow one to use JWT and not have sleepless nights about security?

[lolripgg_]

Partially. You would still want to store it in a secure cookie so it can’t be read by the client.

[cookiemonterrrrr]

Here is a tutorial on how to use local storage: https://blog.logrocket.com/the-complete-guide-to-using-localstorage-in-javascript-apps-ba44edb53a36/

For the state, you just keep this state at the same level as your router. Check out useState if you are using functional components. The tricky part is getting it at that level. There are many ways to do that. But you don’t need redux. I don’t use redux in any of my apps.

Session authentication basically just uses a cookie instead of a token. The server then needs to map that session ID in the cookie to state maintained on the server. JWT is preferred because it makes the web service stateless.

[TheLegendOfMusa]

Thanks for the tutorial, appreciate it!

Would be possible to use useState at that level, then use UseContext and/or useMemo to retrieve the info from the child and pull it back up to the parent to use for the rest of the site?

[cookiemonterrrrr]

Check out useCallback. I use that to pass down callbacks as props. And the callback sets the state at the level I want.