Advanced: Authentication step 3 – Middleware route protection

src/features/events/pages/CreateEventPage/index.tsx

@@ -2,7 +2,6 @@ import { set as setTime } from 'date-fns'
 import type { NextPage } from 'next'
 import Link from 'next/link'
 
-import { withPrivateRoute } from '~/features/auth/hocs/withPrivateRoute'
 import { Routes } from '~/features/core/constants/routes'
 import { useCreateEvent } from '~/features/events/hooks/useCreateEvent'
 import { Input } from '~/features/ui/components/Input'
@@ -20,7 +19,7 @@ import {
 
 import { useCreateEventForm, EVENT_MIN_DATE } from '../../lib/create-event-form'
 
-const Page: NextPage = () => {
+export const CreateEventPage: NextPage = () => {
   const form = useCreateEventForm()
   const { mutate } = useCreateEvent()
 
@@ -92,5 +91,3 @@ const Page: NextPage = () => {
     </LayoutInternal>
   )
 }
-
-export const CreateEventPage = withPrivateRoute(Page)

src/pages/_middleware.ts

@@ -0,0 +1,18 @@
+import type { NextRequest } from 'next/server'
+import { NextResponse } from 'next/server'
+
+import { Routes } from '~/features/core/constants/routes'
+import { REFRESH_TOKEN_COOKIE } from '~/pages/api/login'
+
+export function middleware(req: NextRequest) {
+  // extend the logic for your protected routes
+  if (!req.url.includes(Routes.CREATE_EVENT)) {
+    return NextResponse.next()
+  }
+
+  // if refresh token is in the cookie, we assume the user is logged in
+  const refreshToken = req.cookies[REFRESH_TOKEN_COOKIE]
+  return refreshToken
+    ? NextResponse.next()
+    : NextResponse.redirect(new URL(Routes.LOGIN, req.url))
+}