Convex + NextAUTH
What is the best way to use next-auth and convex? I want convex's realtime features in my nextjs app but I also need next-auth. I cannot use clerk.
16 Replies
Hey @SkylerX, WebDevCody has an example here:
https://github.com/webdevcody/next-auth-convex
(although it might have some limitations)
GitHub
GitHub - webdevcody/next-auth-convex
Contribute to webdevcody/next-auth-convex development by creating an account on GitHub.
Can you elaborate on why you need next-auth?
My project uses next-auth and the guy who I am building the project for insists on using next-auth (because it's free and there are no user limitations) but I guess I can talk to him. But thank you for the github link. I'll check it out
Thanks for the details, it's helpful to hear the real-life constraints people run into.
@Michal Srb It would be great if you guys had more examples with Next Auth. For some reason, even though Next Auth is widespread, there isn't much about Convex + Next Auth on the internet. I had already found webdevcody's work on GitHub, and I used it to integrate it with the Google OAuth provider (but with the new version of Next Auth, which was actually another challenge). — Now, I would like to integrate Convex with the credentials provider (email / password) of Next Auth as well, and honestly, it's a pain. I've learned a lot about JWTs, OpenID, OAuth, etc., but it's still a challenge making sense of how I would handle the authentication provider of Convex with traditional credentials. Not all projects using Convex are side projects we can rethink and adapt to a new stack like Clerk on a weekend. Some of us are running companies and certain decisions and technical choices can't change easily, and a common one is Next Auth. This has been the biggest pain from a DX standpoint using Convex.
I totally agree with you.
Not all projects using Convex are side projectsthis is definitely true!
I know @CodingWithJamal has successfully used Next Auth. Not sure if they were using password and email.
unfortunately, there is no "one thing" that can be done that solves everyone's auth challenges. it ends up authentication is complex and diffuse. people are using all kinds of different things
however we know we need to invest more in it, and this is a focus area @Michal Srb is planning on focusing on soon
@CodingWithJamal Did you integrate it with password and email?
no but it can be done somewhat easily by following auth.js docs and changing up the schema and adapter functions. Although you will have to implement an email client for password recovery.. which is why I didnt use email.
I am not expert in those topics. However, webdevcody's example simply has a couple of routes (
openid/token and openid/refresh) that simply revalidate the google oauth token with the front-end. This is basically what I already achieved with Google Oauth. I wonder if I could do something quite similar with email and password just to make it work with the Convex auth. Like, it doesn't have to be 100% a legitimate openid workflow with real tokens and refresh tokens—I hope—as long as the workaround is secure and lets me authenticate users.@José Alvarez you might be able to combine the code here:
https://github.com/xixixao/convex-auth
with an adaptor for NextAuth that uses Convex.
Here's the issue with NextAuth:
In the case of NextAuth, the Next server is the authentication authority. So for authenticating another service (like Convex), a JWT would be ideal. Unfortunately NextAuth doesn't have support for client-side JWTs. Instead they suggest to proxy all requests through the Next server - this doesn't work for Convex, because the ConvexReactClient uses WebSockets.
But you could:
1. Use Convex as your database for NextAuth
2. Ask the Convex server for a JWT from the Next server
3. Use this JWT to authenticate the WebSocket client
GitHub
GitHub - xixixao/convex-auth: Demonstration of authentication purel...
Demonstration of authentication purely via Convex. Contribute to xixixao/convex-auth development by creating an account on GitHub.
@José Alvarez we now have a guide for setting up Convex with NextAuth: https://stack.convex.dev/nextauth
Convex with Auth.js (NextAuth)
Learn how to use Auth.js with your Next.js server and Convex backend to build a full-featured authentication system.
@Michal Srb thanks for the tutorial. i just want to ask why the choice of generating a second JWT instead of using the token issued by nextauth, which should be available in the
session callback.
was the choice made specifically so that the issuer can be CONVEX_SITE_URL, which also exposes JWKs?
i'm not entirely sure what the issuer is for nextauth.
presumably this is for convenience in development (no need to use ngrok)?
oh nevermind, i guess it's because nextauth encrypts tokens intead of signing them.You got it, those are both good reasons