feat: add authentication middleware

Author: agmmtoo

app/(auth)/login/page.tsx

@@ -5,13 +5,14 @@ export default async function Page({
 }: {
   searchParams: Promise<{
     email?: string
+    from?: string
   }>
 }) {
-  const { email } = await searchParams
+  const { email, from = '/' } = await searchParams
   return (
     <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
       <div className="w-full max-w-sm">
-        <LoginForm email={email} />
+        <LoginForm email={email} from={from} />
       </div>
     </div>
   )

app/(protected)/borrows/page.tsx

@@ -25,9 +25,9 @@ import {
 } from '@/components/ui/pagination'
 
 import { getListBorrows } from '@/lib/api/borrow'
+import { Verify } from '@/lib/firebase/firebase'
 import { Borrow } from '@/lib/types/borrow'
 import { Book, Calendar, LibraryIcon, User } from 'lucide-react'
-import { cookies } from 'next/headers'
 import Link from 'next/link'
 
 const formatDate = (date: string): string => {
@@ -60,8 +60,9 @@ export default async function Borrows({
   const limit = Number(sp?.limit ?? 20)
   const library_id = sp?.library_id
 
-  const cookieStore = await cookies()
-  const token = cookieStore.get('auth')?.value
+  const headers = await Verify({
+    from: '/borrows',
+  })
 
   const res = await getListBorrows(
     {
@@ -72,9 +73,7 @@ export default async function Borrows({
       ...(library_id ? { library_id } : {}),
     },
     {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
+      headers,
     }
   )
 

app/(protected)/layout.tsx

@@ -1,16 +1,6 @@
-import { cookies } from 'next/headers'
-import { redirect } from 'next/navigation'
-
 export default async function ProtectedLayout({
   children,
 }: Readonly<{ children: React.ReactNode }>) {
-  // check if the user is authenticated
-  // if not, redirect to the login page
-  // REF: https://nextjs.org/docs/app/api-reference/functions/cookies
-  const c = await cookies()
-  const token = c.get('auth')
-  if (!token) {
-    redirect('/login')
-  }
+  console.log('layout is useless now: ')
   return <>{children}</>
 }

components/login-form.tsx

@@ -18,13 +18,21 @@ import Link from 'next/link'
 export function LoginForm({
   className,
   ...props
-}: React.ComponentPropsWithoutRef<'div'> & { email?: string }) {
+}: React.ComponentPropsWithoutRef<'div'> & { email?: string; from: string }) {
   const initialState = {
     error: '',
     email: props.email ?? '',
     password: '',
+    // to pass "from" to login form for redirecting after login
+    from: props.from,
   }
-  const [state, action, isPending] = useActionState(login, initialState, '/')
+
+  const [state, action, isPending] = useActionState(
+    login,
+    initialState,
+    props.from
+  )
+
   return (
     <div className={cn('flex flex-col gap-6', className)} {...props}>
       <Card>
@@ -78,7 +86,11 @@ export function LoginForm({
             </div>
             <div className="mt-4 text-center text-sm">
               Don&apos;t have an account?{' '}
-              <Link href="/signup" className="underline underline-offset-4">
+              <Link
+                href="/signup"
+                className="underline underline-offset-4"
+                replace
+              >
                 Sign up
               </Link>
             </div>

firebase.config.ts

@@ -1,13 +1,11 @@
-import { initializeApp } from 'firebase/app'
+// import { initializeApp } from 'firebase/app'
+// // import admin from 'firebase-admin'
 
-const firebaseConfig = {
-  apiKey: 'AIzaSyAyqBa-fgy4kVnBGQb6MEENYIcCvxvmqMc',
-  authDomain: 'librarease-dev.firebaseapp.com',
-  projectId: 'librarease-dev',
-  storageBucket: 'librarease-dev.firebasestorage.app',
-  messagingSenderId: '329808199046',
-  appId: '1:329808199046:web:33be1f2dde6b1b0d24c007',
-  measurementId: 'G-VJY7LPK50P',
-}
-
-export const app = initializeApp(firebaseConfig)
+// export const app = initializeApp(
+//   {
+//     apiKey: process.env.FIREBASE_API_KEY,
+//     authDomain: process.env.FIREBASE_AUTH_DOMAIN,
+//     projectId: process.env.FIREBASE_PROJECT_ID,
+//   },
+//   'client'
+// )

lib/actions/login.ts

@@ -1,6 +1,6 @@
 'use server'
 
-import { app } from '@/firebase.config'
+import { app } from '../firebase/client'
 import {
   getAuth,
   signInWithEmailAndPassword,
@@ -15,10 +15,11 @@ type formState = {
   error: string
   email: string
   password: string
+  from: string
 }
 
 export async function login(
-  _: formState,
+  formState: formState,
   formData: FormData
 ): Promise<formState> {
   const email = formData.get('email') as string
@@ -33,16 +34,18 @@ export async function login(
       error: 'Something went wrong',
       email,
       password,
+      from: formState.from,
     }
   }
 
   const user = userCredentials.user
+  const sessionName = process.env.SESSION_COOKIE_NAME as string
   const token = await user.getIdToken()
-
   const cookieStore = await cookies()
-  cookieStore.set('auth', token, {
+  cookieStore.delete(sessionName)
+  cookieStore.set(sessionName, token, {
     maxAge: 60 * 60 * 24 * 7,
   })
 
-  redirect('/', RedirectType.replace)
+  redirect(formState.from, RedirectType.replace)
 }

lib/firebase/admin.ts

@@ -0,0 +1,15 @@
+import admin from 'firebase-admin'
+import { applicationDefault } from 'firebase-admin/app'
+
+const adminApp = !admin.apps.length
+  ? admin.initializeApp(
+      {
+        // export GOOGLE_APPLICATION_CREDENTIALS="/path/to/serviceAccountKey.json"
+        credential: applicationDefault(),
+      },
+      'admin'
+    )
+  : admin.app('admin')
+// }
+
+export { adminApp }

lib/firebase/client.ts

@@ -0,0 +1,10 @@
+import { initializeApp } from 'firebase/app'
+
+export const app = initializeApp(
+  {
+    apiKey: process.env.FIREBASE_API_KEY,
+    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
+    projectId: process.env.FIREBASE_PROJECT_ID,
+  },
+  'client'
+)

lib/firebase/firebase.ts

@@ -0,0 +1,39 @@
+import { cookies } from 'next/headers'
+import { adminApp } from './admin'
+import { redirect, RedirectType } from 'next/navigation'
+
+export async function Verify({ from }: { from: string }) {
+  const cookieStore = await cookies()
+  const sessionName = process.env.SESSION_COOKIE_NAME as string
+  const session = cookieStore.get(sessionName)
+  try {
+    const decoded = await adminApp
+      .auth()
+      .verifyIdToken(session?.value as string)
+
+    const headers = new Headers({})
+    headers.set('X-Client-Id', process.env.CLIENT_ID as string)
+    headers.set('X-Uid', decoded.uid)
+
+    return headers
+  } catch (error) {
+    if (error instanceof Error && 'code' in error) {
+      switch (error.code) {
+        case 'auth/id-token-expired':
+          console.log('Token expired')
+          break
+        case 'auth/id-token-revoked':
+          console.log('Token revoked')
+          break
+        case 'auth/argument-error':
+          console.log('Token invalid')
+          break
+        default:
+          console.log('Something went wrong')
+          break
+      }
+
+      redirect(`login?from=${encodeURIComponent(from)}`, RedirectType.replace)
+    }
+  }
+}

middleware.ts

@@ -0,0 +1,14 @@
+import { NextResponse } from 'next/server'
+import { NextRequest, MiddlewareConfig } from 'next/server'
+
+export async function middleware(request: NextRequest) {
+  if (!request.cookies.has(process.env.SESSION_COOKIE_NAME!)) {
+    const loginUrl = new URL('/login', request.url)
+    loginUrl.searchParams.set('from', request.nextUrl.pathname)
+    return NextResponse.redirect(loginUrl)
+  }
+}
+
+export const config: MiddlewareConfig = {
+  matcher: ['/subscriptions/:path*', '/borrows/:path*'],
+}