Authentication
Secure your chatbots with Supabase authentication and API key management. Control user access and protect your data.
Authentication Methods
Supabase Authentication
Google OAuth and email/password integration for secure user management
Features
Google Sign-In integration
Email/password authentication
Automatic user session management
Secure token-based authentication
Built-in user profile management
Implementation
// Initialize Supabase Auth
import { createBrowserSupabaseClient } from '@/lib/supabase-auth'
const supabase = createBrowserSupabaseClient()
// Sign in with Google
const signInWithGoogle = async () => {
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'google',
options: {
redirectTo: `${window.location.origin}/auth/callback`
}
})
}
// Sign in with email/password
const signIn = async (email: string, password: string) => {
const { data, error } = await supabase.auth.signInWithPassword({
email,
password
})
}API Key Authentication
Server-to-server API access with secure keys
Features
Generate API keys in dashboard
Rate limiting per API key
Usage tracking and analytics
Revoke and regenerate keys
Implementation
// API Key Authentication
const response = await fetch('/api/chatbot/query', {
method: 'POST',
headers: {
'Authorization': 'Bearer YOUR_API_KEY',
'Content-Type': 'application/json'
},
body: JSON.stringify({
message: 'Hello',
chatbotId: 'your-chatbot-id'
})
})User Roles & Permissions
Owner
RoleFull access to all chatbots and settings
Manage all chatbots
User management
Billing access
API key generation
Admin
RoleManage chatbots and configurations
Create/edit chatbots
Training management
Analytics access
Live chat access
Agent
RoleLive chat support access
Live chat responses
View conversations
Basic analytics
Training corrections
Security Best Practices
API Key Security
Never expose API keys in client-side code. Use environment variables and server-side requests.
Regular Key Rotation
Rotate API keys regularly and immediately if compromised. Monitor usage patterns.
Domain Restrictions
Restrict widget usage to authorized domains in your chatbot settings.
Integration Examples
React Authentication Hook
// useAuth.js - Using Supabase Auth
import { useState, useEffect } from 'react'
import { createBrowserSupabaseClient } from '@/lib/supabase-auth'
export function useAuth() {
const [user, setUser] = useState(null)
const [loading, setLoading] = useState(true)
const supabase = createBrowserSupabaseClient()
useEffect(() => {
// Get initial session
supabase.auth.getSession().then(({ data: { session } }) => {
setUser(session?.user ?? null)
setLoading(false)
})
// Listen for auth changes
const { data: { subscription } } = supabase.auth.onAuthStateChange(
(event, session) => {
setUser(session?.user ?? null)
setLoading(false)
}
)
return () => subscription.unsubscribe()
}, [])
return { user, loading }
}
// Usage in component
function Dashboard() {
const { user, loading } = useAuth()
if (loading) return <div>Loading...</div>
if (!user) return <div>Please sign in</div>
return <div>Welcome, {user.email}</div>
}