From b30c9fde84bf3c592442c00e145485a20b4778ff Mon Sep 17 00:00:00 2001 From: Tim <83622086+timothycohen@users.noreply.github.com> Date: Tue, 12 Dec 2023 11:12:04 -0500 Subject: [PATCH] docs: note implications for authentication (#10713) load functions related to #6315 --- documentation/docs/20-core-concepts/20-load.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/documentation/docs/20-core-concepts/20-load.md b/documentation/docs/20-core-concepts/20-load.md index a1c04b755d41..debeba10e786 100644 --- a/documentation/docs/20-core-concepts/20-load.md +++ b/documentation/docs/20-core-concepts/20-load.md @@ -624,6 +624,20 @@ To summarize, a `load` function will rerun in the following situations: Note that rerunning a `load` function will update the `data` prop inside the corresponding `+layout.svelte` or `+page.svelte`; it does _not_ cause the component to be recreated. As a result, internal state is preserved. If this isn't what you want, you can reset whatever you need to reset inside an [`afterNavigate`](modules#$app-navigation-afternavigate) callback, and/or wrap your component in a [`{#key ...}`](https://svelte.dev/docs#template-syntax-key) block. +## Implications for authentication + +A couple features of loading data have important implications for auth checks: +- Layout `load` functions do not run on every request, such as during client side navigation between child routes. [(When do load functions rerun?)](load#rerunning-load-functions-when-do-load-functions-rerun) +- Layout and page `load` functions run concurrently unless `await parent()` is called. If a layout `load` throws, the page `load` function runs, but the client will not receive the returned data. + +There are a few possible strategies to ensure an auth check occurs before protected code. + +To prevent data waterfalls and preserve layout `load` caches: +- Use [hooks](hooks) to protect multiple routes before any `load` functions run +- Use auth guards directly in `+page.server.js` `load` functions for route specific protection + +Putting an auth guard in `+layout.server.js` requires all child pages to call `await parent()` before protected code. Unless every child page depends on returned data from `await parent()`, the other options will be more performant. + ## Further reading - [Tutorial: Loading data](https://learn.svelte.dev/tutorial/page-data)