diff --git a/website/src/pages/auth/signin.tsx b/website/src/pages/auth/signin.tsx index 59fc7c05..14f81b4c 100644 --- a/website/src/pages/auth/signin.tsx +++ b/website/src/pages/auth/signin.tsx @@ -2,17 +2,60 @@ 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, { useRef, useEffect, 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 errors: 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(() => { + if (router?.query?.error) { + if (typeof router.query.error === "string") { + const errorType = errors[router.query.error]; + setError(errorType); + } else { + const errorType = errors[router.query.error[0]]; + setError(errorType); + } + } + }, [router]); + const signinWithEmail = (ev: React.FormEvent) => { ev.preventDefault(); signIn(email.id, { callbackUrl: "/dashboard", email: emailEl.current.value }); @@ -110,6 +153,11 @@ function Signin({ csrfToken, providers }) { . + {error && ( +
+

Error: {error}

+
+ )} );