@udibo/oauth2 0.1.0

package/esm/react/use-oauth2.js

@@ -0,0 +1,127 @@
+// deno-lint-ignore-file no-window -- `login`/`logout` touch `window` only after an isBrowser() guard
+/**
+ * `useOAuth2()` — the primary React hook for consuming OAuth2 state and
+ * driving auth actions, plus the two hooks that narrow the context's client
+ * to a concrete transport.
+ *
+ * @module
+ */
+import { useCallback, useContext } from "react";
+import { BffClient, DirectClient, } from "../client/mod.js";
+import { OAuth2Context } from "./context.js";
+function useOAuth2Context() {
+    const context = useContext(OAuth2Context);
+    if (!context) {
+        throw new Error("useOAuth2 must be used inside an <OAuth2Provider>. Did you " +
+            "forget to wrap your app?");
+    }
+    return context;
+}
+/**
+ * Reads the OAuth2 context, returning the current state and bound convenience
+ * methods. Works with either client, so components written against it don't
+ * care whether a BFF or this process holds the tokens.
+ *
+ * @returns Auth state plus `login` / `logout` / `fetch` and the raw client.
+ * @throws {Error} when called outside an `<OAuth2Provider>`.
+ *
+ * @example
+ * ```tsx
+ * import { useOAuth2 } from "@udibo/oauth2/react";
+ *
+ * function Header() {
+ *   const { isAuthenticated, user, login, logout } = useOAuth2();
+ *   return isAuthenticated
+ *     ? <button onClick={() => logout()}>Sign out {String(user?.sub)}</button>
+ *     : <button onClick={() => login()}>Sign in</button>;
+ * }
+ * ```
+ */
+export function useOAuth2() {
+    const context = useOAuth2Context();
+    const { client } = context;
+    const login = useCallback(async (opts) => {
+        const result = await client.login(opts);
+        if (result.url && typeof window !== "undefined") {
+            window.location.assign(result.url);
+        }
+        return result;
+    }, [client]);
+    const logout = useCallback(async (opts) => {
+        const result = await client.logout(opts);
+        if (result.url && typeof window !== "undefined") {
+            window.location.assign(result.url);
+        }
+        return result;
+    }, [client]);
+    const boundFetch = useCallback((input, init) => client.fetch(input, init), [client]);
+    return {
+        isAuthenticated: context.isAuthenticated,
+        isLoading: context.isLoading,
+        user: context.user,
+        error: context.error,
+        sessionExpiresIn: context.sessionExpiresIn,
+        logoutUrl: context.logoutUrl,
+        login,
+        logout,
+        fetch: boundFetch,
+        client,
+    };
+}
+/**
+ * The context's client, narrowed to a `BffClient`. Use it for the BFF-only
+ * surface — chiefly `loginContinuation`, for a "Sign in" link from your own
+ * create-account or forgot-password page.
+ *
+ * @returns The provider's `BffClient`.
+ * @throws {Error} when called outside an `<OAuth2Provider>`, or when the
+ * provider was given a `DirectClient` — the BFF routes it targets don't exist
+ * in that deployment.
+ *
+ * @example
+ * ```tsx
+ * import { useBffClient } from "@udibo/oauth2/react";
+ *
+ * function SignInLink({ returnTo }: { returnTo: string }) {
+ *   const client = useBffClient();
+ *   return <a href={client.loginContinuation(returnTo)}>Sign in</a>;
+ * }
+ * ```
+ */
+export function useBffClient() {
+    const { client } = useOAuth2Context();
+    if (!(client instanceof BffClient)) {
+        throw new Error("useBffClient() requires the provider's client to be a BffClient; " +
+            "this app is wired with a DirectClient.");
+    }
+    return client;
+}
+/**
+ * The context's client, narrowed to a `DirectClient`. Use it for the surface
+ * that only exists when this process holds the tokens — `getAccessToken`,
+ * `handleAuthorizationCallback`, `refresh`, `introspect`, `revoke`.
+ *
+ * @returns The provider's `DirectClient`.
+ * @throws {Error} when called outside an `<OAuth2Provider>`, or when the
+ * provider was given a `BffClient` — the browser never sees a token in that
+ * deployment, so there is none to hand back.
+ *
+ * @example
+ * ```tsx
+ * import { useDirectClient } from "@udibo/oauth2/react";
+ *
+ * function useBearer() {
+ *   const client = useDirectClient();
+ *   return () => client.getAccessToken();
+ * }
+ * ```
+ */
+export function useDirectClient() {
+    const { client } = useOAuth2Context();
+    if (!(client instanceof DirectClient)) {
+        throw new Error("useDirectClient() requires the provider's client to be a " +
+            "DirectClient; this app is wired with a BffClient, where the " +
+            "browser never sees an access token. Use `fetch` instead.");
+    }
+    return client;
+}