From b5f5196f0c5af1ceb43c68a82032f2c8e6ce4c1f Mon Sep 17 00:00:00 2001
From: Zeke Abshire <zekeabshire@gmail.com>
Date: Sat, 5 Apr 2025 13:13:50 -0500
Subject: [PATCH] Improved signin error messaging

---
 .../_components/providers/auth-provider.tsx   |  4 +++-
 src/app/error/email-not-found/page.tsx        |  3 +++
 src/app/error/layout.tsx                      | 22 +++++++++++++++++++
 src/app/error/permitted-users/page.tsx        |  8 +++++++
 src/server/auth/config.ts                     | 14 ++++++++++--
 5 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 src/app/error/email-not-found/page.tsx
 create mode 100644 src/app/error/layout.tsx
 create mode 100644 src/app/error/permitted-users/page.tsx

diff --git a/src/app/_components/providers/auth-provider.tsx b/src/app/_components/providers/auth-provider.tsx
index 5302be5..913302a 100644
--- a/src/app/_components/providers/auth-provider.tsx
+++ b/src/app/_components/providers/auth-provider.tsx
@@ -2,6 +2,7 @@
 
 import type { FC, PropsWithChildren } from "react";
 import { useSession, signIn, SessionProvider } from "next-auth/react";
+import { usePathname } from "next/navigation";
 
 export const AuthProvider: FC<PropsWithChildren> = ({ children }) => {
   return (
@@ -13,8 +14,9 @@ export const AuthProvider: FC<PropsWithChildren> = ({ children }) => {
 
 const AuthWrapper: FC<PropsWithChildren> = ({ children }) => {
   const session = useSession();
+  const pathname = usePathname();
 
-  if (session.status === "unauthenticated") {
+  if (!pathname.startsWith("/error") && session.status === "unauthenticated") {
     void signIn();
   }
 
diff --git a/src/app/error/email-not-found/page.tsx b/src/app/error/email-not-found/page.tsx
new file mode 100644
index 0000000..d326411
--- /dev/null
+++ b/src/app/error/email-not-found/page.tsx
@@ -0,0 +1,3 @@
+export default async function EmailNotFound() {
+  return <p>we couldn&apos;t find your email.</p>;
+}
diff --git a/src/app/error/layout.tsx b/src/app/error/layout.tsx
new file mode 100644
index 0000000..b497b10
--- /dev/null
+++ b/src/app/error/layout.tsx
@@ -0,0 +1,22 @@
+import Link from "next/link";
+import { Button } from "~/app/_components/ui/button";
+
+export default function ErrorLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <main className="my-20">
+      <h1 className="text-center text-2xl font-bold lowercase underline underline-offset-4">
+        Error
+      </h1>
+      <div className="mx-auto max-w-6xl px-6">
+        <div className="flex flex-col items-center space-y-8 p-8">
+          {children}
+          <Button asChild>
+            <Link href="/">Try again</Link>
+          </Button>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/src/app/error/permitted-users/page.tsx b/src/app/error/permitted-users/page.tsx
new file mode 100644
index 0000000..83fef0a
--- /dev/null
+++ b/src/app/error/permitted-users/page.tsx
@@ -0,0 +1,8 @@
+export default async function PermittedUsers() {
+  return (
+    <p>
+      the email you provided is not a permitted user of{" "}
+      <span className="font-bold">ls</span>.
+    </p>
+  );
+}
diff --git a/src/server/auth/config.ts b/src/server/auth/config.ts
index 67dadc2..56d5f87 100644
--- a/src/server/auth/config.ts
+++ b/src/server/auth/config.ts
@@ -57,8 +57,18 @@ export const authConfig = {
     verificationTokensTable: verificationTokens,
   }),
   callbacks: {
-    signIn: ({ user }) =>
-      !!user?.email && env.PERMITTED_USERS.includes(user.email),
+    signIn: ({ user }) => {
+      console.log("found:", user.email);
+      if (!user?.email) {
+        return "/error/email-not-found";
+      }
+
+      if (!env.PERMITTED_USERS.includes(user.email)) {
+        return `/error/permitted-users?email=${user.email}`;
+      }
+
+      return true;
+    },
     session: ({ session, user }) => ({
       ...session,
       user: {