- {getClientInfo.data?.name.slice(0, 1) || "U"}
+ {screenParams.oidc_name ? screenParams.oidc_name.slice(0, 1) : "U"}
{t("authorizeCardTitle", {
- app: getClientInfo.data?.name || "Unknown",
+ app: screenParams.oidc_name || "Unknown",
})}
@@ -200,14 +183,15 @@ export const AuthorizePage = () => {
)}
authorizeMutation.mutate()}
- loading={authorizeMutation.isPending}
+ onClick={() => authorizeMutate()}
+ loading={authorizePending}
+ disabled={shouldAutoAuthorize}
>
{t("authorizeTitle")}
navigate("/")}
- disabled={authorizeMutation.isPending}
+ onClick={() => navigate(`/logout${compiledParams}`)}
+ disabled={authorizePending || shouldAutoAuthorize}
variant="outline"
>
{t("cancelTitle")}
diff --git a/frontend/src/pages/continue-page.tsx b/frontend/src/pages/continue-page.tsx
index 82846c64..a4e34fc5 100644
--- a/frontend/src/pages/continue-page.tsx
+++ b/frontend/src/pages/continue-page.tsx
@@ -12,6 +12,10 @@ import { Trans, useTranslation } from "react-i18next";
import { Navigate, useLocation, useNavigate } from "react-router";
import { useCallback, useEffect, useRef, useState } from "react";
import { useRedirectUri } from "@/lib/hooks/redirect-uri";
+import {
+ recompileScreenParams,
+ useScreenParams,
+} from "@/lib/hooks/screen-params";
export const ContinuePage = () => {
const { app, ui } = useAppContext();
@@ -25,11 +29,16 @@ export const ContinuePage = () => {
const hasRedirected = useRef(false);
const searchParams = new URLSearchParams(search);
- const redirectUri = searchParams.get("redirect_uri");
+ const screenParams = useScreenParams(searchParams);
+ const redirectUri = screenParams.redirect_uri;
+ const isAppLogin = screenParams.login_for === "app";
+ const recompiledParams = recompileScreenParams(screenParams);
const { url, valid, trusted, allowedProto, httpsDowngrade } = useRedirectUri(
redirectUri,
app.cookieDomain,
+ app.appUrl,
+ app.subdomainsEnabled,
);
const urlHref = url?.href;
@@ -43,7 +52,8 @@ export const ContinuePage = () => {
auth.authenticated &&
hasValidRedirect &&
!showUntrustedWarning &&
- !showInsecureWarning;
+ !showInsecureWarning &&
+ isAppLogin;
const redirectToTarget = useCallback(() => {
if (!urlHref || hasRedirected.current) {
@@ -79,15 +89,10 @@ export const ContinuePage = () => {
}, [shouldAutoRedirect, redirectToTarget]);
if (!auth.authenticated) {
- return (
-
diff --git a/frontend/src/pages/error-page.tsx b/frontend/src/pages/error-page.tsx
index 636778d9..13ab3963 100644
--- a/frontend/src/pages/error-page.tsx
+++ b/frontend/src/pages/error-page.tsx
@@ -11,7 +11,7 @@ export const ErrorPage = () => {
const { t } = useTranslation();
const { search } = useLocation();
const searchParams = new URLSearchParams(search);
- const error = searchParams.get("error") ?? "";
+ const error = searchParams.get("error") || "";
return (
diff --git a/frontend/src/pages/forgot-password-page.tsx b/frontend/src/pages/forgot-password-page.tsx
index 6438e353..58b80a3a 100644
--- a/frontend/src/pages/forgot-password-page.tsx
+++ b/frontend/src/pages/forgot-password-page.tsx
@@ -11,12 +11,18 @@ import { useAppContext } from "@/context/app-context";
import { useTranslation } from "react-i18next";
import Markdown from "react-markdown";
import { useLocation } from "react-router";
+import {
+ recompileScreenParams,
+ useScreenParams,
+} from "@/lib/hooks/screen-params";
export const ForgotPasswordPage = () => {
const { ui } = useAppContext();
const { t } = useTranslation();
const { search } = useLocation();
const searchParams = new URLSearchParams(search);
+ const screenParams = useScreenParams(searchParams);
+ const compiledParams = recompileScreenParams(screenParams);
return (
@@ -37,10 +43,7 @@ export const ForgotPasswordPage = () => {
className="w-full"
variant="outline"
onClick={() => {
- const eparams = searchParams.toString();
- window.location.replace(
- `/login${eparams.length > 0 ? `?${eparams}` : ""}`,
- );
+ window.location.replace(`/login${compiledParams}`);
}}
>
{t("backToLoginButton")}
diff --git a/frontend/src/pages/login-page.tsx b/frontend/src/pages/login-page.tsx
index 3295a7ed..7356e22e 100644
--- a/frontend/src/pages/login-page.tsx
+++ b/frontend/src/pages/login-page.tsx
@@ -18,7 +18,6 @@ import { OAuthButton } from "@/components/ui/oauth-button";
import { SeperatorWithChildren } from "@/components/ui/separator";
import { useAppContext } from "@/context/app-context";
import { useUserContext } from "@/context/user-context";
-import { useOIDCParams } from "@/lib/hooks/oidc";
import { LoginSchema } from "@/schemas/login-schema";
import { useMutation } from "@tanstack/react-query";
import axios, { AxiosError } from "axios";
@@ -26,6 +25,11 @@ import { useEffect, useId, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { Navigate, useLocation } from "react-router";
import { toast } from "sonner";
+import {
+ recompileScreenParams,
+ useScreenParams,
+} from "@/lib/hooks/screen-params";
+import { useLoginFor } from "@/lib/hooks/login-for";
const iconMap: Record = {
google: (null);
+ const searchParams = new URLSearchParams(search);
+ const screenParams = useScreenParams(searchParams);
+ const compiledParams = recompileScreenParams(screenParams);
const logoutMutation = useMutation({
mutationFn: () => axios.post("/api/user/logout"),
@@ -31,7 +40,7 @@ export const LogoutPage = () => {
});
redirectTimer.current = window.setTimeout(() => {
- window.location.replace("/login");
+ window.location.replace(`/login${compiledParams}`);
}, 500);
},
onError: () => {
@@ -50,7 +59,7 @@ export const LogoutPage = () => {
}, [redirectTimer]);
if (!auth.authenticated) {
- return
logoutMutation.mutate()}
diff --git a/frontend/src/pages/totp-page.tsx b/frontend/src/pages/totp-page.tsx
index 984cb8db..e66b4704 100644
--- a/frontend/src/pages/totp-page.tsx
+++ b/frontend/src/pages/totp-page.tsx
@@ -16,10 +16,14 @@ import { useEffect, useId, useRef } from "react";
import { useTranslation } from "react-i18next";
import { Navigate, useLocation } from "react-router";
import { toast } from "sonner";
-import { useOIDCParams } from "@/lib/hooks/oidc";
+import {
+ recompileScreenParams,
+ useScreenParams,
+} from "@/lib/hooks/screen-params";
+import { useLoginFor } from "@/lib/hooks/login-for";
export const TotpPage = () => {
- const { totp } = useUserContext();
+ const { totp, auth } = useUserContext();
const { t } = useTranslation();
const { search } = useLocation();
const formId = useId();
@@ -27,8 +31,12 @@ export const TotpPage = () => {
const redirectTimer = useRef(null);
const searchParams = new URLSearchParams(search);
- const redirectUri = searchParams.get("redirect_uri") || undefined;
- const oidcParams = useOIDCParams(searchParams);
+ const screenParams = useScreenParams(searchParams);
+ const compiledParams = recompileScreenParams(screenParams);
+ const loginForUrl = useLoginFor({
+ login_for: screenParams.login_for,
+ compiledParams,
+ });
const totpMutation = useMutation({
mutationFn: (values: TotpSchema) => axios.post("/api/user/totp", values),
@@ -39,14 +47,7 @@ export const TotpPage = () => {
});
redirectTimer.current = window.setTimeout(() => {
- if (oidcParams.isOidc) {
- window.location.replace(`/authorize?${oidcParams.compiled}`);
- return;
- }
-
- window.location.replace(
- `/continue${redirectUri ? `?redirect_uri=${encodeURIComponent(redirectUri)}` : ""}`,
- );
+ window.location.replace(loginForUrl);
}, 500);
},
onError: () => {
@@ -65,7 +66,10 @@ export const TotpPage = () => {
}, [redirectTimer]);
if (!totp.pending) {
- return 
+
+
## Acknowledgements
diff --git a/frontend/src/components/icons/local-auth.tsx b/frontend/src/components/icons/local-auth.tsx
new file mode 100644
index 00000000..d17391bd
--- /dev/null
+++ b/frontend/src/components/icons/local-auth.tsx
@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+
+export function LocalAuthIcon(props: SVGProps