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

@auth0/nextjs-auth0

@auth0/nextjs-auth0

Now, the that brings me to the core of my issue, I don't understand how do I connect my context provider with

Auth0Convex

Auth0Convex

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:

import { Auth0Provider } from "@auth0/nextjs-auth0/client";
...

return (<body>
   <Auth0Provider>
     <ConvexClientProvider>{children}</ConvexClientProvider>
   </Auth0Provider>
</body>)

import { Auth0Provider } from "@auth0/nextjs-auth0/client";
...

return (<body>
   <Auth0Provider>
     <ConvexClientProvider>{children}</ConvexClientProvider>
   </Auth0Provider>
</body>)

I tried porting over to:

import { ConvexProviderWithAuth0 } from "convex/react-auth0";

import { ConvexProviderWithAuth0 } from "convex/react-auth0";

but it simply doesn't work, and I understand why, the

ConvexProviderWithAuth0

ConvexProviderWithAuth0

I assume has a hard dependecy on https://github.com/get-convex/convex-js/blob/main/src/react-auth0/ConvexProviderWithAuth0.tsx#L1

but, this leaves me in a confused state, is there a simple way to have universal setup for

Auth0

Auth0

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?

Don't understand how to integrate Auth0 with Next.js Server+Client Components for a hybrid approach

Similar Threads