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.
• 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}