diff --git a/website/src/pages/auth/signin.tsx b/website/src/pages/auth/signin.tsx index 59fc7c05..9a1d91a8 100644 --- a/website/src/pages/auth/signin.tsx +++ b/website/src/pages/auth/signin.tsx @@ -2,17 +2,59 @@ import { Button, Input, Stack } from "@chakra-ui/react"; import { useColorMode } from "@chakra-ui/react"; import Head from "next/head"; import Link from "next/link"; +import { useRouter } from "next/router"; import { getCsrfToken, getProviders, signIn } from "next-auth/react"; -import React, { useRef } from "react"; +import React, { useEffect, useRef, useState } from "react"; import { FaBug, FaDiscord, FaEnvelope, FaGithub } from "react-icons/fa"; import { AuthLayout } from "src/components/AuthLayout"; import { Footer } from "src/components/Footer"; import { Header } from "src/components/Header"; +export type SignInErrorTypes = + | "Signin" + | "OAuthSignin" + | "OAuthCallback" + | "OAuthCreateAccount" + | "EmailCreateAccount" + | "Callback" + | "OAuthAccountNotLinked" + | "EmailSignin" + | "CredentialsSignin" + | "SessionRequired" + | "default"; + +const errorMessages: Record = { + Signin: "Try signing in with a different account.", + OAuthSignin: "Try signing in with a different account.", + OAuthCallback: "Try signing in with the same account you used originally.", + OAuthCreateAccount: "Try signing in with a different account.", + EmailCreateAccount: "Try signing in with a different account.", + Callback: "Try signing in with a different account.", + OAuthAccountNotLinked: "To confirm your identity, sign in with the same account you used originally.", + EmailSignin: "The e-mail could not be sent.", + CredentialsSignin: "Sign in failed. Check the details you provided are correct.", + SessionRequired: "Please sign in to access this page.", + default: "Unable to sign in.", +}; + // eslint-disable-next-line @typescript-eslint/no-unused-vars function Signin({ csrfToken, providers }) { + const router = useRouter(); const { discord, email, github, credentials } = providers; const emailEl = useRef(null); + const [error, setError] = useState(""); + + useEffect(() => { + const err = router?.query?.error; + if (err) { + if (typeof err === "string") { + setError(errorMessages[err]); + } else { + setError(errorMessages[err[0]]); + } + } + }, [router]); + const signinWithEmail = (ev: React.FormEvent) => { ev.preventDefault(); signIn(email.id, { callbackUrl: "/dashboard", email: emailEl.current.value }); @@ -110,6 +152,11 @@ function Signin({ csrfToken, providers }) { . + {error && ( +
+

Error: {error}

+
+ )} );