Adjust middleware approach, using localstorage and reinitializing auth-store from localStorage

Author: zgavin1

src/lib/providers/auth-store-provider.tsx

@@ -16,8 +16,13 @@ export interface AuthStoreProviderProps {
 
 export const AuthStoreProvider = ({ children }: AuthStoreProviderProps) => {
   const storeRef = useRef<StoreApi<AuthStore>>(undefined);
+  const authStore = localStorage.getItem("auth-store");
+
+  const persistedStoreOrNull = authStore ? JSON.parse(authStore).state : null;
+
   if (!storeRef.current) {
-    storeRef.current = createAuthStore();
+    // storeRef.current = createAuthStore(authStore);
+    storeRef.current = createAuthStore(persistedStoreOrNull);
   }
 
   return (

src/lib/stores/auth-store.ts

@@ -50,7 +50,7 @@ export const createAuthStore = (initState: AuthState = defaultInitState) => {
         }),
         {
           name: "auth-store",
-          storage: createJSONStorage(() => sessionStorage),
+          storage: createJSONStorage(() => localStorage),
         }
       )
     )

src/middleware.ts

@@ -12,14 +12,17 @@ const publicRoutes = ["/"];
 export default async function middleware(req: NextRequest) {
   // 2. Check if the current route is protected or public
   const path = req.nextUrl.pathname;
-  const isProtectedRoute = protectedRoutes.includes(path);
-  const isPublicRoute = publicRoutes.includes(path);
+  const isProtectedRoute = protectedRoutes.some((route) =>
+    path.startsWith(route)
+  );
+  const isPublicRoute = publicRoutes.some((route) => path === route);
 
-  // 3. Decrypt the session from the cookie
+  // 3. Get the session from the cookie
   const sessionCookie = req.cookies.get("id");
   const session = sessionCookie?.value;
 
   // 4. Redirect to / if the user is not authenticated
+  // 4b. TODO: Check session validity/expiration?
   if (isProtectedRoute && !session) {
     return NextResponse.redirect(new URL("/", req.nextUrl));
   }
@@ -38,5 +41,5 @@ export default async function middleware(req: NextRequest) {
 
 // Routes Middleware should not run on
 export const config = {
-  matcher: ["/((?!api|_next/static|_next/image|.*\\.png$).*)"],
+  matcher: ["/((?!api|_next/static|_next/image|favicon.ico|.*\\.png$).*)"],
 };