21 replies

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

ConvexProviderWithAuth0

from convex/react-auth0,

ctx.auth.getUserIdentity()

ctx.auth.getUserIdentity()

only ever returns

{isLoading:true,isAuthenticated:false}

{isLoading:true,isAuthenticated:false}

.

I then tried

ConvexProviderWithAuth

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";
}

"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()

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/interactive

Convex 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.

Trouble with getUserIdentity(), Auth0 and Next.js

Similar Threads