custom next auth pages

2022-04-19 12:24:34 +01:00
parent c8a2988556
commit 511a5ed98d
4 changed files with 322 additions and 9 deletions
@@ -0,0 +1,80 @@
+import useTranslation from "next-translate/useTranslation";
+import Head from "next/head";
+import Link from "next/link";
+import CookieBanner from "../../components/cookieBanner";
+import Footer from "../../components/footer";
+import Header from "../../components/header";
+import Breadcrumbs from "../../components/breadcrumbs";
+import { useRouter } from "next/router";
+
+import { getCsrfToken } from "next-auth/react";
+
+const Error = (props) => {
+    let { t, lang } = useTranslation();
+    const { footerLinks, pages, csrfToken } = props;
+
+    const { error } = useRouter().query;
+
+    const errors = {
+        Signin: "Try signing with a different account.",
+        OAuthSignin: "Try signing with a different account.",
+        OAuthCallback: "Try signing with a different account.",
+        OAuthCreateAccount: "Try signing with a different account.",
+        EmailCreateAccount: "Try signing with a different account.",
+        Callback: "Try signing with a different account.",
+        OAuthAccountNotLinked:
+            "To confirm your identity, sign in with the same account you used originally.",
+        EmailSignin: "Check your email address.",
+        CredentialsSignin:
+            "Sign in failed. Check the details you provided are correct.",
+        Verification:
+            "Unable to sign in. The sign in link is no longer valid.It may have been used already or it may have expired. ",
+        default: "Unable to sign in.",
+    };
+
+    const errorMessage = error && (errors[error] ?? errors.default);
+
+    return (
+        <div>
+            <Head>
+                <title>Sign in Error - {t("common:service-name")}</title>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header courseName={t("common:service-name")} />
+                <div className="govuk-width-container govuk-!-padding-bottom-9">
+                    <Breadcrumbs />
+
+                    <main className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9">
+                        <div className="govuk-grid-row ">
+                            <div className="govuk-grid-column-two-thirds ">
+                                <h1>There has been an error </h1>
+                            </div>
+                        </div>
+                        <div className="govuk-grid-row">
+                            <div className="govuk-grid-column-two-thirds govuk-body">
+                                {errorMessage}
+                            </div>
+                        </div>
+                        <div className="govuk-grid-row">
+                            <div className="govuk-grid-column-two-thirds govuk-body">
+                                {" "}
+                                <Link href="/">Return to Home</Link>
+                            </div>
+                        </div>
+                    </main>
+                </div>
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
+    );
+};
+
+export async function getServerSideProps(context) {
+    const csrfToken = await getCsrfToken(context);
+    return {
+        props: { csrfToken },
+    };
+}
+
+export default Error;