Overview
The Timeback SDK provides Solid primitives, components, and a context provider for client-side integration.
Installation
npm install @timeback/sdk
Provider Setup
Wrap your app with TimebackProvider:
import { TimebackProvider } from '@timeback/sdk/solid'
export default function App() {
return (
<TimebackProvider>
<Router root={props => <Suspense>{props.children}</Suspense>}>
<FileRoutes />
</Router>
</TimebackProvider>
)
}
Primitives
useTimeback
Access the Timeback client:
import { useTimeback } from '@timeback/sdk/solid'
import { Show } from 'solid-js'
function MyComponent() {
const timeback = useTimeback()
return (
<Show when={timeback} fallback={<div>Please sign in</div>}>
<div>Welcome!</div>
</Show>
)
}
createTimebackVerification
Check authentication status:
import { createTimebackVerification } from '@timeback/sdk/solid'
import { Match, Show, Switch } from 'solid-js'
function ProtectedRoute(props) {
const { state, refresh } = createTimebackVerification()
return (
<Switch>
<Match when={state.status === 'loading'}>
<div>Loading...</div>
</Match>
<Match when={state.status !== 'verified'}>
<Navigate href="/login" />
</Match>
<Match when={state.status === 'verified'}>{props.children}</Match>
</Switch>
)
}
state getter returns an object with a 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)
createTimebackProfile
Fetch user profile data:
import { createTimebackProfile } from '@timeback/sdk/solid'
import { Match, Show, Switch } from 'solid-js'
function ProfileButton() {
const { state, canFetch, fetchProfile } = createTimebackProfile()
return (
<Switch>
<Match when={state.status === 'loaded'}>
<div>
<p>Welcome, {state.profile.name}</p>
<p>XP Today: {state.profile.xp.today}</p>
<p>Total XP: {state.profile.xp.all}</p>
</div>
</Match>
<Match when={true}>
<button onClick={fetchProfile} disabled={!canFetch()}>
{state.status === 'loading' ? 'Loading...' : 'Load Profile'}
</button>
</Match>
</Switch>
)
}
Components
Pre-built sign-in button:
import { SignInButton } from '@timeback/sdk/solid'
function LoginPage() {
return (
<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:
import { useTimeback } from '@timeback/sdk/solid'
import { onCleanup, onMount } from 'solid-js'
function LessonPage(props) {
const timeback = useTimeback()
let activity
onMount(() => {
if (!timeback) return
activity = timeback.activity.start({
id: props.lessonId,
name: props.lessonName,
course: { subject: 'Math', grade: 3 },
})
})
onCleanup(() => {
activity?.end({
totalQuestions: 10,
correctQuestions: 8,
xpEarned: 80,
})
})
return <div>Lesson content...</div>
}
Next Steps
