Authentication System Refactor

client/package.json

@@ -40,12 +40,12 @@
     "country-iso-3-to-2": "^1.1.1",
     "d3": "7.9.0",
     "framer-motion": "11.11.9",
+    "jose": "^5.9.6",
     "jotai": "2.10.1",
     "lodash.isequal": "4.5.0",
     "lucide-react": "0.447.0",
     "mapbox-gl": "3.7.0",
     "next": "14.2.10",
-    "next-auth": "4.24.8",
     "nuqs": "2.0.4",
     "react": "^18",
     "react-country-flag": "^3.1.0",

client/src/app/auth/api/session/route.ts

@@ -0,0 +1,16 @@
+import { NextResponse } from "next/server";
+
+import { getServerSession } from "@/lib/auth/server";
+import { AuthApiResponse } from "@/lib/auth/types";
+import { AppSession } from "@/lib/auth/types";
+
+export async function GET(): Promise<
+  NextResponse<AuthApiResponse<AppSession | null>>
+> {
+  const session = await getServerSession();
+
+  return NextResponse.json({
+    body: session || null,
+    status: session ? 200 : 401,
+  });
+}

client/src/app/auth/api/signin/route.ts

@@ -0,0 +1,43 @@
+import { NextRequest, NextResponse } from "next/server";
+
+import { generateUserJWT } from "@/lib/auth/jwt";
+import { setAuthCookie, setResponseCookie } from "@/lib/auth/server";
+import { AuthApiResponse, AppSession } from "@/lib/auth/types";
+import { client } from "@/lib/query-client";
+
+export async function POST(
+  req: NextRequest,
+): Promise<NextResponse<AuthApiResponse<AppSession | null>>> {
+  try {
+    const { email, password } = await req.json();
+
+    const response = await client.auth.login.mutation({
+      body: { email, password },
+    });
+
+    if (response.status !== 201) {
+      return NextResponse.json({
+        body: null,
+        status: response.status,
+        error: response.body.errors?.[0]?.title || "Invalid credentials",
+      });
+    }
+
+    setResponseCookie(response.headers);
+
+    const appSession: AppSession = response.body;
+    const token = await generateUserJWT(appSession);
+    setAuthCookie(token);
+
+    return NextResponse.json({
+      body: appSession,
+      status: 201,
+    });
+  } catch (err) {
+    return NextResponse.json({
+      body: null,
+      status: 500,
+      error: "An error occurred during sign in",
+    });
+  }
+}

client/src/app/auth/api/signout/route.ts

@@ -0,0 +1,13 @@
+import { NextResponse } from "next/server";
+
+import { revokeSession } from "@/lib/auth/server";
+import { AuthApiResponse } from "@/lib/auth/types";
+
+export async function POST(): Promise<NextResponse<AuthApiResponse<null>>> {
+  await revokeSession();
+
+  return NextResponse.json({
+    body: null,
+    status: 200,
+  });
+}

client/src/app/auth/signin/page.tsx

@@ -2,7 +2,7 @@ import { redirect } from "next/navigation";
 
 import { Metadata } from "next";
 
-import { auth } from "@/app/auth/api/[...nextauth]/config";
+import { getServerSession } from "@/lib/auth/server";
 
 import SignIn from "@/containers/auth/signin";
 import AuthLayout from "@/containers/auth-layout";
