Client-Side Usage

Why Client-Side Hooks?

While this package is primarily designed for server-side authentication, sometimes you need to access session data in Client Components:

Building interactive UIs that depend on user data
Displaying user information in client-side navigation
Implementing real-time session updates
Using third-party libraries that require client components

Create a Session Provider Route

First, create an API route that will serve session data to your client components. This route handler strips out sensitive tokens before sending the session to the client.

Create a route handler, for example at src/app/api/auth/me/route.ts:

import { createSessionProviderRoute } from "@mikandev/next-discord-auth/server-actions";
import "@/auth";

export const GET = createSessionProviderRoute;

Wrap Your App with the Provider

In your root layout or a client component wrapper, add the UserInfoProvider:

// src/app/layout.tsx or src/components/providers.tsx
"use client";

import { UserInfoProvider } from "@mikandev/next-discord-auth/client";
import { ReactNode } from "react";

export function Providers({ children }: { children: ReactNode }) {
  return <UserInfoProvider path="/api/auth/me">{children}</UserInfoProvider>;
}

Then use it in your root layout:

import { Providers } from "@/components/providers";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Use the Hook in Client Components

Now you can use the useUserInfo() hook in any client component within your provider:

"use client";

import { useUserInfo } from "@mikandev/next-discord-auth/client";

export function UserProfile() {
  const { session, isLoading, isError, mutate } = useUserInfo();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Error loading session</div>;
  }

  if (!session) {
    return <div>Not signed in</div>;
  }

  return (
    <div>
      <img src={session.user.avatar} alt="Avatar" width={50} height={50} className="rounded-full" />
      <span>Welcome, {session.user.name}!</span>
      <span>ID: {session.user.id}</span>
      <button onClick={() => mutate()}>Refresh Session</button>
    </div>
  );
}

Hook API Reference

The useUserInfo() hook returns an object with the following properties:

session: The current session object (without accessToken and refreshToken), or null if not authenticated
isLoading: Boolean indicating if the session is being loaded
isError: Boolean indicating if there was an error loading the session
mutate: Function to manually revalidate the session data

Security Considerations

The client-side session object only contains:

user: User information (id, name, email, avatar)
expires: Session expiration timestamp

Sensitive tokens remain server-side only and are never exposed to the browser.

Here’s a complete example of a navigation bar using the client-side hooks:

"use client";

import { useUserInfo } from "@mikandev/next-discord-auth/client";
import Link from "next/link";

export function Navbar() {
  const { session, isLoading } = useUserInfo();

  return (
    <nav className="flex items-center justify-between p-4">
      <Link href="/" className="font-bold text-xl">
        My App
      </Link>

      <div className="flex items-center gap-4">
        {isLoading ? (
          <span>Loading...</span>
        ) : session ? (
          <>
            <img
              src={session.user.avatar}
              alt="Avatar"
              width={32}
              height={32}
              className="rounded-full"
            />
            <span>{session.user.name}</span>
            <form action="/auth/signout" method="POST">
              <button type="submit" className="btn btn-error">
                Sign Out
              </button>
            </form>
          </>
        ) : (
          <form action="/auth/signin" method="POST">
            <button type="submit" className="btn btn-primary">
              Sign In
            </button>
          </form>
        )}
      </div>
    </nav>
  );
}