fix auth

Author: tannerlinsley

convex/http.ts

@@ -1,48 +1,11 @@
 import { ossStats } from './stats'
 import { httpRouter } from 'convex/server'
-
 import { betterAuthComponent } from './auth'
-
-import { convexAdapter } from '@convex-dev/better-auth'
-import { convex } from '@convex-dev/better-auth/plugins'
-import { betterAuth } from 'better-auth'
-import { reactStartHelpers } from '@convex-dev/better-auth/react-start'
-import { GenericCtx } from './_generated/server'
-
-// You'll want to replace this with an environment variable
-const siteUrl = process.env.URL
+import { createAuth } from '../src/server/auth'
 
 const http = httpRouter()
 
-const createAuth = (ctx: GenericCtx) =>
-  betterAuth({
-    // All auth requests will be proxied through your TanStack Start server
-    baseURL: siteUrl,
-    database: convexAdapter(ctx, betterAuthComponent),
-
-    // Simple non-verified email/password to get started
-    socialProviders: {
-      github: {
-        clientId: process.env.GITHUB_OAUTH_CLIENT_ID as string,
-        clientSecret: process.env.GITHUB_OAUTH_CLIENT_SECRET as string,
-      },
-      google: {
-        clientId: process.env.GOOGLE_OAUTH_CLIENT_ID as string,
-        clientSecret: process.env.GOOGLE_OAUTH_CLIENT_SECRET as string,
-      },
-    },
-    plugins: [
-      // The Convex plugin is required
-      convex(),
-    ],
-  })
-
 ossStats.registerRoutes(http)
 betterAuthComponent.registerRoutes(http, createAuth)
 
-export const { fetchSession, reactStartHandler, getCookieName } =
-  reactStartHelpers(createAuth, {
-    convexSiteUrl: process.env.VITE_CONVEX_SITE_URL!,
-  })
-
 export default http

src/routes/_libraries/login.tsx

@@ -3,15 +3,14 @@ import { useIsDark } from '~/hooks/useIsDark'
 import { FaGithub, FaGoogle } from 'react-icons/fa'
 import splashLightImg from '~/images/splash-light.png'
 import splashDarkImg from '~/images/splash-dark.png'
-import { fetchServerAuth } from '~/utils/auth.isomorphic'
 import { redirect } from '@tanstack/react-router'
 
 export const Route = createFileRoute({
   component: LoginPage,
-  loader: async () => {
-    const { token, userId } = await fetchServerAuth()
+  loader: async ({ context }) => {
+    const user = await context.ensureUser()
 
-    if (token) {
+    if (user) {
       throw redirect({ to: '/account' })
     }
   },

src/routes/admin/index.tsx

@@ -1,22 +1,9 @@
-import * as React from 'react'
-import { Link, Outlet, redirect } from '@tanstack/react-router'
-import { CgClose, CgMenuLeft } from 'react-icons/cg'
+import { Link } from '@tanstack/react-router'
 import { FaLock, FaUsers, FaChartBar } from 'react-icons/fa'
-import { twMerge } from 'tailwind-merge'
-import logoColor100w from '~/images/logo-color-100w.png'
-import { ThemeToggle } from '~/components/ThemeToggle'
 import { useQuery } from 'convex/react'
 import { api } from 'convex/_generated/api'
-import { fetchServerAuth } from '~/utils/auth.isomorphic'
 
 export const Route = createFileRoute({
-  beforeLoad: async () => {
-    const { userId } = await fetchServerAuth()
-
-    if (!userId) {
-      throw redirect({ to: '/login' })
-    }
-  },
   component: AdminPage,
 })
 

src/routes/admin/route.tsx

@@ -1,21 +1,16 @@
 import * as React from 'react'
-import { Link, LinkOptions, Outlet, redirect } from '@tanstack/react-router'
+import { Link, LinkOptions, Outlet } from '@tanstack/react-router'
 import { CgClose, CgMenuLeft } from 'react-icons/cg'
 import { FaHome, FaLock, FaUser, FaUsers } from 'react-icons/fa'
 import { twMerge } from 'tailwind-merge'
 import logoColor100w from '~/images/logo-color-100w.png'
 import { ThemeToggle } from '~/components/ThemeToggle'
 import { useQuery } from 'convex/react'
 import { api } from 'convex/_generated/api'
-import { fetchServerAuth } from '~/utils/auth.isomorphic'
 
 export const Route = createFileRoute({
-  beforeLoad: async () => {
-    const { userId } = await fetchServerAuth()
-
-    if (!userId) {
-      throw redirect({ to: '/login' })
-    }
+  beforeLoad: async ({ context }) => {
+    await context.ensureUser()
   },
   component: () => {
     return (

src/routes/admin/users.tsx

@@ -12,7 +12,6 @@ import {
   FaChevronRight,
 } from 'react-icons/fa'
 import type { Id } from 'convex/_generated/dataModel'
-import { fetchServerAuth } from '~/utils/auth.isomorphic'
 import {
   useReactTable,
   getCoreRowModel,
@@ -29,13 +28,6 @@ type User = {
 }
 
 export const Route = createFileRoute({
-  beforeLoad: async () => {
-    const { userId } = await fetchServerAuth()
-
-    if (!userId) {
-      throw redirect({ to: '/login' })
-    }
-  },
   component: UsersPage,
 })
 

src/routes/api/auth/$.ts

@@ -1,4 +1,5 @@
-import { reactStartHandler } from '~/utils/auth.server'
+import { reactStartHandler } from "~/server/auth"
+
 
 export const ServerRoute = createServerFileRoute().methods({
   GET: ({ request }) => {

src/server/auth.ts

@@ -0,0 +1,37 @@
+import { convexAdapter } from '@convex-dev/better-auth'
+import { convex } from '@convex-dev/better-auth/plugins'
+import { betterAuth } from 'better-auth'
+import { reactStartHelpers } from '@convex-dev/better-auth/react-start'
+import { GenericCtx } from 'convex/_generated/server'
+import { betterAuthComponent } from 'convex/auth'
+
+// You'll want to replace this with an environment variable
+const siteUrl = process.env.URL
+
+export const createAuth = (ctx: GenericCtx) =>
+  betterAuth({
+    // All auth requests will be proxied through your TanStack Start server
+    baseURL: siteUrl,
+    database: convexAdapter(ctx, betterAuthComponent),
+
+    // Simple non-verified email/password to get started
+    socialProviders: {
+      github: {
+        clientId: process.env.GITHUB_OAUTH_CLIENT_ID as string,
+        clientSecret: process.env.GITHUB_OAUTH_CLIENT_SECRET as string,
+      },
+      google: {
+        clientId: process.env.GOOGLE_OAUTH_CLIENT_ID as string,
+        clientSecret: process.env.GOOGLE_OAUTH_CLIENT_SECRET as string,
+      },
+    },
+    plugins: [
+      // The Convex plugin is required
+      convex(),
+    ],
+  })
+
+export const { fetchSession, reactStartHandler, getCookieName } =
+  reactStartHelpers(createAuth, {
+    convexSiteUrl: process.env.VITE_CONVEX_SITE_URL!,
+  })