Trouble with getUserIdentity(), Auth0 and Next.js
Not a bug because I am almost certain this is operator error, but I am having trouble getting Auth0 working with Convex and Next.js 13. Would love the help of someone much smarter.
Method 1 - ConvexProviderWithAuth0, @auth0/auth0-react
I followed Auth0 with Convex tutorial for this one. The problem is @auth0/auth0-react will not work with Next.js (even with client side render).
Method 2 - ConvexProviderWithAuth and @auth0/nextjs-auth0
I installed @auth0/nextjs-auth0 and followed Auth0's official tutorial. I am now able to authenticate within the app.... but when I use
ConvexProviderWithAuth0 from convex/react-auth0, ctx.auth.getUserIdentity() only ever returns {isLoading:true,isAuthenticated:false}.
I then tried ConvexProviderWithAuth from convex/react and hard coded the useAuth prop:
/context/ConvexProvider.tsx
"use client";
import { ReactNode } from "react";
import { ConvexProviderWithAuth, ConvexReactClient } from "convex/react";
import { useUser } from "@auth0/nextjs-auth0/client";
const convex = new ConvexReactClient (process. env.NEXT_PUBLIC_CONVEX _URL!) ;
export default function ConvexClientProvider({children}) {
const { user, isLoading } = useUser();
return (
<ConvexProviderWithAuth
client={convex}
useAuth={() => {
return {
isLoading,
isAuthenticated: !!user,
fetchAccessToken,
};
}}
>
{children}
</ConvexProviderWithAuth>
);
}
const fetchAccessToken = async (args: { forceRefreshToken: boolean }) => {
return "eyJ...WLw";
}
Even with a hardcoded response to the useAuth hook (which fixes the perpetual loading problem) for the ConvexProviderWithAuth, ctx.auth.getUserIdentity() just returns null.
Tutorial:
Auth0 with Convex - https://docs.convex.dev/auth/auth0
Auth0 with Next.js (@auth0/nextjs-auth0) - https://auth0.com/docs/quickstart/webapp/nextjs/interactiveConvex Auth0 | Convex Developer Hub
Auth0 is an authentication platform providing login via
Auth0 Docs
Auth0 Next.js SDK Quickstarts: Add Login to your Next.js application
This guide demonstrates how to integrate Auth0 with any new or existing Next.js application using the Auth0 Next.js SDK.
14 Replies
Is there a working build of Next.js 13 (app router) working with Convex and Auth0 somewhere that I have overlooked?
What's this hardcoded value
eyJ...WLw" from? This is how we set that hook https://github.com/get-convex/convex-js/blob/541ca6507a5d62b38f46de967db220b0edabebaf/src/react-auth0/ConvexProviderWithAuth0.tsx#L40-L60GitHub
convex-js/src/react-auth0/ConvexProviderWithAuth0.tsx at 541ca6507a...
TypeScript/JavaScript client library for Convex. Contribute to get-convex/convex-js development by creating an account on GitHub.
I'm curious about Method 1 first, it sounds like our tutorial is broken? Or just with Next.js app router, which we should probably add a callout for?
Did you try this tutorial: https://docs.convex.dev/client/react/nextjs/#adding-client-side-authentication
Tom, thanks for taking a look. The hardcoded value is the sessionToken (purely for testing purposes). Unfortunately, that github link appears to be broken. I'm 90% sure I have tried all the tutorials from the convex docs but was doing so within an active project. Give me an hour or two and I'll try both of these from scratch. Again, really appreciate the help!
Ah sorry about that, I didn't link to the public version! Here it is https://github.com/get-convex/convex-js/blob/541ca6507a5d62b38f46de967db220b0edabebaf/src/react-auth0/ConvexProviderWithAuth0.tsx#L40-L60
GitHub
convex-js/src/react-auth0/ConvexProviderWithAuth0.tsx at 541ca6507a...
TypeScript/JavaScript client library for Convex. Contribute to get-convex/convex-js development by creating an account on GitHub.
Sorry for the trouble here! It sounds like our docs could help a lot here with pointing to the Next.js-specific auth setup. I just added this one:
The tutorial I would try is https://docs.convex.dev/client/react/nextjs/#adding-client-side-authentication. If it doesn't work we need to fix it.
Tom you are the man! Trying it now... just a heads up that Github link is still giving me trouble.
@ballingt I am trying do double check any errors I get against the docs & support tickets before bugging you but I did come across some things in the Next.js Auth0 tutorial that may be incorrect.
The tutorial shows
ConvexProviderWithAuth0 being imported from convex/react, but it does not exist for convex/react (only convex/react-auth0). It's also missing import { Auth0Provider } from "@auth0/auth0-react"
I think it is supposed to look like this:
"use client";
import { ReactNode } from "react";
import { ConvexReactClient } from "convex/react";
import { ConvexProviderWithAuth0 } from "convex/react-auth0";
import { Auth0Provider } from "@auth0/auth0-react";
const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
export default function ConvexClientProvider({
children,
}: {
children: ReactNode;
}) {
return (
<Auth0Provider
domain={process.env.NEXT_PUBLIC_AUTH0_DOMAIN}
clientId={process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID}
authorizationParams={{
redirect_uri:
typeof window === "undefined" ? undefined : window.location.origin,
}}
useRefreshTokens={true}
cacheLocation="localstorage"
>
<ConvexProviderWithAuth0 client={convex}>
{children}
</ConvexProviderWithAuth0>
</Auth0Provider>
);
}
Also, the link to the Next.js example on github in the documentation is broken as well (https://github.com/get-convex/convex-demos/tree/main/next-app/pages/_app.jsx). Hopefully this is helpful and is not coming across as nit-picky. I really appreciate how vocal y'all are and want to help out as much as possible.
All this said though, I still cannot get this to work. After going down a bit of a rabbit hole on Github I think it is because @auth0/auth0-react does not work with the App router... Mainly due to the useRouter hook changing.
Auth0 has switched to @auth0/nextjs-auth0 for Next.js for this reason - https://github.com/auth0/nextjs-auth0/GitHub
GitHub - auth0/nextjs-auth0: Next.js SDK for signing in with Auth0
Next.js SDK for signing in with Auth0. Contribute to auth0/nextjs-auth0 development by creating an account on GitHub.
Oh man sorry about the link! Here it is, if I didn't mess up again https://github.com/get-convex/convex-js/blob/541ca6507a5d62b38f46de967db220b0edabebaf/src/react-auth0/ConvexProviderWithAuth0.tsx#L40-L60
OK I'll work through an example, thanks for drawing attention to this. And thanks for code fixes, they're always helpful.
When you saw @auth0/auth0-react doesn't work with Next.js app router, are you seeing an error? or silently not working? I'll give this a shot now just so I see the failure too and will make a Next.js example wiht Auth0 — unless there's something small I find to fix with your example it sounds like we have some work to do.
lol that one worked!
Sliently. In the @auth0/auth0-react example, when a user signs in, Auth0 passes a code to the application through the url:
ex:
http://localhost:3003/?code=DdkfgFhr3jlQpmeRX3Z0JiXvvSDadnjRbS-n26RrGi7o2&state=YzdWZkExeml6bDE3aUdhQUJhSGRfU0xVR3JqZHYtTVZoZ0tEbHVyeDM1OA%3D%3D
When you use @auth0/auth0-react with Next.js 13.4 app router, this code shows up in the url but the Auth0Provider dose not appear to consume it. I am 60% sure this is being caused by the official depreciation of the legacy route handlers in the last version of Next.js (I THINK).
This seems to be the reason the newer @auth0/nextjs-auth0 uses the handleAuth hook as an API point (outside of the router) to retrieve the response from the callback.
If you could help me better understand the what the fetchAccessToken function is supposed to return in the ConvexProviderWithAuth's useAuth function, I think I can get it working with the new @auth0/nextjs-auth0... assuming I wouldn't be getting in your way or am totally wrong about all this haha.Not getting in the way at all! I was doing a few other things first but gettinga version of this working is a priority, I'll get something together today.
fetchAccessToken should be returning the ID token as a string.
I have something working now with Auth0 and Next.js App Router, before I turning into an official example here it is: https://github.com/thomasballinger/convex-next-app-router-auth0-example
This should be pretty close to the (fixed, thanks for pointing the issues out!) Next.js app router tutorial.
When you use @auth0/auth0-react with Next.js 13.4 app router, this code shows up in the url but the Auth0Provider dose not appear to consume it.I didn't see this, curious about what we're doing differently because I'm sure other folks are going to run into this.
Tom! Nice work! I went ahead and cloned your repo and sure enough it works beautifully! Then I threw my Auth0 ClientID and Domain in there and got the same issue I was having.... turns out it was 100% an Auth0 thing (my bad for sending you on a wild goose chase!).
With Auth0's documentation now pushing Next.js devs towards the
@auth0/nextjs-auth0 package, you might include the following steps in your documentation the help big dummies like me:
1. Make sure to use @auth0/auth0-react (not @auth0/nextjs-auth0)
2. Create a new Single Page Application in Auth0 (@auth0/nextjs-auth0 uses the Regular Web App)
3. Under the Settings Tab in your application, scroll to the Refresh Token Rotation section and enable Rotation (off by default) <---- thats what was causing my problem.
Thanks for all the help and sorry for pointing you in the wrong direction!Good to hear! Something like this has happened before, I might make a short setup video or take screenshots to help with the tricky Auth0 setup steps.