uibee 2.8.6 → 2.9.0

package/dist/src/components/confirm/confirmPopup.d.ts

@@ -0,0 +1,12 @@
+type ConfirmPopupProps = {
+    isOpen: boolean;
+    header: string;
+    description?: string;
+    confirmText?: string;
+    cancelText?: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    variant?: 'danger' | 'warning' | 'default';
+};
+export default function ConfirmPopup({ isOpen, header, description, confirmText, cancelText, onConfirm, onCancel, variant, }: ConfirmPopupProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/src/components/confirm/confirmPopup.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TriangleAlert } from 'lucide-react';
+export default function ConfirmPopup({ isOpen, header, description, confirmText = 'Confirm', cancelText = 'Cancel', onConfirm, onCancel, variant = 'default', }) {
+    if (!isOpen)
+        return null;
+    const confirmBg = variant === 'danger'
+        ? 'bg-red-700/80 outline-red-700 hover:bg-red-700'
+        : variant === 'warning'
+            ? 'bg-yellow-600/80 outline-yellow-600 hover:bg-yellow-600'
+            : 'bg-login/70 outline-login hover:bg-login/90';
+    return (_jsxs("div", { role: 'dialog', "aria-modal": 'true', "aria-labelledby": 'confirm-popup-header', className: 'fixed inset-0 z-50 flex items-center justify-center', onClick: onCancel, children: [_jsx("div", { className: 'absolute inset-0 bg-black/60 backdrop-blur-sm' }), _jsxs("div", { className: '\n                    relative z-10 w-full max-w-md mx-4\n                    bg-login-800 border border-login-500/50 rounded-xl\n                    shadow-2xl p-6 flex flex-col gap-4\n                ', onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: 'flex items-center gap-3', children: [variant !== 'default' && (_jsx(TriangleAlert, { className: `w-6 h-6 shrink-0 ${variant === 'danger' ? 'stroke-red-400' : 'stroke-yellow-400'}` })), _jsx("h2", { id: 'confirm-popup-header', className: 'text-login-50 text-lg font-bold leading-snug', children: header })] }), description && (_jsx("p", { className: 'text-login-100 text-sm leading-relaxed', children: description })), _jsxs("div", { className: 'flex justify-end gap-3 mt-1', children: [_jsx("button", { type: 'button', onClick: onCancel, className: '\n                            cursor-pointer px-4 py-1.5 rounded-md text-sm font-medium\n                            bg-login-500/60 text-login-50 outline outline-login-500/60\n                            hover:bg-login-500/90 focus:outline-none select-none\n                            transition-colors duration-150\n                        ', children: cancelText }), _jsx("button", { type: 'button', onClick: onConfirm, className: `
+                            cursor-pointer px-4 py-1.5 rounded-md text-sm font-bold
+                            text-white outline focus:outline-none select-none
+                            transition-colors duration-150
+                            ${confirmBg}
+                        `, children: confirmText })] })] })] }));
+}

package/dist/src/components/index.d.ts

@@ -20,3 +20,4 @@ export { default as LoginPage } from './login/loginPage';
 export { default as Toaster, toast } from './toast/toaster';
 export { default as Button } from './buttons/button';
 export { default as Alert } from './alert/alert';
+export { default as ConfirmPopup } from './confirm/confirmPopup';

package/dist/src/components/index.js

@@ -29,3 +29,5 @@ export { default as Toaster, toast } from './toast/toaster';
 export { default as Button } from './buttons/button';
 // Alert
 export { default as Alert } from './alert/alert';
+// Confirm
+export { default as ConfirmPopup } from './confirm/confirmPopup';

package/dist/src/globals.css

@@ -10,8 +10,11 @@
     --color-red-200: oklch(88.5% 0.062 18.334);
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-red-700: oklch(50.5% 0.213 27.518);
     --color-red-900: oklch(39.6% 0.141 25.723);
+    --color-yellow-400: oklch(85.2% 0.199 91.936);
     --color-yellow-500: oklch(79.5% 0.184 86.047);
+    --color-yellow-600: oklch(68.1% 0.162 75.834);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
@@ -46,6 +49,8 @@
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
     --tracking-tight: -0.025em;
