Client Hooks — useUser() & useAuth()

Overview

Client hooks provide auth state and actions in React client components. Requires Tier 2 setup.

Setup

Wrap your root layout with VibeAuthProvider:

// app/layout.tsx
"use client";
import { VibeAuthProvider } from "@vibelogin/nextjs/client";

export default function RootLayout({ children }) {
  return (
    <VibeAuthProvider basePath="/api/auth">
      {children}
    </VibeAuthProvider>
  );
}

useUser()

Access the current user in any client component.

"use client";
import { useUser } from "@vibelogin/nextjs/client";

export function UserGreeting() {
  const { user, isLoading, error } = useUser();

  if (isLoading) return <p>Loading...</p>;
  if (!user) return <p>Not signed in</p>;

  return <p>Hello, {user.name || user.email}!</p>;
}

Return value

useAuth()

Access auth actions: signIn, signUp, signOut, updateProfile, changePassword.

"use client";
import { useAuth } from "@vibelogin/nextjs/client";

export function SignOutButton() {
  const { signOut } = useAuth();
  return <button onClick={() => signOut()}>Sign Out</button>;
}

Sign in programmatically

const { signIn } = useAuth();

async function handleSubmit(email: string, password: string) {
  const result = await signIn(email, password);
  if (!result.ok) {
    console.error(result.error);
  }
}

Sign up programmatically

const { signUp } = useAuth();

const result = await signUp({
  email: "user@example.com",
  password: "securePassword123",
  name: "Jane Doe",
});

Update profile

const { updateProfile } = useAuth();
await updateProfile({ name: "New Name" });

Change password

const { changePassword } = useAuth();
const result = await changePassword({
  currentPassword: "old-password",
  newPassword: "new-password",
});

AuthUser type

CSRF protection