Client-side Helpers

useClerkContext()

The Svelte SDK provides a useClerkContext() function that gives you access to the Clerk object, User object, Organization object, and a set of useful helper methods for signing in and signing up. They all leverage the power of Svelte Runes.

The useClerkContext() function returns the following properties:

• auth - The Auth object.
• user - The User object.
• organization - The Organization object.
• session - The Session object.
• clerk - The Clerk object.

The following example demonstrates how to use the auth object to access the current auth state, like whether the user is signed in or not. It also demonstrates a basic example of how you could use the getToken() method to retrieve a session token for fetching data from an external resource.

<script lang="ts">
	import { useClerkContext } from 'svelte-clerk/client';

	// Do not destructure context to avoid losing reactivity
	const ctx = useClerkContext();

	const userId = $derived(ctx.auth.userId);

	const fetchDataFromExternalResource = async () => {
		const token = await ctx.session.getToken();
		const response = await fetch('https://api.example.com/data', {
			headers: {
				Authorization: `Bearer ${token}`
			}
		});
		return response.json();
	};
</script>

{#if userId === undefined}
	<p>Loading...</p>
{:else if userId === null}
	<p>Sign in to view this page</p>
{:else}
	<div>...</div>
{/if}