> ## Documentation Index
> Fetch the complete documentation index at: https://svault.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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:

```TypeScript theme={null}
// In +layout.server.ts

import type { LayoutServerLoad } from '/$types';

export const load = (async ({ locals }) => {
  const { username, failure } = locals;
  return await { username, failure };
}) satisfies LayoutServerLoad;
```

```TypeScript theme={null}
// 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}
```