K
Kinde•4w ago
Wim

useKindeBrowserClient isAuthenticated

In my nextjs app, I'm using Kinde Auth: import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs"; export function NavMain(items) { const { isAuthenticated, user } = useKindeBrowserClient(); console.log("Auth state:", { isAuthenticated, user }); const filteredItems = items.filter( (item) => item.requiresAuth && isAuthenticated ); This will always print out: Auth state: { isAuthenticated: false, user: null } despite the fact that I'm logged in through Kinde Google Auth? Any idea how to fix this?
1 Reply
Oli - Kinde
Oli - Kinde•4w ago
Hi @Wim, Thanks for reaching out. There are a few potential issues to check: 1. Check Loading State You need to handle the loading state when using useKindeBrowserClient. The data may not be immediately available: 
"use client";
import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";

export function NavMain(items) {
  const { isAuthenticated, user, isLoading } = useKindeBrowserClient();
  
  if (isLoading) return <div>Loading...</div>;

  const filteredItems = items.filter(
    (item) => item.requiresAuth && isAuthenticated
  );
  // ... rest of your component
}
"use client";
import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";

export function NavMain(items) {
  const { isAuthenticated, user, isLoading } = useKindeBrowserClient();
  
  if (isLoading) return <div>Loading...</div>;

  const filteredItems = items.filter(
    (item) => item.requiresAuth && isAuthenticated
  );
  // ... rest of your component
}
2. Verify Client Component Make sure you have the "use client" directive at the top of your component file since useKindeBrowserClient is a client-side hook. 3. Check KindeProvider If you're using the App Router, verify that your application is wrapped with the necessary auth setup: 
"use client";
import { KindeProvider } from "@kinde-oss/kinde-auth-nextjs";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <KindeProvider>
      <html lang="en">
        <body>{children}</body>
      </html>
    </KindeProvider>
  );
}
"use client";
import { KindeProvider } from "@kinde-oss/kinde-auth-nextjs";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <KindeProvider>
      <html lang="en">
        <body>{children}</body>
      </html>
    </KindeProvider>
  );
}
4. Debug with Refresh You can try using the refreshData function to ensure you have the most up-to-date Kinde data: 
const { refreshData } = useKindeBrowserClient();
await refreshData();
const { refreshData } = useKindeBrowserClient();
await refreshData();
5. Console Log Full State For debugging, try logging the full auth state including loading and error states: 
const { isAuthenticated, user, isLoading, error } = useKindeBrowserClient();
console.log("Full auth state:", { isAuthenticated, user, isLoading, error });
const { isAuthenticated, user, isLoading, error } = useKindeBrowserClient();
console.log("Full auth state:", { isAuthenticated, user, isLoading, error });
If you're still experiencing issues after implementing these fixes, you might want to: - Check your environment variables are correctly set up - Verify your callback URLs in your Kinde dashboard match your application - Ensure you're using the correct version of the Kinde SDK for your Next.js setup If you're still having issues, please let me know.

Did you find this page helpful?