From 34b9d3d93ce1673db037a6aa70c074a5e5ec6e14 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 14 Jan 2024 18:40:51 -0600
Subject: [PATCH] Refine auth error handling

---
 src/auth/SignInForm.tsx | 12 ++++++++++--
 src/auth/actions.ts     | 21 +++++++++++++++------
 src/auth/index.ts       |  3 ++-
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/auth/SignInForm.tsx b/src/auth/SignInForm.tsx
index 82c6b5be..d30ab0a4 100644
--- a/src/auth/SignInForm.tsx
+++ b/src/auth/SignInForm.tsx
@@ -7,9 +7,12 @@ import { useLayoutEffect, useRef, useState } from 'react';
 import { signInAction } from './actions';
 import { useFormState } from 'react-dom';
 import ErrorNote from '@/components/ErrorNote';
-import { CREDENTIALS_SIGN_IN_ERROR } from '.';
+import { KEY_CALLBACK_URL, KEY_CREDENTIALS_SIGN_IN_ERROR } from '.';
+import { useSearchParams } from 'next/navigation';
 
 export default function SignInForm() {
+  const params = useSearchParams();
+
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [response, action] = useFormState(signInAction, undefined);
@@ -27,7 +30,7 @@ export default function SignInForm() {
     <InfoBlock>
       <form action={action}>
         <div className="space-y-8">
-          {response === CREDENTIALS_SIGN_IN_ERROR &&
+          {response === KEY_CREDENTIALS_SIGN_IN_ERROR &&
             <ErrorNote>
               Invalid email/password
             </ErrorNote>}
@@ -47,6 +50,11 @@ export default function SignInForm() {
               value={password}
               onChange={setPassword}
             />
+            <input
+              type="hidden"
+              name={KEY_CALLBACK_URL}
+              value={params.get(KEY_CALLBACK_URL) ?? ''}
+            />
           </div>
           <SubmitButtonWithStatus disabled={!isFormValid}>
             Sign in
diff --git a/src/auth/actions.ts b/src/auth/actions.ts
index 793c1540..94c8d430 100644
--- a/src/auth/actions.ts
+++ b/src/auth/actions.ts
@@ -1,6 +1,13 @@
 'use server';
 
-import { CREDENTIALS_SIGN_IN_ERROR, signIn, signOut } from '@/auth';
+import {
+  KEY_CALLBACK_URL,
+  KEY_CREDENTIALS_SIGN_IN_ERROR,
+  signIn,
+  signOut,
+} from '@/auth';
+import { PATH_ADMIN_PHOTOS } from '@/site/paths';
+import { redirect } from 'next/navigation';
 
 export const signInAction = async (
   _prevState: string | undefined,
@@ -9,13 +16,15 @@ export const signInAction = async (
   try {
     await signIn('credentials', Object.fromEntries(formData));
   } catch (error) {
-    if ((`${error}`).includes(CREDENTIALS_SIGN_IN_ERROR)) {
-      return CREDENTIALS_SIGN_IN_ERROR;
-    } else {
-      console.log('Next Auth Error', error);
+    if (`${error}`.includes(KEY_CREDENTIALS_SIGN_IN_ERROR)) {
+      // Rethrow credentials error to display on the sign in page.
+      return KEY_CREDENTIALS_SIGN_IN_ERROR;
+    } else if (!`${error}`.includes('NEXT_REDIRECT')) {
+      // Rethrow non-redirect errors
+      throw error;
     }
-    throw error;
   }
+  redirect(formData.get(KEY_CALLBACK_URL) as string || PATH_ADMIN_PHOTOS);
 };
 
 export const signOutAction = async () => {
diff --git a/src/auth/index.ts b/src/auth/index.ts
index db3cc98d..b6057ed2 100644
--- a/src/auth/index.ts
+++ b/src/auth/index.ts
@@ -2,7 +2,8 @@ import { isPathProtected } from '@/site/paths';
 import NextAuth, { User } from 'next-auth';
 import Credentials from 'next-auth/providers/credentials';
 
-export const CREDENTIALS_SIGN_IN_ERROR = 'CredentialsSignin';
+export const KEY_CREDENTIALS_SIGN_IN_ERROR = 'CredentialsSignin';
+export const KEY_CALLBACK_URL = 'callbackUrl';
 
 export const {
   handlers: { GET, POST },