SvelteKit Quickstart

This is a quickstart guide to help you integrate Descope with your SvelteKit application. Follow the steps below to get started.

Install SvelteKit Auth

Install the required dependencies:

Terminal

npm install @auth/sveltekit

Terminal

yarn add @auth/sveltekit

Terminal

pnpm add @auth/sveltekit

Terminal

bun add @auth/sveltekit

Configure Auth.js with Descope

To enable authentication in SvelteKit, import SvelteKitAuth and set up Descope as an authentication provider. Ensure environment variables are loaded to securely manage credentials. Then, configure Descope within SvelteKitAuth to handle authentication seamlessly.

Create or update your src/hooks.server.ts file:

src/hooks.server.ts

import { SvelteKitAuth } from "@auth/sveltekit";
import Descope from "@auth/core/providers/descope";
import {
    AUTH_DESCOPE_ID,
    AUTH_DESCOPE_SECRET,
    AUTH_DESCOPE_ISSUER
} from "$env/static/private";

export const handle = SvelteKitAuth({
    providers: [
        Descope({
            clientId: AUTH_DESCOPE_ID,
            clientSecret: AUTH_DESCOPE_SECRET,
            issuer: AUTH_DESCOPE_ISSUER
        })
    ]
});

AUTH_DESCOPE_ID: Can be found in your Descope account under the Project Settings.
AUTH_DESCOPE_SECRET: Can be generated in your Descope account under the Access Keys page.
AUTH_DESCOPE_ISSUER: Can be found in your Descope account under the Applications page.

Note

You can get all the above required links by going to the Federated Apps in the Descope Console.

Add TypeScript Types (Optional but Recommended)

This tells TypeScript that session data exists in Locals and PageData. It helps prevent TypeScript errors while working with authentication.

Update your src/app.d.ts:

src/app.d.ts

declare global {
    namespace App {
        interface Locals {
            session: import("@auth/core").Session | null;
        }
        interface PageData {
            session: import("@auth/core").Session | null;
        }
    }
}

export {};

Basic Authentication Component

The authentication flow works by checking whether a user is signed in. If they are, their email and a logout button are displayed; otherwise, a login button is shown. Clicking "Sign in with Descope" initiates the login process, while clicking "Sign out" logs the user out, ensuring a seamless authentication experience.

src/routes/+page.svelte

<script lang="ts">
    import { signIn, signOut } from "@auth/sveltekit/client";
    import { page } from "$app/stores";
</script>

{#if $page.data.session}
    <div>
        <p>Signed in as {$page.data.session.user?.email}</p>
        <button on:click={() => signOut()}>Sign out</button>
    </div>
{:else}
    <button on:click={() => signIn("descope")}>Sign in with Descope</button>
{/if}

Protected API Route

If the user is not logged in, the system returns a 401 Unauthorized error. However, if the user is authenticated, it responds with a JSON object containing the user's details.

src/routes/api/protected/+server.ts

import { error } from '@sveltejs/kit';
import type { RequestHandler } from './$types';

export const GET: RequestHandler = async ({ locals }) => {
    if (!locals.session) {
        throw error(401, 'Unauthorized');
    }

    return new Response(JSON.stringify({
        message: 'This is a protected API route',
        user: locals.session.user
    }));
};

Protected Page Route

If the user is not logged in, they are redirected to the login page /auth/signin. If they are logged in, their details are loaded.

src/routes/protected/+page.server.ts

import { redirect } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ locals }) => {
    if (!locals.session) {
        throw redirect(303, '/auth/signin');
    }

    return {
        user: locals.session.user
    };
};

Note

To set up a Descope Federated App, log into the Descope Console and navigate to Applications > Federated Apps to create a new app. You will find all your credentials here in the Federated Apps.

Custom Callback URL (Advanced Configuration)

You can customize the callback URL in your configuration:

src/hooks.server.ts

export const handle = SvelteKitAuth({
    providers: [
        Descope({
            clientId: AUTH_DESCOPE_ID,
            clientSecret: AUTH_DESCOPE_SECRET,
            issuer: AUTH_DESCOPE_ISSUER
        })
    ],
    callbacks: {
        async session({ session, token }) {
            return session;
        },
        async jwt({ token, user }) {
            return token;
        }
    }
});

Congratulations

Now that you've got the authentication down, go focus on building out the rest of your app! If you're curious to learn more, take a look at this Svelte Sample App.

Checkpoint

Your application is now integrated with Descope. Please test with sign-up or sign-in use case.

Need help?

Customize

Now that you have the end-to-end application working, you can choose to configure and personalize many different areas of Descope, including your brand, style, custom user authentication journeys, etc. We recommend starting with customizing your user-facing screens, such as signup and login.

Customize

Was this helpful?

Checkpoint

On this page