How to propagate context from client to server

[marcusway]

I'm a wayward backend engineer about to reveal my profound ignorance of all things web here, so I apologize in advance for the rambling and dumb questions. I also really appreciate all the documentation and examples in vite-plugin-ssr.

The thrust of what I'm trying to do is simply to have a user's information available to me on the server side after they've logged in on the client. I've read the Authentication section in the docs, where I see we have a custom express server, which pulls headers out of the incoming request and authenticates the user that way, but it's not clear to me how to set those headers appropriately from the client.

Fore more context than you probably need or want:

I have an existing, separate REST API, which handles user management/auth among other things. I also fetch content from a separate CMS. I'm writing a web app using Vue.js + Vite + Vercel. I had initially written this as an SPA, but I've been trying to move to server-side rendering because

1. some of the content is "premium"--I only want to show it to users who are authenticated and have permissions to view.
2. I'd like the content to be indexed for SEO
3. I don't want to leak content that the current user is not authorized to see back to the browser (i.e. if I just blocked it/redirected on the client)
4. I don't want to leak my CMS API key to the client

When I was going the SPA route, I had a login page where the user authenticates with my API from the browser, and then I'd been storing some user information and the token returned from the API in a Pinia store backed by localStorage (using vueuse's useStorage). I was then using that token to make authenticated calls to my API from the client. If I'd like to make those calls from the server, or if I want to authenticate the user with my API before making a call to the CMS, I need to have the token available on the server side. I think I was naively assuming that the Pinia state would be magically synced from client to server or something. I guess my real question is how do I hook into the vite-ssr-plugin to make the user information available on the server? Are cookies and a custom server.js the best way to do this? The way I've rigged up for now is to use vue-cookies to set a cookie on login, and then I parse the cookie and do what I need with it in the Vercel handler function (the api/ssr.ts file) before sticking it in the pageContext and calling render

I'd also be interested in hearing if you think this whole approach is just dumb, and there's some better/easier way to do it.

[brillout]

it's not clear to me how to set those headers appropriately from the client.

Usually, you'd create a new Express.js route /login that sets the headers accordingly. (Or use an RPC tool, see https://vite-plugin-ssr.com/api-routes.) Does that answer your question?

[brillout]

These questions are more related to Node.js than to VPS.

[marcusway]

Fair enough (like I said about my profound ignorance). I think my confusion is perhaps less about Node.js than about the conversation between Vue.js in the browser and Node.js on the server. In particular, I understand that there are various options for session management and authentication in Node.js. Whatever I do on the server, though, I need the browser to send session-specific data to the server on page navigation because I'd like my *.page.server.ts and *.route.ts files to have that information available.

This seems like such a basic use case--I'm sure I'm being dense or missing something fundamental about how browsers work. Is there a standard way of having the browser include a header on page navigation requests other than setting a cookie? I realize that this is outside the scope of VPS, so I'd appreciate any nudge in the right direction.

[brillout]

AFAIKT cookies are the only headers that are persisted. And, yea, this is all unrelated to VPS :-).

[marcusway]

Yeah, it looks like Auth.js and other frameworks are just using cookies under the hood anyway, so it seems like my initial approach was a reasonable one. So I guess "the answer" to my original question is just "use cookies."

I appreciate your being part of my education here--all of these frameworks are new to me, so figuring out which thing is doing what has been a bit of a project for me. Anyway, thanks again, and thanks for VPS!

[brillout]

You're welcome, although I didn't do much :-). But, yea, always helps to be pointed into the right direction.

Thanks for starting sponsoring 💚. Next step: convince your employer for a company sponsorship 😀.