React

import { useTimeback } from '@timeback/sdk/react'

function MyComponent() {
	const timeback = useTimeback()

	// timeback is null if user is not authenticated
	if (!timeback) {
		return <div>Please sign in</div>
	}

	return <div>Welcome!</div>
}

import { useTimebackVerification } from '@timeback/sdk/react'

function ProtectedRoute({ children }) {
	const { state, refresh } = useTimebackVerification()

	if (state.status === 'loading') return <div>Loading...</div>
	if (state.status !== 'verified') return <Navigate to="/login" />

	return children
}

import { useTimebackProfile } from '@timeback/sdk/react'

// Manual fetch
function ProfileButton() {
	const { state, canFetch, fetchProfile } = useTimebackProfile()

	if (state.status === 'loaded') {
		return (
			<div>
				<p>Welcome, {state.profile.name}</p>
				<p>XP Today: {state.profile.xp.today}</p>
				<p>Total XP: {state.profile.xp.all}</p>
			</div>
		)
	}

	return (
		<button onClick={fetchProfile} disabled={!canFetch}>
			{state.status === 'loading' ? 'Loading...' : 'Load Profile'}
		</button>
	)
}

// Auto-fetch when authenticated
function AutoProfile() {
	const { state } = useTimebackProfile({ auto: true })

	if (state.status === 'loading') return <div>Loading...</div>
	if (state.status === 'loaded') {
		return <div>XP: {state.profile.xp.today}</div>
	}

	return null
}

import { SignInButton } from '@timeback/sdk/react'

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