sdk.getLoginFlow({ id: flow }).then(({ data: flow }) => {  
  const returnTo = flow.return_to  
  return sdk.createBrowserRegistrationFlow({  
    id: flow.id,  
    return_to: returnTo,  
  })  
})

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"
import React, {useEffect, useState} from "react"
import {LogoutLink, Flow, Values} from "@/pkg"
import {handleGetFlowError, handleFlowError} from "@/pkg/errors"
import ory from "@/pkg/sdk"
import {Button} from "@ui/button";
import PageHead from "@ui/PageHead/PageHead";
import AuthBanner from "@components/AuthBanner/AuthBanner";
import LoginSkeleton from "@ui/Skeletons/PageSkeletons/AuthSkeleton/LoginSkeleton";


const Login: NextPage = () => {
    const [flow, setFlow] = useState<LoginFlow>()

    // Get ?flow=... from the URL
    const router = useRouter()
    const {
        return_to: returnTo,
        flow: flowId,
        // Refresh means we want to refresh the session. This is needed, for example, when we want to update the password
        // of a user.
        refresh,
        // AAL = Authorization Assurance Level. This implies that we want to upgrade the AAL, meaning that we want
        // to perform two-factor authentication/verification.
        aal,
    } = router.query

    // This might be confusing, but we want to show the user an option
    // to sign out if they are performing two-factor authentication!
    const onLogout = LogoutLink([aal, refresh])

    useEffect(() => {
        // If the router is not ready yet, or we already have a flow, do nothing.
        if (!router.isReady || flow) {
            return
        }

        // If ?flow=.. was in the URL, we fetch it
        if (flowId) {
            ory
                .getLoginFlow({id: String(flowId)})
                .then(({data}) => {

                    setFlow(data)
                })
                .catch(handleGetFlowError(router, "login", setFlow))
            return
        }

        // Otherwise we initialize it
        ory
            .createBrowserLoginFlow({
                refresh: Boolean(refresh),
                aal: aal ? String(aal) : undefined,
                returnTo: returnTo ? String(returnTo) : undefined,
            })
            .then(({data}) => {
                setFlow(data)
            })
            .catch(handleFlowError(router, "login", setFlow))
    }, [flowId, router, router.isReady, aal, refresh, returnTo, flow])

    // const onSubmit = (values: UpdateLoginFlowBody) =>
    const onSubmit = (values: Partial<Values>): Promise<void> =>
        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(`/auth/login?flow=${flow?.id}`, undefined, {shallow: true})
            .then(() =>
                ory
                    .updateLoginFlow({
                        flow: String(flow?.id),
                        updateLoginFlowBody: values as UpdateLoginFlowBody,
                    })
                    // We logged in successfully! Let's bring the user home.
                    .then(() => {
                        if (flow?.return_to) {
                            window.location.href = 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!
                            // @ts-ignore
                            setFlow(err.response?.data)
                            return
                        }

                        return Promise.reject(err)
                    }),
            )

    return (
        <div className={"max-md:tw-h-screen tw-grid tw-grid-cols-5 lg:tw-grid-cols-12 lg:tw-gap-6 tw-bg-mvnGray-25"}>
            <PageHead title={"Sign In"}/>
            <div className="max-md:tw-hidden tw-col-span-7">
                <AuthBanner/>
            </div>
            <div
                className="tw-col-span-12 lg:tw-col-span-5 tw-px-4 tw-py-6 md:tw-pl-10 lg:tw-pr-[64px] tw-flex tw-items-center tw-justify-center">
                {!flow ?
                    <LoginSkeleton/>
                    :
                    <div className={"tw-w-full tw-h-full"}>
                        <div>
                            <Link href={"/"}>
                                <figure className="tw-flex tw-items-center tw-justify-center">
                                    <img src="/assets/globalAssets/moveOnLogo.svg" alt="moveon"/>
                                </figure>
                            </Link>
                            <div className="tw-text-center tw-py-8 tw-space-y-3">
                                <h2 className="tw-text-[30px] tw-font-bold">
                                    {(() => {
                                        if (flow?.refresh) {
                                            return "Confirm Action"
                                        } else if (flow?.requested_aal === "aal2") {
                                            return "Two-Factor Authentication"
                                        }
                                        return "Sign In"
                                    })()}
                                </h2>
                                <p className="tw-text-mvnBlack-100">Welcome back! Log in to your account </p>
                            </div>
                            <Flow onSubmit={onSubmit} flow={flow}/>
                        </div>
                        {aal || refresh ? (
                            <div>
                                <Button data-testid="logout-link" onClick={onLogout} className="tw-w-full">
                                    Log out
                                </Button>
                            </div>
                        ) : (
                            <>
                                <div className="tw-flex tw-items-center tw-justify-center tw-gap-4 tw-pt-1">
                                    New here?
                                    <Link href="/auth/registration" passHref
                                          className="tw-font-bold tw-text-mvnGreen-800 hover:tw-no-underline hover:tw-text-mvnGreen-950">
                                        Sign up
                                    </Link>
                                </div>

                            </>
                        )}
                    </div>
                }
            </div>

        </div>
    )
}

export default Login

const switchToRegistration = (flowId: string) => {
    ory.getLoginFlow({id: flowId}).then(({data: flow}) => {
        const returnTo = flow.return_to
        return ory.createBrowserRegistrationFlow({
            id: flow.id,
            return_to: returnTo,
        })
    })
}
from : return ory.createBrowserRegistrationFlow({
            id: flow.id,