Skip to main content

​
Overview

The Timeback SDK provides a Nuxt adapter using server middleware.

​
Installation

npm install @timeback/sdk

​
Server Setup

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

​
Server Middleware

Create middleware to handle Timeback routes:
server/middleware/timeback.ts
import { nuxtHandler } from '@timeback/sdk/nuxt'

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

export default defineEventHandler(async event => {
	const response = await nuxtHandler({
		timeback,
		event,
	})
	if (response) return response
})

​
Alternative: Route-Based Handler

For more control, you can use a route-based approach instead of middleware:
server/api/timeback/[...path].ts
import { toNuxtHandler } from '@timeback/sdk/nuxt'

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

export default toNuxtHandler(timeback)

​
Client Provider

Wrap your app with the TimebackProvider:
app.vue
<script setup>
import { TimebackProvider } from '@timeback/sdk/vue'
</script>

<template>
  <TimebackProvider>
    <NuxtPage />
  </TimebackProvider>
</template>

​
Usage

For the full client-side API, see the Vue client adapter.
Use composables in components:
components/UserStatus.vue
<script setup>
import { SignInButton, useTimeback } from '@timeback/sdk/vue'

const timeback = useTimeback()
</script>

<template>
  <SignInButton v-if="!timeback" size="lg">Sign In</SignInButton>
  <div v-else>Welcome!</div>
</template>

​
Next Steps

Vue Client

Client-side Vue integration

Identity

Authentication options

Activity Tracking

Track learning sessions