Especially if i want to have auth in middleware
#how do i setup convex auth with nextjs?
opal notch
bold gobletBOT
Hi @opal notch. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To set up Convex auth with Next.js, you need to follow several steps:
-
Set up Auth.js: Follow the Installation instructions for Auth.js (https://authjs.dev/getting-started/installation?framework=next.js). Then pick and configure providers as shown on the Authentication (https://authjs.dev/getting-started/authentication) page. You don't need to worry about setting up a database adapter at this stage, as you'll do that in the next step.
-
Set up the Convex database adapter: Follow the Convex Adapter for Auth.js article (https://stack.convex.dev/nextauth-adapter) to install and set up Convex as your database adapter, and to authenticate your Convex functions.
-
Install Dependencies: If you don’t already use it, install
convex-helpers, which is used in the adapter code:
npm install convex-helpers
- Configure Convex Adapter: Use the
ConvexAdapterobject as theadapterin your Auth.js config:
import NextAuth from "next-auth"
import { ConvexAdapter } from "@/app/ConvexAdapter";
export const { handlers, auth, signIn, signOut } = NextAuth({
providers: [],
adapter: ConvexAdapter,
})
- Modify the Convex auth config: Add a new provider to your
convex/auth.config.ts:
export default {
providers: [
{
domain: process.env.CONVEX_SITE_URL,
applicationID: "convex",
},
],
};
- Expose the public key: Add the two endpoints as shown to your
http.tsfile. You can find the example in the Convex Adapter for Auth.js Setup Guide (https://stack.convex.dev/nextauth-adapter#expose-the-public-key).
- Issue the JWT: In the session (https://authjs.dev/reference/nextjs#session) callback of the Auth.js config create the JWT and add it to the
sessionobject. This will make the JWT available on both the server and the client. You can find the example in the Convex Adapter for Auth.js Setup Guide (https://stack.convex.dev/nextauth-adapter#issue-the-jwt).
For middleware authentication, you can use the Next.js specific SDKs provided by Clerk and Auth0. Follow the respective quickstart:
- Clerk (https://clerk.com/docs/quickstarts/nextjs)
- Auth0 (https://auth0.com/docs/quickstart/webapp/nextjs/01-login)
Additional .env.local configuration is needed for these hybrid SDKs. You can find more information in the Convex documentation (https://docs.convex.dev/client/react/nextjs#server-and-client-side).