From b6668f305b9cabae0f41ec96f7a71baa25d5766e Mon Sep 17 00:00:00 2001 From: Maina Wycliffe Date: Mon, 20 Nov 2023 12:50:19 +0300 Subject: [PATCH] fix: show feedback to the user when waiting for redirect --- pages/login/[[...index]].tsx | 2 +- .../Authentication/Kratos/KratosLogin.tsx | 13 ++++++++++++- src/components/ory/ui/NodeInputSubmit.tsx | 6 +++++- 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/pages/login/[[...index]].tsx b/pages/login/[[...index]].tsx index a23ee4cc0a..a2311c5079 100644 --- a/pages/login/[[...index]].tsx +++ b/pages/login/[[...index]].tsx @@ -11,7 +11,7 @@ export default function Signin() { <>
-
+
{authSystem === "kratos" && } {authSystem === "clerk" && }
diff --git a/src/components/Authentication/Kratos/KratosLogin.tsx b/src/components/Authentication/Kratos/KratosLogin.tsx index 2876d72008..784bfce8f1 100644 --- a/src/components/Authentication/Kratos/KratosLogin.tsx +++ b/src/components/Authentication/Kratos/KratosLogin.tsx @@ -7,11 +7,16 @@ import { useCallback, useEffect, useState } from "react"; import { Flow, HandleError } from "../../ory"; import { SetUriFlow } from "../../ory/helpers"; import ory from "../../ory/sdk"; +import FullPageSkeletonLoader from "../../SkeletonLoader/FullPageSkeletonLoader"; const Login: NextPage = () => { const [returnTo, setReturnTo] = useState(); const [flow, setFlow] = useState(); + // when login is successful, we set this to true and then show an animation as + // the user is redirected to the return_to URL. + const [loginSucccess, setLoginSuccess] = useState(false); + const { query, push, isReady } = useRouter(); const returnToFromQuery = (query.return_to as string) || ""; @@ -19,7 +24,7 @@ const Login: NextPage = () => { // If we have a return_to query parameter, we want to redirect the user to // that URL after a successful login. if set, and return_to is empty, we don't - // overwrite it. + // overwrite it. This is a workaround for using both nextjs and react-router. useEffect(() => { if (returnToFromQuery && !returnTo) { setReturnTo(returnToFromQuery); @@ -94,9 +99,15 @@ const Login: NextPage = () => { }) // We logged in successfully! Let's bring the user home. .then(() => { + console.log("Login successful"); + setLoginSuccess(true); push(returnTo || "/"); }); + if (loginSucccess) { + return ; + } + return (
diff --git a/src/components/ory/ui/NodeInputSubmit.tsx b/src/components/ory/ui/NodeInputSubmit.tsx index dd3e60b580..ec5dbec950 100644 --- a/src/components/ory/ui/NodeInputSubmit.tsx +++ b/src/components/ory/ui/NodeInputSubmit.tsx @@ -1,6 +1,7 @@ import { getNodeLabel } from "@ory/integrations/ui"; import { NodeInputProps } from "./helpers"; +import { FaSpinner } from "react-icons/fa"; export function NodeInputSubmit({ node, @@ -11,7 +12,7 @@ export function NodeInputSubmit({ }: NodeInputProps) { return ( );