Checking auth in NextJS Middleware

Hi all! I am really stuck checking the auth in the middleware. It always returns the following error: AppwriteException: User (role: guests) missing scope (account)

My guess is that the session cookie is not placed before the middleware runs and therefore there is no user but I can't find a way to fix it. For your info my code:

Middleware.ts

import { NextResponse } from 'next/server'; import type { NextRequest } from 'next/server'; import appwriteService from './appwrite/config';

export async function middleware(request: NextRequest) { const isLoggedInAndCompany = await appwriteService.isLoggedInAndCompany();

if (!isLoggedInAndCompany) {
    return NextResponse.redirect(new URL('/login', request.url));
}

return NextResponse.next();

}

// Specify the paths where the middleware should run export const config = { matcher: ['/dashboard/:path*', '/organization/:path*'], };

and this in the Appwrite config (client side):

async isLoggedInAndCompany() { try { const user = await account.get(); const session = await account.getSession('current'); const prefs = user.prefs; if (user && prefs.type === 'company') { console.log('isLoggedInAndCompany function has run'); return true; } else { return false; } } catch (error:any) { throw error; } }

Can someone help me please? Thanks!

I believe middleware is ran server side, so you'll need to have that session set on the server side appwrite client.

Maybe check out the nextjs tutorial to see how that is done. https://appwrite.io/docs/tutorials/nextjs-ssr-auth/step-1

Thanks for your quick reply. That would require a complete redesign of my app by the looks of it. I guess I will also look at other ways.

Sorry, to hear that. The middleware in nextjs is all done server side, otherwise you could just do a call on each pages render or in a layout file that checks auth and redirects based on whatever rules you have in place.

Something like this maybe.

async function getUser() {
  try {
    const user = await account.get();
    setUser(user);
  } catch (err) {
    navigate("/login");
  }
}

useEffect(() => {
  getUser();
}, []);

Is an alternative I already had in place but this renders the page before it redirects if the user is not authenticated. On the other hand, if I was showing a load screen during the period the function is running this renders a bad user experience for authenticated users. Looking into protected route with react-router right now