Merge branch 'cli-web-auth' into clients-user

messages/en-US.json

@@ -2081,5 +2081,26 @@
     "supportSend": "Send",
     "supportMessageSent": "Message Sent!",
     "supportWillContact": "We'll be in touch shortly!",
-    "selectLogRetention": "Select log retention"
+    "selectLogRetention": "Select log retention",
+    "terms": "Terms",
+    "privacy": "Privacy",
+    "security": "Security",
+    "docs": "Docs",
+    "deviceActivation": "Device activation",
+    "deviceCodeInvalidFormat": "Code must be 9 characters (e.g., A1AJ-N5JD)",
+    "deviceCodeInvalidOrExpired": "Invalid or expired code",
+    "deviceCodeVerifyFailed": "Failed to verify device code",
+    "signedInAs": "Signed in as",
+    "deviceCodeEnterPrompt": "Enter the code displayed on your device",
+    "continue": "Continue",
+    "deviceUnknownLocation": "Unknown location",
+    "deviceAuthorizationRequested": "This authorization was requested from {location} on {date}. Make sure you trust this device as it will get access to your account.",
+    "deviceLabel": "Device: {deviceName}",
+    "deviceWantsAccess": "wants to access your account",
+    "deviceExistingAccess": "Existing access:",
+    "deviceFullAccess": "Full access to your account",
+    "deviceOrganizationsAccess": "Access to all organizations your account has access to",
+    "deviceAuthorize": "Authorize {applicationName}",
+    "deviceConnected": "Device Connected!",
+    "deviceAuthorizedMessage": "Your device is authorized to access your account."
 }

server/db/sqlite/schema/schema.ts

@@ -1,7 +1,6 @@
 import { randomUUID } from "crypto";
 import { InferSelectModel } from "drizzle-orm";
 import { sqliteTable, text, integer, index } from "drizzle-orm/sqlite-core";
-import { boolean } from "yargs";
 
 export const domains = sqliteTable("domains", {
     domainId: text("domainId").primaryKey(),
@@ -813,6 +812,19 @@ export const requestAuditLog = sqliteTable(
     ]
 );
 
+export const deviceWebAuthCodes = sqliteTable("deviceWebAuthCodes", {
+    codeId: integer("codeId").primaryKey({ autoIncrement: true }),
+    code: text("code").notNull().unique(),
+    ip: text("ip"),
+    city: text("city"),
+    deviceName: text("deviceName"),
+    applicationName: text("applicationName").notNull(),
+    expiresAt: integer("expiresAt").notNull(),
+    createdAt: integer("createdAt").notNull(),
+    verified: integer("verified", { mode: "boolean" }).notNull().default(false),
+    userId: text("userId").references(() => users.userId, { onDelete: "cascade" })
+});
+
 export type Org = InferSelectModel<typeof orgs>;
 export type User = InferSelectModel<typeof users>;
 export type Site = InferSelectModel<typeof sites>;
@@ -870,3 +882,4 @@ export type LicenseKey = InferSelectModel<typeof licenseKey>;
 export type SecurityKey = InferSelectModel<typeof securityKeys>;
 export type WebauthnChallenge = InferSelectModel<typeof webauthnChallenge>;
 export type RequestAuditLog = InferSelectModel<typeof requestAuditLog>;
+export type DeviceWebAuthCode = InferSelectModel<typeof deviceWebAuthCodes>;

server/middlewares/verifySession.ts

@@ -1,10 +1,5 @@
 import { NextFunction, Response } from "express";
 import ErrorResponse from "@server/types/ErrorResponse";
-import { db } from "@server/db";
-import { users } from "@server/db";
-import { eq } from "drizzle-orm";
-import createHttpError from "http-errors";
-import HttpCode from "@server/types/HttpCode";
 import { verifySession } from "@server/auth/sessions/verifySession";
 import { unauthorized } from "@server/auth/unauthorizedResponse";
 
@@ -18,19 +13,8 @@ export const verifySessionMiddleware = async (
         return next(unauthorized());
     }
 
-    const existingUser = await db
-        .select()
-        .from(users)
-        .where(eq(users.userId, user.userId));
-
-    if (!existingUser || !existingUser[0]) {
-        return next(
-            createHttpError(HttpCode.BAD_REQUEST, "User does not exist")
-        );
-    }
-
-    req.user = existingUser[0];
+    req.user = user;
     req.session = session;
 
-    next();
+    return next();
 };

