Email: {session.user?.email}
``` This is the recommended pattern for protected pages: check authentication on the server and only render private UI when a session is present. Sign-Out [#sign-out] ```astro title="src/pages/index.astro" lineNumbers --- import { api } from "@/lib/auth" const signOutAction = async () => { const response = await api.signOut({ headers: Astro.request.headers, }) return response } --- ``` If you prefer a client-only interaction, call `authClient.signOut()` from a client component instead. Client Side Rendering (CSR) [#client-side-rendering-csr] Sign-In [#sign-in] ```tsx title="src/components/sign-in-button.tsx" lineNumbers import { authClient } from "@/lib/auth-client" export default function SignInButton() { const handleSignIn = () => { void authClient.signIn("github", { redirectTo: "/dashboard", }) } return } ``` Use a client component for one-click auth entry points or custom UI that cannot be expressed as a server action. Get Session [#get-session-1] ```tsx title="src/components/user-profile.tsx" lineNumbers import { useEffect, useState } from "react" import { authClient } from "@/lib/auth-client" export default function UserProfile() { const [session, setSession] = useState(null) useEffect(() => { const fetchSession = async () => { const { session } = await authClient.getSession() setSession(session) } fetchSession() }, []) if (!session) returnLoading...
return (Email: {session.user?.email}
You must be signed in to view this page.
} return (Email: {session.user?.email}
Loading...
return (Email: {session.user?.email}
Welcome, {{ session.user?.name }}
Email: {user?.email}
Loading...
return (Email: {session.user?.email}
Loading...
return (Email: {session.user?.email}