Trying to come up with a simple login workflow with the new routing

[hubert-ix]

I'm trying to come up with a simple login workflow using the new routing system, but can't seem to get it to work.

Here's the high level workflow:

1. in a login page I take the username and password, and send them to a server endpoint
2. in the server endpoint, I call my authentication backup and get a user object. I put it in locals.currentUser, and also in a cookie
3. in the root +layout.server.js, I get locals.currentUser and return it as "user" (assuming that then it will be available in all +layout.js)
4. coming back to my login page, assuming the credentials were fine, I redirect to an account page
5. in the +layout.js of the account folder, I get the user object created in the root +layout.server.js with const {user} = await parent()

(Additionally, in hook.js I populate event.locals.currentUser with the cookie's content, so that when refreshing the browser we retrieve the user)

And the problem is that in step 5, the user object is empty. I need to reload the browser for it to be populated.

Here is the code:

The login page - routes/login/+page.svelte

// we call this after the user submits their username and password
async function login() {
 // we call a server endpoint
 const res = await fetch("/api/login", {
   method: "POST",
   body: JSON.stringify({username: $form.username, password: $form.password}),
 });
 const data = await res.json();
 // we assume everything went well and the credentials were correct, and redirect to an account section
 goto("/account");
}

The login server endpoint - routes/api/login/+server.js

export const POST = async({request, locals }) => {
 let req = await request.json();
 let data = {
   "name": req.username,
   "pass": req.password
 }
 // call the backend and authenticate the user
 let resultLogin = await fetch("my-backend-login-url", {
   method: 'POST',
   body: JSON.stringify(data),
   headers: {'Content-type': 'application/json'}
 });
 let responseLogin = await resultLogin.json();
 // set the user in locals (we will retrieve this in the root +layout.server.js)
 locals.currentUser = user;
 // set a cookie with the user (we use this in hooks.js)
 const headers = {
   "Set-Cookie": cookie.serialize("user", JSON.stringify(user), {
     httpOnly: true,
     sameSite: "lax",
     maxAge: 60 * 60 * 24 * 7,
     path: "/"
   })
 };
 return new Response(JSON.stringify({ user }), { headers });
});

The root layout - routes/+layout.server.js

export async function load({ locals }) {
 return {
   user: locals.currentUser 
  // locals.currentUser was set in the login server endpoint
  // presumably "user" will now be available in layout.js throughtout the routes
 };
}

The account section layout - routes/account/+layout.js

export async function load({ url, fetch, parent}) {
 const { user } = await parent(); // This is empty unless I refresh the browser
}

hooks.js

import * as cookie from "cookie";

export async function handle({ event, resolve }) {
 const cookies = cookie.parse(event.request.headers.get('cookie') || '');
 if (cookies.user) {
   event.locals.currentUser = JSON.parse(cookies.user);
 }
 else {
   event.locals.currentUser = null;
 }
 const response = await resolve(event);
 return response;
}

So, first of all, does this workflow make sense?
And if it does, why is user empty in +layout.js unless I refresh the browser?

EDIT

Thanks to everyone who suggested a solution or a tip in the right direction.

As it turns out it's quite logical that user is empty in /account/+layout.js
When I redirect from routes/login/+page.svelte, it's all on the client side so routes/+layout.server.js is never called. And so user is not passed to /account/+layout.js

Using invalidateAll() after calling goto(/account) will not work, because from what I understand it will re-run the load function in routes/account/+layout.js (the active route we end up on after goto). So it will still not trigger routes/+layout.server.js

So there are two solutions:

Solution 1: create additional server pages

I can create routes/account/+layout.server.js. From there I can get the user (it will be in locals.currentUser), and I can pass it as a data to routes//account/+layout.js

This works well but I will need to add +layout.server.js (or +page.server.js) to any route where I need the user in the load function
That's feasible, if a little boilerplate

However in my case there's an added complication. For various reasons I am keeping only the minimum data about the user in locals.currentUser. Then in routes/+layout.server.js I am loading lots of additional data about the user. This is passed to all the load functions, and also set in a store on the client side.

I am doing this because the user objects needs to be updated at various points in my app. With this method, I can update the client side store on the fly, and also make changes to the database. If the user refreshes the page, all the changes are retained because I am loading the full use robject in routes/+layout.server.js. Without that, all changes would only be seen if the user logs out and back in.

Solution 2: simple hack

The simple way: force a page refresh by using location.href = "/account" instead of goto("account")
A bit of a hack, but it works.

Conclusion:

For all the talks about making Sveltekit simpler by removing session, in practice so far it feels like a hindrance more than anything else. I basically had to recreate its functionality.

[laotala828]

In your routes/login/+page.svelte file after goto("/account"); try adding invalidate();

[hubert-ix]

No luck, unfortunately.

