import { getCsrfToken, signIn } from "next-auth/client"; import Link from "next/link"; import { useRouter } from "next/router"; import { useState } from "react"; import { ErrorCode, getSession } from "@lib/auth"; import { useLocale } from "@lib/hooks/useLocale"; import AddToHomescreen from "@components/AddToHomescreen"; import Loader from "@components/Loader"; import { HeadSeo } from "@components/seo/head-seo"; export default function Login({ csrfToken }) { const { t } = useLocale(); const router = useRouter(); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [code, setCode] = useState(""); const [isSubmitting, setIsSubmitting] = useState(false); const [secondFactorRequired, setSecondFactorRequired] = useState(false); const [errorMessage, setErrorMessage] = useState(null); const errorMessages: { [key: string]: string } = { [ErrorCode.SecondFactorRequired]: t("2fa_enabled_instructions"), [ErrorCode.IncorrectPassword]: `${t("incorrect_password")} ${t("please_try_again")}`, [ErrorCode.UserNotFound]: t("no_account_exists"), [ErrorCode.IncorrectTwoFactorCode]: `${t("incorrect_2fa_code")} ${t("please_try_again")}`, [ErrorCode.InternalServerError]: `${t("something_went_wrong")} ${t("please_try_again_and_contact_us")}`, }; const callbackUrl = typeof router.query?.callbackUrl === "string" ? router.query.callbackUrl : "/"; async function handleSubmit(e: React.SyntheticEvent) { e.preventDefault(); if (isSubmitting) { return; } setIsSubmitting(true); setErrorMessage(null); try { const response = await signIn("credentials", { redirect: false, email, password, totpCode: code, callbackUrl, }); if (!response) { throw new Error("Received empty response from next auth"); } if (!response.error) { // we're logged in! let's do a hard refresh to the desired url window.location.replace(callbackUrl); return; } if (response.error === ErrorCode.SecondFactorRequired) { setSecondFactorRequired(true); setErrorMessage(errorMessages[ErrorCode.SecondFactorRequired]); } else { setErrorMessage(errorMessages[response.error] || t("something_went_wrong")); } setIsSubmitting(false); } catch (e) { setErrorMessage(t("something_went_wrong")); setIsSubmitting(false); } } return (
{isSubmitting && (
)}
Cal.com Logo

{t("sign_in_account")}

setEmail(e.currentTarget.value)} className="appearance-none block w-full px-3 py-2 border border-neutral-300 rounded-sm shadow-sm placeholder-gray-400 focus:outline-none focus:ring-neutral-900 focus:border-neutral-900 sm:text-sm" />
setPassword(e.currentTarget.value)} className="appearance-none block w-full px-3 py-2 border border-neutral-300 rounded-sm shadow-sm placeholder-gray-400 focus:outline-none focus:ring-neutral-900 focus:border-neutral-900 sm:text-sm" />
{secondFactorRequired && (
setCode(e.currentTarget.value)} className="appearance-none block w-full px-3 py-2 border border-neutral-300 rounded-sm shadow-sm placeholder-gray-400 focus:outline-none focus:ring-neutral-900 focus:border-neutral-900 sm:text-sm" />
)}
{errorMessage &&

{errorMessage}

}
{t("dont_have_an_account")} {/* replace this with your account creation flow */} {t("create_an_account")}
); } Login.getInitialProps = async (context) => { const { req, res } = context; const session = await getSession({ req }); if (session) { res.writeHead(302, { Location: "/" }); res.end(); return; } return { csrfToken: await getCsrfToken(context), }; };