@hono/auth-js 1.0.12 → 1.0.13

package/README.md

@@ -112,8 +112,7 @@ const useSession = () => {
   return { session: data, status }
 }
 ```
-
-Working example repo https://github.com/divyam234/next-auth-hono-react
+For more details on how to Popup Oauth Login see [example](https://github.com/divyam234/next-auth-hono-react)
 
 ## Author
 

package/dist/index.d.mts

@@ -25,7 +25,7 @@ interface AuthConfig extends Omit<AuthConfig$1, 'raw'> {
 }
 type ConfigHandler = (c: Context) => AuthConfig;
 declare function setEnvDefaults(env: AuthEnv, config: AuthConfig): void;
-declare function reqWithEnvUrl(req: Request, authUrl?: string): Promise<Request>;
+declare function reqWithEnvUrl(req: Request, authUrl?: string): Request;
 declare function getAuthUser(c: Context): Promise<AuthUser | null>;
 declare function verifyAuth(): MiddlewareHandler;
 declare function initAuthConfig(cb: ConfigHandler): MiddlewareHandler;

package/dist/index.d.ts

@@ -25,7 +25,7 @@ interface AuthConfig extends Omit<AuthConfig$1, 'raw'> {
 }
 type ConfigHandler = (c: Context) => AuthConfig;
 declare function setEnvDefaults(env: AuthEnv, config: AuthConfig): void;
-declare function reqWithEnvUrl(req: Request, authUrl?: string): Promise<Request>;
+declare function reqWithEnvUrl(req: Request, authUrl?: string): Request;
 declare function getAuthUser(c: Context): Promise<AuthUser | null>;
 declare function verifyAuth(): MiddlewareHandler;
 declare function initAuthConfig(cb: ConfigHandler): MiddlewareHandler;

package/dist/index.js

@@ -36,26 +36,7 @@ function setEnvDefaults(env2, config) {
   config.secret ??= env2.AUTH_SECRET;
   (0, import_core2.setEnvDefaults)(env2, config);
 }
-async function cloneRequest(input, request, headers) {
-  if ((0, import_adapter.getRuntimeKey)() === "bun") {
-    return new Request(input, {
-      method: request.method,
-      headers: headers ?? new Headers(request.headers),
-      body: request.method === "GET" || request.method === "HEAD" ? void 0 : await request.blob(),
-      referrer: "referrer" in request ? request.referrer : void 0,
-      referrerPolicy: request.referrerPolicy,
-      mode: request.mode,
-      credentials: request.credentials,
-      cache: request.cache,
-      redirect: request.redirect,
-      integrity: request.integrity,
-      keepalive: request.keepalive,
-      signal: request.signal
-    });
-  }
-  return new Request(input, request);
-}
-async function reqWithEnvUrl(req, authUrl) {
+function reqWithEnvUrl(req, authUrl) {
   if (authUrl) {
     const reqUrlObj = new URL(req.url);
     const authUrlObj = new URL(authUrl);
@@ -64,12 +45,12 @@ async function reqWithEnvUrl(req, authUrl) {
       if (authUrlObj[prop])
         reqUrlObj[prop] = authUrlObj[prop];
     }
-    return cloneRequest(reqUrlObj.href, req);
+    return new Request(reqUrlObj.href, req);
   }
-  const url = new URL(req.url);
-  const headers = new Headers(req.headers);
-  const proto = headers.get("x-forwarded-proto");
-  const host = headers.get("x-forwarded-host") ?? headers.get("host");
+  const newReq = new Request(req);
+  const url = new URL(newReq.url);
+  const proto = newReq.headers.get("x-forwarded-proto");
+  const host = newReq.headers.get("x-forwarded-host") ?? newReq.headers.get("host");
   if (proto != null)
     url.protocol = proto.endsWith(":") ? proto : `${proto}:`;
   if (host != null) {
@@ -79,17 +60,17 @@ async function reqWithEnvUrl(req, authUrl) {
       url.port = portMatch[1];
     else
       url.port = "";
-    headers.delete("x-forwarded-host");
-    headers.delete("Host");
-    headers.set("Host", host);
+    newReq.headers.delete("x-forwarded-host");
+    newReq.headers.delete("Host");
+    newReq.headers.set("Host", host);
   }
-  return cloneRequest(url.href, req, headers);
+  return new Request(url.href, newReq);
 }
 async function getAuthUser(c) {
   const config = c.get("authConfig");
   const ctxEnv = (0, import_adapter.env)(c);
   setEnvDefaults(ctxEnv, config);
-  const authReq = await reqWithEnvUrl(c.req.raw, ctxEnv.AUTH_URL);
+  const authReq = reqWithEnvUrl(c.req.raw, ctxEnv.AUTH_URL);
   const origin = new URL(authReq.url).origin;
   const request = new Request(`${origin}${config.basePath}/session`, {
     headers: { cookie: c.req.header("cookie") ?? "" }
@@ -139,8 +120,7 @@ function authHandler() {
     if (!config.secret || config.secret.length === 0) {
       throw new import_http_exception.HTTPException(500, { message: "Missing AUTH_SECRET" });
     }
-    const authReq = await reqWithEnvUrl(c.req.raw, ctxEnv.AUTH_URL);
-    const res = await (0, import_core.Auth)(authReq, config);
+    const res = await (0, import_core.Auth)(reqWithEnvUrl(c.req.raw, ctxEnv.AUTH_URL), config);
     return new Response(res.body, res);
   };
 }

package/dist/index.mjs

@@ -1,32 +1,13 @@
 // src/index.ts
 import { Auth } from "@auth/core";
-import { env, getRuntimeKey } from "hono/adapter";
+import { env } from "hono/adapter";
 import { HTTPException } from "hono/http-exception";
 import { setEnvDefaults as coreSetEnvDefaults } from "@auth/core";
 function setEnvDefaults(env2, config) {
   config.secret ??= env2.AUTH_SECRET;
   coreSetEnvDefaults(env2, config);
 }
-async function cloneRequest(input, request, headers) {
-  if (getRuntimeKey() === "bun") {
-    return new Request(input, {
-      method: request.method,
-      headers: headers ?? new Headers(request.headers),
-      body: request.method === "GET" || request.method === "HEAD" ? void 0 : await request.blob(),
-      referrer: "referrer" in request ? request.referrer : void 0,
-      referrerPolicy: request.referrerPolicy,
-      mode: request.mode,
-      credentials: request.credentials,
-      cache: request.cache,
-      redirect: request.redirect,
-      integrity: request.integrity,
-      keepalive: request.keepalive,
-      signal: request.signal
-    });
-  }
-  return new Request(input, request);
-}
-async function reqWithEnvUrl(req, authUrl) {
+function reqWithEnvUrl(req, authUrl) {
   if (authUrl) {
     const reqUrlObj = new URL(req.url);
     const authUrlObj = new URL(authUrl);
@@ -35,12 +16,12 @@ async function reqWithEnvUrl(req, authUrl) {
       if (authUrlObj[prop])
         reqUrlObj[prop] = authUrlObj[prop];
     }
-    return cloneRequest(reqUrlObj.href, req);
+    return new Request(reqUrlObj.href, req);
   }
-  const url = new URL(req.url);
-  const headers = new Headers(req.headers);
-  const proto = headers.get("x-forwarded-proto");
-  const host = headers.get("x-forwarded-host") ?? headers.get("host");
+  const newReq = new Request(req);
+  const url = new URL(newReq.url);
+  const proto = newReq.headers.get("x-forwarded-proto");
+  const host = newReq.headers.get("x-forwarded-host") ?? newReq.headers.get("host");
   if (proto != null)
     url.protocol = proto.endsWith(":") ? proto : `${proto}:`;
   if (host != null) {
@@ -50,17 +31,17 @@ async function reqWithEnvUrl(req, authUrl) {
       url.port = portMatch[1];
     else
       url.port = "";
-    headers.delete("x-forwarded-host");
-    headers.delete("Host");
-    headers.set("Host", host);
+    newReq.headers.delete("x-forwarded-host");
+    newReq.headers.delete("Host");
+    newReq.headers.set("Host", host);
   }
-  return cloneRequest(url.href, req, headers);
+  return new Request(url.href, newReq);
 }
 async function getAuthUser(c) {
   const config = c.get("authConfig");
   const ctxEnv = env(c);
   setEnvDefaults(ctxEnv, config);
-  const authReq = await reqWithEnvUrl(c.req.raw, ctxEnv.AUTH_URL);
+  const authReq = reqWithEnvUrl(c.req.raw, ctxEnv.AUTH_URL);
   const origin = new URL(authReq.url).origin;
   const request = new Request(`${origin}${config.basePath}/session`, {
     headers: { cookie: c.req.header("cookie") ?? "" }
@@ -110,8 +91,7 @@ function authHandler() {
     if (!config.secret || config.secret.length === 0) {
       throw new HTTPException(500, { message: "Missing AUTH_SECRET" });
     }
-    const authReq = await reqWithEnvUrl(c.req.raw, ctxEnv.AUTH_URL);
-    const res = await Auth(authReq, config);
+    const res = await Auth(reqWithEnvUrl(c.req.raw, ctxEnv.AUTH_URL), config);
     return new Response(res.body, res);
   };
 }

package/dist/react.d.mts

@@ -69,6 +69,12 @@ type SessionContextValue<R extends boolean = false> = R extends true ? {
     data: null;
     status: 'unauthenticated' | 'loading';
 };
+type WindowProps = {
+    url: string;
+    title: string;
+    width: number;
+    height: number;
+};
 
 declare class AuthConfigManager {
     private static instance;
@@ -98,5 +104,14 @@ type ProvidersType = Record<LiteralUnion<BuiltInProviderType>, ClientSafeProvide
 declare function getProviders(): Promise<ProvidersType | null>;
 declare function signIn<P extends RedirectableProviderType | undefined = undefined>(provider?: LiteralUnion<P extends RedirectableProviderType ? P | BuiltInProviderType : BuiltInProviderType>, options?: SignInOptions, authorizationParams?: SignInAuthorizationParams): Promise<P extends RedirectableProviderType ? SignInResponse | undefined : undefined>;
 declare function signOut<R extends boolean = true>(options?: SignOutParams<R>): Promise<R extends true ? undefined : SignOutResponse>;
+interface PopupLoginOptions extends Partial<Omit<WindowProps, 'url'>> {
+    onSuccess?: () => void;
+    callbackUrl?: string;
+}
+declare const useOauthPopupLogin: (provider: Parameters<typeof signIn>[0], options?: PopupLoginOptions) => {
+    status: "loading" | "success" | "errored";
+    error?: string | undefined;
+    popUpSignin: () => Promise<void>;
+};
 
-export { SessionContext, SessionProvider, authConfigManager, getCsrfToken, getProviders, getSession, signIn, signOut, useSession };
+export { SessionContext, SessionProvider, authConfigManager, getCsrfToken, getProviders, getSession, signIn, signOut, useOauthPopupLogin, useSession };

package/dist/react.d.ts

@@ -69,6 +69,12 @@ type SessionContextValue<R extends boolean = false> = R extends true ? {
     data: null;
     status: 'unauthenticated' | 'loading';
 };
+type WindowProps = {
+    url: string;
+    title: string;
+    width: number;
+    height: number;
+};
 
 declare class AuthConfigManager {
     private static instance;
@@ -98,5 +104,14 @@ type ProvidersType = Record<LiteralUnion<BuiltInProviderType>, ClientSafeProvide
 declare function getProviders(): Promise<ProvidersType | null>;
 declare function signIn<P extends RedirectableProviderType | undefined = undefined>(provider?: LiteralUnion<P extends RedirectableProviderType ? P | BuiltInProviderType : BuiltInProviderType>, options?: SignInOptions, authorizationParams?: SignInAuthorizationParams): Promise<P extends RedirectableProviderType ? SignInResponse | undefined : undefined>;
 declare function signOut<R extends boolean = true>(options?: SignOutParams<R>): Promise<R extends true ? undefined : SignOutResponse>;
+interface PopupLoginOptions extends Partial<Omit<WindowProps, 'url'>> {
+    onSuccess?: () => void;
+    callbackUrl?: string;
+}
+declare const useOauthPopupLogin: (provider: Parameters<typeof signIn>[0], options?: PopupLoginOptions) => {
+    status: "loading" | "success" | "errored";
+    error?: string | undefined;
+    popUpSignin: () => Promise<void>;
+};
 
-export { SessionContext, SessionProvider, authConfigManager, getCsrfToken, getProviders, getSession, signIn, signOut, useSession };
+export { SessionContext, SessionProvider, authConfigManager, getCsrfToken, getProviders, getSession, signIn, signOut, useOauthPopupLogin, useSession };

package/dist/react.js

@@ -38,6 +38,7 @@ __export(react_exports, {
   getSession: () => getSession,
   signIn: () => signIn,
   signOut: () => signOut,
+  useOauthPopupLogin: () => useOauthPopupLogin,
   useSession: () => useSession
 });
 module.exports = __toCommonJS(react_exports);
@@ -384,6 +385,58 @@ async function signOut(options) {
   await config.fetchSession?.({ event: "storage" });
   return data;
 }
+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] = (0, import_react2.useState)();
+  const [state, setState] = (0, import_react2.useState)({ status: "loading" });
+  const popUpSignin = (0, import_react2.useCallback)(async () => {
+    const res = await signIn(provider, {
+      redirect: false,
+      callbackUrl
+    });
+    if (res?.error) {
+      setState({ status: "errored", error: res.error });
+      return;
+    }
+    setExternalWindow(
+      createPopup({
+        url: res?.url,
+        title,
+        width,
+        height
+      })
+    );
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    const handleMessage = (event) => {
+      if (event.origin !== window.location.origin)
+        return;
+      if (event.data.status) {
+        setState(event.data);
+        if (event.data.status === "success") {
+          onSuccess?.();
+        }
+        externalWindow?.close();
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+      externalWindow?.close();
+    };
+  }, [externalWindow]);
+  return { popUpSignin, ...state };
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   SessionContext,
@@ -394,5 +447,6 @@ async function signOut(options) {
   getSession,
   signIn,
   signOut,
+  useOauthPopupLogin,
   useSession
 });

package/dist/react.mjs

@@ -68,7 +68,7 @@ function parseUrl(url) {
 }
 
 // src/react.tsx
-import { useContext, useEffect as useEffect2, useMemo } from "react";
+import { useCallback, useContext, useEffect as useEffect2, useMemo, useState as useState3 } from "react";
 var logger = {
   debug: console.debug,
   error: console.error,
@@ -342,6 +342,58 @@ async function signOut(options) {
   await config.fetchSession?.({ event: "storage" });
   return data;
 }
+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;
+    }
+    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?.();
+        }
+        externalWindow?.close();
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+      externalWindow?.close();
+    };
+  }, [externalWindow]);
+  return { popUpSignin, ...state };
+};
 export {
   SessionContext,
   SessionProvider,
@@ -351,5 +403,6 @@ export {
   getSession,
   signIn,
   signOut,
+  useOauthPopupLogin,
   useSession
 };

package/package.json

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