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

ConvexProviderWithAuth0

ConvexProviderWithAuth0 from convex/react-auth0,

ctx.auth.getUserIdentity()

ctx.auth.getUserIdentity()

ctx.auth.getUserIdentity()

ctx.auth.getUserIdentity() only ever returns

{isLoading:true,isAuthenticated:false}

{isLoading:true,isAuthenticated:false}

{isLoading:true,isAuthenticated:false}

{isLoading:true,isAuthenticated:false}.

I then tried

ConvexProviderWithAuth

ConvexProviderWithAuth

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

"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,