@auth-gate/react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,104 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AuthGuard: () => AuthGuard,
+  AuthProvider: () => AuthProvider,
+  useAuth: () => useAuth,
+  useSession: () => useSession
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/provider.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var AuthContext = (0, import_react.createContext)(null);
+function AuthProvider({
+  children,
+  meEndpoint = "/api/auth/me",
+  logoutEndpoint = "/api/auth/logout"
+}) {
+  const [user, setUser] = (0, import_react.useState)(null);
+  const [loading, setLoading] = (0, import_react.useState)(true);
+  const refresh = (0, import_react.useCallback)(async () => {
+    var _a;
+    try {
+      const res = await fetch(meEndpoint);
+      const data = await res.json();
+      setUser((_a = data.user) != null ? _a : null);
+    } catch (e) {
+      setUser(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [meEndpoint]);
+  const logout = (0, import_react.useCallback)(async () => {
+    await fetch(logoutEndpoint, { method: "POST" });
+    setUser(null);
+  }, [logoutEndpoint]);
+  (0, import_react.useEffect)(() => {
+    refresh();
+  }, [refresh]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AuthContext, { value: { user, loading, refresh, logout }, children });
+}
+function useAuthContext() {
+  const context = (0, import_react.useContext)(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}
+
+// src/hooks.ts
+function useAuth() {
+  return useAuthContext();
+}
+function useSession() {
+  const { user } = useAuthContext();
+  return user;
+}
+
+// src/guard.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function AuthGuard({
+  children,
+  loadingFallback,
+  redirectTo = "/login"
+}) {
+  const { user, loading } = useAuthContext();
+  if (loading) {
+    return loadingFallback != null ? loadingFallback : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", minHeight: "100vh", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: "Loading..." }) });
+  }
+  if (!user) {
+    if (typeof window !== "undefined") {
+      window.location.href = redirectTo;
+    }
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AuthGuard,
+  AuthProvider,
+  useAuth,
+  useSession
+});

package/dist/index.d.cts

@@ -0,0 +1,122 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { AuthGateUser } from '@auth-gate/core';
+export { AuthGateUser, OAuthProvider } from '@auth-gate/core';
+
+/**
+ * Shape of the auth context available via {@link useAuth}.
+ */
+interface AuthContextValue {
+    /** The authenticated user, or `null` if not signed in. */
+    user: AuthGateUser | null;
+    /** `true` while the initial session check is in progress. */
+    loading: boolean;
+    /** Re-fetch the session from the `/me` endpoint. */
+    refresh: () => Promise<void>;
+    /** Sign the user out by calling the logout endpoint and clearing local state. */
+    logout: () => Promise<void>;
+}
+/**
+ * Props for {@link AuthProvider}.
+ */
+interface AuthProviderProps {
+    children: ReactNode;
+    /**
+     * URL of the endpoint that returns the current user (e.g. `{ user: { ... } }`).
+     * @defaultValue `"/api/auth/me"`
+     */
+    meEndpoint?: string;
+    /**
+     * URL of the endpoint that logs the user out (called with `POST`).
+     * @defaultValue `"/api/auth/logout"`
+     */
+    logoutEndpoint?: string;
+}
+/**
+ * Provides auth state to the component tree.
+ *
+ * Fetches the current session on mount by calling the `meEndpoint`.
+ * All children can access `user`, `loading`, `refresh()`, and `logout()`
+ * via the {@link useAuth} hook.
+ *
+ * @example
+ * ```tsx
+ * <AuthProvider meEndpoint="/api/auth/me" logoutEndpoint="/api/auth/logout">
+ *   <App />
+ * </AuthProvider>
+ * ```
+ */
+declare function AuthProvider({ children, meEndpoint, logoutEndpoint, }: AuthProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Access the full auth context: `user`, `loading`, `refresh()`, and `logout()`.
+ *
+ * Must be called inside an {@link AuthProvider}.
+ *
+ * @example
+ * ```tsx
+ * function Header() {
+ *   const { user, loading, logout } = useAuth();
+ *
+ *   if (loading) return <Spinner />;
+ *   if (!user) return <a href="/login">Sign in</a>;
+ *
+ *   return (
+ *     <div>
+ *       {user.name}
+ *       <button onClick={logout}>Logout</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useAuth(): AuthContextValue;
+/**
+ * Shorthand hook that returns just the current user (or `null`).
+ *
+ * Equivalent to `useAuth().user`.
+ *
+ * @example
+ * ```tsx
+ * function Profile() {
+ *   const user = useSession();
+ *   if (!user) return null;
+ *   return <p>Hello, {user.name}</p>;
+ * }
+ * ```
+ */
+declare function useSession(): AuthGateUser | null;
+
+/**
+ * Props for {@link AuthGuard}.
+ */
+interface AuthGuardProps {
+    children: ReactNode;
+    /**
+     * Content to show while the session is being loaded.
+     * Defaults to a centered "Loading..." message.
+     */
+    loadingFallback?: ReactNode;
+    /**
+     * URL to redirect to when the user is not authenticated.
+     * @defaultValue `"/login"`
+     */
+    redirectTo?: string;
+}
+/**
+ * Client-side route guard that redirects unauthenticated users.
+ *
+ * Renders `loadingFallback` while the session is loading, redirects to
+ * `redirectTo` if no user is found, and renders `children` when authenticated.
+ *
+ * @example
+ * ```tsx
+ * <AuthGuard redirectTo="/login" loadingFallback={<Spinner />}>
+ *   <ProtectedContent />
+ * </AuthGuard>
+ * ```
+ */
+declare function AuthGuard({ children, loadingFallback, redirectTo, }: AuthGuardProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
+
+export { AuthGuard, type AuthGuardProps, AuthProvider, type AuthProviderProps, useAuth, useSession };

package/dist/index.d.ts

@@ -0,0 +1,122 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { AuthGateUser } from '@auth-gate/core';
+export { AuthGateUser, OAuthProvider } from '@auth-gate/core';
+
+/**
+ * Shape of the auth context available via {@link useAuth}.
+ */
+interface AuthContextValue {
+    /** The authenticated user, or `null` if not signed in. */
+    user: AuthGateUser | null;
+    /** `true` while the initial session check is in progress. */
+    loading: boolean;
+    /** Re-fetch the session from the `/me` endpoint. */
+    refresh: () => Promise<void>;
+    /** Sign the user out by calling the logout endpoint and clearing local state. */
+    logout: () => Promise<void>;
+}
+/**
+ * Props for {@link AuthProvider}.
+ */
+interface AuthProviderProps {
+    children: ReactNode;
+    /**
+     * URL of the endpoint that returns the current user (e.g. `{ user: { ... } }`).
+     * @defaultValue `"/api/auth/me"`
+     */
+    meEndpoint?: string;
+    /**
+     * URL of the endpoint that logs the user out (called with `POST`).
+     * @defaultValue `"/api/auth/logout"`
+     */
+    logoutEndpoint?: string;
+}
+/**
+ * Provides auth state to the component tree.
+ *
+ * Fetches the current session on mount by calling the `meEndpoint`.
+ * All children can access `user`, `loading`, `refresh()`, and `logout()`
+ * via the {@link useAuth} hook.
+ *
+ * @example
+ * ```tsx
+ * <AuthProvider meEndpoint="/api/auth/me" logoutEndpoint="/api/auth/logout">
+ *   <App />
+ * </AuthProvider>
+ * ```
+ */
+declare function AuthProvider({ children, meEndpoint, logoutEndpoint, }: AuthProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Access the full auth context: `user`, `loading`, `refresh()`, and `logout()`.
+ *
+ * Must be called inside an {@link AuthProvider}.
+ *
+ * @example
+ * ```tsx
+ * function Header() {
+ *   const { user, loading, logout } = useAuth();
+ *
+ *   if (loading) return <Spinner />;
+ *   if (!user) return <a href="/login">Sign in</a>;
+ *
+ *   return (
+ *     <div>
+ *       {user.name}
+ *       <button onClick={logout}>Logout</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useAuth(): AuthContextValue;
+/**
+ * Shorthand hook that returns just the current user (or `null`).
+ *
+ * Equivalent to `useAuth().user`.
+ *
+ * @example
+ * ```tsx
+ * function Profile() {
+ *   const user = useSession();
+ *   if (!user) return null;
+ *   return <p>Hello, {user.name}</p>;
+ * }
+ * ```
+ */
+declare function useSession(): AuthGateUser | null;
+
+/**
+ * Props for {@link AuthGuard}.
+ */
+interface AuthGuardProps {
+    children: ReactNode;
+    /**
+     * Content to show while the session is being loaded.
+     * Defaults to a centered "Loading..." message.
+     */
+    loadingFallback?: ReactNode;
+    /**
+     * URL to redirect to when the user is not authenticated.
+     * @defaultValue `"/login"`
+     */
+    redirectTo?: string;
+}
+/**
+ * Client-side route guard that redirects unauthenticated users.
+ *
+ * Renders `loadingFallback` while the session is loading, redirects to
+ * `redirectTo` if no user is found, and renders `children` when authenticated.
+ *
+ * @example
+ * ```tsx
+ * <AuthGuard redirectTo="/login" loadingFallback={<Spinner />}>
+ *   <ProtectedContent />
+ * </AuthGuard>
+ * ```
+ */
+declare function AuthGuard({ children, loadingFallback, redirectTo, }: AuthGuardProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
+
+export { AuthGuard, type AuthGuardProps, AuthProvider, type AuthProviderProps, useAuth, useSession };

package/dist/index.mjs

@@ -0,0 +1,80 @@
+// src/provider.tsx
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var AuthContext = createContext(null);
+function AuthProvider({
+  children,
+  meEndpoint = "/api/auth/me",
+  logoutEndpoint = "/api/auth/logout"
+}) {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const refresh = useCallback(async () => {
+    var _a;
+    try {
+      const res = await fetch(meEndpoint);
+      const data = await res.json();
+      setUser((_a = data.user) != null ? _a : null);
+    } catch (e) {
+      setUser(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [meEndpoint]);
+  const logout = useCallback(async () => {
+    await fetch(logoutEndpoint, { method: "POST" });
+    setUser(null);
+  }, [logoutEndpoint]);
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+  return /* @__PURE__ */ jsx(AuthContext, { value: { user, loading, refresh, logout }, children });
+}
+function useAuthContext() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}
+
+// src/hooks.ts
+function useAuth() {
+  return useAuthContext();
+}
+function useSession() {
+  const { user } = useAuthContext();
+  return user;
+}
+
+// src/guard.tsx
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+function AuthGuard({
+  children,
+  loadingFallback,
+  redirectTo = "/login"
+}) {
+  const { user, loading } = useAuthContext();
+  if (loading) {
+    return loadingFallback != null ? loadingFallback : /* @__PURE__ */ jsx2("div", { style: { display: "flex", minHeight: "100vh", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx2("p", { children: "Loading..." }) });
+  }
+  if (!user) {
+    if (typeof window !== "undefined") {
+      window.location.href = redirectTo;
+    }
+    return null;
+  }
+  return /* @__PURE__ */ jsx2(Fragment, { children });
+}
+export {
+  AuthGuard,
+  AuthProvider,
+  useAuth,
+  useSession
+};