aith•4w ago

If I just keep the BetterAuth provider

If I just keep the BetterAuth provider and remove the "expectAuth" property, then I get errors on the components where authentication is required. For example I have a sidebar that displays user's info and I just get this:

[CONVEX Q(auth:getCurrentUser)] [Request ID: db9231822e85f5aa] Server Error
Uncaught Error: Unauthenticated
    at getAuthUser [as getAuthUser] (../../node_modules/@convex-dev/better-auth/src/client/index.ts:538:13)

  Called by client
<AppSidebar />

[CONVEX Q(auth:getCurrentUser)] [Request ID: db9231822e85f5aa] Server Error
Uncaught Error: Unauthenticated
    at getAuthUser [as getAuthUser] (../../node_modules/@convex-dev/better-auth/src/client/index.ts:538:13)

  Called by client
<AppSidebar />

15 Replies

Sara•4w ago

is this in dev or prod?

aithOP•4w ago

dev

Sara•4w ago

normal just refresh the page

aithOP•4w ago

That's when I get this error if I switch back and forth between pages

Sara•4w ago

it happens when you're updating things to the cloud, and the page it self reloads because of HMR like i said, just keep the better auth one, and you can remove the 'expect auth' and use the jsx components, they serve you better

aithOP•4w ago

Could you please point me to the docs for the Authenticated & Unauthenticated that you mentioned? Yup just keeping better auth now and removed the expect auth

Sara•4w ago

https://convex-better-auth.netlify.app/basic-usage/authorization#showing-ui-based-on-authentication-state

Authorization | Convex + Better Auth

Authorization with Better Auth

Sara•4w ago

check this also, you can share your questions in #better-auth

aithOP•4w ago

Thanks. And is there a better or different way to handle this in dev where I don't see these errors again? I am not updating anything to the cloud with this cause the functions are not changing and the user's info is not changing either.

GET /api/auth/get-session 200 in 540ms
 GET /api/auth/convex/token 200 in 558ms
 GET /api/auth/convex/token 200 in 558ms
 GET /dashboard 200 in 140ms
 GET /api/auth/get-session 200 in 1312ms

GET /api/auth/get-session 200 in 540ms
 GET /api/auth/convex/token 200 in 558ms
 GET /api/auth/convex/token 200 in 558ms
 GET /dashboard 200 in 140ms
 GET /api/auth/get-session 200 in 1312ms

Just this. Or am I misunderstanding something here? Just navigating between 2 pages

Sara•4w ago

I don't have an answer for you, but maybe @erquhart would, (sorry for the random ping shawn)

erquhart•4w ago

Using react/vite or a full stack framework?

Sara•4w ago

from the code in general, they must be using next

erquhart•4w ago

Sounds like ConvexBetterAuthProvider is getting re-rendered per page, need it to be in a layout that isn't being rerendered

aithOP•4w ago

'use client';

import { ReactNode } from 'react';
import { ConvexReactClient } from 'convex/react';
import { authClient } from '@/lib/auth-client';
import { ConvexBetterAuthProvider } from '@convex-dev/better-auth/react';

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!, {
    // expectAuth: true,
});

export function ConvexClientProvider({ children }: { children: ReactNode }) {

    return (
        <ConvexBetterAuthProvider client={convex} authClient={authClient}>
            {children}
        </ConvexBetterAuthProvider>
    );
}

'use client';

import { ReactNode } from 'react';
import { ConvexReactClient } from 'convex/react';
import { authClient } from '@/lib/auth-client';
import { ConvexBetterAuthProvider } from '@convex-dev/better-auth/react';

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!, {
    // expectAuth: true,
});

export function ConvexClientProvider({ children }: { children: ReactNode }) {

    return (
        <ConvexBetterAuthProvider client={convex} authClient={authClient}>
            {children}
        </ConvexBetterAuthProvider>
    );
}

Above is the ConvexClientProvider that I have and it is in the root layout.tsx:

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <html
            lang="en"
            className={`dark h-screen ${anekTamil.variable} ${sourceSerif4.variable} ${jetBrainsMono.variable}`}
        >
            <body className="dark h-screen">
                <ConvexClientProvider>{children}</ConvexClientProvider>
            </body>
        </html>
    );
}

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <html
            lang="en"
            className={`dark h-screen ${anekTamil.variable} ${sourceSerif4.variable} ${jetBrainsMono.variable}`}
        >
            <body className="dark h-screen">
                <ConvexClientProvider>{children}</ConvexClientProvider>
            </body>
        </html>
    );
}

My structure is a root layout, then a waitlist page (App Router btw) and a folder group with (app)/chat and (app)/dashboard with a (app)/layout.tsx. The shared layout.tsx in the folder group has the sidebar which has the queries for user info

erquhart•4w ago

Hard to say, I know that a regular _layout.tsx in Nextjs shouldn't be calling session and token endpoints on every navigation - the Nextjs example app doesn't have this issue, recommend referencing it for comparison: https://github.com/get-convex/better-auth/tree/main/examples/next

GitHub

better-auth/examples/next at main · get-convex/better-auth

Convex + Better Auth 🔥. Contribute to get-convex/better-auth development by creating an account on GitHub.

If I just keep the BetterAuth provider

Did you find this page helpful?