Improved signin error messaging

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();
   }
 

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>;
+}

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>
+  );
+}

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>
+  );
+}

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: {