+    --leading-snug: 1.375;
+    --leading-relaxed: 1.625;
     --radius-xs: 0.125rem;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
@@ -53,6 +58,7 @@
     --radius-xl: 0.75rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --blur-sm: 8px;
     --blur-xl: 24px;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -377,6 +383,9 @@
   .m-auto {
     margin: auto;
   }
+  .mx-4 {
+    margin-inline: calc(var(--spacing) * 4);
+  }
   .mx-auto {
     margin-inline: auto;
   }
@@ -1442,6 +1451,12 @@
   .border-login-500 {
     border-color: var(--color-login-500);
   }
+  .border-login-500\/50 {
+    border-color: color-mix(in srgb, #323232 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-login-500) 50%, transparent);
+    }
+  }
   .border-red-500 {
     border-color: var(--color-red-500);
   }
@@ -1454,6 +1469,12 @@
   .bg-\[\#18181899\] {
     background-color: #18181899;
   }
+  .bg-black\/60 {
+    background-color: color-mix(in srgb, #000 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
+    }
+  }
   .bg-blue-600 {
     background-color: var(--color-blue-600);
   }
@@ -1478,6 +1499,12 @@
       background-color: color-mix(in oklab, var(--color-login-500) 50%, transparent);
     }
   }
+  .bg-login-500\/60 {
+    background-color: color-mix(in srgb, #323232 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-login-500) 60%, transparent);
+    }
+  }
   .bg-login-500\/70 {
     background-color: color-mix(in srgb, #323232 70%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1514,6 +1541,12 @@
       background-color: color-mix(in oklab, var(--color-login) 70%, transparent);
     }
   }
+  .bg-red-700\/80 {
+    background-color: color-mix(in srgb, oklch(50.5% 0.213 27.518) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-red-700) 80%, transparent);
+    }
+  }
   .bg-red-900 {
     background-color: var(--color-red-900);
   }
@@ -1523,6 +1556,12 @@
   .bg-white {
     background-color: var(--color-white);
   }
