fix: tell user when they're on their own referral page

Author: brandonkachen

web/src/app/referrals/[code]/page.tsx

@@ -10,6 +10,7 @@ import { authOptions } from '../../api/auth/[...nextauth]/auth-options'
 import CardWithBeams from '@/components/card-with-beams'
 import { Button } from '@/components/ui/button'
 import { ReferralClientWrapper } from '@/components/referral/referral-client-wrapper'
+import { GitHubSignInButton } from '@/components/referral/github-signin-button'
 
 export const generateMetadata = async ({
   params,
@@ -78,29 +79,6 @@ export default async function ReferralPage({
     )
   }
 
-  // If it's the same user trying to use their own referral code (only check if logged in)
-  if (session && referralData.isSameUser) {
-    return (
-      <CardWithBeams
-        title="That's Your Own Referral Code!"
-        description="You can't use your own referral code to get bonus credits."
-        content={
-          <>
-            <p className="text-center text-muted-foreground">
-              Share your referral link with friends to earn credits when they
-              sign up!
-            </p>
-            <div className="flex justify-center mt-4">
-              <Button asChild>
-                <Link href="/profile?tab=referrals">View Your Referrals</Link>
-              </Button>
-            </div>
-          </>
-        }
-      />
-    )
-  }
-
   // If referrer has maxed out referrals
   if (referralData.status.reason) {
     return (
@@ -142,26 +120,35 @@ export default async function ReferralPage({
                 Welcome! Complete your referral to get bonus credits.
               </p>
 
-              <div className="flex flex-col sm:flex-row gap-3 justify-center">
-                {session ? (
-                  <Button asChild size="lg">
+              <div className="flex justify-center">
+                {!session && (
+                  <GitHubSignInButton
+                    referralCode={code}
+                    referrerName={referrerName}
+                  />
+                )}
+              </div>
+
+              {/* Complete Referral button positioned at bottom right for logged-in users */}
+              {session && !referralData.isSameUser && (
+                <div className="flex justify-end mt-6">
+                  <Button asChild>
                     <Link href={`/onboard?referral_code=${code}`}>
                       Complete Referral
                     </Link>
                   </Button>
-                ) : (
-                  <Button asChild size="lg">
-                    <Link
-                      href={`/login?referral=${code}${referrerName ? `&referrer=${encodeURIComponent(referrerName)}` : ''}`}
-                    >
-                      Sign Up & Get Bonus Credits
-                    </Link>
-                  </Button>
-                )}
-                <Button variant="outline" asChild size="lg">
-                  <Link href="/">Learn More</Link>
-                </Button>
-              </div>
+                </div>
+              )}
+
+              {/* Show warning if user is viewing their own referral link */}
+              {session && referralData.isSameUser && (
+                <div className="mt-6 p-3 bg-red-800 border border-red-900 rounded-md">
+                  <p className="text-white text-sm font-medium">
+                    ⚠️ This is your own referral link. You will not be able to
+                    redeem your own code.
+                  </p>
+                </div>
+              )}
             </div>
           </>
         }

web/src/components/navbar/user-dropdown.tsx

@@ -48,6 +48,9 @@ export const UserDropdown = ({ session: { user } }: { session: Session }) => {
         <DropdownMenuItem onClick={() => router.push('/profile?tab=api-keys')}>
           <Key className="mr-2 size-4" /> <span>API Keys</span>
         </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => router.push('/profile?tab=referrals')}>
+          <Gift className="mr-2 size-4" /> <span>Refer Friends</span>
+        </DropdownMenuItem>
         <DropdownMenuSeparator />
         <DropdownMenuItem
           onClick={() => {

web/src/components/referral/github-signin-button.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+import { signIn } from 'next-auth/react'
+import { useTransition } from 'react'
+import posthog from 'posthog-js'
+
+import { Button } from '@/components/ui/button'
+import { Icons } from '@/components/icons'
+import { toast } from '@/components/ui/use-toast'
+import { sleep } from '@codebuff/common/util/promise'
+
+interface GitHubSignInButtonProps {
+  referralCode: string
+  referrerName?: string
+}
+
+export const GitHubSignInButton = ({
+  referralCode,
+  referrerName,
+}: GitHubSignInButtonProps) => {
+  const [isPending, startTransition] = useTransition()
+
+  const handleSignIn = () => {
+    startTransition(async () => {
+      // Store referral code in localStorage for fallback
+      localStorage.setItem('referral_code', referralCode)
+      if (referrerName) {
+        localStorage.setItem('referrer_name', referrerName)
+      }
+
+      // Create callback URL that includes referral information
+      const callbackUrl = `${window.location.origin}/onboard?referral_code=${referralCode}${referrerName ? `&referrer=${encodeURIComponent(referrerName)}` : ''}`
+
+      console.log('🔵 GitHubSignInButton: Starting GitHub sign-in', {
+        referralCode,
+        referrerName,
+        callbackUrl,
+      })
+
+      posthog.capture('auth.referral_github_login_started', {
+        referralCode,
+        referrerName,
+        callbackUrl,
+      })
+
+      try {
+        const result = await signIn('github', { callbackUrl })
+        console.log('🔵 GitHubSignInButton: signIn result:', result)
+      } catch (error) {
+        console.error('🔵 GitHubSignInButton: signIn failed:', error)
+        toast({
+          title: 'Sign in failed',
+          description:
+            'Please try again or contact support if the problem persists.',
+        })
+        return
+      }
+
+      await sleep(10000).then(() => {
+        toast({
+          title: 'Uh-oh this is taking a while...',
+          description: 'Would you mind trying again?',
+        })
+      })
+    })
+  }
+
+  return (
+    <Button
+      onClick={handleSignIn}
+      disabled={isPending}
+      size="lg"
+      className="flex items-center gap-2"
+    >
+      {isPending && <Icons.loader className="mr-2 size-4 animate-spin" />}
+      <img
+        src="https://s2.googleusercontent.com/s2/favicons?domain=github.com"
+        className="rounded-full w-4 h-4"
+        alt="GitHub logo"
+      />
+      Login with GitHub
+    </Button>
+  )
+}