login modal

Author: tannerlinsley

src/auth/client.ts

@@ -17,11 +17,26 @@ import type { OAuthProvider } from './types'
 export const authClient = {
   signIn: {
     /**
-     * Initiate OAuth sign-in with a social provider
+     * Initiate OAuth sign-in with a social provider (full page redirect)
      */
     social: ({ provider }: { provider: OAuthProvider }) => {
       window.location.href = `/auth/${provider}/start`
     },
+
+    /**
+     * Initiate OAuth sign-in in a popup window (for modal-based login)
+     */
+    socialPopup: ({ provider }: { provider: OAuthProvider }) => {
+      const width = 500
+      const height = 600
+      const left = window.screenX + (window.outerWidth - width) / 2
+      const top = window.screenY + (window.outerHeight - height) / 2
+      window.open(
+        `/auth/${provider}/start?popup=true`,
+        'tanstack-oauth',
+        `width=${width},height=${height},left=${left},top=${top},popup=yes`,
+      )
+    },
   },
 
   /**

src/auth/index.server.ts

@@ -64,6 +64,9 @@ export {
   createOAuthStateCookie,
   clearOAuthStateCookie,
   getOAuthStateCookie,
+  createOAuthPopupCookie,
+  clearOAuthPopupCookie,
+  isOAuthPopupMode,
   SESSION_DURATION_MS,
   SESSION_MAX_AGE_SECONDS,
 } from './session.server'

src/auth/oauth.server.ts

@@ -186,7 +186,7 @@ export function buildGitHubAuthUrl(
     clientId,
   )}&redirect_uri=${encodeURIComponent(
     redirectUri,
-  )}&scope=user:email&state=${state}`
+  )}&scope=user:email&state=${encodeURIComponent(state)}`
 }
 
 /**
@@ -201,7 +201,7 @@ export function buildGoogleAuthUrl(
     clientId,
   )}&redirect_uri=${encodeURIComponent(
     redirectUri,
-  )}&response_type=code&scope=openid email profile&state=${state}`
+  )}&response_type=code&scope=openid email profile&state=${encodeURIComponent(state)}`
 }
 
 /**

src/auth/session.server.ts

@@ -264,6 +264,19 @@ export function getOAuthStateCookie(request: Request): string | null {
   return decodeURIComponent(stateCookie.split('=').slice(1).join('=').trim())
 }
 
+export function createOAuthPopupCookie(isProduction: boolean): string {
+  return `oauth_popup=1; HttpOnly; Path=/; Max-Age=${10 * 60}; SameSite=Lax${isProduction ? '; Secure' : ''}`
+}
+
+export function clearOAuthPopupCookie(isProduction: boolean): string {
+  return `oauth_popup=; HttpOnly; Path=/; Max-Age=0; SameSite=Lax${isProduction ? '; Secure' : ''}`
+}
+
+export function isOAuthPopupMode(request: Request): boolean {
+  const cookies = request.headers.get('cookie') || ''
+  return cookies.split(';').some((c) => c.trim().startsWith('oauth_popup=1'))
+}
+
 // ============================================================================
 // Session Constants
 // ============================================================================

src/components/DocFeedbackProvider.tsx

@@ -7,6 +7,7 @@ import { DocFeedbackFloatingButton } from './DocFeedbackFloatingButton'
 import { getDocFeedbackForPageQueryOptions } from '~/queries/docFeedback'
 import { createDocFeedback } from '~/utils/docFeedback.functions'
 import { useCurrentUser } from '~/hooks/useCurrentUser'
+import { useLoginModal } from '~/contexts/LoginModalContext'
 import {
   findReferenceableBlocks,
   getBlockIdentifier,
@@ -28,6 +29,7 @@ export function DocFeedbackProvider({
   libraryVersion,
 }: DocFeedbackProviderProps) {
   const user = useCurrentUser()
+  const { openLoginModal } = useLoginModal()
   const containerRef = React.useRef<HTMLDivElement>(null)
 
   const [creatingState, setCreatingState] = React.useState<{
@@ -76,9 +78,9 @@ export function DocFeedbackProvider({
     )
   }, [feedbackData, user])
 
-  // Find blocks and compute selectors after render
+  // Find blocks and compute selectors after render (runs for all users to show teasers)
   React.useEffect(() => {
-    if (!user || !containerRef.current) return
+    if (!containerRef.current) return
 
     const container = containerRef.current
     const blocks = findReferenceableBlocks(container)
@@ -164,7 +166,7 @@ export function DocFeedbackProvider({
         }
       })
     }
-  }, [user, children])
+  }, [children])
 
   // Update block indicators when notes or improvements change
   React.useEffect(() => {
@@ -205,6 +207,17 @@ export function DocFeedbackProvider({
       const selector = blockSelectors.get(blockId)
       if (!selector) return
 
+      // If not logged in, show login modal
+      if (!user) {
+        openLoginModal({
+          onSuccess: () => {
+            // After login, open the creating interface
+            setCreatingState({ blockId, type })
+          },
+        })
+        return
+      }
+
       // Check if there's existing feedback for this block
       const existingNote = userNotes.find((n) => n.blockSelector === selector)
       const existingImprovement = userImprovements.find(
@@ -226,27 +239,25 @@ export function DocFeedbackProvider({
         type,
       })
     },
-    [blockSelectors, userNotes, userImprovements],
+    [blockSelectors, userNotes, userImprovements, user, openLoginModal],
   )
 
-  if (!user) {
-    return <div ref={containerRef}>{children}</div>
-  }
-
   return (
     <div ref={containerRef} className="relative">
       {children}
 
-      {/* Render floating buttons for each block */}
+      {/* Render floating buttons for each block (visible to all users) */}
       {Array.from(blockSelectors.keys()).map((blockId) => {
         const selector = blockSelectors.get(blockId)
         if (!selector) return null
 
-        // Check if this block has a note or improvement
-        const note = userNotes.find((n) => n.blockSelector === selector)
-        const improvement = userImprovements.find(
-          (n) => n.blockSelector === selector,
-        )
+        // Check if this block has a note or improvement (only for logged-in users)
+        const note = user
+          ? userNotes.find((n) => n.blockSelector === selector)
+          : undefined
+        const improvement = user
+          ? userImprovements.find((n) => n.blockSelector === selector)
+          : undefined
         const isHovered = hoveredBlockId === blockId
 
         return (
@@ -267,7 +278,7 @@ export function DocFeedbackProvider({
         )
       })}
 
-      {/* Render notes inline */}
+      {/* Render notes inline (only for logged-in users) */}
       {userNotes.map((note) => {
         // Find the block ID for this note's selector
         const blockId = Array.from(blockSelectors.entries()).find(

src/components/LoginModal.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { GoogleIcon } from '~/components/icons/GoogleIcon'
+import { authClient } from '~/auth/client'
+
+interface LoginModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function LoginModal({ open, onOpenChange }: LoginModalProps) {
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fixed inset-0 z-[999] bg-black/60 backdrop-blur-sm" />
+        <DialogPrimitive.Content className="fixed left-1/2 top-1/2 z-[1000] w-full max-w-xs -translate-x-1/2 -translate-y-1/2 rounded-xl bg-white dark:bg-gray-900 p-6 shadow-xl">
+          <div className="flex items-center justify-between mb-4">
+            <DialogPrimitive.Title className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+              Sign in to continue
+            </DialogPrimitive.Title>
+            <DialogPrimitive.Close className="rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-800">
+              <X className="w-5 h-5 text-gray-500" />
+            </DialogPrimitive.Close>
+          </div>
+
+          <div className="space-y-3">
+            <button
+              onClick={() =>
+                authClient.signIn.socialPopup({ provider: 'github' })
+              }
+              className="w-full flex items-center justify-center gap-2 bg-gray-900 hover:bg-black text-white dark:bg-white dark:hover:bg-gray-100 dark:text-gray-900 font-medium py-2.5 px-4 rounded-lg transition-colors"
+            >
+              <GithubIcon className="w-5 h-5" />
+              Continue with GitHub
+            </button>
+            <button
+              onClick={() =>
+                authClient.signIn.socialPopup({ provider: 'google' })
+              }
+              className="w-full flex items-center justify-center gap-2 bg-[#DB4437] hover:bg-[#c53929] text-white font-medium py-2.5 px-4 rounded-lg transition-colors"
+            >
+              <GoogleIcon className="w-5 h-5" />
+              Continue with Google
+            </button>
+          </div>
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  )
+}

src/components/ShowcaseGallery.tsx

@@ -14,12 +14,14 @@ import type { ShowcaseUseCase } from '~/db/types'
 import { Plus } from 'lucide-react'
 import { Button } from './Button'
 import { useCurrentUser } from '~/hooks/useCurrentUser'
+import { useLoginModal } from '~/contexts/LoginModalContext'
 
 export function ShowcaseGallery() {
   const navigate = useNavigate({ from: '/showcase/' })
   const search = useSearch({ from: '/showcase/' })
   const queryClient = useQueryClient()
   const currentUser = useCurrentUser()
+  const { openLoginModal } = useLoginModal()
 
   const { data, isLoading } = useQuery(
     getApprovedShowcasesQueryOptions({
@@ -175,8 +177,9 @@ export function ShowcaseGallery() {
 
   const handleVote = (showcaseId: string, value: 1 | -1) => {
     if (!currentUser) {
-      // Redirect to login
-      navigate({ to: '/login', search: { redirect: '/showcase' } })
+      openLoginModal({
+        onSuccess: () => voteMutation.mutate({ showcaseId, value }),
+      })
       return
     }
     voteMutation.mutate({ showcaseId, value })

src/components/ShowcaseSection.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { Link, useNavigate } from '@tanstack/react-router'
+import { Link } from '@tanstack/react-router'
 import {
   getFeaturedShowcasesQueryOptions,
   getShowcasesByLibraryQueryOptions,
@@ -11,6 +11,7 @@ import { ShowcaseCard, ShowcaseCardSkeleton } from './ShowcaseCard'
 import { buttonStyles } from './Button'
 import { ArrowRight, Plus } from 'lucide-react'
 import { useCurrentUser } from '~/hooks/useCurrentUser'
+import { useLoginModal } from '~/contexts/LoginModalContext'
 
 interface ShowcaseSectionProps {
   title?: string
@@ -62,9 +63,9 @@ export function ShowcaseSection({
   showViewAll = true,
   minItems = 3,
 }: ShowcaseSectionProps) {
-  const navigate = useNavigate()
   const queryClient = useQueryClient()
   const currentUser = useCurrentUser()
+  const { openLoginModal } = useLoginModal()
 
   const queryOptions = libraryId
     ? getShowcasesByLibraryQueryOptions({ libraryId, limit })
@@ -180,7 +181,9 @@ export function ShowcaseSection({
 
   const handleVote = (showcaseId: string, value: 1 | -1) => {
     if (!currentUser) {
-      navigate({ to: '/login', search: { redirect: '/showcase' } })
+      openLoginModal({
+        onSuccess: () => voteMutation.mutate({ showcaseId, value }),
+      })
       return
     }
     voteMutation.mutate({ showcaseId, value })

src/contexts/LoginModalContext.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react'
+import { useQueryClient } from '@tanstack/react-query'
+import { LoginModal } from '~/components/LoginModal'
+
+interface LoginModalContextValue {
+  openLoginModal: (options?: { onSuccess?: () => void }) => void
+  closeLoginModal: () => void
+}
+
+const LoginModalContext = React.createContext<LoginModalContextValue | null>(
+  null,
+)
+
+export function useLoginModal() {
+  const context = React.useContext(LoginModalContext)
+  if (!context) {
+    throw new Error('useLoginModal must be used within a LoginModalProvider')
+  }
+  return context
+}
+
+interface LoginModalProviderProps {
+  children: React.ReactNode
+}
+
+export function LoginModalProvider({ children }: LoginModalProviderProps) {
+  const queryClient = useQueryClient()
+  const [isOpen, setIsOpen] = React.useState(false)
+  const pendingOnSuccessRef = React.useRef<(() => void) | undefined>(undefined)
+
+  const openLoginModal = React.useCallback(
+    (options?: { onSuccess?: () => void }) => {
+      pendingOnSuccessRef.current = options?.onSuccess
+      setIsOpen(true)
+    },
+    [],
+  )
+
+  const closeLoginModal = React.useCallback(() => {
+    setIsOpen(false)
+    pendingOnSuccessRef.current = undefined
+  }, [])
+
+  React.useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) return
+      if (event.data?.type === 'TANSTACK_AUTH_SUCCESS') {
+        queryClient.invalidateQueries({ queryKey: ['currentUser'] })
+        const onSuccess = pendingOnSuccessRef.current
+        setIsOpen(false)
+        pendingOnSuccessRef.current = undefined
+        if (onSuccess) {
+          setTimeout(onSuccess, 0)
+        }
+      }
+    }
+    window.addEventListener('message', handleMessage)
+    return () => window.removeEventListener('message', handleMessage)
+  }, [queryClient])
+
+  const value = React.useMemo(
+    () => ({ openLoginModal, closeLoginModal }),
+    [openLoginModal, closeLoginModal],
+  )
+
+  return (
+    <LoginModalContext.Provider value={value}>
+      {children}
+      <LoginModal open={isOpen} onOpenChange={setIsOpen} />
+    </LoginModalContext.Provider>
+  )
+}