Archived: This repository is no longer maintained. Our current work is Charming, the collaborative cloud for apps you build.

BetterAuth <-> Tambo Integration Demo

This is a Next.js project that demonstrates how to integrate BetterAuth with Tambo AI for user authentication and AI-powered chat functionality.

🔗 Integration Overview

The integration works by:

1. Authentication: Users authenticate through BetterAuth (email/password or social providers)
2. Token Exchange: The app retrieves the idToken from BetterAuth's API
3. Tambo Integration: The idToken is passed to Tambo's TamboProvider as the userToken
4. User Context: Tambo uses this token to identify and manage user sessions in the AI chat

🚀 Getting Started

Prerequisites

• Node.js 22.17.0 or later
• npm, yarn, pnpm, or bun

Environment Setup

Create a .env.local file in the root directory with the following variables:

# BetterAuth Social Providers (optional)
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret

# Tambo AI
TAMBO_API_KEY=your_tambo_api_key
NEXT_PUBLIC_TAMBO_API_KEY=your_tambo_public_api_key

Installation & Setup

1. Install dependencies:

npm install
# or
yarn install
# or
pnpm install
# or
bun install

2. Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

3. Open your browser: Navigate to http://localhost:3005 to see the application.

🔧 How the Integration Works

1. BetterAuth Configuration

The authentication system is configured in src/lib/auth.ts:

import { betterAuth } from "better-auth";
import Database from "better-sqlite3";

export const auth = betterAuth({
  database: new Database("./sqlite.db"),
  emailAndPassword: {
    enabled: true,
  },
  socialProviders: {
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    },
    github: {
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    },
  },
});

2. Client-Side Auth Setup

The client-side authentication is handled in src/lib/auth-client.ts:

import { createAuthClient } from "better-auth/react";

export const authClient = createAuthClient({
  baseURL: "http://localhost:3005",
});

export const { signIn, signUp, useSession, getAccessToken } = authClient;

3. API Route Handler

BetterAuth's API routes are set up in src/app/api/auth/[...all]/route.ts:

import { auth } from "@/lib/auth";
import { toNextJsHandler } from "better-auth/next-js";

export const { POST, GET } = toNextJsHandler(auth);

4. The Key Integration Point

The magic happens in the chat layout (src/app/chat/layout.tsx):

"use client";
import { getAccessToken } from "@/lib/auth-client";
import { TamboProvider } from "@tambo-ai/react";
import { useEffect, useState } from "react";

export default function ChatLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const [userToken, setUserToken] = useState<string>();

  useEffect(() => {
    async function refresh() {
      const token = await getAccessToken({
        providerId: "google",
      });
      setUserToken(token.data?.idToken);
    }
    refresh();
  }, []);

  return (
    <TamboProvider
      apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY!}
      userToken={userToken}
    >
      {children}
    </TamboProvider>
  );
}

Key Integration Steps:

1. Get ID Token: getAccessToken() retrieves the idToken from BetterAuth
2. Pass to Tambo: The idToken is passed as userToken to the TamboProvider
3. User Context: Tambo uses this token to maintain user context across AI interactions

5. Authentication Flow

Users can authenticate through the login form (src/components/login-form.tsx):

• Email/Password: Direct authentication with BetterAuth
• Social Providers: Google and GitHub OAuth integration
• Redirect: Successful authentication redirects to /chat

6. Chat Interface

The chat interface (src/app/chat/page.tsx) uses Tambo's MessageThreadFull component:

import { MessageThreadFull } from "@/components/ui/message-thread-full";

export default function ChatPage() {
  return (
    <div className="flex h-screen w-full">
      <MessageThreadFull className="flex-1" variant="default" />
    </div>
  );
}

🔐 Security Notes

• The idToken from BetterAuth serves as the user identifier for Tambo
• Tokens are handled securely through BetterAuth's built-in token management

🛠️ Development

• Authentication: Visit /login to authenticate
• Chat: Visit /chat to interact with the AI (requires authentication)
• Database: SQLite database (sqlite.db) stores user data locally

📚 Learn More

• BetterAuth Documentation
• Tambo AI Documentation
• Next.js Documentation