Don't understand how to integrate Auth0 with Next.js Server+Client Components for a hybrid approach
🔑Auth❔Advice
I come from a background where I used to "own" auth in my own system (Elixir, Phoenix) so keep in mind that the world of auth providers is kind of new to me, so I may be misinterpreting some thing.
The core of the issue is I don't understand how one is supposed to tie together: Convex + Next.js (Server & Client components) + Auth0
I've followed along with the official docs and I see that there's documentation for the "client-side only" implementation for Auth0.
https://docs.convex.dev/client/nextjs/app-router/#client-side-only
However, I am in fact interested in the server side aspect, but not just server fetching, I'd like a hybrid approach:
- The ability to block on route-level
- The ability to fetch data from BE
- The ability to have that data re-hydrated on FE
The issue is, the docs simply say "See the Auth0 Next.js" guide, which I followed, and that lead me to install
Now, the that brings me to the core of my issue, I don't understand how do I connect my context provider with
Do I need to both setup a React SPA side? And then on top of that add
I was stuck on this scenario:
I tried porting over to:
but it simply doesn't work, and I understand why, the
but, this leaves me in a confused state, is there a simple way to have universal setup for
The core of the issue is I don't understand how one is supposed to tie together: Convex + Next.js (Server & Client components) + Auth0
I've followed along with the official docs and I see that there's documentation for the "client-side only" implementation for Auth0.
https://docs.convex.dev/client/nextjs/app-router/#client-side-only
However, I am in fact interested in the server side aspect, but not just server fetching, I'd like a hybrid approach:
- The ability to block on route-level
- The ability to fetch data from BE
- The ability to have that data re-hydrated on FE
The issue is, the docs simply say "See the Auth0 Next.js" guide, which I followed, and that lead me to install
@auth0/nextjs-auth0@auth0/nextjs-auth0Now, the that brings me to the core of my issue, I don't understand how do I connect my context provider with
Auth0ConvexAuth0Convex in a way that supports universal (client+server) access. Do I need to both setup a React SPA side? And then on top of that add
@auth0/nextjs-auth0@auth0/nextjs-auth0? Does that even work?I was stuck on this scenario:
I tried porting over to:
but it simply doesn't work, and I understand why, the
ConvexProviderWithAuth0ConvexProviderWithAuth0 I assume has a hard dependecy on https://github.com/get-convex/convex-js/blob/main/src/react-auth0/ConvexProviderWithAuth0.tsx#L1but, this leaves me in a confused state, is there a simple way to have universal setup for
Auth0Auth0 that can fetch the token and pass it so it's available in both server and client? Or at least document it so it's easier to follow?
GitHub
TypeScript/JavaScript client library for Convex. Contribute to get-convex/convex-js development by creating an account on GitHub.
