@hono/auth-js 1.0.11 → 1.0.13

package/dist/react.mjs

@@ -1,9 +1,9 @@
 // src/react.tsx
-import * as React2 from "react";
+import * as React from "react";
 
 // src/client.ts
 import { AuthError } from "@auth/core/errors";
-import * as React from "react";
+import { useEffect, useState } from "react";
 var ClientFetchError = class extends AuthError {
 };
 var ClientSessionError = class extends AuthError {
@@ -34,17 +34,18 @@ async function fetchData(path, config, logger2, req = {}) {
   }
 }
 function useOnline() {
-  const [isOnline, setIsOnline] = React.useState(
+  const [isOnline, setIsOnline] = useState(
     typeof navigator !== "undefined" ? navigator.onLine : false
   );
-  React.useEffect(() => {
+  useEffect(() => {
+    const abortController = new AbortController();
+    const { signal } = abortController;
     const setOnline = () => setIsOnline(true);
     const setOffline = () => setIsOnline(false);
-    window.addEventListener("online", setOnline);
-    window.addEventListener("offline", setOffline);
+    window.addEventListener("online", setOnline, { signal });
+    window.addEventListener("offline", setOffline, { signal });
     return () => {
-      window.removeEventListener("online", setOnline);
-      window.removeEventListener("offline", setOffline);
+      abortController.abort();
     };
   }, []);
   return isOnline;
@@ -67,17 +68,28 @@ function parseUrl(url) {
 }
 
 // src/react.tsx
+import { useCallback, useContext, useEffect as useEffect2, useMemo, useState as useState3 } from "react";
+var logger = {
+  debug: console.debug,
+  error: console.error,
+  warn: console.warn
+};
 var AuthConfigManager = class _AuthConfigManager {
   static instance = null;
-  _config = {
-    baseUrl: typeof window !== "undefined" ? parseUrl(window.location.origin).origin : "",
-    basePath: typeof window !== "undefined" ? parseUrl(window.location.origin).path : "/api/auth",
-    credentials: "same-origin",
-    _lastSync: 0,
-    _session: void 0,
-    _getSession: () => {
-    }
-  };
+  config;
+  constructor() {
+    this.config = this.createDefaultConfig();
+  }
+  createDefaultConfig() {
+    return {
+      baseUrl: typeof window !== "undefined" ? parseUrl(window.location.origin).origin : "",
+      basePath: typeof window !== "undefined" ? parseUrl(window.location.origin).path : "/api/auth",
+      credentials: "same-origin",
+      lastSync: 0,
+      session: null,
+      fetchSession: async () => void 0
+    };
+  }
   static getInstance() {
     if (!_AuthConfigManager.instance) {
       _AuthConfigManager.instance = new _AuthConfigManager();
@@ -85,43 +97,158 @@ var AuthConfigManager = class _AuthConfigManager {
     return _AuthConfigManager.instance;
   }
   setConfig(userConfig) {
-    this._config = { ...this._config, ...userConfig };
+    this.config = { ...this.config, ...userConfig };
   }
   getConfig() {
-    return this._config;
+    return this.config;
+  }
+  initializeConfig(hasInitialSession) {
+    this.config.lastSync = hasInitialSession ? now() : 0;
   }
 };
 var authConfigManager = AuthConfigManager.getInstance();
-function broadcast() {
-  if (typeof BroadcastChannel !== "undefined") {
-    return new BroadcastChannel("auth-js");
-  }
-  return {
-    postMessage: () => {
+var SessionContext = React.createContext(void 0);
+function useInitializeSession(hasInitialSession, initialSession) {
+  const authConfig = authConfigManager.getConfig();
+  const [session, setSession] = React.useState(initialSession);
+  const [loading, setLoading] = React.useState(!hasInitialSession);
+  useEffect2(() => {
+    authConfig.fetchSession = async ({ event } = {}) => {
+      try {
+        const isStorageEvent = event === "storage";
+        if (isStorageEvent || !authConfig.session) {
+          authConfig.lastSync = now();
+          authConfig.session = await getSession();
+          setSession(authConfig.session);
+          return;
+        }
+        if (!event || !authConfig.session || now() < authConfig.lastSync) {
+          return;
+        }
+        authConfig.lastSync = now();
+        authConfig.session = await getSession();
+        setSession(authConfig.session);
+      } catch (error) {
+        logger.error(new ClientSessionError(error.message, error));
+      } finally {
+        setLoading(false);
+      }
+    };
+    authConfig.fetchSession();
+    return () => {
+      authConfig.lastSync = 0;
+      authConfig.session = null;
+      authConfig.fetchSession = async () => void 0;
+    };
+  }, []);
+  return { session, setSession, loading, setLoading };
+}
+function useVisibilityChangeEventListener(authConfig, refetchOnWindowFocus) {
+  useEffect2(() => {
+    const abortController = new AbortController();
+    const handleVisibilityChange = () => {
+      if (refetchOnWindowFocus && document.visibilityState === "visible") {
+        authConfig.fetchSession({ event: "visibilitychange" });
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange, {
+      signal: abortController.signal
+    });
+    return () => abortController.abort();
+  }, [refetchOnWindowFocus]);
+}
+function useRefetchInterval(authConfig, refetchInterval, shouldRefetch) {
+  useEffect2(() => {
+    if (refetchInterval && shouldRefetch) {
+      const intervalId = setInterval(() => {
+        if (authConfig.session) {
+          authConfig.fetchSession({ event: "poll" });
+        }
+      }, refetchInterval * 1e3);
+      return () => clearInterval(intervalId);
+    }
+  }, [refetchInterval, shouldRefetch]);
+}
+async function getSession(params) {
+  const { baseUrl, basePath, credentials } = authConfigManager.getConfig();
+  const session = await fetchData(
+    "session",
+    {
+      baseUrl,
+      basePath,
+      credentials
     },
-    addEventListener: () => {
+    logger,
+    params
+  );
+  return session;
+}
+async function getCsrfToken() {
+  const { baseUrl, basePath, credentials } = authConfigManager.getConfig();
+  const response = await fetchData(
+    "csrf",
+    {
+      baseUrl,
+      basePath,
+      credentials
     },
-    removeEventListener: () => {
-    }
-  };
+    logger
+  );
+  return response?.csrfToken ?? "";
+}
+function SessionProvider(props) {
+  if (!SessionContext) {
+    throw new Error("React Context is unavailable in Server Components");
+  }
+  const { children, refetchInterval, refetchWhenOffline = true } = props;
+  const authConfig = authConfigManager.getConfig();
+  const hasInitialSession = !!props.session;
+  authConfigManager.initializeConfig(hasInitialSession);
+  const { session, setSession, loading, setLoading } = useInitializeSession(
+    hasInitialSession,
+    props.session ?? null
+  );
+  useVisibilityChangeEventListener(authConfig, props.refetchOnWindowFocus ?? true);
+  const isOnline = useOnline();
+  const shouldRefetch = refetchWhenOffline || isOnline;
+  useRefetchInterval(authConfig, refetchInterval, shouldRefetch);
+  const contextValue = useMemo(
+    () => ({
+      data: session,
+      status: loading ? "loading" : session ? "authenticated" : "unauthenticated",
+      update: async (data) => {
+        if (loading || !session) {
+          return;
+        }
+        setLoading(true);
+        const updatedSession = await fetchData(
+          "session",
+          authConfig,
+          logger,
+          data ? { body: { csrfToken: await getCsrfToken(), data } } : void 0
+        );
+        setLoading(false);
+        if (updatedSession) {
+          setSession(updatedSession);
+        }
+        return updatedSession;
+      }
+    }),
+    [session, loading, setSession]
+  );
+  return /* @__PURE__ */ React.createElement(SessionContext.Provider, { value: contextValue }, children);
 }
-var logger = {
-  debug: console.debug,
-  error: console.error,
-  warn: console.warn
-};
-var SessionContext = React2.createContext?.(void 0);
 function useSession(options) {
   if (!SessionContext) {
     throw new Error("React Context is unavailable in Server Components");
   }
-  const __AUTHJS = authConfigManager.getConfig();
-  const value = React2.useContext(SessionContext);
+  const config = authConfigManager.getConfig();
+  const session = useContext(SessionContext);
   const { required, onUnauthenticated } = options ?? {};
-  const requiredAndNotLoading = required && value.status === "unauthenticated";
-  React2.useEffect(() => {
+  const requiredAndNotLoading = required && session?.status === "unauthenticated";
+  useEffect2(() => {
     if (requiredAndNotLoading) {
-      const url = `${__AUTHJS.baseUrl}${__AUTHJS.basePath}/signin?${new URLSearchParams({
+      const url = `${config.baseUrl}${config.basePath}/signin?${new URLSearchParams({
         error: "SessionRequired",
         callbackUrl: window.location.href
       })}`;
@@ -134,66 +261,44 @@ function useSession(options) {
   }, [requiredAndNotLoading, onUnauthenticated]);
   if (requiredAndNotLoading) {
     return {
-      data: value.data,
-      update: value.update,
+      data: session?.data,
+      update: session?.update,
       status: "loading"
     };
   }
-  return value;
-}
-async function getSession(params) {
-  const session = await fetchData("session", authConfigManager.getConfig(), logger, params);
-  if (params?.broadcast ?? true) {
-    broadcast().postMessage({
-      event: "session",
-      data: { trigger: "getSession" }
-    });
-  }
   return session;
 }
-async function getCsrfToken() {
-  const response = await fetchData(
-    "csrf",
-    authConfigManager.getConfig(),
-    logger
-  );
-  return response?.csrfToken ?? "";
-}
 async function getProviders() {
   return fetchData("providers", authConfigManager.getConfig(), logger);
 }
-async function signIn(provider, options, authorizationParams) {
-  const { callbackUrl = window.location.href, redirect = true } = options ?? {};
-  const __AUTHJS = authConfigManager.getConfig();
-  const href = `${__AUTHJS.baseUrl}${__AUTHJS.basePath}`;
+async function signIn(provider, options = {}, authorizationParams = {}) {
+  const { callbackUrl = window.location.href, redirect = true, ...opts } = options;
+  const config = authConfigManager.getConfig();
+  const href = `${config.baseUrl}${config.basePath}`;
   const providers = await getProviders();
   if (!providers) {
     window.location.href = `${href}/error`;
     return;
   }
   if (!provider || !(provider in providers)) {
-    window.location.href = `${href}/signin?${new URLSearchParams({
-      callbackUrl
-    })}`;
+    window.location.href = `${href}/signin?${new URLSearchParams({ callbackUrl })}`;
     return;
   }
   const isCredentials = providers[provider].type === "credentials";
   const isEmail = providers[provider].type === "email";
-  const isSupportingReturn = isCredentials || isEmail;
   const signInUrl = `${href}/${isCredentials ? "callback" : "signin"}/${provider}`;
   const csrfToken = await getCsrfToken();
   const res = await fetch(`${signInUrl}?${new URLSearchParams(authorizationParams)}`, {
-    method: "post",
+    method: "POST",
     headers: {
       "Content-Type": "application/x-www-form-urlencoded",
       "X-Auth-Return-Redirect": "1"
     },
-    // @ts-expect-error TODO: Fix this
-    body: new URLSearchParams({ ...options, csrfToken, callbackUrl }),
-    credentials: __AUTHJS.credentials
+    body: new URLSearchParams({ ...opts, csrfToken, callbackUrl }),
+    credentials: config.credentials
   });
   const data = await res.json();
-  if (redirect || !isSupportingReturn) {
+  if (redirect) {
     const url = data.url ?? callbackUrl;
     window.location.href = url;
     if (url.includes("#")) {
@@ -203,7 +308,7 @@ async function signIn(provider, options, authorizationParams) {
   }
   const error = new URL(data.url).searchParams.get("error");
   if (res.ok) {
-    await __AUTHJS._getSession({ event: "storage" });
+    await config.fetchSession?.({ event: "storage" });
   }
   return {
     error,
@@ -213,146 +318,82 @@ async function signIn(provider, options, authorizationParams) {
   };
 }
 async function signOut(options) {
-  const { callbackUrl = window.location.href } = options ?? {};
-  const __AUTHJS = authConfigManager.getConfig();
-  const href = `${__AUTHJS.baseUrl}${__AUTHJS.basePath}`;
+  const { callbackUrl = window.location.href, redirect = true } = options ?? {};
+  const config = authConfigManager.getConfig();
   const csrfToken = await getCsrfToken();
-  const res = await fetch(`${href}/signout`, {
-    method: "post",
+  const res = await fetch(`${config.baseUrl}${config.basePath}/signout`, {
+    method: "POST",
     headers: {
       "Content-Type": "application/x-www-form-urlencoded",
       "X-Auth-Return-Redirect": "1"
     },
     body: new URLSearchParams({ csrfToken, callbackUrl }),
-    credentials: __AUTHJS.credentials
+    credentials: config.credentials
   });
   const data = await res.json();
-  broadcast().postMessage({ event: "session", data: { trigger: "signout" } });
-  if (options?.redirect ?? true) {
+  if (redirect) {
     const url = data.url ?? callbackUrl;
     window.location.href = url;
     if (url.includes("#")) {
       window.location.reload();
     }
-    return;
+    return void 0;
   }
-  await __AUTHJS._getSession({ event: "storage" });
+  await config.fetchSession?.({ event: "storage" });
   return data;
 }
-function SessionProvider(props) {
-  if (!SessionContext) {
-    throw new Error("React Context is unavailable in Server Components");
-  }
-  const { children, refetchInterval, refetchWhenOffline } = props;
-  const __AUTHJS = authConfigManager.getConfig();
-  const hasInitialSession = props.session !== void 0;
-  __AUTHJS._lastSync = hasInitialSession ? now() : 0;
-  const [session, setSession] = React2.useState(() => {
-    if (hasInitialSession) {
-      __AUTHJS._session = props.session;
+var createPopup = ({ url, title, height, width }) => {
+  const left = window.screenX + (window.outerWidth - width) / 2;
+  const top = window.screenY + (window.outerHeight - height) / 2.5;
+  const externalPopup = window.open(
+    url,
+    title,
+    `width=${width},height=${height},left=${left},top=${top}`
+  );
+  return externalPopup;
+};
+var useOauthPopupLogin = (provider, options = {}) => {
+  const { width = 500, height = 500, title = "Signin", onSuccess, callbackUrl = "/" } = options;
+  const [externalWindow, setExternalWindow] = useState3();
+  const [state, setState] = useState3({ status: "loading" });
+  const popUpSignin = useCallback(async () => {
+    const res = await signIn(provider, {
+      redirect: false,
+      callbackUrl
+    });
+    if (res?.error) {
+      setState({ status: "errored", error: res.error });
+      return;
     }
-    return props.session;
-  });
-  const [loading, setLoading] = React2.useState(!hasInitialSession);
-  React2.useEffect(() => {
-    __AUTHJS._getSession = async ({ event } = {}) => {
-      try {
-        const storageEvent = event === "storage";
-        if (storageEvent || __AUTHJS._session === void 0) {
-          __AUTHJS._lastSync = now();
-          __AUTHJS._session = await getSession({
-            broadcast: !storageEvent
-          });
-          setSession(__AUTHJS._session);
-          return;
-        }
-        if (
-          // If there is no time defined for when a session should be considered
-          // stale, then it's okay to use the value we have until an event is
-          // triggered which updates it
-          !event || // If the client doesn't have a session then we don't need to call
-          // the server to check if it does (if they have signed in via another
-          // tab or window that will come through as a "stroage" event
-          // event anyway)
-          __AUTHJS._session === null || // Bail out early if the client session is not stale yet
-          now() < __AUTHJS._lastSync
-        ) {
-          return;
+    setExternalWindow(
+      createPopup({
+        url: res?.url,
+        title,
+        width,
+        height
+      })
+    );
+  }, []);
+  useEffect2(() => {
+    const handleMessage = (event) => {
+      if (event.origin !== window.location.origin)
+        return;
+      if (event.data.status) {
+        setState(event.data);
+        if (event.data.status === "success") {
+          onSuccess?.();
         }
-        __AUTHJS._lastSync = now();
-        __AUTHJS._session = await getSession();
-        setSession(__AUTHJS._session);
-      } catch (error) {
-        logger.error(new ClientSessionError(error.message, error));
-      } finally {
-        setLoading(false);
+        externalWindow?.close();
       }
     };
-    __AUTHJS._getSession();
+    window.addEventListener("message", handleMessage);
     return () => {
-      __AUTHJS._lastSync = 0;
-      __AUTHJS._session = void 0;
-      __AUTHJS._getSession = () => {
-      };
-    };
-  }, []);
-  React2.useEffect(() => {
-    const handle = () => __AUTHJS._getSession({ event: "storage" });
-    broadcast().addEventListener("message", handle);
-    return () => broadcast().removeEventListener("message", handle);
-  }, []);
-  React2.useEffect(() => {
-    const { refetchOnWindowFocus = true } = props;
-    const visibilityHandler = () => {
-      if (refetchOnWindowFocus && document.visibilityState === "visible") {
-        __AUTHJS._getSession({ event: "visibilitychange" });
-      }
+      window.removeEventListener("message", handleMessage);
+      externalWindow?.close();
     };
-    document.addEventListener("visibilitychange", visibilityHandler, false);
-    return () => document.removeEventListener("visibilitychange", visibilityHandler, false);
-  }, [props.refetchOnWindowFocus]);
-  const isOnline = useOnline();
-  const shouldRefetch = refetchWhenOffline !== false || isOnline;
-  React2.useEffect(() => {
-    if (refetchInterval && shouldRefetch) {
-      const refetchIntervalTimer = setInterval(() => {
-        if (__AUTHJS._session) {
-          __AUTHJS._getSession({ event: "poll" });
-        }
-      }, refetchInterval * 1e3);
-      return () => clearInterval(refetchIntervalTimer);
-    }
-  }, [refetchInterval, shouldRefetch]);
-  const value = React2.useMemo(
-    () => ({
-      data: session,
-      status: loading ? "loading" : session ? "authenticated" : "unauthenticated",
-      async update(data) {
-        if (loading || !session) {
-          return;
-        }
-        setLoading(true);
-        const newSession = await fetchData(
-          "session",
-          __AUTHJS,
-          logger,
-          typeof data === "undefined" ? void 0 : { body: { csrfToken: await getCsrfToken(), data } }
-        );
-        setLoading(false);
-        if (newSession) {
-          setSession(newSession);
-          broadcast().postMessage({
-            event: "session",
-            data: { trigger: "getSession" }
-          });
-        }
-        return newSession;
-      }
-    }),
-    [session, loading]
-  );
-  return /* @__PURE__ */ React2.createElement(SessionContext.Provider, { value }, children);
-}
+  }, [externalWindow]);
+  return { popUpSignin, ...state };
+};
 export {
   SessionContext,
   SessionProvider,
@@ -362,5 +403,6 @@ export {
   getSession,
   signIn,
   signOut,
+  useOauthPopupLogin,
   useSession
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hono/auth-js",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "A third-party Auth js middleware for Hono",
   "main": "dist/index.js",
   "exports": {