Implementation
Serving Data Client-Side
Utilize the data from Svault to render on your svelte pages
- Svault automatically sends back authentication information to the frontend via the
event.locals
object. This allows you to display any necessary information you would like, client-side.- If you would like to display the users username on the page, simply load
event.locals.username
in your+layout.server.ts
, and then call it on your+page.svelte
. - If you would like to display an appropriate error message upon incorrect login, the error will be returned back to the client side on the
event.locals.failure
object.
- If you would like to display the users username on the page, simply load
- See example below:
// In +layout.server.ts
import type { LayoutServerLoad } from '/$types';
export const load = (async ({ locals }) => {
const { username, failure } = locals;
return await { username, failure };
}) satisfies LayoutServerLoad;
// In +page.svelte
<!-- displays username upon successful login -->
{#if data.username}
<a
href="/logout"
data-sveltekit-reload
>
Hello {data.username}, Log out
</a>
{:else}
<!-- displays error message if login is unsuccessful -->
{#if data.failure}
<div>
{data.failure}
</div>
{/if}