@@ -13,7 +13,7 @@ export const metadata: Metadata = {
 };
 
 export default async function SignInPage() {
-  const session = await auth();
+  const session = await getServerSession();
 
   if (session) {
     redirect("/profile");

client/src/app/auth/signup/page.tsx

@@ -2,7 +2,7 @@ import { redirect } from "next/navigation";
 
 import { Metadata } from "next";
 
-import { auth } from "@/app/auth/api/[...nextauth]/config";
+import { getServerSession } from "@/lib/auth/server";
 
 import SignUp from "@/containers/auth/signup";
 import AuthLayout from "@/containers/auth-layout";
@@ -13,7 +13,7 @@ export const metadata: Metadata = {
 };
 
 export default async function SignInPage() {
-  const session = await auth();
+  const session = await getServerSession();
 
   if (session) {
     redirect("/profile");

client/src/app/layout.tsx

@@ -4,10 +4,9 @@ import { Spline_Sans } from "next/font/google";
 
 import type { Metadata } from "next";
 import "@/app/globals.css";
-import { getServerSession } from "next-auth";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 
-import { config } from "@/app/auth/api/[...nextauth]/config";
+import { getServerSession } from "@/lib/auth/server";
 
 import IntroModal from "@/containers/intro-modal";
 import MainNav from "@/containers/nav";
@@ -49,7 +48,7 @@ export const metadata: Metadata = {
 export default async function RootLayout({
   children,
 }: Readonly<PropsWithChildren>) {
-  const session = await getServerSession(config);
+  const session = await getServerSession();
 
   return (
     <LayoutProviders session={session}>

client/src/app/my-projects/page.tsx

@@ -4,16 +4,15 @@ import {
   QueryClient,
 } from "@tanstack/react-query";
 
+import { getServerSession } from "@/lib/auth/server";
 import { client } from "@/lib/query-client";
 import { queryKeys } from "@/lib/query-keys";
 
-import { auth } from "@/app/auth/api/[...nextauth]/config";
-
 import MyProjectsView from "@/containers/my-projects";
 
 export default async function MyProjects() {
   const queryClient = new QueryClient();
-  const session = await auth();
+  const session = await getServerSession();
 
   await queryClient.prefetchQuery({
     queryKey: queryKeys.customProjects.all().queryKey,

client/src/app/profile/page.tsx

@@ -1,19 +1,18 @@
 import { QueryClient, dehydrate } from "@tanstack/react-query";
 import { HydrationBoundary } from "@tanstack/react-query";
 
+import { getServerSession } from "@/lib/auth/server";
 import { client } from "@/lib/query-client";
 import { queryKeys } from "@/lib/query-keys";
 
-import { auth } from "@/app/auth/api/[...nextauth]/config";
-
 import Profile from "@/containers/profile";
 
 export default async function ProfilePage() {
   const queryClient = new QueryClient();
-  const session = await auth();
+  const session = await getServerSession();
 
   await queryClient.prefetchQuery({
-    queryKey: queryKeys.user.me(session?.user?.id as string).queryKey,
+    queryKey: queryKeys.user.me(session?.user.id as string).queryKey,
     queryFn: () =>
       client.user.findMe.query({
         extraHeaders: {

client/src/app/providers.tsx

@@ -8,12 +8,11 @@ import {
   QueryClientProvider,
 } from "@tanstack/react-query";
 import { createStore, Provider as JotaiProvider } from "jotai";
-import { Session } from "next-auth";
-import { SessionProvider } from "next-auth/react";
 
+import { AuthProvider } from "@/lib/auth/context";
+import { AppSession } from "@/lib/auth/types";
 import { makeQueryClient } from "@/lib/query-client";
 
-import SessionChecker from "@/components/session-checker";
 import { TooltipProvider } from "@/components/ui/tooltip";
 
 let browserQueryClient: QueryClient | undefined = undefined;
@@ -35,24 +34,21 @@ export function getQueryClient() {
 export default function LayoutProviders({
   children,
   session,
-}: PropsWithChildren<{ session: Session | null }>) {
+}: PropsWithChildren<{ session: AppSession | null }>) {
   const queryClient = getQueryClient();
   const appStore = createStore();
 
   return (
     <>
-      <SessionProvider session={session} basePath="/auth/api">
+      <AuthProvider initialSession={session}>
         <TooltipProvider>
           <QueryClientProvider client={queryClient}>
             <TooltipProvider>
-              <JotaiProvider store={appStore}>
-                <SessionChecker />
-                {children}
-              </JotaiProvider>
+              <JotaiProvider store={appStore}>{children}</JotaiProvider>
             </TooltipProvider>
           </QueryClientProvider>
         </TooltipProvider>
-      </SessionProvider>
+      </AuthProvider>
     </>
   );
 }