From 4d32e763d1b0abd64af61b65d3c1dc0394d2e028 Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Sun, 14 Jan 2024 18:16:55 -0600 Subject: [PATCH 1/4] Add sign-in server-side logging --- src/auth/SignInForm.tsx | 2 +- src/auth/{action.ts => actions.ts} | 2 ++ src/site/FooterClient.tsx | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) rename src/auth/{action.ts => actions.ts} (89%) diff --git a/src/auth/SignInForm.tsx b/src/auth/SignInForm.tsx index c7f840b4..82c6b5be 100644 --- a/src/auth/SignInForm.tsx +++ b/src/auth/SignInForm.tsx @@ -4,7 +4,7 @@ import FieldSetWithStatus from '@/components/FieldSetWithStatus'; import InfoBlock from '@/components/InfoBlock'; import SubmitButtonWithStatus from '@/components/SubmitButtonWithStatus'; import { useLayoutEffect, useRef, useState } from 'react'; -import { signInAction } from './action'; +import { signInAction } from './actions'; import { useFormState } from 'react-dom'; import ErrorNote from '@/components/ErrorNote'; import { CREDENTIALS_SIGN_IN_ERROR } from '.'; diff --git a/src/auth/action.ts b/src/auth/actions.ts similarity index 89% rename from src/auth/action.ts rename to src/auth/actions.ts index c16db0bd..793c1540 100644 --- a/src/auth/action.ts +++ b/src/auth/actions.ts @@ -11,6 +11,8 @@ export const signInAction = async ( } catch (error) { if ((`${error}`).includes(CREDENTIALS_SIGN_IN_ERROR)) { return CREDENTIALS_SIGN_IN_ERROR; + } else { + console.log('Next Auth Error', error); } throw error; } diff --git a/src/site/FooterClient.tsx b/src/site/FooterClient.tsx index c26e0134..ab114e7c 100644 --- a/src/site/FooterClient.tsx +++ b/src/site/FooterClient.tsx @@ -9,7 +9,7 @@ import RepoLink from '../components/RepoLink'; import { usePathname } from 'next/navigation'; import { isPathAdmin, isPathSignIn, pathForAdminPhotos } from './paths'; import SubmitButtonWithStatus from '@/components/SubmitButtonWithStatus'; -import { signOutAction } from '@/auth/action'; +import { signOutAction } from '@/auth/actions'; import Spinner from '@/components/Spinner'; import AnimateItems from '@/components/AnimateItems'; From 34b9d3d93ce1673db037a6aa70c074a5e5ec6e14 Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Sun, 14 Jan 2024 18:40:51 -0600 Subject: [PATCH 2/4] 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() {
- {response === CREDENTIALS_SIGN_IN_ERROR && + {response === KEY_CREDENTIALS_SIGN_IN_ERROR && Invalid email/password } @@ -47,6 +50,11 @@ export default function SignInForm() { value={password} onChange={setPassword} /> +
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 }, From a28f730a1180b24a5d28361ebebeaafed1711403 Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Sun, 14 Jan 2024 18:57:32 -0600 Subject: [PATCH 3/4] Add additional sign-in logging --- src/auth/actions.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/auth/actions.ts b/src/auth/actions.ts index 94c8d430..b52c7f55 100644 --- a/src/auth/actions.ts +++ b/src/auth/actions.ts @@ -16,14 +16,19 @@ export const signInAction = async ( try { await signIn('credentials', Object.fromEntries(formData)); } catch (error) { + console.log('signInAction error: string', `${error}`); + console.log('signInAction error: object', error); if (`${error}`.includes(KEY_CREDENTIALS_SIGN_IN_ERROR)) { + console.log('signInAction: 01'); // Rethrow credentials error to display on the sign in page. return KEY_CREDENTIALS_SIGN_IN_ERROR; } else if (!`${error}`.includes('NEXT_REDIRECT')) { + console.log('signInAction: 02'); // Rethrow non-redirect errors throw error; } } + console.log('signInAction: 03'); redirect(formData.get(KEY_CALLBACK_URL) as string || PATH_ADMIN_PHOTOS); }; From 23129adb9c74a7e9f28934aa71303f3d81d0a8a8 Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Sun, 14 Jan 2024 19:49:15 -0600 Subject: [PATCH 4/4] Make auth error catching more resilient --- src/auth/actions.ts | 11 +++++------ src/auth/index.ts | 2 ++ 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/auth/actions.ts b/src/auth/actions.ts index b52c7f55..cb14b725 100644 --- a/src/auth/actions.ts +++ b/src/auth/actions.ts @@ -3,6 +3,7 @@ import { KEY_CALLBACK_URL, KEY_CREDENTIALS_SIGN_IN_ERROR, + KEY_CREDENTIALS_SIGN_IN_ERROR_URL, signIn, signOut, } from '@/auth'; @@ -16,19 +17,17 @@ export const signInAction = async ( try { await signIn('credentials', Object.fromEntries(formData)); } catch (error) { - console.log('signInAction error: string', `${error}`); - console.log('signInAction error: object', error); - if (`${error}`.includes(KEY_CREDENTIALS_SIGN_IN_ERROR)) { - console.log('signInAction: 01'); + if ( + `${error}`.includes(KEY_CREDENTIALS_SIGN_IN_ERROR) || + `${error}`.includes(KEY_CREDENTIALS_SIGN_IN_ERROR_URL) + ) { // Rethrow credentials error to display on the sign in page. return KEY_CREDENTIALS_SIGN_IN_ERROR; } else if (!`${error}`.includes('NEXT_REDIRECT')) { - console.log('signInAction: 02'); // Rethrow non-redirect errors throw error; } } - console.log('signInAction: 03'); redirect(formData.get(KEY_CALLBACK_URL) as string || PATH_ADMIN_PHOTOS); }; diff --git a/src/auth/index.ts b/src/auth/index.ts index b6057ed2..0bf0d476 100644 --- a/src/auth/index.ts +++ b/src/auth/index.ts @@ -3,6 +3,8 @@ import NextAuth, { User } from 'next-auth'; import Credentials from 'next-auth/providers/credentials'; export const KEY_CREDENTIALS_SIGN_IN_ERROR = 'CredentialsSignin'; +export const KEY_CREDENTIALS_SIGN_IN_ERROR_URL = + 'https://errors.authjs.dev#credentialssignin'; export const KEY_CALLBACK_URL = 'callbackUrl'; export const {