import React, { useState, useEffect } from "react"; import { useRouter } from "next/router"; // next-themes import { useTheme } from "next-themes"; // layouts import DefaultLayout from "layouts/default-layout"; // services import authenticationService from "services/authentication.service"; // hooks import useUserAuth from "hooks/use-user-auth"; import useToast from "hooks/use-toast"; // types import type { NextPage } from "next"; const MagicSignIn: NextPage = () => { const router = useRouter(); const { password, key } = router.query; const { setToastAlert } = useToast(); const { setTheme } = useTheme(); const { mutateUser } = useUserAuth("sign-in"); const [isSigningIn, setIsSigningIn] = useState(false); const [errorSigningIn, setErrorSignIn] = useState(); useEffect(() => { setTheme("system"); }, [setTheme]); useEffect(() => { setIsSigningIn(() => false); setErrorSignIn(() => undefined); if (!password || !key) { setErrorSignIn("URL is invalid"); return; } else { setIsSigningIn(() => true); authenticationService .magicSignIn({ token: password, key }) .then(async (res) => { setIsSigningIn(false); await mutateUser(); }) .catch((err) => { setErrorSignIn(err.response.data.error); setIsSigningIn(false); }); } }, [password, key, mutateUser, router]); return (
{isSigningIn ? (

Signing you in...

Please wait while we are preparing your take off.

) : errorSigningIn ? (

Error

{errorSigningIn}.
{ authenticationService .emailCode({ email: (key as string).split("_")[1] }) .then(() => { setToastAlert({ type: "success", title: "Email sent", message: "A new link/code has been send to you.", }); }) .catch(() => { setToastAlert({ type: "error", title: "Error", message: "Unable to send email.", }); }); }} > Send link again?
) : (

Success

Redirecting you to the app...

)}
); }; export default MagicSignIn;