How to implement next-auth with convex?
Hi!
I am building a next.js application. The basic idea is to create teams/projects to work together in X,Y,Z stuff. I am having some problems with authentication, I set up next-auth with some providers and the sessions work fine. But when it comes to Convex, I don't know how to protect data (only allow memebers of a team access the data of that team). And when an user authenticates if its new I would like to add it to the DB else just access that user data from the DB.
Thanks for your time!
13 Replies
Hey there!
You generally want to set up a users table in Convex to store your users in, and sync relevant data from your auth provider, typically the id used by the auth provider is one such field.
When the user signs up or logs in, get the convex user based on the auth info. If there's no user, that's when you create one.
Once you have a user from your Convex table, you can use that for any authorization across your app. For example if you only want members of a given team to be able to view that team's projects, you can write a function that takes the current Convex user document and asserts team membership, and run that before executing a privileged query.
There are helpers to make this a bit simpler too - convex helpers, for example, gives a library and patterns for auth: https://stack.convex.dev/custom-functions#modifying-the-ctx-argument-to-a-server-function-for-user-auth
Customizing serverless functions without middleware
Re-use code and centralize request handler definitions with discoverability and type safety and without the indirection of middleware or nesting of wr...
Amazing! Thank you very much. I'll try to implement it
I have an implementation of it which I made on top of @CodingWithJamal's work
https://github.com/trace2798/convex_feedit
GitHub
GitHub - trace2798/convex_feedit: PostIT: Share it with your group....
PostIT: Share it with your group. This is a web application where users can create group and post. - trace2798/convex_feedit
Thanks! I have made a more type-save version in the official auth.js pr but it might not be merged for a while sadly. I will have to try to get the convex team to help with getting it added as an official plugin.
heres a link https://github.com/ThatGuyJamal/next-auth/blob/ConvexDB-Adapter/packages/adapter-convex/src/index.ts
GitHub
next-auth/packages/adapter-convex/src/index.ts at ConvexDB-Adapter ...
Authentication for the Web. Contribute to ThatGuyJamal/next-auth development by creating an account on GitHub.
Noice. I will check this out. Having this official adapter will be of great help
yeah, the main reason i didnt do to much work is i just wanted to lay the ground work for the team to view and have ideas. Also with the popularity of next-auth convex would get mote eyes on it being in there docs i would think? @jamwt. I think this would be good since convex wants to have good web supports and auth.js is a good option.
Yup. That's what I put on the feedback form too. I think having an official example will help a lot
GitHub
GitHub - xipanca/nextjs-ts-nextauth-convex
Contribute to xipanca/nextjs-ts-nextauth-convex development by creating an account on GitHub.
Sweet! Thanks for sharing, what I needed. 🙏🏽
Wow, nice work!
@Ditador this is a nice start, but it seems to cover only gating routes based on NextAuth. I think folks here would want to combine this with a way to authenticate the client (which NextAuth doesn’t make easy, but could be done via session IDs or custom JWTs).
We now have a guide for setting up NextAuth with Convex: 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.