mcpField
A
authentication-best-practices

authentication-best-practices

github.com/andrelandgrafSecurity2396 installsUpdated 20w ago
Repository

About authentication-best-practices

A Better Auth recipe for developers implementing session handling and authentication flows. It explains client and server session access, route guards, and sign-in, sign-up, and sign-out patterns.

Key features

  1. 01Client-side session hooks
  2. 02Server-side session access
  3. 03Guarding authenticated routes
  4. 04Sign-in, sign-up, and sign-out
  5. 05Parallel user-data fetching

Use cases

  1. 01Read sessions in client components
  2. 02Reject unauthenticated route requests
  3. 03Load user data after validating a session

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/andrelandgraf/fullstackrecipes --skill authentication-best-practices

After installing, type/authentication-best-practicesin Claude Code to confirm it loaded.

Details

From the project README

Authentication Best Practices

Read sessions, protect routes, and run sign in/up/out with Better Auth.

Prerequisites

Complete these setup recipes first:

  • Better Auth Setup
Client-Side Sessions

Use the auth client hooks from @/lib/auth/client in client components.

"use client";

import { useSession, signOut } from "@/lib/auth/client";

export function UserMenu() {
  const { data: session, isPending } = useSession();

  if (isPending) return <div>Loading...</div>;
  if (!session) return <a href="/sign-in">Sign In</a>;

  return (
    <div>
      <span>{session.user.name}</span>
      <button onClick={() => signOut()}>Sign Out</button>
    </div>
  );
}
Server-Side Sessions

In Server Components and API routes, call auth.api.getSession with the request headers.

import { auth } from "@/lib/auth/server";
import { headers } from "next/headers";

const session = await auth.api.getSession({ headers: await headers() });

if (!session) {
  return new Response("Unauthorized", { status: 401 });
}

// session.user.id for queries...
Guarding Routes

Redirect unauthenticated users away from protected pages, and authenticated users away from auth pages.

import { redirect } from "next/navigation";
import { headers } from "next/headers";
import { auth } from "@/lib/auth/server";

export default async function ProtectedPage() {
  const session = await auth.api.getSession({ headers: await headers() });
  if (!session) redirect("/sign-in");
  return <Dashboard user={session.user} />;
}

export default async function SignInPage() {
  const session = await auth.api.getSession({ headers: await headers() });
  if (session) redirect("/chats");
  return <SignIn />;
}

After validating the session, fetch user-specific data in parallel.

const [chats, profile] = await Promise.all([
  getUserChats(session.user.id),
  getUserProfile(session.user.id),
]);
Sign In / Up / Out
import { signIn, signUp, signOut } from "@/lib/auth/client";

await signIn.email({ email, password, callbackURL: "/chats" });
await signIn.social({ provider: "google", callbackURL: "/chats" });

await signUp.email({ email, password, name, callbackURL: "/verify-email" });

await signOut({
  fetchOptions: { onSuccess: () => router.push("/") },
});

References

Comments

Markdown supported