frontend-auth-integration

nadeemsangrasi's avatarfrom nadeemsangrasi

Integrates Better Auth client with ChatKit UI or custom Next/Vite UI. Adds login/logout buttons, protected routes, session hooks.

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 17, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill streamlines the integration of Better Auth with modern frontend frameworks like Next.js and Vite. It automates the setup of authentication providers, session hooks, and protected routes, while providing ready-to-use UI components for login, logout, and user profiles, specifically optimized for ChatKit UI and custom interfaces.

Use Cases

  • Securing a Chatbot: Implementing protected routes and authentication checks for a ChatKit-based AI application to ensure only authorized users can access the chat interface.
  • Rapid Frontend Auth Setup: Quickly scaffolding authentication logic in a Next.js or Vite project using Better Auth, including login forms and OAuth provider buttons.
  • Session Management: Utilizing custom hooks like useAuth and useSession to manage user states and display personalized user profile information across the application.
nameFrontend Auth Integration
descriptionIntegrates Better Auth client with ChatKit UI or custom Next/Vite UI. Adds login/logout buttons, protected routes, session hooks.

Frontend Auth Integration

Instructions

  1. Integrate Better Auth client with frontend:

    • Set up authentication provider wrapper
    • Configure authentication hooks (useAuth, useSession)
    • Add login/logout functionality
    • Create protected route components

  2. Integrate with ChatKit UI:

    • Wrap ChatKit with authentication provider
    • Add authentication checks before chat access
    • Create login overlay if not authenticated
    • Include user profile display

  3. Create authentication UI components:

    • Login form with email/password
    • OAuth provider buttons
    • User profile dropdown
    • Loading and error states

  4. Implement protected routes:

    • Create authentication middleware
    • Redirect unauthenticated users
    • Preserve redirect URLs
    • Handle session expiration

  5. Follow Next.js/React best practices:

    • Use proper TypeScript types
    • Include proper error boundaries
    • Handle loading states
    • Follow accessibility standards

Examples

Input: "Create protected chatbot route with Better Auth" Output: Creates React code with:

import { useAuth } from 'better-auth/react'

function ProtectedChatPage() {
  const { user, isPending } = useAuth()

  if (isPending) {
    return <div>Loading...</div>
  }

  if (!user) {
    return <div>Please log in to access the chatbot</div>
  }

  return <ChatKitPanel />
}