Skip to main content

Overview

The Timeback SDK provides a TanStack Start adapter using file-based route handlers.

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(),
	},
})

Route Handler

Create a catch-all route handler:
src/routes/api/timeback/$.ts
import { createFileRoute } from '@tanstack/react-router'
import { toTanStackStartHandler } from '@timeback/sdk/tanstack-start'

import { timeback } from '@/lib/timeback'

const handlers = toTanStackStartHandler(timeback)

export const Route = createFileRoute('/api/timeback/$')({
	server: { handlers },
})

Client Provider

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

export const Route = createRootRoute({
	component: () => (
		<TimebackProvider>
			<Outlet />
		</TimebackProvider>
	),
})

Usage

For the full client-side API, see the React client adapter.
Use hooks in components:
src/routes/index.tsx
import { SignInButton, useTimeback } from '@timeback/sdk/react'

function HomePage() {
	const timeback = useTimeback()

	if (!timeback) {
		return <SignInButton>Sign In</SignInButton>
	}

	return <div>Welcome!</div>
}

Next Steps