Merge pull request #7 from sambecker/auth-upgrade

Upgrade next-auth to 5.0

.vscode/settings.json

@@ -19,6 +19,7 @@
     "qaub",
     "QRSTUVWXYZ",
     "Reala",
+    "CredentialsSignin",
     "skippable",
     "sonner",
     "thephotoblog",

README.md

@@ -50,8 +50,9 @@ Installation
 ### 4. Develop locally
 
 1. Clone code
-2. Install dependencies `pnpm i`
-3. Run `vc dev` to utilize Vercel-stored environment variables
+2. Run `pnpm i` to install dependencies
+3. Set environment variable `AUTH_URL` locally (not in production) to `http://localhost:3000/api/url` (_this is a temporary limitation of `next-auth` v5.0_)
+4. Run `vc dev` to start dev server, and utilize Vercel-stored environment variables
 
 ### 5. Add Analytics (optional)
 
@@ -68,8 +69,8 @@ Installation
 
 FAQ
 -
-Q: My images/content have fallen out of sync with my database and/or production site no longer matches local development. What do I do?<br />
-A: Navigate to `/admin/configuration` and click the "Clear Cache" button.
+Q: My images/content have fallen out of sync with my database and/or my production site no longer matches local development. What do I do?<br />
+A: Navigate to `/admin/configuration` and click "Clear Cache" button.
 
 Q: I'm seeing server-side runtime errors when loading a page after updating my fork. What do I do?<br />
-A: Navigate to `/admin/configuration` and click the "Clear Cache" button. If this doesn't help, [open an issue](https://github.com/sambecker/exif-photo-blog/issues/new).
+A: Navigate to `/admin/configuration` and click "Clear Cache" button. If this doesn't help, [open an issue](https://github.com/sambecker/exif-photo-blog/issues/new).

package.json

@@ -32,7 +32,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "nanoid": "^5.0.2",
     "next": "^14.0.1",
-    "next-auth": "0.0.0-manual.c885ac1d",
+    "next-auth": "5.0.0-beta.3",
     "next-themes": "^0.2.1",
     "postcss": "8.4.31",
     "react": "18.2.0",

pnpm-lock.yaml

@@ -75,8 +75,8 @@ dependencies:
     specifier: ^14.0.1
     version: 14.0.1(@babel/core@7.23.0)(react-dom@18.2.0)(react@18.2.0)
   next-auth:
-    specifier: 0.0.0-manual.c885ac1d
-    version: 0.0.0-manual.c885ac1d(next@14.0.1)(react@18.2.0)
+    specifier: 5.0.0-beta.3
+    version: 5.0.0-beta.3(next@14.0.1)(react@18.2.0)
   next-themes:
     specifier: ^0.2.1
     version: 0.2.1(next@14.0.1)(react-dom@18.2.0)(react@18.2.0)
@@ -4053,10 +4053,10 @@ packages:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: false
 
-  /next-auth@0.0.0-manual.c885ac1d(next@14.0.1)(react@18.2.0):
-    resolution: {integrity: sha512-kL5Ead+uIQNjfSWjo/MVxzte+jJSD+N/XIGkYmqyjQmNxE5wDvJ6zuwo+h+QPBnTVf+jmOsOlzr65tPN7OY5fA==}
+  /next-auth@5.0.0-beta.3(next@14.0.1)(react@18.2.0):
+    resolution: {integrity: sha512-WOKhATBFGeONV+29HzFmspNmL7NXxrsCWLfaDKmAd/4DD1nqXE0BzNFH8t3SJBx7PUDMnB6F7xB76LM/AaV1MQ==}
     peerDependencies:
-      next: ^13.5.3
+      next: ^14
       nodemailer: ^6.6.5
       react: ^18.2.0
     peerDependenciesMeta:

src/admin/DeleteButton.tsx

@@ -1,9 +1,10 @@
 import SubmitButtonWithStatus from '@/components/SubmitButtonWithStatus';
