using-authentication_skill

Overview

This skill shows how to use Better Auth for client- and server-side authentication in TypeScript full‑stack apps. It provides production-ready patterns for session access, protected routes, sign in/up/out flows, and fetching user-specific data after authentication. The examples focus on Next.js Server and Client Components with clear, minimal code patterns.

How this skill works

Client components use auth client hooks (useSession, signIn, signOut, signUp) to display user state and trigger auth flows. Server Components and API routes call auth.api.getSession with request headers to validate sessions and gate access. Patterns include redirecting unauthenticated users from protected pages and redirecting authenticated users away from sign-in pages. After session validation, user.id is used to fetch user-specific resources.

When to use it

• Protect server-rendered pages and API routes that require an authenticated user.
• Show user menus and sign-in/out controls in client components.
• Prevent signed-in users from seeing sign-in or sign-up pages.
• Perform server-side data fetching that depends on the current user.
• Implement email/password and social provider sign-in and sign-up flows.

Best practices

• Always validate the session on the server before returning protected content or executing sensitive logic.
• Use auth.api.getSession with request headers in Server Components and API routes to avoid client-side trust issues.
• Redirect unauthenticated users early in Server Components to minimize wasted work.
• Keep client UI minimal while session state is pending to avoid flash of incorrect content.
• Use Promise.all to parallelize fetching multiple user-specific resources after session validation.

Example use cases

• Render a UserMenu component that shows the user name and a sign-out button using useSession and signOut.
• Protect a dashboard page by fetching the session server-side and redirecting to /sign-in if missing.
• Redirect already-authenticated visitors away from the sign-in page to the main app route.
• Implement email and social sign-in flows and redirect to a callback URL on success.
• Secure an API route by checking the session and using session.user.id for database queries.