It seems that the way nhosts Apollo client keeps track of which token is currently in use is not compatible with SvelteKit. It works fine when you create the client in project root (so that it exists when you login) and then login.

However, if you refresh the page after you have logged in. You will lose the token in Apollo client and subsequent queries will not be authorized.

When debugging (read: spamming console.log) It seems that order where events are processed are:

1. apollo client is created
2. query to graphql is made
3. SIGNED_IN event is received

Therefore when user tries to make an authorized query, there is no token set.

Other information:

• SvelteKit 1.0, svelte, nhost.
• tested locally with nhost up
• relevant code https://github.com/nhost/nhost/blob/f34702f3c571ae3f208ffa781ea51dd30a963503/integrations/apollo/src/index.ts#L129

Same is true even if you try to do it by hand. I tried to use @urql/svelte and manually get token from nhost.auth.getAccessToken() and most of the time its empty. Sometimes it works if loading of the page is slow enough.

a very simple fix is to just wait until its authenticated and then make the query.
let todos: any = []; onMount(async () => { await nhost.auth.isAuthenticatedAsync(); todos = await apolloClient .query({ query: gql` query { todos { title } } ` }) .then((res: any) => res.data.todos); });

I dunno what the correct solution for this one would be. Maybe making own svelte/sveltekit integration or something.

Hi @hanshoi.

This is the key:
> a very simple fix is to just wait until its authenticated and then make the query.

You always need to wait until the user is authenticated after a reload.

For react, you can use either ` (https://docs.nhost.io/reference/react/signed-in) or build your own authentication guard usinguseAuthenticationStatus()` ()

Example with ``:

And here's an example using the useAuthentication() hook:

Yeah, that is pretty much what I did here https://github.com/hanshoi/sveltekit-nhost-houdini-example/tree/master

Thank you for the follow up 👍

Amazing template!

I know @Szilard is working on a SvelteKit example app for our monorepo too in the feat/sveltekit-example branch: https://github.com/nhost/nhost/tree/feat/sveltekit-example/examples/sveltekit

Your template could be a good reference point for us.

Or if you want to add your template to our monorepo under examples/, that would help a lot too

we have a couple of 100 visitors to our exaemples/ folder every week and I'm sure there are some developers looking for a SvelteKit example

I don't mind contributing. At least it can be a baseline for further improvements down the line.

Hey @hanshoi! Your example looks very good.

When I was working on our SvelteKit example, the main goal was to be able to authenticate the user on the server side

https://github.com/nhost/nhost/tree/feat/sveltekit-example/examples/sveltekit

The logic is basically this:

• If no user is signed in and visits a site that requires you to sign in -> throw redirect(302, '/sign-in')
• If we have the necessary cookies and we can find the right session -> return { session } (see the full example here: https://github.com/nhost/nhost/blob/feat/sveltekit-example/examples/sveltekit/src/routes/%2Blayout.server.ts)

Now on the client side:

• We already have the session information, we just need to start the Nhost client (from @nhost/nhost-js) using the session coming from the server-side

My example is absolutely WIP, you'll most likely find some arbitrary subdomains in the code

By using the session coming from the server-side, we don't need to execute additional network requests on the client-side

I remember there was something in the SDK implementation which we wanted to simplify to have a better support for SSR, but I don't recall what it was. Maybe @Pilou remembers.

I don’t recall right now, but I will drop you a line if I remember what we talked about