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
Custom Activities
The SDK supports two activity models that capture how students spend time in your app and whether they complete what they started, producing TimeSpentEvents and ActivityCompletedEvents that feed into dashboards, XP, and learning analytics.
Single-session
A quiz, flashcard deck, or short lesson that a student completes in one sitting. The client tracks time and reports completion. Learn more about single-session activities.
Stateful
A multi-part course or long-form project where students leave and come back across multiple sessions. The client tracks time per visit while the server records completion. Learn more about stateful activities.
Next Steps
SolidStart Server
Server-side setup
Custom Activities
Learn more about tracking
