Overview
The Timeback SDK provides Svelte stores, components, and initialization for client-side integration.
Installation
npm install @timeback/sdk
Setup
Initialize Timeback in your root layout:
src/routes/+layout.svelte
<script>
import { initTimeback } from '@timeback/sdk/svelte'
initTimeback()
let { children } = $props()
</script>
{@render children()}
Stores
timeback
Access the Timeback client:
<script>
import { timeback } from '@timeback/sdk/svelte'
</script>
{#if !$timeback}
<div>Please sign in</div>
{:else}
<div>Welcome!</div>
{/if}
timebackVerification
Check authentication status:
<script>
import { timebackVerification, refreshTimebackVerification } from '@timeback/sdk/svelte'
</script>
{#if $timebackVerification.status === 'loading'}
<div>Loading...</div>
{:else if $timebackVerification.status !== 'verified'}
<div>Please sign in</div>
{:else}
<slot />
{/if}
<button onclick={refreshTimebackVerification}>Refresh</button>
status property that can be:
'loading' - Verification in progress'verified' - User is verified (includes timebackId)'unverified' - User is not verified'error' - Verification failed (includes message)
timebackProfile
Fetch user profile data:
<script>
import {
timebackProfile,
timebackProfileCanFetch,
fetchTimebackProfile
} from '@timeback/sdk/svelte'
</script>
{#if $timebackProfile.status === 'loaded'}
<p>Welcome, {$timebackProfile.profile.name}</p>
<p>XP Today: {$timebackProfile.profile.xp.today}</p>
<p>Total XP: {$timebackProfile.profile.xp.all}</p>
{:else}
<button onclick={fetchTimebackProfile} disabled={!$timebackProfileCanFetch}>
{$timebackProfile.status === 'loading' ? 'Loading...' : 'Load Profile'}
</button>
{/if}
Components
Pre-built sign-in button:
<script>
import { SignInButton } from '@timeback/sdk/svelte'
</script>
<div>
<h1>Welcome</h1>
<SignInButton size="lg">Sign in with Timeback</SignInButton>
</div>
Props
size
'sm' | 'md' | 'lg'
default:"'md'"
Button size
variant
'default' | 'outline'
default:"'default'"
Button style variant
Show loading spinner on click
Activity Tracking
Track learning activities:
<script>
import { onMount, onDestroy } from 'svelte'
import { timeback } from '@timeback/sdk/svelte'
export let lessonId
export let lessonName
let activity
onMount(() => {
if ($timeback) {
activity = $timeback.activity.start({
id: lessonId,
name: lessonName,
course: { subject: 'Math', grade: 3 },
})
}
})
onDestroy(() => {
activity?.end({
totalQuestions: 10,
correctQuestions: 8,
xpEarned: 80,
})
})
</script>
<div>Lesson content...</div>
Next Steps
