complete web device auth flow

src/app/[orgId]/page.tsx

@@ -22,6 +22,10 @@ export default async function OrgPage(props: OrgPageProps) {
     const orgId = params.orgId;
     const env = pullEnv();
 
+    if (!orgId) {
+        redirect(`/`);
+    }
+
     const getUser = cache(verifySession);
     const user = await getUser();
 

src/app/auth/layout.tsx

@@ -1,5 +1,13 @@
 import ThemeSwitcher from "@app/components/ThemeSwitcher";
+import { Separator } from "@app/components/ui/separator";
+import { priv } from "@app/lib/api";
+import { verifySession } from "@app/lib/auth/verifySession";
+import { pullEnv } from "@app/lib/pullEnv";
+import { GetLicenseStatusResponse } from "@server/routers/license/types";
+import { AxiosResponse } from "axios";
 import { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import { cache } from "react";
 
 export const metadata: Metadata = {
     title: `Auth - ${process.env.BRANDING_APP_NAME || "Pangolin"}`,
@@ -11,6 +19,20 @@ type AuthLayoutProps = {
 };
 
 export default async function AuthLayout({ children }: AuthLayoutProps) {
+    const getUser = cache(verifySession);
+    const env = pullEnv();
+    const user = await getUser();
+    const t = await getTranslations();
+    const hideFooter = env.branding.hideAuthLayoutFooter || false;
+
+    const licenseStatusRes = await cache(
+        async () =>
+            await priv.get<AxiosResponse<GetLicenseStatusResponse>>(
+                "/license/status"
+            )
+    )();
+    const licenseStatus = licenseStatusRes.data.data;
+
     return (
         <div className="h-full flex flex-col">
             <div className="flex justify-end items-center p-3 space-x-2">
@@ -20,6 +42,91 @@ export default async function AuthLayout({ children }: AuthLayoutProps) {
             <div className="flex-1 flex items-center justify-center">
                 <div className="w-full max-w-md p-3">{children}</div>
             </div>
+
+            {!(
+                hideFooter ||
+                (licenseStatus.isHostLicensed && licenseStatus.isLicenseValid)
+            ) && (
+                <footer className="hidden md:block w-full mt-12 py-3 mb-6 px-4">
+                    <div className="container mx-auto flex flex-wrap justify-center items-center h-3 space-x-4 text-xs text-neutral-400 dark:text-neutral-600">
+                        <a
+                            href="https://pangolin.net"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            aria-label="Built by Fossorial"
+                            className="flex items-center space-x-2 whitespace-nowrap"
+                        >
+                            <span>
+                                © {new Date().getFullYear()} Fossorial, Inc.
+                            </span>
+                        </a>
+                        <Separator orientation="vertical" />
+                        <a
+                            href="https://pangolin.net"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            aria-label="Built by Fossorial"
+                            className="flex items-center space-x-2 whitespace-nowrap"
+                        >
+                            <span>
+                                {process.env.BRANDING_APP_NAME || "Pangolin"}
+                            </span>
+                        </a>
+                        <Separator orientation="vertical" />
+                        <a
+                            href="https://pangolin.net/terms-of-service.html"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            aria-label="GitHub"
+                            className="flex items-center space-x-2 whitespace-nowrap"
+                        >
+                            <span>{t("terms")}</span>
+                        </a>
+                        <Separator orientation="vertical" />
+                        <a
+                            href="https://pangolin.net/privacy-policy.html"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            aria-label="GitHub"
+                            className="flex items-center space-x-2 whitespace-nowrap"
+                        >
+                            <span>{t("privacy")}</span>
+                        </a>
+                        <Separator orientation="vertical" />
+                        <a
+                            href="https://github.com/fosrl/pangolin/blob/main/SECURITY.md"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            aria-label="GitHub"
+                            className="flex items-center space-x-2 whitespace-nowrap"
+                        >
+                            <span>{t("security")}</span>
+                        </a>
+                        <Separator orientation="vertical" />
+                        <a
+                            href="https://docs.pangolin.net"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            aria-label="Built by Fossorial"
+                            className="flex items-center space-x-2 whitespace-nowrap"
+                        >
+                            <span>{t("docs")}</span>
+                        </a>
+                        <Separator orientation="vertical" />
+                        <span>{t("communityEdition")}</span>
+                        <Separator orientation="vertical" />
+                        <a
+                            href="https://github.com/fosrl/pangolin"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            aria-label="GitHub"
+                            className="flex items-center space-x-2 whitespace-nowrap"
+                        >
+                            <span>{t("github")}</span>
+                        </a>
+                    </div>
+                </footer>
+            )}
         </div>
     );
 }

src/app/auth/login/device/page.tsx

@@ -0,0 +1,17 @@
+import { verifySession } from "@app/lib/auth/verifySession";
+import { redirect } from "next/navigation";
+import DeviceLoginForm from "@/components/DeviceLoginForm";
+import { cache } from "react";
+
+export const dynamic = "force-dynamic";
+
+export default async function DeviceLoginPage() {
+    const getUser = cache(verifySession);
+    const user = await getUser();
+
+    if (!user) {
+        redirect("/auth/login?redirect=/auth/login/device");
+    }
+
+    return <DeviceLoginForm userEmail={user?.email || ""} />;
+}

src/app/auth/login/device/success/page.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import BrandingLogo from "@app/components/BrandingLogo";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
+import { CheckCircle2 } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+export default function DeviceAuthSuccessPage() {
+    const { env } = useEnvContext();
+    const { isUnlocked } = useLicenseStatusContext();
+    const t = useTranslations();
+
+    const logoWidth = isUnlocked()
+        ? env.branding.logo?.authPage?.width || 175
+        : 175;
+    const logoHeight = isUnlocked()
+        ? env.branding.logo?.authPage?.height || 58
+        : 58;
+
+    return (
+        <Card>
+            <CardHeader className="border-b">
+                <div className="flex flex-row items-center justify-center">
+                    <BrandingLogo height={logoHeight} width={logoWidth} />
+                </div>
+                <div className="text-center space-y-1 pt-3">
+                    <p className="text-muted-foreground">{t("deviceActivation")}</p>
+                </div>
+            </CardHeader>
+            <CardContent className="p-6">
+                <div className="flex flex-col items-center space-y-4">
+                    <CheckCircle2 className="h-16 w-16 text-green-600" />
+                    <div className="space-y-2">
+                        <h2 className="text-2xl font-bold text-center">
+                            {t("deviceConnected")}
+                        </h2>
+                        <p className="text-center text-sm text-muted-foreground">
+                            {t("deviceAuthorizedMessage")}
+                        </p>
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}

src/app/auth/login/page.tsx

@@ -53,7 +53,7 @@ export default async function Page(props: {
 
     if (loginPageDomain) {
         const redirectUrl = searchParams.redirect as string | undefined;
-        
+
         let url = `https://${loginPageDomain}/auth/org`;
         if (redirectUrl) {
             url += `?redirect=${redirectUrl}`;

src/app/page.tsx

@@ -80,7 +80,7 @@ export default async function Page(props: {
     const lastOrgCookie = allCookies.get("pangolin-last-org")?.value;
 
     const lastOrgExists = orgs.some((org) => org.orgId === lastOrgCookie);
-    if (lastOrgExists) {
+    if (lastOrgExists && lastOrgCookie) {
         redirect(`/${lastOrgCookie}`);
     } else {
         let ownedOrg = orgs.find((org) => org.isOwner);

src/components/DashboardLoginForm.tsx

@@ -36,17 +36,18 @@ export default function DashboardLoginForm({
         return t("loginStart");
     }
 
-    const logoWidth = isUnlocked() ? env.branding.logo?.authPage?.width || 175 : 175;
-    const logoHeight = isUnlocked() ? env.branding.logo?.authPage?.height || 58 : 58;
+    const logoWidth = isUnlocked()
+        ? env.branding.logo?.authPage?.width || 175
+        : 175;
+    const logoHeight = isUnlocked()
+        ? env.branding.logo?.authPage?.height || 58
+        : 58;
 
     return (
-        <Card className="shadow-md w-full max-w-md">
+        <Card className="w-full max-w-md">
             <CardHeader className="border-b">
                 <div className="flex flex-row items-center justify-center">
-                    <BrandingLogo
-                        height={logoHeight}
-                        width={logoWidth}
-                    />
+                    <BrandingLogo height={logoHeight} width={logoWidth} />
                 </div>
                 <div className="text-center space-y-1 pt-3">
                     <p className="text-muted-foreground">{getSubtitle()}</p>
@@ -56,12 +57,12 @@ export default function DashboardLoginForm({
                 <LoginForm
                     redirect={redirect}
                     idps={idps}
-                    onLogin={() => {
-                        if (redirect) {
-                            const safe = cleanRedirect(redirect);
-                            router.push(safe);
+                    onLogin={(redirectUrl) => {
+                        if (redirectUrl) {
+                            const safe = cleanRedirect(redirectUrl);
+                            router.replace(safe);
                         } else {
-                            router.push("/");
+                            router.replace("/");
                         }
                     }}
                 />

src/components/DeviceAuthConfirmation.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+    Card,
+    CardContent,
+    CardFooter,
+    CardHeader,
+    CardTitle
+} from "@/components/ui/card";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { AlertTriangle, CheckCircle2, Monitor } from "lucide-react";
+import BrandingLogo from "./BrandingLogo";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
+import { useTranslations } from "next-intl";
+
+type DeviceAuthMetadata = {
+    ip: string | null;
+    city: string | null;
+    deviceName: string | null;
+    applicationName: string;
+    createdAt: number;
+};
+
+type DeviceAuthConfirmationProps = {
+    metadata: DeviceAuthMetadata;
+    onConfirm: () => void;
+    onCancel: () => void;
+    loading: boolean;
+};
+
+export function DeviceAuthConfirmation({
+    metadata,
+    onConfirm,
+    onCancel,
+    loading
+}: DeviceAuthConfirmationProps) {
+    const { env } = useEnvContext();
+    const { isUnlocked } = useLicenseStatusContext();
+    const t = useTranslations();
+
+    const formatDate = (timestamp: number) => {
+        const date = new Date(timestamp);
+        return date.toLocaleString(undefined, {
+            month: "long",
+            day: "numeric",
+            year: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
+            timeZoneName: "short"
+        });
+    };
+
+    const locationText =
+        metadata.city && metadata.ip
+            ? `${metadata.city} ${metadata.ip}`
+            : metadata.ip || t("deviceUnknownLocation");
+
+    const logoWidth = isUnlocked()
+        ? env.branding.logo?.authPage?.width || 175
+        : 175;
+    const logoHeight = isUnlocked()
+        ? env.branding.logo?.authPage?.height || 58
+        : 58;
+
+    return (
+        <Card className="w-full max-w-md">
+            <CardHeader className="border-b">
+                <div className="flex flex-row items-center justify-center">
+                    <BrandingLogo height={logoHeight} width={logoWidth} />
+                </div>
+                <div className="text-center space-y-1 pt-3">
+                    <p className="text-muted-foreground">{t("deviceActivation")}</p>
+                </div>
+            </CardHeader>
+            <CardContent className="pt-6 space-y-4">
+                <Alert variant="warning">
+                    <AlertDescription>
+                        {t("deviceAuthorizationRequested", {
+                            location: locationText,
+                            date: formatDate(metadata.createdAt)
+                        })}
+                    </AlertDescription>
+                </Alert>
+
+                <div className="space-y-3">
+                    <div className="flex items-start gap-3 p-3 bg-muted rounded-lg">
+                        <Monitor className="h-5 w-5 text-gray-600 mt-0.5" />
+                        <div className="flex-1">
+                            <p className="text-sm font-medium">
+                                {metadata.applicationName}
+                            </p>
+                            {metadata.deviceName && (
+                                <p className="text-xs text-muted-foreground mt-1">
+                                    {t("deviceLabel", { deviceName: metadata.deviceName })}
+                                </p>
+                            )}
+                            <p className="text-xs text-muted-foreground mt-1">
+                                {t("deviceWantsAccess")}
+                            </p>
+                        </div>
+                    </div>
+
+                    <div className="space-y-2 pt-2">
+                        <p className="text-sm font-medium">{t("deviceExistingAccess")}</p>
+                        <div className="space-y-1 pl-4">
+                            <div className="flex items-center gap-2 text-sm">
+                                <CheckCircle2 className="h-4 w-4 text-green-600" />
+                                <span>{t("deviceFullAccess")}</span>
+                            </div>
+                            <div className="flex items-center gap-2 text-sm">
+                                <CheckCircle2 className="h-4 w-4 text-green-600" />
+                                <span>
+                                    {t("deviceOrganizationsAccess")}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </CardContent>
+
+            <CardFooter className="gap-2">
+                <Button
+                    variant="outline"
+                    onClick={onCancel}
+                    disabled={loading}
+                    className="w-full"
+                >
+                    {t("cancel")}
+                </Button>
+
+                <Button
+                    className="w-full"
+                    onClick={onConfirm}
+                    disabled={loading}
+                    loading={loading}
+                >
+                    {t("deviceAuthorize", { applicationName: metadata.applicationName })}
+                </Button>
+            </CardFooter>
+        </Card>
+    );
+}

src/components/DeviceLoginForm.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { Button } from "@/components/ui/button";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@/components/ui/form";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useRouter } from "next/navigation";
+import {
+    InputOTP,
+    InputOTPGroup,
+    InputOTPSeparator,
+    InputOTPSlot
+} from "@/components/ui/input-otp";
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
+import { AlertTriangle } from "lucide-react";
+import { DeviceAuthConfirmation } from "@/components/DeviceAuthConfirmation";
+import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
+import BrandingLogo from "./BrandingLogo";
+import { useTranslations } from "next-intl";
+
+const createFormSchema = (t: (key: string) => string) => z.object({
+    code: z.string().length(8, t("deviceCodeInvalidFormat"))
+});
+
+type DeviceAuthMetadata = {
+    ip: string | null;
+    city: string | null;
+    deviceName: string | null;
+    applicationName: string;
+    createdAt: number;
+};
+
+type DeviceLoginFormProps = {
+    userEmail: string;
+};
+
+export default function DeviceLoginForm({ userEmail }: DeviceLoginFormProps) {
+    const router = useRouter();
+    const { env } = useEnvContext();
+    const api = createApiClient({ env });
+    const [error, setError] = useState<string | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [metadata, setMetadata] = useState<DeviceAuthMetadata | null>(null);
+    const [code, setCode] = useState<string>("");
+    const { isUnlocked } = useLicenseStatusContext();
+    const t = useTranslations();
+
+    const formSchema = createFormSchema(t);
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            code: ""
+        }
+    });
+
+    async function onSubmit(data: z.infer<typeof formSchema>) {
+        setError(null);
+        setLoading(true);
+
+        try {
+            // split code and add dash if missing
+            if (!data.code.includes("-") && data.code.length === 8) {
+                data.code = data.code.slice(0, 4) + "-" + data.code.slice(4);
+            }
+            // First check - get metadata
+            const res = await api.post("/device-web-auth/verify", {
+                code: data.code.toUpperCase(),
+                verify: false
+            });
+
+            if (res.data.success && res.data.data.metadata) {
+                setMetadata(res.data.data.metadata);
+                setCode(data.code.toUpperCase());
+            } else {
+                setError(t("deviceCodeInvalidOrExpired"));
+            }
+        } catch (e: any) {
+            const errorMessage = formatAxiosError(e);
+            setError(errorMessage || t("deviceCodeInvalidOrExpired"));
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    async function onConfirm() {
+        if (!code || !metadata) return;
+
+        setError(null);
+        setLoading(true);
+
+        try {
+            // Final verify
+            await api.post("/device-web-auth/verify", {
+                code: code,
+                verify: true
+            });
+
+            // Redirect to success page
+            router.push("/auth/login/device/success");
+        } catch (e: any) {
+            const errorMessage = formatAxiosError(e);
+            setError(errorMessage || t("deviceCodeVerifyFailed"));
+            setMetadata(null);
+            setCode("");
+            form.reset();
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    const logoWidth = isUnlocked()
+        ? env.branding.logo?.authPage?.width || 175
+        : 175;
+    const logoHeight = isUnlocked()
+        ? env.branding.logo?.authPage?.height || 58
+        : 58;
+
+    function onCancel() {
+        setMetadata(null);
+        setCode("");
+        form.reset();
+        setError(null);
+    }
+
+    if (metadata) {
+        return (
+            <DeviceAuthConfirmation
+                metadata={metadata}
+                onConfirm={onConfirm}
+                onCancel={onCancel}
+                loading={loading}
+            />
+        );
+    }
+
+    return (
+        <Card className="w-full max-w-md">
+            <CardHeader className="border-b">
+                <div className="flex flex-row items-center justify-center">
+                    <BrandingLogo height={logoHeight} width={logoWidth} />
+                </div>
+                <div className="text-center space-y-1 pt-3">
+                    <p className="text-muted-foreground">{t("deviceActivation")}</p>
+                </div>
+            </CardHeader>
+            <CardContent className="pt-6">
+                <div className="text-center mb-3">
+                    <span>{t("signedInAs")} </span>
+                    <span className="font-medium">{userEmail}</span>
+                </div>
+
+                <Form {...form}>
+                    <form
+                        onSubmit={form.handleSubmit(onSubmit)}
+                        className="space-y-4"
+                    >
+                        <div className="space-y-2">
+                            <p className="text-sm text-muted-foreground text-center">
+                                {t("deviceCodeEnterPrompt")}
+                            </p>
+                        </div>
+
+                        <FormField
+                            control={form.control}
+                            name="code"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormControl>
+                                        <div className="flex justify-center">
+                                            <InputOTP
+                                                maxLength={9}
+                                                {...field}
+                                                value={field.value
+                                                    .replace(/-/g, "")
+                                                    .toUpperCase()}
+                                                onChange={(value) => {
+                                                    // Strip hyphens and convert to uppercase
+                                                    const cleanedValue = value
+                                                        .replace(/-/g, "")
+                                                        .toUpperCase();
+                                                    field.onChange(
+                                                        cleanedValue
+                                                    );
+                                                }}
+                                            >
+                                                <InputOTPGroup>
+                                                    <InputOTPSlot index={0} />
+                                                    <InputOTPSlot index={1} />
+                                                    <InputOTPSlot index={2} />
+                                                    <InputOTPSlot index={3} />
+                                                </InputOTPGroup>
+                                                <InputOTPSeparator />
+                                                <InputOTPGroup>
+                                                    <InputOTPSlot index={4} />
+                                                    <InputOTPSlot index={5} />
+                                                    <InputOTPSlot index={6} />
+                                                    <InputOTPSlot index={7} />
+                                                </InputOTPGroup>
+                                            </InputOTP>
+                                        </div>
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        {error && (
+                            <Alert variant="destructive">
+                                <AlertDescription>{error}</AlertDescription>
+                            </Alert>
+                        )}
+
+                        <Button
+                            type="submit"
+                            className="w-full"
+                            disabled={loading}
+                            loading={loading}
+                        >
+                            {t("continue")}
+                        </Button>
+                    </form>
+                </Form>
+            </CardContent>
+        </Card>
+    );
+}

src/components/LoginForm.tsx

@@ -58,7 +58,7 @@ export type LoginFormIDP = {
 
 type LoginFormProps = {
     redirect?: string;
-    onLogin?: () => void | Promise<void>;
+    onLogin?: (redirectUrl?: string) => void | Promise<void>;
     idps?: LoginFormIDP[];
     orgId?: string;
 };
@@ -175,7 +175,7 @@ export default function LoginForm({
 
                 if (verifyResponse.success) {
                     if (onLogin) {
-                        await onLogin();
+                        await onLogin(redirect);
                     }
                 }
             } catch (error: any) {
@@ -263,7 +263,7 @@ export default function LoginForm({
             // Handle case where data is null (e.g., already logged in)
             if (!data) {
                 if (onLogin) {
-                    await onLogin();
+                    await onLogin(redirect);
                 }
                 return;
             }
@@ -312,7 +312,7 @@ export default function LoginForm({
             }
 
             if (onLogin) {
-                await onLogin();
+                await onLogin(redirect);
             }
         } catch (e: any) {
             console.error(e);

src/components/SignupForm.tsx

@@ -199,7 +199,7 @@ export default function SignupForm({
         : 58;
 
     return (
-        <Card className="w-full max-w-md shadow-md">
+        <Card className="w-full max-w-md">
             <CardHeader className="border-b">
                 <div className="flex flex-row items-center justify-center">
                     <BrandingLogo height={logoHeight} width={logoWidth} />

src/components/ui/alert.tsx

@@ -14,9 +14,9 @@ const alertVariants = cva(
                     "border-destructive/50 border bg-destructive/10 text-destructive dark:border-destructive [&>svg]:text-destructive",
                 success:
                     "border-green-500/50 border bg-green-500/10 text-green-500 dark:border-success [&>svg]:text-green-500",
-                info: "border-blue-500/50 border bg-blue-500/10 text-blue-500 dark:border-blue-400 [&>svg]:text-blue-500",
+                info: "border-blue-500/50 border bg-blue-500/10 text-blue-800 dark:border-blue-400 [&>svg]:text-blue-500",
                 warning:
-                    "border-yellow-500/50 border bg-yellow-500/10 text-yellow-500 dark:border-yellow-400 [&>svg]:text-yellow-500"
+                    "border-yellow-500/50 border bg-yellow-500/10 text-yellow-800 dark:border-yellow-400 [&>svg]:text-yellow-500"
             }
         },
         defaultVariants: {

src/lib/api/cookies.ts

@@ -1,22 +1,32 @@
-import { cookies, headers } from "next/headers";
-import { pullEnv } from "../pullEnv";
+import { headers } from "next/headers";
 
 export async function authCookieHeader() {
-    const env = pullEnv();
-
-    const allCookies = await cookies();
-    const cookieName = env.server.sessionCookieName;
-    const sessionId = allCookies.get(cookieName)?.value ?? null;
-
-    // all other headers
-    // this is needed to pass through x-forwarded-for, x-forwarded-proto, etc.
     const otherHeaders = await headers();
     const otherHeadersObject = Object.fromEntries(otherHeaders.entries());
 
     return {
         headers: {
-            Cookie: `${cookieName}=${sessionId}`,
-            ...otherHeadersObject
-        },
+            cookie:
+                otherHeadersObject["cookie"] || otherHeadersObject["Cookie"],
+            host: otherHeadersObject["host"] || otherHeadersObject["Host"],
+            "user-agent":
+                otherHeadersObject["user-agent"] ||
+                otherHeadersObject["User-Agent"],
+            "x-forwarded-for":
+                otherHeadersObject["x-forwarded-for"] ||
+                otherHeadersObject["X-Forwarded-For"],
+            "x-forwarded-host":
+                otherHeadersObject["fx-forwarded-host"] ||
+                otherHeadersObject["Fx-Forwarded-Host"],
+            "x-forwarded-port":
+                otherHeadersObject["x-forwarded-port"] ||
+                otherHeadersObject["X-Forwarded-Port"],
+            "x-forwarded-proto":
+                otherHeadersObject["x-forwarded-proto"] ||
+                otherHeadersObject["X-Forwarded-Proto"],
+            "x-real-ip":
+                otherHeadersObject["x-real-ip"] ||
+                otherHeadersObject["X-Real-IP"]
+        }
     };
 }

src/lib/auth/verifySession.ts

@@ -5,7 +5,7 @@ import { AxiosResponse } from "axios";
 import { pullEnv } from "../pullEnv";
 
 export async function verifySession({
-    skipCheckVerifyEmail,
+    skipCheckVerifyEmail
 }: {
     skipCheckVerifyEmail?: boolean;
 } = {}): Promise<GetUserResponse | null> {
@@ -14,7 +14,7 @@ export async function verifySession({
     try {
         const res = await internal.get<AxiosResponse<GetUserResponse>>(
             "/user",
-            await authCookieHeader(),
+            await authCookieHeader()
         );
 
         const user = res.data.data;

src/lib/cleanRedirect.ts

@@ -6,7 +6,8 @@ type PatternConfig = {
 const patterns: PatternConfig[] = [
     { name: "Invite Token", regex: /^\/invite\?token=[a-zA-Z0-9-]+$/ },
     { name: "Setup", regex: /^\/setup$/ },
-    { name: "Resource Auth Portal", regex: /^\/auth\/resource\/\d+$/ }
+    { name: "Resource Auth Portal", regex: /^\/auth\/resource\/\d+$/ },
+    { name: "Device Login", regex: /^\/auth\/login\/device$/ }
 ];
 
 export function cleanRedirect(input: string, fallback?: string): string {

src/lib/pullEnv.ts

@@ -50,14 +50,16 @@ export function pullEnv(): Env {
             hideSupporterKey:
                 process.env.HIDE_SUPPORTER_KEY === "true" ? true : false,
             usePangolinDns:
-                process.env.USE_PANGOLIN_DNS === "true"
-                    ? true
-                    : false
+                process.env.USE_PANGOLIN_DNS === "true" ? true : false
         },
 
         branding: {
             appName: process.env.BRANDING_APP_NAME as string,
             background_image_path: process.env.BACKGROUND_IMAGE_PATH as string,
+            hideAuthLayoutFooter:
+                process.env.BRANDING_HIDE_AUTH_LAYOUT_FOOTER === "true"
+                    ? true
+                    : false,
             logo: {
                 lightPath: process.env.BRANDING_LOGO_LIGHT_PATH as string,
                 darkPath: process.env.BRANDING_LOGO_DARK_PATH as string,

src/lib/types/env.ts

@@ -33,6 +33,7 @@ export type Env = {
     branding: {
         appName?: string;
         background_image_path?: string;
+        hideAuthLayoutFooter?: boolean;
         logo?: {
             lightPath?: string;
             darkPath?: string;