add my-device and force login

This commit is contained in:
miloschwartz
2025-11-25 10:51:36 -05:00
parent d23f61d995
commit ac68dbd545
22 changed files with 472 additions and 107 deletions

View File

@@ -237,10 +237,11 @@ export type SecurityKeyVerifyResponse = {
};
export async function loginProxy(
request: LoginRequest
request: LoginRequest,
forceLogin?: boolean
): Promise<ResponseT<LoginResponse>> {
const serverPort = process.env.SERVER_EXTERNAL_PORT;
const url = `http://localhost:${serverPort}/api/v1/auth/login`;
const url = `http://localhost:${serverPort}/api/v1/auth/login${forceLogin ? "?forceLogin=true" : ""}`;
console.log("Making login request to:", url);
@@ -248,10 +249,11 @@ export async function loginProxy(
}
export async function securityKeyStartProxy(
request: SecurityKeyStartRequest
request: SecurityKeyStartRequest,
forceLogin?: boolean
): Promise<ResponseT<SecurityKeyStartResponse>> {
const serverPort = process.env.SERVER_EXTERNAL_PORT;
const url = `http://localhost:${serverPort}/api/v1/auth/security-key/authenticate/start`;
const url = `http://localhost:${serverPort}/api/v1/auth/security-key/authenticate/start${forceLogin ? "?forceLogin=true" : ""}`;
console.log("Making security key start request to:", url);
@@ -260,10 +262,11 @@ export async function securityKeyStartProxy(
export async function securityKeyVerifyProxy(
request: SecurityKeyVerifyRequest,
tempSessionId: string
tempSessionId: string,
forceLogin?: boolean
): Promise<ResponseT<SecurityKeyVerifyResponse>> {
const serverPort = process.env.SERVER_EXTERNAL_PORT;
const url = `http://localhost:${serverPort}/api/v1/auth/security-key/authenticate/verify`;
const url = `http://localhost:${serverPort}/api/v1/auth/security-key/authenticate/verify${forceLogin ? "?forceLogin=true" : ""}`;
console.log("Making security key verify request to:", url);
@@ -407,10 +410,19 @@ export async function validateOidcUrlCallbackProxy(
export async function generateOidcUrlProxy(
idpId: number,
redirect: string,
orgId?: string
orgId?: string,
forceLogin?: boolean
): Promise<ResponseT<GenerateOidcUrlResponse>> {
const serverPort = process.env.SERVER_EXTERNAL_PORT;
const url = `http://localhost:${serverPort}/api/v1/auth/idp/${idpId}/oidc/generate-url${orgId ? `?orgId=${orgId}` : ""}`;
const queryParams = new URLSearchParams();
if (orgId) {
queryParams.append("orgId", orgId);
}
if (forceLogin) {
queryParams.append("forceLogin", "true");
}
const queryString = queryParams.toString();
const url = `http://localhost:${serverPort}/api/v1/auth/idp/${idpId}/oidc/generate-url${queryString ? `?${queryString}` : ""}`;
console.log("Making OIDC URL generation request to:", url);

View File

@@ -5,13 +5,32 @@ import { cache } from "react";
export const dynamic = "force-dynamic";
export default async function DeviceLoginPage() {
const getUser = cache(verifySession);
const user = await getUser();
type Props = {
searchParams: Promise<{ code?: string }>;
};
export default async function DeviceLoginPage({ searchParams }: Props) {
const user = await verifySession({ forceLogin: true });
const params = await searchParams;
const code = params.code || "";
console.log("user", user);
if (!user) {
redirect("/auth/login?redirect=/auth/login/device");
const redirectDestination = code
? `/auth/login/device?code=${encodeURIComponent(code)}`
: "/auth/login/device";
redirect(`/auth/login?forceLogin=true&redirect=${encodeURIComponent(redirectDestination)}`);
}
return <DeviceLoginForm userEmail={user?.email || ""} />;
const userName = user?.name || user?.username || "";
return (
<DeviceLoginForm
userEmail={user?.email || ""}
userName={userName}
initialCode={code}
/>
);
}

View File

@@ -25,12 +25,14 @@ export default async function Page(props: {
const user = await getUser({ skipCheckVerifyEmail: true });
const isInvite = searchParams?.redirect?.includes("/invite");
const forceLoginParam = searchParams?.forceLogin;
const forceLogin = forceLoginParam === "true";
const env = pullEnv();
const signUpDisabled = env.flags.disableSignupWithoutInvite;
if (user) {
if (user && !forceLogin) {
redirect("/");
}
@@ -96,7 +98,7 @@ export default async function Page(props: {
</div>
)}
<DashboardLoginForm redirect={redirectUrl} idps={loginIdps} />
<DashboardLoginForm redirect={redirectUrl} idps={loginIdps} forceLogin={forceLogin} />
{(!signUpDisabled || isInvite) && (
<p className="text-center text-muted-foreground mt-4">

View File

@@ -21,11 +21,13 @@ import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
type DashboardLoginFormProps = {
redirect?: string;
idps?: LoginFormIDP[];
forceLogin?: boolean;
};
export default function DashboardLoginForm({
redirect,
idps
idps,
forceLogin
}: DashboardLoginFormProps) {
const router = useRouter();
const { env } = useEnvContext();
@@ -57,6 +59,7 @@ export default function DashboardLoginForm({
<LoginForm
redirect={redirect}
idps={idps}
forceLogin={forceLogin}
onLogin={(redirectUrl) => {
if (redirectUrl) {
const safe = cleanRedirect(redirectUrl);

View File

@@ -30,10 +30,12 @@ import { DeviceAuthConfirmation } from "@/components/DeviceAuthConfirmation";
import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
import BrandingLogo from "./BrandingLogo";
import { useTranslations } from "next-intl";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
const createFormSchema = (t: (key: string) => string) => z.object({
code: z.string().length(8, t("deviceCodeInvalidFormat"))
});
const createFormSchema = (t: (key: string) => string) =>
z.object({
code: z.string().length(8, t("deviceCodeInvalidFormat"))
});
type DeviceAuthMetadata = {
ip: string | null;
@@ -45,9 +47,15 @@ type DeviceAuthMetadata = {
type DeviceLoginFormProps = {
userEmail: string;
userName?: string;
initialCode?: string;
};
export default function DeviceLoginForm({ userEmail }: DeviceLoginFormProps) {
export default function DeviceLoginForm({
userEmail,
userName,
initialCode = ""
}: DeviceLoginFormProps) {
const router = useRouter();
const { env } = useEnvContext();
const api = createApiClient({ env });
@@ -63,7 +71,7 @@ export default function DeviceLoginForm({ userEmail }: DeviceLoginFormProps) {
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
code: ""
code: initialCode.replace(/-/g, "").toUpperCase()
}
});
@@ -77,10 +85,15 @@ export default function DeviceLoginForm({ userEmail }: DeviceLoginFormProps) {
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
});
const res = await api.post(
"/device-web-auth/verify?forceLogin=true",
{
code: data.code.toUpperCase(),
verify: false
}
);
await new Promise((resolve) => setTimeout(resolve, 500)); // artificial delay for better UX
if (res.data.success && res.data.data.metadata) {
setMetadata(res.data.data.metadata);
@@ -109,6 +122,8 @@ export default function DeviceLoginForm({ userEmail }: DeviceLoginFormProps) {
verify: true
});
await new Promise((resolve) => setTimeout(resolve, 500)); // artificial delay for better UX
// Redirect to success page
router.push("/auth/login/device/success");
} catch (e: any) {
@@ -136,6 +151,30 @@ export default function DeviceLoginForm({ userEmail }: DeviceLoginFormProps) {
setError(null);
}
const profileLabel = (userName || userEmail || "").trim();
const profileInitial = profileLabel
? profileLabel.charAt(0).toUpperCase()
: "?";
async function handleUseDifferentAccount() {
try {
await api.post("/auth/logout");
} catch (logoutError) {
console.error(
"Failed to logout before switching account",
logoutError
);
} finally {
const currentSearch =
typeof window !== "undefined" ? window.location.search : "";
const redirectTarget = `/auth/login/device${currentSearch || ""}`;
router.push(
`/auth/login?forceLogin=true&redirect=${encodeURIComponent(redirectTarget)}`
);
router.refresh();
}
}
if (metadata) {
return (
<DeviceAuthConfirmation
@@ -154,13 +193,36 @@ export default function DeviceLoginForm({ userEmail }: DeviceLoginFormProps) {
<BrandingLogo height={logoHeight} width={logoWidth} />
</div>
<div className="text-center space-y-1 pt-3">
<p className="text-muted-foreground">{t("deviceActivation")}</p>
<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 className="flex items-center gap-3 p-3 mb-4 border rounded-md">
<Avatar className="h-10 w-10">
<AvatarFallback>{profileInitial}</AvatarFallback>
</Avatar>
<div className="flex-1 space-y-1">
<div>
<p className="text-sm font-medium">
{profileLabel || userEmail}
</p>
<p className="text-xs text-muted-foreground break-all">
{t(
"deviceLoginDeviceRequestingAccessToAccount"
)}
</p>
</div>
<Button
type="button"
variant="link"
className="h-auto px-0 text-xs"
onClick={handleUseDifferentAccount}
>
{t("deviceLoginUseDifferentAccount")}
</Button>
</div>
</div>
<Form {...form}>

View File

@@ -61,13 +61,15 @@ type LoginFormProps = {
onLogin?: (redirectUrl?: string) => void | Promise<void>;
idps?: LoginFormIDP[];
orgId?: string;
forceLogin?: boolean;
};
export default function LoginForm({
redirect,
onLogin,
idps,
orgId
orgId,
forceLogin
}: LoginFormProps) {
const router = useRouter();
@@ -141,7 +143,7 @@ export default function LoginForm({
try {
// Start WebAuthn authentication without email
const startResponse = await securityKeyStartProxy({});
const startResponse = await securityKeyStartProxy({}, forceLogin);
if (startResponse.error) {
setError(startResponse.message);
@@ -165,7 +167,8 @@ export default function LoginForm({
// Verify authentication
const verifyResponse = await securityKeyVerifyProxy(
{ credential },
tempSessionId
tempSessionId,
forceLogin
);
if (verifyResponse.error) {
@@ -234,12 +237,15 @@ export default function LoginForm({
setShowSecurityKeyPrompt(false);
try {
const response = await loginProxy({
const response = await loginProxy(
{
email,
password,
code,
resourceGuid: resourceGuid as string
});
},
forceLogin
);
try {
const identity = {
@@ -333,7 +339,8 @@ export default function LoginForm({
const data = await generateOidcUrlProxy(
idpId,
redirect || "/",
orgId
orgId,
forceLogin
);
const url = data.data?.redirectUrl;
if (data.error) {

View File

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

View File

@@ -7,7 +7,7 @@ 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: "Device Login", regex: /^\/auth\/login\/device$/ }
{ name: "Device Login", regex: /^\/auth\/login\/device(\?code=[a-zA-Z0-9-]+)?$/ }
];
export function cleanRedirect(input: string, fallback?: string): string {