#Uncaught Error: Unauthenticated call to function

19 messages · Page 1 of 1 (latest)

spring wigeon
#

I am trying to stand up a happy path of using a single Convex query function to authenticate a user with Clerk, select from the users table, and then select from the userSettings table.

#

Observed Behavior:
On the front end of my page, http://localhost:3000/two-part-query-function, I get this error message:
Unhandled Runtime Error
Error: [CONVEX Q(userSettings:getUserSettingsByTokenIdentifier)] [Request ID: 30e901867821f71e] Server Error
Uncaught Error: Unauthenticated call to function
at handler (../convex/userSettings.ts:108:4)

Called by client

Source
src/app/(try-convex)/two-part-query-function/page.tsx (30:5) @ api

28 |
29 | const selectUserSettingsData = useQuery(

30 | api.userSettings.getUserSettingsByTokenIdentifier,
| ^
31 | );
32 |
33 | // // Type guard function to check if the query is still loading

#

Interestingly, in page.tsx, if I comment out this selectUserSettingsData variable and keep the variable, authUserIdentity,
const authUserIdentity = useQuery(api.userSettings.queryAuthUserIdentity, {});
This query is completely successful. In the Chrome Network tab, sync, messages, there is indeed a Authenticate message with a lengthy string in the "value". value: "eyJhbGciOiJSUz..."
See this Vercel deployment for this observation: https://crystal-txt-kf4lyk8m7-matts-projects-82cbe13a.vercel.app/two-part-query-function

#

I am relatively new to Convex, but I don't see anything fundamentally different about how this query gets the authentication from Clerk. This queryAuthUserIdentity is simpler and only has two jobs to do which is to authenticate with Clerk and get the identityToken from UserIdentity.

#

Attempts to resolve the issue

  1. I tried to make this database read a Convex mutation instead of a Convex query, but that put me down the path of putting a Convex mutation in a useEffect() before loading the form. This caused the issue of too many re-renderings.
  2. Perhaps this is an issue about the loading of components, and this is an issue that the <Authenticated> component can solve, but I am stuck trying to use it.
  3. Perhaps the customQuery and auth.ts approach in notesGPT can resolve the issue if it is indeed about the order of loading.
real swift
#

i recommend putting the <Authenticated> around the component that calls useQuery

#

like

export default function SettingsPage() {
  return <Authenticated>
    <AuthenticatedSettingsPage />
  </Authenticated>;
}
function AuthenticatedSettingsPage() {
  // copy the contents of your existing SettingsPage component
}
spring wigeon
#

Well, sweet Texas Tea! That seems to be working. I am embarrassed. But, I had searched around for </Authenticated> and didn't get much

#

Why did my multi-part query function need </Authenticated> but my simple queryAuthUserIdentity doesn't?

real swift
#

queryAuthUserIdentity doesn't throw an error if it's authenticated (it returns null)

spring wigeon
#

But queryAuthUserIdentity seemed to be returning a value for me; that's how I was able to print the tokenIdentifier to the front end

real swift
#

it returns null the first time, and then you authenticate and it rerenders with a value

#

whereas getUserSettingsByTokenIdentifier throws an error, so the authentication and rerender never happen

spring wigeon
shy terrace
#

ConvexProviderWithClerk is for allowing you to check for a Clerk user, Authenticated says "don't render these children until there is a clerk user and it has sent its token to Convex"

#

which is important if you write queries that will error when run without auth