Log out with pageContext.user and once

[itsdyzoon]

Hi!

I'm following the Vike auth guide to implement custom authentication. I’ve successfully handled login using a server-side onCreatePageContext() and passed the user to the client with once enabled. Now I’m trying to implement a logout mechanism.

I call an API endpoint that invalidates the session (stored in cookies). After that, I want the UI to reflect that the user is logged out.
I tried setting pageContext.user = null or pageContext.globalContext.user = null, but the values do not update themselves, not to mention the UI.
I also tried calling reload() (with and without setting the above), but it doesn't seem to help.

Is there a way to update pageContext.user after logout (and re-render the UI accordingly) without reloading the entire page from the server?

[brillout]

I see (and the docs should be updated to mention this).

Can you confirm the following?

pageContext.globalContext.user = null
console.log(pageContext.user === null) // Logs true

Why doesn't it solve the issue?

[itsdyzoon]

Yes, it does indeed log true, so I was wrong in this part, sorry for that

but the values do not update themselves

The UI update part remains, though. Such a change to globalContext doesn't cause a re-render, so I assume I need to use reload()?
When I try reload() after setting user to null I can see in the logs that onBeforeRoute is called, so routing takes place, but the UI, dependent on pageContext.user, stays the same

[brillout]

the UI, dependent on pageContext.user, stays the same

That's because you are using some kind of cache? E.g. useMemo() if you use React?

---

There is a still a blocker though:

• Make reload() clear the once cache #2585

Once it's implemented (ETA this week) you'll be able to simply reload() and everything should just work then. (No need to set pageContext.global.user then.) You'll still have to fix your UI cache issue though (but AFAICT that's a user land issue on your side).

In the meantine, is doing a hard reload window.navigation.reload() an acceptable temporary workaround for you?

[itsdyzoon]

That's because you are using some kind of cache? E.g. useMemo() if you use React?

Nope, I use pageContext.user.first_name directly

I've created a repro where you are authorised at the server level (+onCreatePageContext.server.ts) and then if you try to de-auth with one of the buttons (+Page.tsx), you'll get pageContext.user === null logging true, yet the interface will stay at Hello John Doe

https://stackblitz.com/edit/uc6tlank?file=pages%2Findex%2F%2BPage.tsx

[brillout]

I can confirm, and I wrote a fix here. I'll further dig into possible edge cases I may have missed tomorrow. Note that once and globalContext are recent additions — issues are to be expected.

[brillout]

Fix pre-released as 0.4.236-commit-79f1ef0. (It also contains the other fix.)

I also noticed that HMR doesn't always work. I'll dig into that as well.

Once it's implemented (ETA this week) you'll be able to simply reload() and everything should just work then.

ETA next week.