Usable with App router?

[SadmanYasar]

Hi. This seems like the ideal solution for adding directus to refine but I can't seem to figure out if this will work with app router. By default, the login page is generated with server side like this:

import { AuthPage } from "@components/auth-page";
import { authProviderServer, authProvider } from "@providers/auth-provider";
import { redirect } from "next/navigation";

export default async function Login() {
  const data = await getData();

  if (data.authenticated) {
    redirect(data?.redirectTo || "/");
  }

  return <AuthPage type="login" />;
}

async function getData() {
  const { authenticated, redirectTo, error } = await authProviderServer.check();

  return {
    authenticated,
    redirectTo,
    error,
  };
}

Should this be made client side by using useEffect hook and checking for access_token from sdk or use a Cookies strategy in the sdk for authentication and keep it server side? I was thinking of something like this:

//auth-provider.tsx
export const authProvider: AuthProvider = {
  login: async ({ email, password }) => {
    const { access_token, expires } = await directusAuthHelper.login(email, password);
    if (access_token) {
      Cookies.set("auth", JSON.stringify(access_token), {
        expires: expires,
        path: "/",
      });
      return {
        success: true,
        redirectTo: "/",
      };
    }

//auth-provider.server.ts
export const authProviderServer: Pick<AuthProvider, "check"> = {
  check: async () => {
    const cookieStore = cookies();
    const auth = cookieStore.get("auth");
    if (auth) {
      // Optionally verify the token's validity with Directus here
      return {
        authenticated: true,
      };
    }

    return {
      authenticated: false,
      logout: true,
      redirectTo: "/login",
    };
  },
};