> ## Documentation Index
> Fetch the complete documentation index at: https://docs.timeback.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Solid

> Client-side Solid integration with Timeback

## Overview

The Timeback SDK provides Solid primitives, components, and a context provider for client-side integration.

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @timeback/sdk
  ```

  ```bash pnpm theme={null}
  pnpm add @timeback/sdk
  ```

  ```bash yarn theme={null}
  yarn add @timeback/sdk
  ```

  ```bash bun theme={null}
  bun add @timeback/sdk
  ```
</CodeGroup>

## Provider Setup

Wrap your app with `TimebackProvider`:

```tsx src/app.tsx theme={null}
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:

```tsx theme={null}
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:

```tsx theme={null}
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>
	)
}
```

The `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:

```tsx theme={null}
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

### `SignInButton`

Pre-built sign-in button:

```tsx theme={null}
import { SignInButton } from '@timeback/sdk/solid'

function LoginPage() {
	return (
		<div>
			<h1>Welcome</h1>
			<SignInButton size="lg">Sign in with Timeback</SignInButton>
		</div>
	)
}
```

#### Props

<ParamField body="size" type="'sm' | 'md' | 'lg'" default="'md'">
  Button size
</ParamField>

<ParamField body="variant" type="'default' | 'outline'" default="'default'">
  Button style variant
</ParamField>

<ParamField body="showLoading" type="boolean" default="true">
  Show loading spinner on click
</ParamField>

<ParamField body="showLogo" type="boolean" default="true">
  Show Timeback logo
</ParamField>

<ParamField body="disabled" type="boolean" default="false">
  Disable the button
</ParamField>

## Custom Activities

The SDK supports two [activity models](/beta/about-timeback/concepts/activity-models) that capture how students spend time in your app and whether they complete what they started, producing [TimeSpentEvents](/beta/build-on-timeback/reference/events#timespentevent) and [ActivityCompletedEvents](/beta/build-on-timeback/reference/events#activitycompletedevent) 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](/beta/build-on-timeback/sdk/activity-tracking/single-session).

### 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](/beta/build-on-timeback/sdk/activity-tracking/stateful).

## Next Steps

<CardGroup cols={2}>
  <Card title="SolidStart Server" href="/beta/build-on-timeback/sdk/server/solidstart">
    Server-side setup
  </Card>

  <Card title="Custom Activities" href="/beta/build-on-timeback/sdk/activity-tracking/intro">
    Learn more about tracking
  </Card>
</CardGroup>