Show sign in button when logged out on profile. SDK readme links to profile api-keys page

Author: jahooma

sdk/README.md

@@ -10,8 +10,7 @@ npm install @codebuff/sdk
 
 ## Prerequisites
 
-1. Create a [Codebuff account](https://codebuff.com)
-2. Get your [Codebuff API key](https://www.codebuff.com/profile?tab=api-keys)
+Create a Codebuff account and get your [Codebuff API key here](https://www.codebuff.com/profile?tab=api-keys).
 
 ## Usage
 

web/src/app/profile/components/logged-out.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { SignInButton } from '@/components/sign-in/sign-in-button'
+
+export function ProfileLoggedOut() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="flex justify-center">
+        <Card className="w-full max-w-2xl bg-gradient-to-br from-background via-background to-accent/5 border-border/50 shadow-lg">
+          <CardHeader className="text-center pb-6">
+            <CardTitle className="text-3xl font-bold mb-4">
+              Sign in to Codebuff
+            </CardTitle>
+            <CardDescription className="text-lg text-muted-foreground">
+              Access your account settings and manage your profile
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex justify-center py-8">
+            <SignInButton providerName="github" providerDomain="github.com" />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

web/src/app/profile/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react'
 import { useSearchParams } from 'next/navigation'
+import { useSession } from 'next-auth/react'
 import { CreditCard, Shield, Users, Key, Menu } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
@@ -10,8 +11,10 @@ import { SecuritySection } from './components/security-section'
 import { ReferralsSection } from './components/referrals-section'
 import { UsageSection } from './components/usage-section'
 import { ApiKeysSection } from './components/api-keys-section'
+import { ProfileLoggedOut } from './components/logged-out'
 import { Button } from '@/components/ui/button'
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
+import { Skeleton } from '@/components/ui/skeleton'
 
 const sections = [
   {
@@ -75,6 +78,7 @@ function ProfileSidebar({
 }
 
 export default function ProfilePage() {
+  const { status } = useSession()
   const searchParams = useSearchParams()
   const [activeSection, setActiveSection] = useState('usage')
   const [open, setOpen] = useState(false)
@@ -99,6 +103,27 @@ export default function ProfilePage() {
     window.history.replaceState({}, '', url.toString())
   }
 
+  // Loading state
+  if (status === 'loading') {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="flex justify-center">
+          <div className="w-full max-w-2xl space-y-4">
+            <Skeleton className="h-8 w-64" />
+            <Skeleton className="h-4 w-96" />
+            <Skeleton className="h-64 w-full" />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Unauthenticated state
+  if (status === 'unauthenticated') {
+    return <ProfileLoggedOut />
+  }
+
+  // Authenticated state - render normal profile content
   return (
     <div className="container mx-auto px-4 py-8">
       <div className="flex gap-8">

web/src/components/sign-in/sign-in-button.tsx

@@ -16,17 +16,24 @@ import { Button } from '@/components/ui/button'
 export const SignInButton = ({
   providerName,
   providerDomain,
+  onClick, // Additional handler for analytics/tracking
 }: {
   providerName: OAuthProviderType
   providerDomain: string
+  onClick?: () => void
 }) => {
   const [isPending, startTransition] = useTransition()
   const pathname = usePathname()
   const searchParams = useSearchParams()
 
   const handleSignIn = () => {
+    onClick?.()
+    
     startTransition(async () => {
-      let callbackUrl = pathname
+      // Include search params in callback URL to preserve context
+      const searchParamsString = searchParams.toString()
+      let callbackUrl =
+        pathname + (searchParamsString ? `?${searchParamsString}` : '')
 
       if (pathname === '/login') {
         const authCode = searchParams.get('auth_code')
@@ -42,6 +49,12 @@ export const SignInButton = ({
           }
           callbackUrl = '/'
         }
+      } else {
+        // For non-login pages, store referral_code if present
+        const referralCode = searchParams.get('referral_code')
+        if (referralCode) {
+          localStorage.setItem('referral_code', referralCode)
+        }
       }
 
       posthog.capture('auth.login_started', {