currentUser is null after registering

[jamauro]

Hey, thanks for putting together this repo and the YouTube video.

I'm able to successfully register a user but for some reason $currentUser is null and when I look at local storage the pocketbase_auth is {token: '', model: null}

When I console log pb.authStore.model in hooks.client.js, it's null

pb.authStore.onChange(() => {
  console.log('pb.authStore CHANGE', pb.authStore.model);
  currentUser.set(pb.authStore.model)
  document.cookie = pb.authStore.exportToCookie({ httpOnly: false })
})

Any ideas?

[jianyuan]

Hey @jamauro, thanks for watching the video!

Did you add this line to your hooks.client.js file?

pb.authStore.loadFromCookie(document.cookie)

By default, PocketBase will store the token in local storage. However, the token is not visible to the server. To fix this, we store the token as a cookie instead, which is visible to both the client and server. You should instead check for the presence of a cookie named pb_auth like this:

Let me know if that helps!

[jamauro]

Hmm, it looks like it's only happening in Safari. Chrome works as expected.

If I set {secure: false} inside exportToCookie in hooks.server.js, then it works in Safari. Found this on stack overflow: https://stackoverflow.com/questions/71882925/cookie-not-being-set-in-safari

Do you know of a better way to handle this?

[jianyuan]

@jamauro That's a good observation!

I will adjust the example accordingly.

If we look at SvelteKit's documentation for the Cookie.set() method, it sets secure to false when we're on http://localhost. Here's the source code to the logic.

Ideally, I'd like to use this method, but PocketBase's Javascript SDK does not give us the raw cookie value, only the serialized cookie value suitable for setting as the set-cookie header.

The best option is to replicate SvelteKit's options (i.e. setting secure to false on http://localhost) when generating the serialized cookie (the pb.authStore.exportToCookie() function).

[jamauro]

I saw this too, but I'm not sure it's better and I haven't tested it: pocketbase/pocketbase#1490 (reply in thread)

[mediashock]

I have this issue right now. it works in Chrome but not safari.

[shyakadavis]

Hi;

I haven't tested in prod yet, but using esm-env's dev variable was handy in resolving this issue for me;

// hooks.server.ts
import { dev } from '$app/environment';
// ...
response.headers.append(
		'set-cookie',
		pb.authStore.exportToCookie({ httpOnly: true, sameSite: 'Lax', secure: dev ? false : true })
	);
// ...

I'll test in prod when I finally get around to hosting PB somewhere like Fly or the like.

Hope it helps. 🙂