+import { FaTimes } from 'react-icons/fa';
 
 export default function DeleteButton () {
   return <SubmitButtonWithStatus
     title="Delete"
-    icon={<span className="inline-flex text-[18px]">×</span>}
+    icon={<FaTimes size={13} className="translate-y-[1px]" />}
   >
     Delete
   </SubmitButtonWithStatus>;

src/auth/SignInForm.tsx

@@ -3,60 +3,55 @@
 import FieldSetWithStatus from '@/components/FieldSetWithStatus';
 import InfoBlock from '@/components/InfoBlock';
 import SubmitButtonWithStatus from '@/components/SubmitButtonWithStatus';
-import { PATH_ADMIN_PHOTOS } from '@/site/paths';
-import { signIn } from 'next-auth/react';
 import { useLayoutEffect, useRef, useState } from 'react';
+import { signInAction } from './action';
+import { useFormState } from 'react-dom';
+import ErrorNote from '@/components/ErrorNote';
+import { CREDENTIALS_SIGN_IN_ERROR } from '.';
 
 export default function SignInForm() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [isSigningIn, setIsSigningIn] = useState(false);
+  const [response, action] = useFormState(signInAction, undefined);
 
   const emailRef = useRef<HTMLInputElement>(null);
   useLayoutEffect(() => {
     emailRef.current?.focus();
   }, []);
 
+  const isFormValid =
+    email.length > 0 &&
+    password.length > 0;
+
   return (
     <InfoBlock>
-      <form
-        className="space-y-8"
-        onSubmitCapture={e => {
-          e.preventDefault();
-          setIsSigningIn(true);
-          signIn(
-            'credentials',
-            {
-              email,
-              password,
-              callbackUrl: PATH_ADMIN_PHOTOS,
-            },
-          )
-            .catch(() => setIsSigningIn(false));
-        }}
-      >
-        <div className="space-y-4">
-          <FieldSetWithStatus
-            id="email"
-            inputRef={emailRef}
-            label="Admin Email"
-            type="email"
-            value={email}
-            onChange={setEmail}
-            readOnly={isSigningIn}
-          />
-          <FieldSetWithStatus
-            id="password"
-            label="Admin Password"
-            type="password"
-            value={password}
-            onChange={setPassword}
-            readOnly={isSigningIn}
-          />
+      <form action={action}>
+        <div className="space-y-8">
+          {response === CREDENTIALS_SIGN_IN_ERROR &&
+            <ErrorNote>
+              Invalid email/password
+            </ErrorNote>}
+          <div className="space-y-4">
+            <FieldSetWithStatus
+              id="email"
+              inputRef={emailRef}
+              label="Admin Email"
+              type="email"
+              value={email}
+              onChange={setEmail}
+            />
+            <FieldSetWithStatus
+              id="password"
+              label="Admin Password"
+              type="password"
+              value={password}
+              onChange={setPassword}
+            />
+          </div>
+          <SubmitButtonWithStatus disabled={!isFormValid}>
+            Sign in
+          </SubmitButtonWithStatus>
         </div>
-        <SubmitButtonWithStatus disabled={isSigningIn}>
-          Sign in
-        </SubmitButtonWithStatus>
       </form>
     </InfoBlock>
   );

src/auth/action.ts

@@ -0,0 +1,21 @@
+'use server';
+
+import { CREDENTIALS_SIGN_IN_ERROR, signIn, signOut } from '@/auth';
+
+export const signInAction = async (
+  _prevState: string | undefined,
+  formData: FormData,
+) => {
+  try {
+    await signIn('credentials', Object.fromEntries(formData));
+  } catch (error) {
+    if ((error as Error).message.includes(CREDENTIALS_SIGN_IN_ERROR)) {
+      return CREDENTIALS_SIGN_IN_ERROR;
+    }
+    throw error;
+  }
+};
+
+export const signOutAction = async () => {
+  await signOut();
+};

src/auth/index.ts

@@ -1,25 +1,17 @@
 import { isPathProtected } from '@/site/paths';
-import NextAuth, { User, type DefaultSession } from 'next-auth';
+import NextAuth, { User } from 'next-auth';
 import Credentials from 'next-auth/providers/credentials';
 
-declare module 'next-auth' {
-  interface Session {
-    user: {
-      id: string
-    } & DefaultSession['user']
-  }
-}
+export const CREDENTIALS_SIGN_IN_ERROR = 'CredentialsSignin';
 
 export const {
   handlers: { GET, POST },
+  signIn,
+  signOut,
   auth,
 } = NextAuth({
   providers: [
     Credentials({
-      credentials: {
-        email: { label: 'Email', type: 'text' },
-        password: { label: 'Password', type: 'password' },
-      },
       async authorize({ email, password }) {
         if (
           process.env.ADMIN_EMAIL && process.env.ADMIN_EMAIL === email &&

src/cache/index.ts

@@ -15,7 +15,7 @@ import {
 } from '@/services/postgres';
 import { parseCachedPhotosDates, parseCachedPhotoDates } from '@/photo';
 import { getBlobPhotoUrls, getBlobUploadUrls } from '@/services/blob';
-import { AuthSession } from 'next-auth';
+import type { Session } from 'next-auth';
 import { Camera, createCameraKey } from '@/camera';
 import { PATHS_ADMIN, PATHS_TO_CACHE } from '@/site/paths';
 
@@ -226,7 +226,7 @@ export const getBlobPhotoUrlsCached: typeof getBlobPhotoUrls = (...args) =>
     }
   )();
 
-export const getImageCacheHeadersForAuth = (session: AuthSession | null) => {
+export const getImageCacheHeadersForAuth = (session: Session | null) => {
   return {
     'Cache-Control': !session?.user
       ? 's-maxage=3600, stale-while-revalidate=59'

src/components/ErrorNote.tsx

@@ -0,0 +1,25 @@
+import { cc } from '@/utility/css';
+import { BiErrorAlt } from 'react-icons/bi';
+
+export default function ErrorNote({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className={cc(
+      'flex items-center gap-3',
+      'px-3 py-2 border',
+      'text-red-600 dark:text-red-500/90',
+      'bg-red-50/50 dark:bg-red-950/50',
+      'border-red-100 dark:border-red-950',
+      'rounded-md',
+    )}>
+      <BiErrorAlt
+        size={18}
+        className="text-red-600/80 dark:text-red-500/70"
+      />
+      {children}
+    </div>
+  );
+}

src/components/ImageInput.tsx

@@ -4,9 +4,9 @@ import { blobToImage } from '@/utility/blob';
 import { useRef, useState } from 'react';
 import { CopyExif } from '@/lib/CopyExif';
 import { cc } from '@/utility/css';
-import { AiOutlineCloudUpload } from 'react-icons/ai';
 import Spinner from './Spinner';
 import { ACCEPTED_PHOTO_FILE_TYPES } from '@/photo';
+import { FiUploadCloud } from 'react-icons/fi';
 
 const INPUT_ID = 'file';
 
@@ -49,10 +49,10 @@ export default function ImageInput({
           >
             <span className="w-4 inline-flex items-center">
               {loading
-                ? <Spinner color="text" />
-                : <AiOutlineCloudUpload
-                  size={18}
-                  className="translate-y-[0.5px]"
+                ? <Spinner color="text" className="translate-y-[0.5px]" />
+                : <FiUploadCloud
+                  size={17}
+                  className="translate-y-[0.5px] shrink-0"
                 />}
             </span>
             Upload Photo

src/components/SubmitButtonWithStatus.tsx

@@ -8,11 +8,13 @@ import { cc } from '@/utility/css';
 
 interface Props extends HTMLProps<HTMLButtonElement> {
   icon?: JSX.Element
+  styleAsLink?: boolean
 }
 
 export default function SubmitButtonWithStatus(props: Props) {
   const {
     icon,
+    styleAsLink,
     children,
     disabled,
     className,
@@ -29,14 +31,17 @@ export default function SubmitButtonWithStatus(props: Props) {
       className={cc(
         className,
         'inline-flex items-center gap-2',
+        styleAsLink && 'link',
       )}
       {...buttonProps}
     >
       {(icon || pending) &&
         <span className={cc(
+          'h-4',
           'min-w-[1rem]',
           'inline-flex justify-center sm:justify-normal',
           '-mx-0.5',
+          'translate-y-[1px]',
         )}>
           {pending
             ? <Spinner size={14} />

src/site/FooterAuth.tsx

@@ -2,22 +2,23 @@
 
 import { cc } from '@/utility/css';
 import Link from 'next/link';
-import { useSession, signOut } from 'next-auth/react';
+import { useSession } from 'next-auth/react';
 import ThemeSwitcher from '@/site/ThemeSwitcher';
 import SiteGrid from '../components/SiteGrid';
 import { usePathname } from 'next/navigation';
 import { isPathSignIn } from '@/site/paths';
+import { signOutAction } from '@/auth/action';
+import SubmitButtonWithStatus from '@/components/SubmitButtonWithStatus';
 
 const LINK_STYLE = cc(
   'cursor-pointer',
-  'hover:text-gray-600',
+  'hover:text-gray-300',
+  'hover:dark:text-gray-600',
 );
 
 export default function FooterAuth() {
   const { data: session, status  } = useSession();
 
-  const hasState = status !== 'loading';
-
   const path = usePathname();
 
   return (
@@ -27,27 +28,30 @@ export default function FooterAuth() {
         'my-8',
         'text-dim',
       )}>
-        <div className="flex gap-x-4 gap-y-1 flex-wrap flex-grow">
-          {hasState
-            ? <>
-              {session?.user === undefined &&
-                <>Loading ...</>}
-              {session?.user.email && <>
-                <div>{session.user.email}</div>
-                <div
-                  onClick={() => signOut()}
+        <div className="flex gap-x-4 gap-y-1 flex-wrap items-center flex-grow">
+          {status === 'loading'
+            ? <>Loading ...</>
+            : <>
+              {session?.user?.email && <div>
+                {session.user.email}
+              </div>}
+              {status === 'authenticated' &&
+                <form action={signOutAction}>
+                  <SubmitButtonWithStatus
+                    className={LINK_STYLE}
+                    styleAsLink
+                  >
+                    Sign Out
+                  </SubmitButtonWithStatus>
+                </form>}
+              {status === 'unauthenticated' &&
+                <Link
+                  href="/sign-in"
                   className={LINK_STYLE}
                 >
-                  Sign Out
-                </div>
-              </>}
-            </>
-            : <Link
-              href="/sign-in"
-              className={LINK_STYLE}
-            >
-              Sign In
-            </Link>}
+                  Sign In
+                </Link>}
+            </>}
         </div>
         {!isPathSignIn(path) && <ThemeSwitcher />}
       </div>}

src/site/globals.css

@@ -72,10 +72,11 @@
       px-4
       text-base
       shadow-sm
-      disabled:bg-gray-100 dark:disabled:bg-gray-900 disabled:cursor-not-allowed
       active:bg-gray-100 dark:active:bg-gray-900
       hover:border-gray-300 dark:hover:border-gray-600
-      hover:disabled:border-gray-200
+      disabled:cursor-not-allowed
+      disabled:bg-gray-100 dark:disabled:bg-gray-900
+      disabled:border-gray-200 disabled:dark:border-gray-700
   }
   button.subtle, .button.subtle {
     @apply
@@ -97,6 +98,11 @@
     @apply
       text-medium
   }
+  button.link {
+    @apply
+      p-0 min-h-0
+      border-none active:bg-transparent shadow-none
+  }
   /* Toasts */
   .toaster [data-sonner-toast] {
     @apply