From 047a0feb92828231367583ca9bfa13a888bc44f2 Mon Sep 17 00:00:00 2001 From: Maina Wycliffe Date: Mon, 25 Sep 2023 13:46:18 +0300 Subject: [PATCH 1/3] refactor: organize imports for the modal component --- src/components/Modal/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index a0e6b28da..9475a3843 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -1,8 +1,8 @@ -import React, { Fragment } from "react"; -import PropTypes from "prop-types"; import { Dialog, Transition } from "@headlessui/react"; import { XIcon } from "@heroicons/react/solid"; import clsx from "clsx"; +import PropTypes from "prop-types"; +import React, { Fragment } from "react"; type ModalSize = "small" | "slightly-small" | "medium" | "large" | "full"; From 4c79f757c131636ed9c997f74582489e55db78c4 Mon Sep 17 00:00:00 2001 From: Maina Wycliffe Date: Mon, 25 Sep 2023 13:12:07 +0300 Subject: [PATCH 2/3] refactor: convert promise based code to async await --- .../Kratos/KratosAuthSessionChecker.tsx | 32 +++--- .../Authentication/Kratos/KratosLogin.tsx | 105 ++++++++---------- 2 files changed, 63 insertions(+), 74 deletions(-) diff --git a/src/components/Authentication/Kratos/KratosAuthSessionChecker.tsx b/src/components/Authentication/Kratos/KratosAuthSessionChecker.tsx index 63321afee..d3801598f 100644 --- a/src/components/Authentication/Kratos/KratosAuthSessionChecker.tsx +++ b/src/components/Authentication/Kratos/KratosAuthSessionChecker.tsx @@ -17,41 +17,41 @@ export default function KratosAuthSessionChecker({ const { push } = useRouter(); useEffect(() => { - if (!isAuthEnabled()) { - return; - } + const getSession = async () => { + if (!isAuthEnabled()) { + return; + } - ory - .toSession() - .then(({ data }) => { + try { + const { data } = await ory.toSession(); setSession(data); - }) - .catch((err: AxiosError) => { - // Due to the conflict between NextJS Routing and React Router, we can - // get the current URL from next router accurately, but we can rely on - // the window location to get the current URL accurately. This can be - // fixed in the future when we move to NextJS fully. + } catch (err) { const url = window.location.pathname; - switch (err.response?.status) { + switch ((err as AxiosError).response?.status) { case 403: // This is a legacy error code thrown. See code 422 for // more details. push(`/login?aal=aal2&return_to=${url}`); return; + break; case 422: // This status code is returned when we are trying to // validate a session which has not yet completed // it's second factor push(`/login?aal=aal2&return_to=${url}`); return; + break; case 401: push(`/login?return_to=${url}`); return; + break; + default: + throw err; } + } + }; - // Something else happened! - return Promise.reject(err); - }); + getSession(); }, [push]); if (isAuthEnabled() && !session) { diff --git a/src/components/Authentication/Kratos/KratosLogin.tsx b/src/components/Authentication/Kratos/KratosLogin.tsx index ae2934d6e..defeba302 100644 --- a/src/components/Authentication/Kratos/KratosLogin.tsx +++ b/src/components/Authentication/Kratos/KratosLogin.tsx @@ -1,5 +1,4 @@ import { LoginFlow, UpdateLoginFlowBody } from "@ory/client"; -import { AxiosError } from "axios"; import type { NextPage } from "next"; import Link from "next/link"; import { useRouter } from "next/router"; @@ -29,69 +28,59 @@ const Login: NextPage = () => { const onLogout = useCreateLogoutHandler([aal, refresh]); useEffect(() => { - // If the router is not ready yet, or we already have a flow, do nothing. - if (!router.isReady || flow) { - return; - } + const fetchFlow = async () => { + if (!router.isReady || flow) { + return; + } - // If ?flow=.. was in the URL, we fetch it - if (flowId) { - ory - .getLoginFlow({ - id: String(flowId) - }) - .then(({ data }) => { + if (flowId) { + try { + const { data } = await ory.getLoginFlow({ id: String(flowId) }); setFlow(data); - }) - .catch(handleGetFlowError(router, "login", setFlow)); - return; - } + } catch (err: any) { + await handleGetFlowError(router, "login", setFlow)(err); + } + return; + } - // Otherwise we initialize it - ory - .createBrowserLoginFlow({ - returnTo: returnTo ? String(returnTo) : undefined, - refresh: Boolean(refresh), - aal: aal ? String(aal) : undefined - }) - .then(({ data }) => { + try { + const { data } = await ory.createBrowserLoginFlow({ + returnTo: returnTo ? String(returnTo) : undefined, + refresh: Boolean(refresh), + aal: aal ? String(aal) : undefined + }); setFlow(data); - }) - .catch(handleFlowError(router, "login", setFlow)); - }, [flowId, router, router.isReady, aal, refresh, returnTo, flow]); + } catch (err: any) { + await handleFlowError(router, "login", setFlow)(err); + } + }; - const onSubmit = (values: UpdateLoginFlowBody) => - router - // On submission, add the flow ID to the URL but do not navigate. This prevents the user loosing - // his data when she/he reloads the page. - .push(`/login?flow=${flow?.id}`, undefined, { shallow: true }) - .then(() => - ory - .updateLoginFlow({ - flow: flow?.id!, - updateLoginFlowBody: values - }) - // We logged in successfully! Let's bring the user home. - .then((res) => { - if (flow?.return_to) { - router.push(flow?.return_to); - return; - } - router.push("/"); - }) - .then(() => {}) - .catch(handleFlowError(router, "login", setFlow)) - .catch((err: AxiosError) => { - // If the previous handler did not catch the error it's most likely a form validation error - if (err.response?.status === 400) { - // Yup, it is! - setFlow((err.response as any).data); - return; - } + fetchFlow(); + }, [flowId, router, router.isReady, aal, refresh, returnTo, flow]); - return Promise.reject(err); - }) - ); + const onSubmit = async (values: UpdateLoginFlowBody) => { + try { + await router.push(`/login?flow=${flow?.id}`, undefined, { + shallow: true + }); + await ory.updateLoginFlow({ + flow: flow?.id!, + updateLoginFlowBody: values + }); + if (flow?.return_to) { + await router.push(flow?.return_to); + } else { + await router.push("/"); + } + } catch (err: any) { + await handleFlowError(router, "login", setFlow)(err); + if (err.response?.status === 400) { + setFlow((err.response as any).data); + } else { + throw err; + } + } + }; return (
From 9ce44fd2258fd6e6c275e8b56711e9ed335996d6 Mon Sep 17 00:00:00 2001 From: Maina Wycliffe Date: Mon, 25 Sep 2023 13:12:28 +0300 Subject: [PATCH 3/3] fix: fix double login for kratos login Closes #1408 chore: remove refresh --- .../Authentication/Kratos/KratosAuthSessionChecker.tsx | 8 -------- src/components/Authentication/Kratos/KratosLogin.tsx | 3 ++- 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/src/components/Authentication/Kratos/KratosAuthSessionChecker.tsx b/src/components/Authentication/Kratos/KratosAuthSessionChecker.tsx index d3801598f..ac462cbd0 100644 --- a/src/components/Authentication/Kratos/KratosAuthSessionChecker.tsx +++ b/src/components/Authentication/Kratos/KratosAuthSessionChecker.tsx @@ -29,21 +29,13 @@ export default function KratosAuthSessionChecker({ const url = window.location.pathname; switch ((err as AxiosError).response?.status) { case 403: - // This is a legacy error code thrown. See code 422 for - // more details. push(`/login?aal=aal2&return_to=${url}`); - return; break; case 422: - // This status code is returned when we are trying to - // validate a session which has not yet completed - // it's second factor push(`/login?aal=aal2&return_to=${url}`); - return; break; case 401: push(`/login?return_to=${url}`); - return; break; default: throw err; diff --git a/src/components/Authentication/Kratos/KratosLogin.tsx b/src/components/Authentication/Kratos/KratosLogin.tsx index defeba302..bc6ab08cc 100644 --- a/src/components/Authentication/Kratos/KratosLogin.tsx +++ b/src/components/Authentication/Kratos/KratosLogin.tsx @@ -68,11 +68,12 @@ const Login: NextPage = () => { updateLoginFlowBody: values }); if (flow?.return_to) { - await router.push(flow?.return_to); + window.location.href = flow?.return_to; } else { await router.push("/"); } } catch (err: any) { + console.error(err); await handleFlowError(router, "login", setFlow)(err); if (err.response?.status === 400) { setFlow((err.response as any).data);