SvelteKit - Timeback Docs (Beta)

Overview

The Timeback SDK provides a SvelteKit adapter using hooks.

Installation

npm install @timeback/sdk

pnpm add @timeback/sdk

yarn add @timeback/sdk

bun add @timeback/sdk

Server Setup

Create a server-only Timeback instance. The session helpers below belong to your application: persist the callback user in your authenticated session, and return that session user (including email) or null from getUser. These helpers are not SDK exports. Keep API and SSO secrets on the server:

src/lib/server/timeback.ts

import { createTimeback } from '@timeback/sdk'

export const timeback = await createTimeback({
    env: 'staging',
    api: {
        clientId: process.env.TIMEBACK_API_CLIENT_ID!,
        clientSecret: process.env.TIMEBACK_API_CLIENT_SECRET!,
    },
    identity: {
        mode: 'sso',
        clientId: process.env.AWS_COGNITO_CLIENT_ID!,
        clientSecret: process.env.AWS_COGNITO_CLIENT_SECRET!,
        redirectUri: 'http://localhost:3000/api/timeback/identity/callback',
        onCallbackSuccess: async ({ user, state, redirect }) => {
            await setSession({ id: user.id, email: user.email })
            return redirect(state?.returnTo ?? '/')
        },
        onCallbackError: ({ error, redirect }) => {
            return redirect('/?error=sso_failed')
        },
        getUser: () => getSession(),
    },
})

Server Hooks

Add the Timeback handler to your hooks:

src/hooks.server.ts

import { svelteKitHandler } from '@timeback/sdk/svelte-kit'
import { building } from '$app/environment'
import { timeback } from '$lib/server/timeback'

import type { Handle } from '@sveltejs/kit'

export const handle: Handle = ({ event, resolve }) => {
    return svelteKitHandler({
        timeback,
        event,
        resolve,
        building,
    })
}

Alternative: Route-Based Handler

For more control, you can use a route-based approach instead of hooks:

src/routes/api/timeback/[...path]/+server.ts

import { toSvelteKitHandler } from '@timeback/sdk/svelte-kit'
import { timeback } from '$lib/server/timeback'

const handlers = toSvelteKitHandler(timeback)

export const GET = handlers.GET
export const POST = handlers.POST

Client Setup

Initialize Timeback in your root layout:

src/routes/+layout.svelte

<script>
  import { initTimeback } from '@timeback/sdk/svelte'

  import { onMount } from 'svelte'

  onMount(() => initTimeback())

  let { children } = $props()
</script>

{@render children()}

Usage

For the full client-side API, see the Svelte client adapter.

Use stores in components:

src/routes/+page.svelte

<script>
  import { SignInButton, timebackVerification } from '@timeback/sdk/svelte'
</script>

{#if $timebackVerification.status === 'loading'}
  <div>Loading...</div>
{:else if $timebackVerification.status === 'verified'}
  <div>Welcome!</div>
{:else}
  <SignInButton size="lg">Sign In</SignInButton>
{/if}

Profile Store

<script>
  import {
    timebackProfile,
    timebackProfileCanFetch,
    fetchTimebackProfile
  } from '@timeback/sdk/svelte'
</script>

<button onclick={fetchTimebackProfile} disabled={!$timebackProfileCanFetch}>
  {$timebackProfile.status === 'loading' ? 'Loading...' : 'Load Profile'}
</button>

{#if $timebackProfile.status === 'loaded'}
  <div>XP: {$timebackProfile.profile.xp.today}</div>
{/if}

Next Steps

Svelte Client

Client-side Svelte integration

Identity

Authentication options

Custom Activities

Track learning sessions

​Overview

​Installation

​Server Setup

​Server Hooks

​Alternative: Route-Based Handler

​Client Setup

​Usage

​Profile Store

​Next Steps

Svelte Client

Identity

Custom Activities

Overview

Installation

Server Setup

Server Hooks

Alternative: Route-Based Handler

Client Setup

Usage

Profile Store

Next Steps