Complete the Convex Auth Setup

We need two more things to complete the Convex Auth setup:

  1. Extend the schema with the auth library’s tables
  2. Swap the provider on the frontend so React knows about Convex Auth

Extend the Schema

Convex Auth ships its own set of tables: one for users, plus several for sessions, verifiers, and refresh tokens that the library uses internally. The library exports them as authTables so we can spread them into our own schema.

Update convex/schema.ts:

import { defineSchema, defineTable } from "convex/server";
import { v } from "convex/values";
import { authTables } from "@convex-dev/auth/server"; // 👀

export default defineSchema({
  ...authTables,
  // Keep the rest of your tables here,
});

The spread operator merges all of authTables into the top-level schema object alongside the existing tables (projects and issues). When you save the file, you will see npx convex dev detect the change and add several new indexes: one each for authAccounts, authSessions, authRefreshTokens, authVerificationCodes, authVerifiers, users.email, and users.phone. These are the auth library’s bookkeeping tables. You will never query them directly. The only one we care about is the users table, and we will use it in later sections.

Swap the Provider in main.tsx

On the frontend, we need to tell React about Convex Auth. Until now, our app has been wrapped in ConvexProvider from convex/react. We will replace that with ConvexAuthProvider from @convex-dev/auth/react. It takes the same client prop and the same children, so it is a direct swap. It also keeps track of the authentication state that our hooks will read in the next section.

Update the src/main.tsx imports:

- import { ConvexProvider, ConvexReactClient } from "convex/react";
+ import { ConvexReactClient } from "convex/react";
+ import { ConvexAuthProvider } from "@convex-dev/auth/react";

Update the JSX:

  createRoot(document.getElementById("root")!).render(
    <StrictMode>
-     <ConvexProvider client={convex}>
+     <ConvexAuthProvider client={convex}>
        <RouterProvider router={router} />
+     </ConvexAuthProvider>
-     </ConvexProvider>
    </StrictMode>,
  );

The rest of the file stays exactly the same. We are still passing in the ConvexReactClient instance we created at the top.

Save the file. The app should still render the project list exactly as it did before. There is no visible change yet, because we have not added any UI for sign-in. But the provider can now hold auth state, which is what the next section needs.

Checkpoint: Commit your progress.

git add .
git commit -m "tracker-02: Extend schema and swap to ConvexAuthProvider"
git push