💄 Add custom auth error page (#903)

apps/web/i18next-scanner.config.js

@@ -1,7 +1,7 @@
 const typescriptTransform = require("i18next-scanner-typescript");
 
 module.exports = {
-  input: ["src/**/*.{ts,tsx}"],
+  input: ["src/**/*.{ts,tsx}", "!src/utils/auth.ts"],
   options: {
     keySeparator: ".",
     nsSeparator: false,
@@ -13,10 +13,6 @@ module.exports = {
     removeUnusedKeys: true,
     func: {
       list: ["t"],
-      extensions: [".js", ".jsx"],
-    },
-    trans: {
-      extensions: [".js", ".jsx"],
     },
     resource: {
       loadPath: "public/locales/{{lng}}/{{ns}}.json",

apps/web/public/locales/en/app.json

@@ -33,16 +33,13 @@
   "email": "Email",
   "emailNotAllowed": "This email is not allowed.",
   "emailPlaceholder": "jessie.smith@example.com",
-  "expiredOrInvalidLink": "This link is expired or invalid. Please request a new link.",
   "exportToCsv": "Export to CSV",
   "forgetMe": "Forget me",
   "guest": "Guest",
   "ifNeedBe": "If need be",
-  "loading": "Loading…",
   "location": "Location",
   "locationPlaceholder": "Joe's Coffee Shop",
   "login": "Login",
-  "loginSuccessful": "You're logged in! Please wait while you are redirected…",
   "logout": "Logout",
   "manage": "Manage",
   "mixedOptionsDescription": "You can't have both time and date options in the same poll. Which would you like to keep?",
@@ -58,15 +55,12 @@
   "nextMonth": "Next month",
   "no": "No",
   "noDatesSelected": "No dates selected",
-  "notificationsDisabled": "Notifications have been disabled for <b>{title}</b>",
   "noVotes": "No one has voted for this option",
   "optional": "optional",
   "preferences": "Preferences",
   "previousMonth": "Previous month",
-  "redirect": "<a>Click here</a> if you are not redirect automatically…",
   "register": "Register",
   "requiredString": "“{name}” is required",
-  "resendVerificationCode": "Resend verification code",
   "response": "Response",
   "save": "Save",
   "saveInstruction": "Select your availability and click <b>{action}</b>",
@@ -139,10 +133,6 @@
   "permissionDenied": "Unauthorized",
   "permissionDeniedDescription": "If you are the poll creator, please login to access your poll",
   "loginDifferent": "Switch user",
-  "differentOwner": "Different Owner",
-  "differentOwnerDescription": "This poll was created by a different user. Would you like to transfer ownership to the current user?",
-  "yesTransfer": "Yes, transfer to current user",
-  "noTransfer": "No, take me home",
   "share": "Share",
   "timeShownIn": "Times shown in {timeZone}",
   "editDetailsDescription": "Change the details of your event.",
@@ -229,5 +219,8 @@
   "pollSettingsDescription": "Customize the behaviour of your poll",
   "requireParticipantEmailLabel": "Make email address required for participants",
   "hideParticipantsLabel": "Hide participant list from other participants",
-  "hideScoresLabel": "Hide scores until after a participant has voted"
+  "hideScoresLabel": "Hide scores until after a participant has voted",
+  "authErrorTitle": "Login Error",
+  "authErrorDescription": "There was an error logging you in. Please try again.",
+  "authErrorCta": "Go to login page"
 }

apps/web/src/pages/auth/error.tsx

@@ -0,0 +1,39 @@
+import { XCircle } from "@rallly/icons";
+import { Button } from "@rallly/ui/button";
+import Link from "next/link";
+
+import {
+  PageDialog,
+  PageDialogDescription,
+  PageDialogFooter,
+  PageDialogHeader,
+  PageDialogTitle,
+} from "@/components/page-dialog";
+import { Trans } from "@/components/trans";
+
+const Page = () => {
+  return (
+    <PageDialog icon={XCircle}>
+      <PageDialogHeader>
+        <PageDialogTitle>
+          <Trans i18nKey="authErrorTitle" defaults="Login Error" />
+        </PageDialogTitle>
+        <PageDialogDescription>
+          <Trans
+            i18nKey="authErrorDescription"
+            defaults="There was an error logging you in. Please try again."
+          />
+        </PageDialogDescription>
+      </PageDialogHeader>
+      <PageDialogFooter>
+        <Button asChild variant="primary">
+          <Link href="/login">
+            <Trans i18nKey="authErrorCta" defaults="Go to login page" />
+          </Link>
+        </Button>
+      </PageDialogFooter>
+    </PageDialog>
+  );
+};
+
+export default Page;

apps/web/src/utils/auth.ts

@@ -112,6 +112,7 @@ const authOptions = {
   pages: {
     signIn: "/login",
     signOut: "/logout",
+    error: "/auth/error",
   },
   callbacks: {
     async redirect({ url, baseUrl }) {