Refactor core auth primitives

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/auth/SignInForm.tsx

@@ -3,14 +3,12 @@
 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';
 
 export default function SignInForm() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [isSigningIn, setIsSigningIn] = useState(false);
 
   const emailRef = useRef<HTMLInputElement>(null);
   useLayoutEffect(() => {
@@ -21,19 +19,7 @@ export default function SignInForm() {
     <InfoBlock>
       <form
         className="space-y-8"
-        onSubmitCapture={e => {
-          e.preventDefault();
-          setIsSigningIn(true);
-          signIn(
-            'credentials',
-            {
-              email,
-              password,
-              callbackUrl: PATH_ADMIN_PHOTOS,
-            },
-          )
-            .catch(() => setIsSigningIn(false));
-        }}
+        action={signInAction}
       >
         <div className="space-y-4">
           <FieldSetWithStatus
@@ -43,7 +29,6 @@ export default function SignInForm() {
             type="email"
             value={email}
             onChange={setEmail}
-            readOnly={isSigningIn}
           />
           <FieldSetWithStatus
             id="password"
@@ -51,10 +36,9 @@ export default function SignInForm() {
             type="password"
             value={password}
             onChange={setPassword}
-            readOnly={isSigningIn}
           />
         </div>
-        <SubmitButtonWithStatus disabled={isSigningIn}>
+        <SubmitButtonWithStatus>
           Sign in
         </SubmitButtonWithStatus>
       </form>

src/auth/action.ts

@@ -0,0 +1,12 @@
+'use server';
+
+import { signIn } from '@/auth';
+
+export const signInAction = async (formData: FormData) => {
+  try {
+    signIn('credentials', Object.fromEntries(formData));
+  } catch (error) {
+    console.log('Cannot sign in user', error);
+    throw(error);
+  }
+};

src/auth/index.ts

@@ -1,25 +1,13 @@
 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 {
   handlers: { GET, POST },
+  signIn,
   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 &&