Svelte Quickstart

Svelte

This quickstart guide covers the essential steps to start integrating Stytch’s Consumer Authentication in a Svelte application.

Overview

You can use the Stytch Vanilla JavaScript SDK headless methods and prebuilt UI components with your Svelte app. This guide is an example of how you might implement consumer authentication using Stytch's UI components.

Getting started

1
Install Stytch SDKs and configure your API keys

If you haven't already, create a Stytch Consumer Authentication Project in your Stytch Dashboard.

Add our frontend vanilla JS SDK package to your Svelte application:

npm install @stytch/vanilla-js --save

Add your Stytch Project's public_token to your application as an environment variable in a .env file:

# .env
# The below values may be found in your Stytch Dashboard: https://stytch.com/dashboard/api-keys
STYTCH_PROJECT_ENV=test
STYTCH_PUBLIC_TOKEN="YOUR_STYTCH_PUBLIC_TOKEN"

2
Configure Stytch SDK settings

To allow the Stytch SDK to run on your frontend, you'll also need to:

Enable frontend SDKs in Test in your Stytch Dashboard here.
Add the domain your application will run on (e.g. http://localhost:3000) to the list of Domains under Authorized applications.

3
Create some context utils and a `StytchUIClient`

// utils.ts
import { StytchUIClient } from '@stytch/vanilla-js';
import { getContext, setContext } from "svelte";

const STYTCH_PUBLIC_TOKEN = import.meta.env.VITE_STYTCH_PUBLIC_TOKEN;

const StytchContextKey = {};

export const setStytchClient = (client: StytchUIClient) =>
  setContext(StytchContextKey, { client });

export const getStytchClient = (): StytchUIClient | null => {
  const cli = getContext<undefined | { client: StytchUIClient }>(
    StytchContextKey
  );
  return cli?.client || null;
};

import { browser } from '$app/environment';

export const stytch = new StytchUIClient(STYTCH_PUBLIC_TOKEN, {
    cookieOptions: {
      jwtCookieName: `stytch_session_jwt`,
      opaqueTokenCookieName: `stytch_session`,
    },
});

4
Create a `StytchContext` component and use it in your main layout

// StytchContext.svelte
<script lang="ts">
  import type { StytchUIClient } from "@stytch/vanilla-js";
  import { setStytchClient } from "./utils";

  export let client: StytchUIClient;
  setStytchClient(client);
</script>

<slot />

// +layout.svelte
<main>
	<StytchContext client={stytch}>
		<slot />
	</StytchContext>
</main>

5
Create a `StytchLogin` component

<script lang="ts">
  import { onMount } from "svelte";
  import { getStytchClient } from "./utils";
  import type {
    Callbacks,
    StytchLoginConfig,
    StyleConfig,
  } from "@stytch/vanilla-js";

  export let stytchClient = getStytchClient();
  export let config: StytchLoginConfig;
  export let styles: StyleConfig | undefined = undefined;
  export let callbacks: Callbacks | undefined = undefined;

  let containerEl: HTMLDivElement;

  onMount(() => {
    stytchClient?.mountLogin({
      config,
      callbacks,
      elementId: '#elementId',
      styles,
    });
  });
</script>

<div bind:this={containerEl} />

// +page.svelte
<section>
  <h1>
    Welcome to your new<br />SvelteKit app
  </h1>
  <StytchLogin config={StytchConfig} />
</section>

7
What's next

Check out our product-specific guides for how to handle full authentication flows for each product you'd like to support, like Email Magic Links and OAuth.

Svelte Quickstart

Svelte

Overview

Getting started

1Install Stytch SDKs and configure your API keys

2Configure Stytch SDK settings

3Create some context utils and a `StytchUIClient`

4Create a `StytchContext` component and use it in your main layout

5Create a `StytchLogin` component

6Use the login component on your main page