Web Authentication Usage

Using Authentication in the Web App

The web application consumes the authClient provided by @repo/auth.

Getting the session

import { useSession } from "@repo/auth";

export default function Dashboard() {
  const { data: session } = useSession();
  return <div>Hello {session?.user.name}</div>;
}

Signing in and out

import { authClient } from "@repo/auth";

await authClient.signIn({ email, password });
authClient.signOut();

Protecting routes

Use useSession to check authentication and redirect if needed.

import { useSession } from "@repo/auth";
import { useNavigate } from "react-router-dom";

export function ProtectedRoute({ children }: { children: JSX.Element }) {
  const { data: session, isLoading } = useSession();
  const navigate = useNavigate();

  useEffect(() => {
    if (!isLoading && !session) navigate("/login");
  }, [isLoading, session, navigate]);

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

Other flows

authClient also offers helpers for password reset and email verification:

await authClient.requestPasswordReset({ email });
await authClient.verifyEmail({ token });

See Authentication for more information.