Source: pages/auth/error.jsx

  1. /** @module pages/api/auth/error */
  2. import { Box, Button, Card, Heading, Text } from "grommet";
  3. import Head from "next/head";
  4. import { useRouter } from "next/router";
  5. import Clouds from "../../components/clouds";
  6. import { Logo } from "../../components/logo";
  7. import { NEXT_AUTH_ERRORS, _NEXT_AUTH_ERRORS } from "../../lib/errors";
  8. import { useTranslation } from "next-i18next";
  9. import { serverSideTranslations } from "next-i18next/serverSideTranslations";
  11. /**
  12.  * This page is shown when the user encounters an error while signing up or signing in.
  13.  */
  14. export default function Error() {
  15.   const { query, push, locale } = useRouter();
  16.   const { t } = useTranslation("errors");
  18.   const { error: errorCode } = query;
  20.   console.error({
  21.     service: "web",
  22.     pathname: "/auth/error",
  23.     component: "VerifyRequest",
  24.     error_message: _NEXT_AUTH_ERRORS[errorCode],
  25.   });
  27.   return (
  28.     <>
  29.       <Head>
  30.         <title>{t("errored")}</title>
  31.       </Head>
  32.       <Clouds />
  33.       <Box
  34.         pad="large"
  35.         align="center"
  36.         gap="medium"
  37.         width="large"
  38.         justify="center"
  39.         style={{
  40.           display: "flex",
  41.           height: "90vh",
  42.           margin: "auto",
  43.         }}
  44.       >
  45.         <Card
  46.           pad="large"
  47.           gap="medium"
  48.           align="center"
  49.           background="white"
  50.           style={{
  51.             minWidth: "24rem",
  52.           }}
  53.         >
  54.           <Logo />
  55.           <Heading
  56.             level={2}
  57.             style={{
  58.               marginBottom: 0,
  59.             }}
  60.           >
  61.             {t("errored")}
  62.           </Heading>
  63.           <Text
  64.             style={{
  65.               marginBottom: "1.5rem",
  66.             }}
  67.           >
  68.             {NEXT_AUTH_ERRORS[errorCode][locale]}
  69.           </Text>
  70.           <Button
  71.             key={"back-to-site"}
  72.             style={{
  73.               width: "100%",
  74.             }}
  75.             onClick={() => push(`/${locale}`)}
  76.             label={t("back-to-site")}
  77.             primary
  78.           />
  79.         </Card>
  80.       </Box>
  81.     </>
  82.   );
  83. }
  85. export async function getServerSideProps(context) {
  86.   return {
  87.     props: {
  88.       ...(await serverSideTranslations(context.locale, ["errors", "common"])),
  89.     },
  90.   };
  91. }