I wonder if it's because routes/+layout.server.js is not called when I redirect to /account. So, user is not populated until I refresh the browser - at which point routes/+layout.server.js is called.

But then how can I achieve this workflow and get user to be populated?

[richarddavenport]

We had the same problem a while ago. We just force a page reload.

goto("/account")

becomes

location.href = "/account"

[hubert-ix]

Okay, so I've tried invalidateAll() (instead of invalidate()), and it kinda worked but one out of 3 or 4 times it would crash the server. I haven't been able to figure out why.

So in the end I've used @richarddavenport solution and just forced a page reload. It's not very elegant as a major point of using Svelte is having no page reload, but it works.

I have to say though I'm really questioning the decision to remove the session object, since in most cases we're going to have to reconstruct it in some (broken) way.

[laotala828]

Maybe try await goto() and await invalidate()?

[hubert-ix]

@laotala828 thanks for the suggestion. I've tried it but still get the same results. After looking at the docs it says:
Causes all load functions belonging to the currently active page to re-run
So from what I understand it will re-run the load function in /routes/account/+layout.js (the active route we end up on after goto), but what I need to trigger is /routes/+layout.server.js, because this is where user is set and passed to subsequent load functions.

[aphilas]

For #5, You can get the user from the data param in layout.js.

// layout.ts
export const load: LayoutLoad = async function ({ data }) {
	const user = data?.user // data from layout.server.ts
	// rest of code
}

// layout.server.ts
export const load: LayoutServerLoad = async function ({ locals }) {
	// locals.user is set in hooks/index.ts
	if (locals.user) {
		return {
			user: locals.user
		}
	}
}

[hubert-ix]

Thanks, I've tried it but data is always empty in +layout.js.
Maybe because I'm not using types?

edit:
Oh, I see what you mean - I could indeed create /account/layout.server.js, get the user from there, and send it as a data to /account/+layout.js

[hsb-tonmoy]

I'm not that experienced with Sveltekit so pardon my ignorance.

Since you're populating event.locals.currentUser in the login server endpoint, shouldn't you be able to access the user with event.locals in all of the layout.server.js?

That's assuming all of your layouts are running on the server, not on the client.

[hubert-ix]

Yes, you're right, I could create routes/account/+layout.server.js, which would then pass the data to routes/account/+layout.js.

I've added an edit in the original post that explains why that wouldn't work in my case, although it is a good solution for more general cases.

[j4w8n]

Whenever I use invalidate with goto, I have to await - presumably to give the load functions time to rerun.

/* routes/login/+page.svelte */

/* login successful */

await invalidateAll()
goto('/account')

[hubert-ix]

From what I understand, though, this will re-run the load function in the current route (not the one that the goto goes to). Also it will not re-run any server route file.

[j4w8n]

If you don't pass anything into the function, I was thinking it reruns all loads. I know they've tried to tweak that to be more efficient though.

[theetherGit]

Joy of code updated sveltekit authentication using cookies github repo. In this repo you can check the code and understand it, it's perfectly working.

[theetherGit]

@hubert-ix yeah using store is more useful for real life scenarios, It's an example for how to do basic auth in sveltekit with sessions.

[theetherGit]

In this scenario we can just add a store and update it's value from layout.server.ts and use it wherever we need it in our project. I think there are possibilities of new third party authentication lib which will make it more easy using old session method.

[smblee]

might be a dumb question but is there a reason to use layout.server.ts over layout.ts?

[hsb-tonmoy]

Also, can you use the same store in both the server and the client?

[jesperordrup]

might be a dumb question but is there a reason to use layout.server.ts over layout.ts?

Yes. .server.ts runs only on server. Layout.ts runs on server and client. The first is ideal for secrets

[dummdidumm]

Throwing this in here since it kind of related; a rough sketch/idea by Rich Harris how to get some stateful logic into client load functions (one of the things $session was used for):

// src/lib/state.js
import { invalidate } from '$app/navigation';
import { browser } from '$app/environment';

const secret_hacky_url = '/__state';

let state = {};

export function get_state(depends) {
  depends(secret_hacky_url);
  return state;
}

export function set_state(new_state) {
  if (!browser) {
    throw new Error('cannot set state on the server');
  }
  state = new_state;
  invalidate(secret_hacky_url);
}

// src/routes/+layout.js
import { get_state } from '$lib/state.js';

/** @type {import('./$types').LayoutLoad} */
export function load({ depends }) {
  const { user } = get_state(depends);
  return { user };
}

<!-- somewhere in the app -->
<script>
  import { set_state } from '$lib/state.js';

  async function login() {
    const res = await fetch('/login', { method: 'POST', ... });
    const user = await res.json();

    set_state({ user });
  }
</script>

<button on:click={login}>

[smblee]

this is definitely a right step towards what i am looking for - location agnostic data getter/setter access.