feat: upgrade authjs & login page

Author: luannguyenQV

apps/web/@/actions/auth/index.ts

@@ -1,9 +1,8 @@
 "use server"
 
-import { signIn } from "configs/auth"
+import { signIn, signOut } from "configs/auth"
 
 export const signInWithCredentials = async (email: string, password: string) => {
-  console.log(">>>>>", email, password)
   await signIn("credentials", {
     email,
     password,
@@ -13,3 +12,9 @@ export const signInWithCredentials = async (email: string, password: string) =>
 export const signInWithGithub = async () => {
   await signIn("github")
 }
+
+export const onSignOut = async () => {
+  await signOut({
+    redirectTo: "/",
+  })
+}

apps/web/@/actions/manage-post/index.ts

@@ -2,8 +2,8 @@ const APP_ROUTES = {
   // Public routes
   HOME: "/",
 
-  LOGIN: "/sign-in",
-  REGISTER: "/register",
+  LOGIN: "/signin",
+  REGISTER: "/signup",
   FORGOT_PASSWORD: "/forgot-password",
   RESET_PASSWORD: "/reset-password",
   VERIFY_EMAIL: "/verify-email",

apps/web/@/constants/routes.ts

@@ -44,7 +44,7 @@ export default async function Nav() {
             <div className="flex w-20 items-center">
               <Link
                 className="inline-flex h-10 w-20 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-                href="/sign-in"
+                href="/signin"
               >
                 {t("common.signIn")}
               </Link>

apps/web/@/molecules/nav/index.tsx

@@ -1,21 +1,24 @@
 "use client"
 
-import { signOut } from "next-auth/react"
 import { useTranslations } from "next-intl"
 import { DropdownMenuItem, DropdownMenuShortcut } from "ui"
 
+import { onSignOut } from "@/actions/auth"
+
 export const LogoutMenu = () => {
   const t = useTranslations()
-  const onSignOut = () => {
-    signOut({
-      callbackUrl: "/",
-    })
-  }
 
   return (
-    <DropdownMenuItem onClick={onSignOut}>
-      {t("common.signOut")}
-      <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-    </DropdownMenuItem>
+    <form action={onSignOut}>
+      <button
+        type="submit"
+        className="w-full"
+      >
+        <DropdownMenuItem className="hover:cursor-pointer">
+          {t("common.signOut")}
+          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </button>
+    </form>
   )
 }

apps/web/@/molecules/user-nav/LogoutMenu.tsx

@@ -64,7 +64,7 @@ const RegisterPage: React.FC = () => {
         </div>
 
         <div className="mt-4 text-center">
-          <Link href="sign-in">
+          <Link href="signin">
             <Typography
               variant="span"
               className="mt-4"

apps/web/app/[lang]/(auth)/signup/page.tsx

@@ -2,46 +2,29 @@ import React from "react"
 import { Metadata } from "next/types"
 
 import { auth } from "configs/auth"
-import { getPosts } from "database"
+import { getUser } from "database"
 
-import NoItemFounded from "@/molecules/no-item-founded"
 import PageTitle from "@/molecules/page-title"
-import Filter from "@/molecules/user/posts/filter"
-import PostItem from "@/molecules/user/posts/post-item"
 
 export async function generateMetadata(): Promise<Metadata> {
+  const session = await auth()
+  const user = await getUser({ userId: session?.user?.id })
+
   return {
-    title: "Posts",
-    description: "User posts",
+    title: `Posts - ${user?.data?.name}`,
+    description: `Posts of ${user?.data?.name}`,
   }
 }
 
 export default async function Page({ searchParams }) {
   const session = await auth()
-  const { total, data } = await getPosts({
-    searchParams: {
-      authorId: session?.user?.id,
-      ...searchParams,
-    },
-  })
 
   return (
     <div>
       <PageTitle title="Posts" />
 
-      <Filter total={total} />
-
       <div className="mt-12">
-        {data?.data?.length === 0 ? (
-          <NoItemFounded />
-        ) : (
-          data?.data?.map((post) => (
-            <PostItem
-              key={post.id}
-              {...post}
-            />
-          ))
-        )}
+        <div>TOTO</div>
       </div>
     </div>
   )

apps/web/app/[lang]/(protected)/user/posts/page.tsx

@@ -1,3 +1,3 @@
-import { handlers } from "configs/auth"
+import { GET, POST } from "configs/auth"
 
-export { handlers as GET, handlers as POST }
+export { GET, POST }

apps/web/app/api/auth/[...nextauth]/route.ts

@@ -4,7 +4,12 @@ import NextAuth from "next-auth"
 import Credentials from "next-auth/providers/credentials"
 import GithubProvider from "next-auth/providers/github"
 
-export const { handlers, auth, signIn, signOut } = NextAuth({
+export const {
+  handlers: { GET, POST },
+  auth,
+  signIn,
+  signOut,
+} = NextAuth({
   adapter: PrismaAdapter(prisma),
   providers: [
     GithubProvider({
@@ -17,8 +22,6 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
         password: {},
       },
       authorize: async (credentials: Record<string, string>) => {
-        console.log(">>>>>", credentials)
-
         try {
           const user = await prisma.user.findUnique({
             where: {
@@ -39,7 +42,7 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
     }),
   ],
   pages: {
-    signIn: "/sign-in",
+    signIn: "/signin",
   },
   session: {
     strategy: "jwt",

apps/web/configs/auth.ts

@@ -17,7 +17,7 @@ export async function middleware(req: NextRequest) {
   if (!session?.user?.email && currentPathname.startsWith("/user")) {
     const newUrl = req.nextUrl.clone()
     const currentSearchParam = newUrl.searchParams.toString()
-    newUrl.pathname = "/sign-in"
+    newUrl.pathname = "/signin"
     newUrl.searchParams.set(
       "callbackUrl",
       encodeURIComponent(`${currentPathname}?${currentSearchParam}`)