improve auth stability, support ssr auth, login redirects (#524)

* improve auth stability, support ssr auth, login redirects

* drop expectAuth, causing issues

Author: erquhart

package.json

@@ -28,7 +28,7 @@
     "@codemirror/lang-javascript": "^6.2.3",
     "@codemirror/lang-json": "^6.0.1",
     "@convex-dev/auth": "^0.0.88",
-    "@convex-dev/better-auth": "0.9",
+    "@convex-dev/better-auth": "0.9.7-alpha.0",
     "@convex-dev/react-query": "0.0.0-alpha.11",
     "@daytonaio/sdk": "^0.25.6",
     "@erquhart/convex-oss-stats": "^0.8.1",
@@ -49,12 +49,12 @@
     "@radix-ui/react-select": "^2.2.2",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-tooltip": "^1.1.5",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toast": "^1.2.2",
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.1.5",
     "@remix-run/node": "^2.8.1",
     "@sentry/react": "^8.35.0",
     "@sentry/vite-plugin": "^2.22.6",
@@ -89,8 +89,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "convex": "^1.25.4",
-    "convex-oss-stats": "link:../../../erquhart/convex-oss-stats",
+    "convex": "^1.28.0",
     "cors": "^2.8.5",
     "d3": "^7.9.0",
     "date-fns": "^2.30.0",

pnpm-lock.yaml

@@ -16,18 +16,21 @@ import {
 } from 'react-icons/fa'
 import { ThemeToggle } from './ThemeToggle'
 import { SearchButton } from './SearchButton'
-import { Authenticated, Unauthenticated, useQuery } from 'convex/react'
-import { AuthLoading } from 'convex/react'
+import { Authenticated, useQuery } from 'convex/react'
 import { api } from 'convex/_generated/api'
 import { MdLibraryBooks, MdLineAxis, MdPerson, MdSupport } from 'react-icons/md'
 import { CgClose, CgMenuLeft, CgMusicSpeaker } from 'react-icons/cg'
 import { BiSolidCheckShield } from 'react-icons/bi'
 import { PiHammerFill, PiSparkleFill } from 'react-icons/pi'
 import { libraries } from '~/libraries'
 import { sortBy } from '~/utils/utils'
+import { convexQuery } from '@convex-dev/react-query'
+import { useSuspenseQuery } from '@tanstack/react-query'
 
 export function Navbar({ children }: { children: React.ReactNode }) {
-  const user = useQuery(api.auth.getCurrentUser)
+  const { data: user } = useSuspenseQuery(
+    convexQuery(api.auth.getCurrentUser, {})
+  )
   const matches = useMatches()
 
   const Title =
@@ -65,48 +68,40 @@ export function Navbar({ children }: { children: React.ReactNode }) {
 
   const loginButton = (
     <>
-      {(() => {
-        const loginEl = (
-          <Link
-            to="/login"
-            className="flex items-center gap-1 bg-gray-500/20 rounded-lg p-2 opacity-80
+      {!user && (
+        <Link
+          to="/login"
+          className="flex items-center gap-1 bg-gray-500/20 rounded-lg p-2 opacity-80
             hover:opacity-100 whitespace-nowrap uppercase font-black text-xs"
-          >
-            <MdPerson className="scale-125" />
-            <div className="">Log In</div>
-          </Link>
-        )
-
-        return (
-          <>
-            <AuthLoading>{loginEl}</AuthLoading>
-            <Unauthenticated>{loginEl}</Unauthenticated>
-          </>
-        )
-      })()}
-
-      <Authenticated>
-        <div className="flex items-center gap-2 px-2 py-1 rounded-lg">
-          <FaUser />
-          <Link
-            to="/account"
-            className="flex-1 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white whitespace-nowrap"
-          >
-            My Account
-          </Link>
-        </div>
-        {canAdmin ? (
+        >
+          <MdPerson className="scale-125" />
+          <div className="">Log In</div>
+        </Link>
+      )}
+      {user && (
+        <>
           <div className="flex items-center gap-2 px-2 py-1 rounded-lg">
-            <FaLock />
+            <FaUser />
             <Link
-              to="/admin"
-              className="flex-1 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
+              to="/account"
+              className="flex-1 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white whitespace-nowrap"
             >
-              Admin
+              My Account
             </Link>
           </div>
-        ) : null}
-      </Authenticated>
+          {canAdmin && (
+            <div className="flex items-center gap-2 px-2 py-1 rounded-lg">
+              <FaLock />
+              <Link
+                to="/admin"
+                className="flex-1 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
+              >
+                Admin
+              </Link>
+            </div>
+          )}
+        </>
+      )}
     </>
   )