server/private/lib/config.ts

@@ -45,6 +45,12 @@ export class PrivateConfig {
 
         this.rawPrivateConfig = parsedPrivateConfig;
 
+        if (this.rawPrivateConfig.branding?.hide_auth_layout_footer) {
+            process.env.HIDE_AUTH_LAYOUT_FOOTER = JSON.stringify(
+                this.rawPrivateConfig.branding?.hide_auth_layout_footer
+            );
+        }
+
         if (this.rawPrivateConfig.branding?.colors) {
             process.env.BRANDING_COLORS = JSON.stringify(
                 this.rawPrivateConfig.branding?.colors

server/private/lib/readConfigFile.ts

@@ -124,6 +124,7 @@ export const privateConfigSchema = z.object({
                     })
                 )
                 .optional(),
+            hide_auth_layout_footer: z.boolean().optional().default(false),
             login_page: z
                 .object({
                     subtitle_text: z.string().optional(),

server/routers/auth/index.ts

@@ -13,4 +13,7 @@ export * from "./initialSetupComplete";
 export * from "./validateSetupToken";
 export * from "./changePassword";
 export * from "./checkResourceSession";
-export * from "./securityKey";
+export * from "./securityKey";
+export * from "./startDeviceWebAuth";
+export * from "./verifyDeviceWebAuth";
+export * from "./pollDeviceWebAuth";

server/routers/auth/pollDeviceWebAuth.ts

@@ -0,0 +1,178 @@
+import { Request, Response, NextFunction } from "express";
+import createHttpError from "http-errors";
+import { z } from "zod";
+import { fromError } from "zod-validation-error";
+import HttpCode from "@server/types/HttpCode";
+import logger from "@server/logger";
+import { response } from "@server/lib/response";
+import { db, deviceWebAuthCodes } from "@server/db";
+import { eq, and, gt } from "drizzle-orm";
+import {
+    createSession,
+    generateSessionToken
+} from "@server/auth/sessions/app";
+import { encodeHexLowerCase } from "@oslojs/encoding";
+import { sha256 } from "@oslojs/crypto/sha2";
+
+const paramsSchema = z.object({
+    code: z.string().min(1, "Code is required")
+});
+
+export type PollDeviceWebAuthParams = z.infer<typeof paramsSchema>;
+
+// Helper function to hash device code before querying database
+function hashDeviceCode(code: string): string {
+    return encodeHexLowerCase(
+        sha256(new TextEncoder().encode(code))
+    );
+}
+
+export type PollDeviceWebAuthResponse = {
+    verified: boolean;
+    token?: string;
+};
+
+// Helper function to extract IP from request (same as in startDeviceWebAuth)
+function extractIpFromRequest(req: Request): string | undefined {
+    const ip = req.ip || req.socket.remoteAddress;
+    if (!ip) {
+        return undefined;
+    }
+
+    // Handle IPv6 format [::1] or IPv4 format
+    if (ip.startsWith("[") && ip.includes("]")) {
+        const ipv6Match = ip.match(/\[(.*?)\]/);
+        if (ipv6Match) {
+            return ipv6Match[1];
+        }
+    }
+
+    // Handle IPv4 with port (split at last colon)
+    const lastColonIndex = ip.lastIndexOf(":");
+    if (lastColonIndex !== -1) {
+        return ip.substring(0, lastColonIndex);
+    }
+
+    return ip;
+}
+
+export async function pollDeviceWebAuth(
+    req: Request,
+    res: Response,
+    next: NextFunction
+): Promise<any> {
+    const parsedParams = paramsSchema.safeParse(req.params);
+
+    if (!parsedParams.success) {
+        return next(
+            createHttpError(
+                HttpCode.BAD_REQUEST,
+                fromError(parsedParams.error).toString()
+            )
+        );
+    }
+
+    try {
+        const { code } = parsedParams.data;
+        const now = Date.now();
+        const requestIp = extractIpFromRequest(req);
+
+        // Hash the code before querying
+        const hashedCode = hashDeviceCode(code);
+
+        // Find the code in the database
+        const [deviceCode] = await db
+            .select()
+            .from(deviceWebAuthCodes)
+            .where(eq(deviceWebAuthCodes.code, hashedCode))
+            .limit(1);
+
+        if (!deviceCode) {
+            return response<PollDeviceWebAuthResponse>(res, {
+                data: {
+                    verified: false
+                },
+                success: true,
+                error: false,
+                message: "Code not found",
+                status: HttpCode.OK
+            });
+        }
+
+        // Check if code is expired
+        if (deviceCode.expiresAt <= now) {
+            return response<PollDeviceWebAuthResponse>(res, {
+                data: {
+                    verified: false
+                },
+                success: true,
+                error: false,
+                message: "Code expired",
+                status: HttpCode.OK
+            });
+        }
+
+        // Check if code is verified
+        if (!deviceCode.verified) {
+            return response<PollDeviceWebAuthResponse>(res, {
+                data: {
+                    verified: false
+                },
+                success: true,
+                error: false,
+                message: "Code not yet verified",
+                status: HttpCode.OK
+            });
+        }
+
+        // Check if IP matches
+        if (!requestIp || !deviceCode.ip || requestIp !== deviceCode.ip) {
+            return next(
+                createHttpError(
+                    HttpCode.FORBIDDEN,
+                    "IP address does not match"
+                )
+            );
+        }
+
+        // Check if userId is set (should be set when verified)
+        if (!deviceCode.userId) {
+            logger.error("Device code is verified but userId is missing", { codeId: deviceCode.codeId });
+            return next(
+                createHttpError(
+                    HttpCode.INTERNAL_SERVER_ERROR,
+                    "Invalid code state"
+                )
+            );
+        }
+
+        // Generate session token
+        const token = generateSessionToken();
+        await createSession(token, deviceCode.userId);
+
+        // Delete the code after successful exchange for a token
+        await db
+            .delete(deviceWebAuthCodes)
+            .where(eq(deviceWebAuthCodes.codeId, deviceCode.codeId));
+
+        return response<PollDeviceWebAuthResponse>(res, {
+            data: {
+                verified: true,
+                token
+            },
+            success: true,
+            error: false,
+            message: "Code verified and session created",
+            status: HttpCode.OK
+        });
+    } catch (e) {
+        logger.error(e);
+        return next(
+            createHttpError(
+                HttpCode.INTERNAL_SERVER_ERROR,
+                "Failed to poll device code"
+            )
+        );
+    }
+}
+

server/routers/auth/setServerAdmin.ts

@@ -13,7 +13,7 @@ import { eq, and } from "drizzle-orm";
 import { UserType } from "@server/types/UserTypes";
 import moment from "moment";
 
-export const bodySchema = z.object({
+const bodySchema = z.object({
     email: z.string().toLowerCase().email(),
     password: passwordSchema,
     setupToken: z.string().min(1, "Setup token is required")

server/routers/auth/startDeviceWebAuth.ts

@@ -0,0 +1,153 @@
+import { Request, Response, NextFunction } from "express";
+import createHttpError from "http-errors";
+import { z } from "zod";
+import { fromError } from "zod-validation-error";
+import HttpCode from "@server/types/HttpCode";
+import logger from "@server/logger";
+import { response } from "@server/lib/response";
+import { db, deviceWebAuthCodes } from "@server/db";
+import { alphabet, generateRandomString } from "oslo/crypto";
+import { createDate } from "oslo";
+import { TimeSpan } from "oslo";
+import { maxmindLookup } from "@server/db/maxmind";
+import { encodeHexLowerCase } from "@oslojs/encoding";
+import { sha256 } from "@oslojs/crypto/sha2";
+
+const bodySchema = z.object({
+    deviceName: z.string().optional(),
+    applicationName: z.string().min(1, "Application name is required")
+}).strict();
+
+export type StartDeviceWebAuthBody = z.infer<typeof bodySchema>;
+
+export type StartDeviceWebAuthResponse = {
+    code: string;
+    expiresAt: number;
+};
+
+// Helper function to generate device code in format A1AJ-N5JD
+function generateDeviceCode(): string {
+    const part1 = generateRandomString(4, alphabet("A-Z", "0-9"));
+    const part2 = generateRandomString(4, alphabet("A-Z", "0-9"));
+    return `${part1}-${part2}`;
+}
+
+// Helper function to hash device code before storing in database
+function hashDeviceCode(code: string): string {
+    return encodeHexLowerCase(
+        sha256(new TextEncoder().encode(code))
+    );
+}
+
+// Helper function to extract IP from request
+function extractIpFromRequest(req: Request): string | undefined {
+    const ip = req.ip || req.socket.remoteAddress;
+    if (!ip) {
+        return undefined;
+    }
+
+    // Handle IPv6 format [::1] or IPv4 format
+    if (ip.startsWith("[") && ip.includes("]")) {
+        const ipv6Match = ip.match(/\[(.*?)\]/);
+        if (ipv6Match) {
+            return ipv6Match[1];
+        }
+    }
+
+    // Handle IPv4 with port (split at last colon)
+    const lastColonIndex = ip.lastIndexOf(":");
+    if (lastColonIndex !== -1) {
+        return ip.substring(0, lastColonIndex);
+    }
+
+    return ip;
+}
+
+// Helper function to get city from IP (if available)
+async function getCityFromIp(ip: string): Promise<string | undefined> {
+    try {
+        if (!maxmindLookup) {
+            return undefined;
+        }
+
+        const result = maxmindLookup.get(ip);
+        if (!result) {
+            return undefined;
+        }
+
+        // MaxMind CountryResponse doesn't include city by default
+        // If city data is available, it would be in result.city?.names?.en
+        // But since we're using CountryResponse type, we'll just return undefined
+        // The user said "don't do this if not easy", so we'll skip city for now
+        return undefined;
+    } catch (error) {
+        logger.debug("Failed to get city from IP", error);
+        return undefined;
+    }
+}
+
+export async function startDeviceWebAuth(
+    req: Request,
+    res: Response,
+    next: NextFunction
+): Promise<any> {
+    const parsedBody = bodySchema.safeParse(req.body);
+
+    if (!parsedBody.success) {
+        return next(
+            createHttpError(
+                HttpCode.BAD_REQUEST,
+                fromError(parsedBody.error).toString()
+            )
+        );
+    }
+
+    try {
+        const { deviceName, applicationName } = parsedBody.data;
+
+        // Generate device code
+        const code = generateDeviceCode();
+
+        // Hash the code before storing in database
+        const hashedCode = hashDeviceCode(code);
+
+        // Extract IP from request
+        const ip = extractIpFromRequest(req);
+
+        // Get city (optional, may return undefined)
+        const city = ip ? await getCityFromIp(ip) : undefined;
+
+        // Set expiration to 5 minutes from now
+        const expiresAt = createDate(new TimeSpan(5, "m")).getTime();
+
+        // Insert into database (store hashed code)
+        await db.insert(deviceWebAuthCodes).values({
+            code: hashedCode,
+            ip: ip || null,
+            city: city || null,
+            deviceName: deviceName || null,
+            applicationName,
+            expiresAt,
+            createdAt: Date.now()
+        });
+
+        return response<StartDeviceWebAuthResponse>(res, {
+            data: {
+                code,
+                expiresAt
+            },
+            success: true,
+            error: false,
+            message: "Device web auth code generated",
+            status: HttpCode.OK
+        });
+    } catch (e) {
+        logger.error(e);
+        return next(
+            createHttpError(
+                HttpCode.INTERNAL_SERVER_ERROR,
+                "Failed to start device web auth"
+            )
+        );
+    }
+}

server/routers/auth/verifyDeviceWebAuth.ts

@@ -0,0 +1,138 @@
+import { Request, Response, NextFunction } from "express";
+import createHttpError from "http-errors";
+import { z } from "zod";
+import { fromError } from "zod-validation-error";
+import HttpCode from "@server/types/HttpCode";
+import logger from "@server/logger";
+import { response } from "@server/lib/response";
+import { db, deviceWebAuthCodes } from "@server/db";
+import { eq, and, gt } from "drizzle-orm";
+import { encodeHexLowerCase } from "@oslojs/encoding";
+import { sha256 } from "@oslojs/crypto/sha2";
+
+const bodySchema = z.object({
+    code: z.string().min(1, "Code is required"),
+    verify: z.boolean().optional().default(false) // If false, just check and return metadata
+}).strict();
+
+// Helper function to hash device code before querying database
+function hashDeviceCode(code: string): string {
+    return encodeHexLowerCase(
+        sha256(new TextEncoder().encode(code))
+    );
+}
+
+export type VerifyDeviceWebAuthBody = z.infer<typeof bodySchema>;
+
+export type VerifyDeviceWebAuthResponse = {
+    success: boolean;
+    message: string;
+    metadata?: {
+        ip: string | null;
+        city: string | null;
+        deviceName: string | null;
+        applicationName: string;
+        createdAt: number;
+    };
+};
+
+export async function verifyDeviceWebAuth(
+    req: Request,
+    res: Response,
+    next: NextFunction
+): Promise<any> {
+    const parsedBody = bodySchema.safeParse(req.body);
+
+    if (!parsedBody.success) {
+        return next(
+            createHttpError(
+                HttpCode.BAD_REQUEST,
+                fromError(parsedBody.error).toString()
+            )
+        );
+    }
+
+    try {
+        const { code, verify } = parsedBody.data;
+        const now = Date.now();
+
+        logger.debug("Verifying device web auth code:", { code });
+
+        // Hash the code before querying
+        const hashedCode = hashDeviceCode(code);
+
+        // Find the code in the database that is not expired and not already verified
+        const [deviceCode] = await db
+            .select()
+            .from(deviceWebAuthCodes)
+            .where(
+                and(
+                    eq(deviceWebAuthCodes.code, hashedCode),
+                    gt(deviceWebAuthCodes.expiresAt, now),
+                    eq(deviceWebAuthCodes.verified, false)
+                )
+            )
+            .limit(1);
+
+        logger.debug("Device code lookup result:", deviceCode);
+
+        if (!deviceCode) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    "Invalid, expired, or already verified code"
+                )
+            );
+        }
+
+        // If verify is false, just return metadata without verifying
+        if (!verify) {
+            return response<VerifyDeviceWebAuthResponse>(res, {
+                data: {
+                    success: true,
+                    message: "Code is valid",
+                    metadata: {
+                        ip: deviceCode.ip,
+                        city: deviceCode.city,
+                        deviceName: deviceCode.deviceName,
+                        applicationName: deviceCode.applicationName,
+                        createdAt: deviceCode.createdAt
+                    }
+                },
+                success: true,
+                error: false,
+                message: "Code validation successful",
+                status: HttpCode.OK
+            });
+        }
+
+        // Update the code to mark it as verified and store the user who verified it
+        await db
+            .update(deviceWebAuthCodes)
+            .set({
+                verified: true,
+                userId: req.user!.userId
+            })
+            .where(eq(deviceWebAuthCodes.codeId, deviceCode.codeId));
+
+        return response<VerifyDeviceWebAuthResponse>(res, {
+            data: {
+                success: true,
+                message: "Device code verified successfully"
+            },
+            success: true,
+            error: false,
+            message: "Device code verified successfully",
+            status: HttpCode.OK
+        });
+    } catch (e) {
+        logger.error(e);
+        return next(
+            createHttpError(
+                HttpCode.INTERNAL_SERVER_ERROR,
+                "Failed to verify device code"
+            )
+        );
+    }
+}
+

server/routers/external.ts

@@ -1242,4 +1242,52 @@ authRouter.delete(
         store: createStore()
     }),
     auth.deleteSecurityKey
-);
+);
+
+authRouter.post(
+    "/device-web-auth/start",
+    rateLimit({
+        windowMs: 15 * 60 * 1000, // 15 minutes
+        max: 30, // Allow 30 device auth code requests per 15 minutes per IP
+        keyGenerator: (req) =>
+            `deviceWebAuthStart:${ipKeyGenerator(req.ip || "")}`,
+        handler: (req, res, next) => {
+            const message = `You can only request a device auth code ${30} times every ${15} minutes. Please try again later.`;
+            return next(createHttpError(HttpCode.TOO_MANY_REQUESTS, message));
+        },
+        store: createStore()
+    }),
+    auth.startDeviceWebAuth
+);
+
+authRouter.get(
+    "/device-web-auth/poll/:code",
+    rateLimit({
+        windowMs: 60 * 1000, // 1 minute
+        max: 60, // Allow 60 polling requests per minute per IP (poll every second)
+        keyGenerator: (req) =>
+            `deviceWebAuthPoll:${ipKeyGenerator(req.ip || "")}:${req.params.code}`,
+        handler: (req, res, next) => {
+            const message = `You can only poll a device auth code ${60} times per minute. Please try again later.`;
+            return next(createHttpError(HttpCode.TOO_MANY_REQUESTS, message));
+        },
+        store: createStore()
+    }),
+    auth.pollDeviceWebAuth
+);
+
+authenticated.post(
+    "/device-web-auth/verify",
+    rateLimit({
+        windowMs: 15 * 60 * 1000, // 15 minutes
+        max: 50, // Allow 50 verification attempts per 15 minutes per user
+        keyGenerator: (req) =>
+            `deviceWebAuthVerify:${req.user?.userId || ipKeyGenerator(req.ip || "")}`,
+        handler: (req, res, next) => {
+            const message = `You can only verify a device auth code ${50} times every ${15} minutes. Please try again later.`;
+            return next(createHttpError(HttpCode.TOO_MANY_REQUESTS, message));
+        },
+        store: createStore()
+    }),
+    auth.verifyDeviceWebAuth
+);

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/[orgId]/settings/resources/[niceId]/proxy/page.tsx

@@ -1052,7 +1052,7 @@ export default function ReverseProxyTargets(props: {
 
                 return (
                     <div className="flex items-center w-full">
-                        <div className="flex items-center w-full justify-start py-0 space-x-2 px-0 cursor-default border border-input shadow-2xs rounded-md">
+                        <div className="flex items-center w-full justify-start py-0 space-x-2 px-0 cursor-default border border-input rounded-md">
                             {selectedSite &&
                                 selectedSite.type === "newt" &&
                                 (() => {

src/app/[orgId]/settings/resources/create/page.tsx

@@ -946,7 +946,7 @@ export default function Page() {
 
                 return (
                     <div className="flex items-center w-full">
-                        <div className="flex items-center w-full justify-start py-0 space-x-2 px-0 cursor-default border border-input shadow-2xs rounded-md">
+                        <div className="flex items-center w-full justify-start py-0 space-x-2 px-0 cursor-default border border-input rounded-md">
                             {selectedSite &&
                                 selectedSite.type === "newt" &&
                                 (() => {

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-12 w-12 text-green-500" />
+                    <div className="space-y-2">
+                        <h3 className="text-xl font-bold text-center">
+                            {t("deviceConnected")}
+                        </h3>
+                        <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/Layout.tsx

@@ -72,7 +72,7 @@ export async function Layout({
                 <main className="flex-1 overflow-y-auto p-3 md:p-6 w-full">
                     <div className={cn(
                         "container mx-auto max-w-12xl mb-12",
-                        showHeader && "md:pt-20" // Add top padding only on desktop to account for fixed header
+                        showHeader && "md:pt-16" // Add top padding only on desktop to account for fixed header
                     )}>
                         {children}
                     </div>

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/OrgSelector.tsx

@@ -54,7 +54,6 @@ export function OrgSelector({ orgId, orgs, isCollapsed = false }: OrgSelectorPro
                     role="combobox"
                     aria-expanded={open}
                     className={cn(
-                        "shadow-2xs",
                         isCollapsed ? "w-8 h-8" : "w-full h-12 px-3 py-4"
                     )}
                 >

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/components/ui/button.tsx

@@ -11,22 +11,22 @@ const buttonVariants = cva(
         variants: {
             variant: {
                 default:
-                    "bg-primary text-primary-foreground hover:bg-primary/90 shadow-2xs",
+                    "bg-primary text-primary-foreground hover:bg-primary/90",
                 destructive:
-                    "bg-destructive text-white dark:text-destructive-foreground hover:bg-destructive/90 shadow-2xs",
+                    "bg-destructive text-white dark:text-destructive-foreground hover:bg-destructive/90 ",
                 outline:
-                    "border border-input bg-card hover:bg-accent hover:text-accent-foreground shadow-2xs",
+                    "border border-input bg-card hover:bg-accent hover:text-accent-foreground ",
                 outlinePrimary:
-                    "border border-primary bg-card hover:bg-primary/10 text-primary shadow-2xs",
+                    "border border-primary bg-card hover:bg-primary/10 text-primary ",
                 secondary:
-                    "bg-secondary border border-input border text-secondary-foreground hover:bg-secondary/80 shadow-2xs",
+                    "bg-secondary border border-input border text-secondary-foreground hover:bg-secondary/80 ",
                 ghost: "hover:bg-accent hover:text-accent-foreground",
                 squareOutlinePrimary:
-                    "border border-primary bg-card hover:bg-primary/10 text-primary rounded-md shadow-2xs",
+                    "border border-primary bg-card hover:bg-primary/10 text-primary rounded-md ",
                 squareOutline:
-                    "border border-input bg-card hover:bg-accent hover:text-accent-foreground rounded-md shadow-2xs",
+                    "border border-input bg-card hover:bg-accent hover:text-accent-foreground rounded-md ",
                 squareDefault:
-                    "bg-primary text-primary-foreground hover:bg-primary/90 rounded-md shadow-2xs",
+                    "bg-primary text-primary-foreground hover:bg-primary/90 rounded-md ",
                 text: "",
                 link: "text-primary underline-offset-4 hover:underline"
             },

src/components/ui/calendar.tsx

@@ -70,7 +70,7 @@ function Calendar({
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
-          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 relative rounded-md border",
           defaultClassNames.dropdown_root
         ),
         dropdown: cn(
@@ -201,7 +201,7 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className
       )}

src/components/ui/input-otp.tsx

@@ -55,7 +55,7 @@ function InputOTPSlot({
             data-slot="input-otp-slot"
             data-active={isActive}
             className={cn(
-                "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-2xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+                "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10",
                 className
             )}
             {...props}

src/components/ui/input.tsx

@@ -16,8 +16,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
                     type={showPassword ? "text" : "password"}
                     data-slot="input"
                     className={cn(
-                        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm shadow-2xs",
-                        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+                        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+                        "focus-visible:border-ring focus-visible:ring-ring/50",
                         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
                         className
                     )}
@@ -43,8 +43,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
                 type={type}
                 data-slot="input"
                 className={cn(
-                    "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm shadow-2xs",
-                    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+                    "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+                    "focus-visible:border-ring focus-visible:ring-ring/50",
                     "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
                     className
                 )}

src/components/ui/scroll-area.tsx

@@ -18,7 +18,7 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:outline-1"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>

src/components/ui/select.tsx

@@ -36,7 +36,7 @@ function SelectTrigger({
             data-slot="select-trigger"
             data-size={size}
             className={cn(
-                "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-2xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 w-full",
+                "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 w-full",
                 className
             )}
             {...props}

src/components/ui/switch.tsx

@@ -12,7 +12,7 @@ function Switch({
         <SwitchPrimitive.Root
             data-slot="switch"
             className={cn(
-                "cursor-pointer peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+                "cursor-pointer peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50",
                 className
             )}
             {...props}

src/components/ui/tabs.tsx

@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      "inline-flex h-9 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
       className
     )}
     {...props}
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground cursor-pointer",
+      "inline-flex h-full items-center justify-center whitespace-nowrap rounded-sm px-3 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground cursor-pointer",
       className
     )}
     {...props}

src/components/ui/textarea.tsx

@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-card px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-[color,box-shadow]",
+          "flex min-h-[80px] w-full rounded-md border border-input bg-card px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-ring/50 transition-[color,box-shadow]",
           className
         )}
         ref={ref}

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;