New to web dev, need help with authentication system.

[real crown]

To start off, im not completely sure if this is even the right place, but i want to create an auth system for my website. Im using Nuxt and Vuetify for the front and express.js in the back. Ive already created a registration route for my backend which saves the data in a mysql database, the data is sent to the backend using axios. I also have a really primitive login route, that currently, gets the Name, Surname and password(for verification) from the database

Now, my problem is that i have no idea how to do the login part. I suppose i have to generate somekind of a token that stores the user info, like name, surname and email in it but dont know how to do that + where to store it and how to use the auth module, or store, or both. The same goes for middleware, as i believe, i need to use that if i need to protect a frontend route.

Right now, i have copied the middleware example from the nuxt docs

export default function ({ store, redirect }) {
    // If the user is not authenticated
    if (!store.state.authenticated) {
      return redirect('/login')
    }
  }

[real crown]

Hmm, looks like i can make it so my login route checks for the email existance in the database, if it does exist, return the data associated with it, in this case password, name and surname, we check the hash, and then just populate the store with the name and surname, as well as setting authenticated to true..? is that how its supposed to work ?

Well, looks like my getting user pass/data logic works

[real crown]

And got it so it grabs the users name and surname from the database too

So, getting data works. Now i just need to manage sessions i guess

[real crown]

Using the store works too.

Just learned that it doesnt persist after a page reload tho

[real crown]

Well, im generating a jwt_token using the Name and Surname aswell as a state of auth, which in this case i guess will always be true, but now i have no idea what to do. I am returning the jwt_token to the frontend

[real crown]

anyone ?

[sacred canyon]

Use a cookie to persist session data?

[real crown]

ye if only it would work

I can set the cookie, and i made an endpoint on my backend which im using in my navbar components mounted section to validate it, but i still get logged out after a page reload

[real crown]

Getting a 401 unauthorized error in the browsers console whenever i try to access the main page. It loads, but the error is there

The same happens on my other page, but its using the same navbar component so thats to be expected

Well, the session id gets sent to the backend whenever the navbar loads , so now my question is why dont i stay logged in and why is it showing me my not authenticated message even if the sessionid should be valid for 24 hours

[real crown]

The session gets saved using req.session.save(), and the data is still accessible when were still at the login route, but it just dissapears when were at the login/validateSession route

Yes i know sending it over body, or whatever its called is not safe. Safety at the moment isnt a concern, right now, all i need it to do is work.

This is a console log after the data has been grabbed from the database by the way, obviously while checking the email and password using bcrypt

[modern spindle]

Theres an example here on how to use the serverside middleware to keep your authentication session valid
https://github.com/sidebase/nuxt-auth/tree/main/playground

I decided to implement supabase instead, was a bit simpler =)

[granite vigil]

Hi @real crown , May I ask how you set your Cookie? I'm trying to do something similar, I think; I want to set an httpOnly cookie from my server/api/login.post.ts endpoint, but am kinda stumped how to set the cookie there...
BTW, I'm following a Django/Next video series (https://www.youtube.com/playlist?list=PLJRGQoqpRwddLqVtViDg4IILOTry1VjjP) that looks good and seems to contain good content; it uses Django as a back-end, but that's not really important, I think. I just need to translate Next to Nuxt and am stuck on how to set those cookies.
Thanks!

[real crown]

httpOnly is server side

You cant, or shouldnt, set it in the frontend

[granite vigil]

Correct, that's why I want to set is in the /server/api/login.post.ts (which is server side, right...?)

[real crown]

Should be 😅

[granite vigil]

It seems that in Next, you have access to the response, while it seems that in Nuxt, you have access to the event, which is only the request part, from what I've seen... I may of course be wrong...

Or... can/should we access event.node.res?!?

That looks to be it... 😎

event.node.res.setHeader("Set-Cookie", [
    cookie.serialize("token", response.data.token, {
        ...
    }
])

seems to work and sets the cookies from server side.
Sorry to hi-jack the thread...