+  .bg-yellow-600\/80 {
+    background-color: color-mix(in srgb, oklch(68.1% 0.162 75.834) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-yellow-600) 80%, transparent);
+    }
+  }
   .bg-linear-to-r {
     --tw-gradient-position: to right;
     @supports (background-image: linear-gradient(in lab, red, red)) {
@@ -1576,6 +1615,12 @@
   .stroke-login-50 {
     stroke: var(--color-login-50);
   }
+  .stroke-red-400 {
+    stroke: var(--color-red-400);
+  }
+  .stroke-yellow-400 {
+    stroke: var(--color-yellow-400);
+  }
   .stroke-\[3\.5px\] {
     stroke-width: 3.5px;
   }
@@ -1597,6 +1642,9 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
@@ -1718,6 +1766,14 @@
     --tw-leading: calc(var(--spacing) * 8);
     line-height: calc(var(--spacing) * 8);
   }
+  .leading-relaxed {
+    --tw-leading: var(--leading-relaxed);
+    line-height: var(--leading-relaxed);
+  }
+  .leading-snug {
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -1757,6 +1813,12 @@
   .text-login\! {
     color: var(--color-login) !important;
   }
+  .text-login-50 {
+    color: var(--color-login-50);
+  }
+  .text-login-100 {
+    color: var(--color-login-100);
+  }
   .text-login-200 {
     color: var(--color-login-200);
   }
@@ -1807,6 +1869,10 @@
   .opacity-100 {
     opacity: 100%;
   }
+  .shadow-2xl {
+    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_0\.1rem_0\.5rem_rgba\(3\,3\,3\,0\.5\)\] {
     --tw-shadow: 0 0.1rem 0.5rem var(--tw-shadow-color, rgba(3,3,3,0.5));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1846,6 +1912,23 @@
   .outline-login-500 {
     outline-color: var(--color-login-500);
   }
+  .outline-login-500\/60 {
+    outline-color: color-mix(in srgb, #323232 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      outline-color: color-mix(in oklab, var(--color-login-500) 60%, transparent);
+    }
+  }
+  .outline-red-700 {
+    outline-color: var(--color-red-700);
+  }
+  .outline-yellow-600 {
+    outline-color: var(--color-yellow-600);
+  }
+  .backdrop-blur-sm {
+    --tw-backdrop-blur: blur(var(--blur-sm));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .backdrop-blur-xl {
     --tw-backdrop-blur: blur(var(--blur-xl));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -2215,6 +2298,20 @@
       }
     }
   }
+  .hover\:bg-red-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-red-700);
+      }
+    }
+  }
+  .hover\:bg-yellow-600 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-yellow-600);
+      }
+    }
+  }
   .hover\:text-login-200 {
     &:hover {
       @media (hover: hover) {

package/dist/src/utils/auth/callback.d.ts

@@ -1,2 +1,2 @@
 import type { AuthCallbackProps } from 'uibee/utils';
-export default function authCallback({ req, tokenURL, clientID, clientSecret, redirectURL, userInfoURL, tokenRedirectURL }: AuthCallbackProps): Promise<Response>;
+export default function authCallback({ req, tokenURL, clientID, clientSecret, redirectPath, userInfoURL, tokenRedirectPath }: AuthCallbackProps): Promise<Response>;

package/dist/src/utils/auth/callback.js

@@ -1,5 +1,7 @@
 import { NextResponse } from 'next/server';
-export default async function authCallback({ req, tokenURL, clientID, clientSecret, redirectURL, userInfoURL, tokenRedirectURL }) {
+import { getDomain } from './getDomain';
+export default async function authCallback({ req, tokenURL, clientID, clientSecret, redirectPath, userInfoURL, tokenRedirectPath }) {
+    const domain = getDomain(req);
     const searchParams = new URL(req.url).searchParams;
     if (!searchParams) {
         return NextResponse.json({ error: 'No search parameters found.' }, { status: 400 });
@@ -17,7 +19,7 @@ export default async function authCallback({ req, tokenURL, clientID, clientSecr
                 client_id: clientID,
                 client_secret: clientSecret,
                 code: code,
-                redirect_uri: redirectURL,
+                redirect_uri: `${domain}${redirectPath}`,
                 grant_type: 'authorization_code',
             }).toString()
         });
@@ -41,7 +43,7 @@ export default async function authCallback({ req, tokenURL, clientID, clientSecr
             });
         }
         const userInfo = await userInfoResponse.json();
-        const redirectUrl = new URL(tokenRedirectURL);
+        const redirectUrl = new URL(`${domain}${tokenRedirectPath}`);
         const params = new URLSearchParams({
             id: userInfo.sub,
             name: userInfo.name,

package/dist/src/utils/auth/getDomain.d.ts

@@ -0,0 +1,2 @@
+import { NextRequest } from 'next/server';
+export declare function getDomain(req: NextRequest): string;

package/dist/src/utils/auth/getDomain.js

@@ -0,0 +1,5 @@
+export function getDomain(req) {
+    const proto = req.headers.get('x-forwarded-proto') ?? new URL(req.url).protocol.replace(':', '');
+    const host = req.headers.get('x-forwarded-host') ?? req.headers.get('host') ?? new URL(req.url).host;
+    return `${proto}://${host}`;
+}

package/dist/src/utils/auth/login.d.ts

@@ -1,3 +1,3 @@
 import { NextResponse } from 'next/server';
 import type { AuthLoginProps } from 'uibee/utils';
-export default function AuthLogin({ clientID, redirectURL, authURL }: AuthLoginProps): Promise<NextResponse<unknown>>;
+export default function AuthLogin({ req, clientID, redirectPath, authURL }: AuthLoginProps): Promise<NextResponse<unknown>>;

package/dist/src/utils/auth/login.js

@@ -1,9 +1,11 @@
 import { NextResponse } from 'next/server';
-export default async function AuthLogin({ clientID, redirectURL, authURL }) {
+import { getDomain } from './getDomain';
+export default async function AuthLogin({ req, clientID, redirectPath, authURL }) {
+    const domain = getDomain(req);
     const state = Math.random().toString(36).substring(5);
     const authQueryParams = new URLSearchParams({
         client_id: clientID,
-        redirect_uri: redirectURL,
+        redirect_uri: `${domain}${redirectPath}`,
         response_type: 'code',
         scope: 'openid profile email',
         state: state,

package/dist/src/utils/auth/logout.d.ts

@@ -1,3 +1,3 @@
 import { NextResponse } from 'next/server';
 import type { AuthLogoutProps } from 'uibee/utils';
-export default function AuthLogout({ frontendURL, path }: AuthLogoutProps): Promise<NextResponse<unknown>>;
+export default function AuthLogout({ req, path }: AuthLogoutProps): Promise<NextResponse<unknown>>;

package/dist/src/utils/auth/logout.js

@@ -1,6 +1,8 @@
 import { NextResponse } from 'next/server';
-export default async function AuthLogout({ frontendURL, path }) {
-    const response = NextResponse.redirect(new URL(path || '/', frontendURL));
+import { getDomain } from './getDomain';
+export default async function AuthLogout({ req, path }) {
+    const domain = getDomain(req);
+    const response = NextResponse.redirect(new URL(path || '/', domain));
     const cookiesToRemove = [
         'access_token',
         'user_id',

package/dist/src/utils/auth/token.d.ts

@@ -1,3 +1,3 @@
 import { NextResponse } from 'next/server';
 import type { AuthTokenProps } from 'uibee/utils';
-export default function AuthToken({ req, frontendURL, redirectPath }: AuthTokenProps): Promise<NextResponse<unknown>>;
+export default function AuthToken({ req, redirectPath }: AuthTokenProps): Promise<NextResponse<unknown>>;

package/dist/src/utils/auth/token.js

@@ -1,5 +1,7 @@
 import { NextResponse } from 'next/server';
-export default async function AuthToken({ req, frontendURL, redirectPath }) {
+import { getDomain } from './getDomain';
+export default async function AuthToken({ req, redirectPath }) {
+    const domain = getDomain(req);
     const url = new URL(req.url);
     const token = url.searchParams.get('access_token');
     const btg = url.searchParams.get('btg');
@@ -9,7 +11,7 @@ export default async function AuthToken({ req, frontendURL, redirectPath }) {
         return NextResponse.json({ error: 'No access token provided' }, { status: 400 });
     }
     if (btg) {
-        return NextResponse.redirect(new URL(redirect, frontendURL));
+        return NextResponse.redirect(new URL(redirect, domain));
     }
     const accessToken = url.searchParams.get('access_token');
     const userID = url.searchParams.get('id');
@@ -17,7 +19,7 @@ export default async function AuthToken({ req, frontendURL, redirectPath }) {
     const userNickname = url.searchParams.get('username');
     const userEmail = url.searchParams.get('email');
     const userGroups = url.searchParams.get('groups');
-    const response = NextResponse.redirect(new URL(redirect, frontendURL));
+    const response = NextResponse.redirect(new URL(redirect, domain));
     response.cookies.set('access_token', accessToken);
     response.cookies.set('user_id', userID);
     response.cookies.set('user_name', username);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.8.6",
+  "version": "2.9.0",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {

package/src/components/confirm/confirmPopup.tsx

@@ -0,0 +1,103 @@
+'use client'
+
+import { TriangleAlert } from 'lucide-react'
+
+type ConfirmPopupProps = {
+    isOpen: boolean
+    header: string
+    description?: string
+    confirmText?: string
+    cancelText?: string
+    onConfirm: () => void
+    onCancel: () => void
+    variant?: 'danger' | 'warning' | 'default'
+}
+
+export default function ConfirmPopup({
+    isOpen,
+    header,
+    description,
+    confirmText = 'Confirm',
+    cancelText = 'Cancel',
+    onConfirm,
+    onCancel,
+    variant = 'default',
+}: ConfirmPopupProps) {
+    if (!isOpen) return null
+
+    const confirmBg =
+        variant === 'danger'
+            ? 'bg-red-700/80 outline-red-700 hover:bg-red-700'
+            : variant === 'warning'
+                ? 'bg-yellow-600/80 outline-yellow-600 hover:bg-yellow-600'
+                : 'bg-login/70 outline-login hover:bg-login/90'
+
+    return (
+        <div
+            role='dialog'
+            aria-modal='true'
+            aria-labelledby='confirm-popup-header'
+            className='fixed inset-0 z-50 flex items-center justify-center'
+            onClick={onCancel}
+        >
+            <div className='absolute inset-0 bg-black/60 backdrop-blur-sm' />
+
+            <div
+                className='
+                    relative z-10 w-full max-w-md mx-4
+                    bg-login-800 border border-login-500/50 rounded-xl
+                    shadow-2xl p-6 flex flex-col gap-4
+                '
+                onClick={(e) => e.stopPropagation()}
+            >
+                <div className='flex items-center gap-3'>
+                    {variant !== 'default' && (
+                        <TriangleAlert
+                            className={`w-6 h-6 shrink-0 ${variant === 'danger' ? 'stroke-red-400' : 'stroke-yellow-400'}`}
+                        />
+                    )}
+                    <h2
+                        id='confirm-popup-header'
+                        className='text-login-50 text-lg font-bold leading-snug'
+                    >
+                        {header}
+                    </h2>
+                </div>
+
+                {description && (
+                    <p className='text-login-100 text-sm leading-relaxed'>
+                        {description}
+                    </p>
+                )}
+
+                <div className='flex justify-end gap-3 mt-1'>
+                    <button
+                        type='button'
+                        onClick={onCancel}
+                        className='
+                            cursor-pointer px-4 py-1.5 rounded-md text-sm font-medium
+                            bg-login-500/60 text-login-50 outline outline-login-500/60
+                            hover:bg-login-500/90 focus:outline-none select-none
+                            transition-colors duration-150
+                        '
+                    >
+                        {cancelText}
+                    </button>
+
+                    <button
+                        type='button'
+                        onClick={onConfirm}
+                        className={`
+                            cursor-pointer px-4 py-1.5 rounded-md text-sm font-bold
+                            text-white outline focus:outline-none select-none
+                            transition-colors duration-150
+                            ${confirmBg}
+                        `}
+                    >
+                        {confirmText}
+                    </button>
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/components/index.ts

@@ -36,4 +36,7 @@ export { default as Toaster, toast } from './toast/toaster'
 export { default as Button } from './buttons/button'
 
 // Alert
-export { default as Alert } from './alert/alert'
+export { default as Alert } from './alert/alert'
+
+// Confirm
+export { default as ConfirmPopup } from './confirm/confirmPopup'

package/src/types/components.d.ts

@@ -45,4 +45,16 @@ declare module 'uibee/components' {
     }
     export default function LanguageToggle(props: { lang: Language }): JSX.Element;
     export default function ThemeSwitch(props: { className?: string }): JSX.Element;
+
+    export interface ConfirmPopupProps {
+        isOpen: boolean
+        header: string
+        description?: string
+        confirmText?: string
+        cancelText?: string
+        onConfirm: () => void
+        onCancel: () => void
+        variant?: 'danger' | 'warning' | 'default'
+    }
+    export function ConfirmPopup(props: ConfirmPopupProps): JSX.Element | null;
 }

package/src/types/utils.d.ts

@@ -2,30 +2,30 @@
 import { NextRequest } from 'next/server'
 declare module 'uibee/utils' {
     export interface AuthLoginProps {
+        req: NextRequest
         clientID: string
-        redirectURL: string
+        redirectPath: string
         authURL: string
     }
 
     export interface AuthCallbackProps {
-        req: Request
+        req: NextRequest
         tokenURL: string
         clientID: string
         clientSecret: string
-        redirectURL: string
+        redirectPath: string
         userInfoURL: string
-        tokenRedirectURL: string
+        tokenRedirectPath: string
     }
 
     export interface AuthTokenProps {
         req: NextRequest
-        frontendURL: string
         redirectPath?: string
     }
+
     export interface AuthLogoutProps {
-        request: NextRequest
+        req: NextRequest
         path?: string
-        frontendURL: string
     }
 
     export default async function authLogin(props: AuthLoginProps): Promise<Response>;

package/src/utils/auth/callback.ts

@@ -1,5 +1,6 @@
 import { NextResponse } from 'next/server'
 import type { AuthCallbackProps } from 'uibee/utils'
+import { getDomain } from './getDomain'
 
 type UserInfo = {
     sub: string
@@ -14,10 +15,11 @@ export default async function authCallback({
     tokenURL,
     clientID,
     clientSecret,
-    redirectURL,
+    redirectPath,
     userInfoURL,
-    tokenRedirectURL
+    tokenRedirectPath
 }: AuthCallbackProps) {
+    const domain = getDomain(req)
     const searchParams = new URL(req.url).searchParams
 
     if (!searchParams) {
@@ -38,7 +40,7 @@ export default async function authCallback({
                 client_id: clientID,
                 client_secret: clientSecret,
                 code: code as string,
-                redirect_uri: redirectURL,
+                redirect_uri: `${domain}${redirectPath}`,
                 grant_type: 'authorization_code',
             }).toString()
         })
@@ -69,7 +71,7 @@ export default async function authCallback({
 
         const userInfo = await userInfoResponse.json() as UserInfo
 
-        const redirectUrl = new URL(tokenRedirectURL)
+        const redirectUrl = new URL(`${domain}${tokenRedirectPath}`)
         const params = new URLSearchParams({
             id: userInfo.sub,
             name: userInfo.name,

package/src/utils/auth/getDomain.ts

@@ -0,0 +1,7 @@
+import { NextRequest } from 'next/server'
+
+export function getDomain(req: NextRequest): string {
+    const proto = req.headers.get('x-forwarded-proto') ?? new URL(req.url).protocol.replace(':', '')
+    const host = req.headers.get('x-forwarded-host') ?? req.headers.get('host') ?? new URL(req.url).host
+    return `${proto}://${host}`
+}

package/src/utils/auth/login.ts

@@ -1,11 +1,13 @@
 import { NextResponse } from 'next/server'
 import type { AuthLoginProps } from 'uibee/utils'
+import { getDomain } from './getDomain'
 
-export default async function AuthLogin({ clientID, redirectURL, authURL }: AuthLoginProps) {
+export default async function AuthLogin({ req, clientID, redirectPath, authURL }: AuthLoginProps) {
+    const domain = getDomain(req)
     const state = Math.random().toString(36).substring(5)
     const authQueryParams = new URLSearchParams({
         client_id: clientID,
-        redirect_uri: redirectURL,
+        redirect_uri: `${domain}${redirectPath}`,
         response_type: 'code',
         scope: 'openid profile email',
         state: state,

package/src/utils/auth/logout.ts

@@ -1,8 +1,10 @@
 import { NextResponse } from 'next/server'
 import type { AuthLogoutProps } from 'uibee/utils'
+import { getDomain } from './getDomain'
 
-export default async function AuthLogout({ frontendURL, path }: AuthLogoutProps) {
-    const response = NextResponse.redirect(new URL(path || '/', frontendURL))
+export default async function AuthLogout({ req, path }: AuthLogoutProps) {
+    const domain = getDomain(req)
+    const response = NextResponse.redirect(new URL(path || '/', domain))
 
     const cookiesToRemove = [
         'access_token',

package/src/utils/auth/token.ts

@@ -1,7 +1,9 @@
 import { NextResponse } from 'next/server'
 import type { AuthTokenProps } from 'uibee/utils'
+import { getDomain } from './getDomain'
 
-export default async function AuthToken({ req, frontendURL, redirectPath }: AuthTokenProps) {
+export default async function AuthToken({ req, redirectPath }: AuthTokenProps) {
+    const domain = getDomain(req)
     const url = new URL(req.url)
     const token = url.searchParams.get('access_token')
     const btg = url.searchParams.get('btg')
@@ -13,7 +15,7 @@ export default async function AuthToken({ req, frontendURL, redirectPath }: Auth
     }
 
     if (btg) {
-        return NextResponse.redirect(new URL(redirect, frontendURL))
+        return NextResponse.redirect(new URL(redirect, domain))
     }
 
     const accessToken = url.searchParams.get('access_token')!
@@ -23,7 +25,7 @@ export default async function AuthToken({ req, frontendURL, redirectPath }: Auth
     const userEmail = url.searchParams.get('email')!
     const userGroups = url.searchParams.get('groups')!
 
-    const response = NextResponse.redirect(new URL(redirect, frontendURL))
+    const response = NextResponse.redirect(new URL(redirect, domain))
     response.cookies.set('access_token', accessToken)
     response.cookies.set('user_id', userID)
     response.cookies.set('user_name', username)