Tesseral Svelte SDK

Tesseral’s Svelte SDK lets you add B2B auth support to your clientside Svelte app.

The Tesseral Svelte SDK is open-source and available on GitHub.

Getting Started

Install the Tesseral Svelte SDK by running:

$
npm install @tesseral/tesseral-svelte

Then, in your Svelte application, add a TesseralProvider at the root of your Svelte application in your top-level +layout.svelte file:

1
<script lang="ts">
2
    import { TesseralProvider } from '@tesseral/tesseral-svelte';
3
    let { children } = $props();
4
</script>
5
6
<TesseralProvider publishableKey="publishable_key_...">
7
    {@render children()}
8
</TesseralProvider>

Replace publishable_key_... with your project’s Publishable Key. You can find it in the API Keys Settings of the Tesseral Console.

Once you’ve added TesseralProvider, all visitors to your Svelte app will automatically be authenticated. Unauthenticated visitors are redirected to a Tesseral-hosted login flow before being redirected back to your application.

Accessing details about the authenticated user

The Tesseral Svelte SDK makes information about your authenticated user available through a set of Svelte stores.

Tesseral’s Svelte SDK stores will throw an error if used outside of a child component of TesseralProvider.

getUser

To get the current logged-in User, call getUser:

1
<script lang="ts">
2
    import { getUser } from '@tesseral/tesseral-svelte';
3
4
    let user = getUser();
5
</script>
6
7
<h1>Your verified email is {$user.email}, and your ID is {$user.id}!</h1>

getOrganization

To get the Organization that the User works for, call getOrganization:

1
<script lang="ts">
2
    import { getOrganization } from '@tesseral/tesseral-svelte';
3
4
    let organization = getOrganization();
5
</script>
6
7
<h1>You work for {$organization.displayName} (org ID: {$organization.id})!</h1>

getLogout

To force the current User to log out, call the callback returned from getLogout:

1
<script lang="ts">
2
    import { getLogout } from '@tesseral/tesseral-svelte';
3
4
    let logout = getLogout();
5
</script>
6
7
<button onclick={$logout}>Log out</button>

getUserSettingsUrl

Tesseral automatically provides a self-serve user settings UI to handle tasks like changing emails, resetting passwords, and configuring multi-factor authentication.

You can get a link to that UI using getUserSettingsUrl:

1
<script lang="ts">
2
    import { getUserSettingsUrl } from '@tesseral/tesseral-svelte';
3
4
    let userSettingsUrl = getUserSettingsUrl();
5
</script>
6
7
<a href={$userSettingsUrl}>User Settings</a>

getOrganizationSettingsUrl

Tesseral automatically provides a self-serve organization settings UI to handle tasks like managing collaborators, creating and revoking user invites, and customizing login methods.

You can get a link to that UI using getOrganizationSettingsUrl:

1
<script lang="ts">
2
    import { getOrganizationSettingsUrl } from '@tesseral/tesseral-svelte';
3
4
    let organizationSettingsUrl = getOrganizationSettingsUrl();
5
</script>
6
7
<a href={$organizationSettingsUrl}>Organization Settings</a>

getAccessToken

To directly access the User’s access token, call getAccessToken:

1
<script lang="ts">
2
    import { getAccessToken } from '@tesseral/tesseral-svelte';
3
4
    let accessToken = getAccessToken();
5
    // returns an access token beginning with "eyJ..."
6
    // do something with $accessToken...
7
</script>

getHasPermission

To check if the current user has a specific permission, use getHasPermission:

1
<script lang="ts">
2
    import { getHasPermission } from '@tesseral/tesseral-svelte';
3
4
    let hasPermission = getHasPermission();
5
</script>
6
7
{#if $hasPermission('acme.expense_reports.approve')}
8
    <!-- ... -->
9
{/if}

Advanced Usage

Tesseral provides polished, self-serve UIs for user and organization settings on your behalf, which you can redirect your users to using getUserSettingsUrl and getOrganizationSettingsUrl.

Everything those prebuilt UIs do, you can also do from your own clientside code. Doing so is an advanced feature and is not required.

For details on how to do this, see the documentation for the Tesseral Frontend API.