Skip to main content

​
Overview

The Timeback SDK provides a SolidStart adapter using middleware.

​
Installation

npm install @timeback/sdk

​
Server Setup

Create a Timeback instance:
src/lib/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(),
	},
})

​
Middleware

Create middleware to handle Timeback routes:
src/middleware.ts
import { createMiddleware } from '@solidjs/start/middleware'
import { solidStartHandler } from '@timeback/sdk/solid-start'
import { timeback } from '~/lib/timeback'

export default createMiddleware({
	onRequest: [
		async event => {
			const response = await solidStartHandler({
				timeback,
				event,
			})
			if (response) return response
		},
	],
})

​
Alternative: Route-Based Handler

For more control, you can use a route-based approach instead of middleware:
src/routes/api/timeback/[...path].ts
import { toSolidStartHandler } from '@timeback/sdk/solid-start'
import { timeback } from '~/lib/timeback'

const handlers = toSolidStartHandler(timeback)

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

​
Client Provider

Wrap your app with the TimebackProvider:
src/app.tsx
import { TimebackProvider } from '@timeback/sdk/solid'

export default function App() {
	return (
		<TimebackProvider>
			<Router root={props => <Suspense>{props.children}</Suspense>}>
				<FileRoutes />
			</Router>
		</TimebackProvider>
	)
}

​
Usage

For the full client-side API, see the Solid client adapter.
Use primitives in components:
src/components/UserStatus.tsx
import { SignInButton, useTimeback } from '@timeback/sdk/solid'
import { Show } from 'solid-js'

export function UserStatus() {
	const timeback = useTimeback()

	return (
		<Show when={timeback} fallback={<SignInButton size="lg">Sign In</SignInButton>}>
			<div>Welcome!</div>
		</Show>
	)
}

​
Next Steps

Solid Client

Client-side Solid integration

Identity

Authentication options

Activity Tracking

Track learning sessions