27 lines
774 B
TypeScript
27 lines
774 B
TypeScript
|
/**
|
||
|
|
* Gate that renders its children only for an authenticated session. While auth
|
||
|
|
* is initialising it renders `loading`; when signed out it renders `fallback`
|
||
|
|
* (typically a login screen).
|
||
|
|
*/
|
||
|
|
import { type ReactNode } from "react";
|
||
|
|
import { useAuth } from "@shared/auth/context";
|
||
|
|
|
||
|
|
export interface RequireAuthProps {
|
||
|
|
children: ReactNode;
|
||
|
|
/** Rendered when there is no session (e.g. the login panel). */
|
||
|
|
fallback: ReactNode;
|
||
|
|
/** Rendered while the session is still resolving. */
|
||
|
|
loading?: ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function RequireAuth({
|
||
|
|
children,
|
||
|
|
fallback,
|
||
|
|
loading = null,
|
||
|
|
}: RequireAuthProps) {
|
||
|
|
const { session, loading: isLoading } = useAuth();
|
||
|
|
if (isLoading) return <>{loading}</>;
|
||
|
|
if (!session) return <>{fallback}</>;
|
||
|
|
return <>{children}</>;
|
||
|
|
}
|