Why don’t you make use of Server Component pages to make sure the user check is done before you even start rendering the UI output?

Instead of having client components do the check inside an effect, once the UI rendered on the screen (because effects run after the page was painted on the browser), what you could do is turning your pages in async components (default server components) and await the retrieveUser() function and redirect if the user is already logged in.

You can use middleware, a server component, or route segment middleware to mitigate a logged-in user's access to these routes with the corresponding redirect. You'll handle the redirect flow yourself. If you want logic that redirects to multiple possible pages, you need to handle user input well.

If I've understood this correctly, then I've to do like this:

export default async function Home() {
  const session = await retrieveUser();
  if (session && pathname !== "/") {
        router.replace("/");
      } else if(!session && pathname !== "/signin") {
        router.replace("/signin");
      }
}

,
am I correct?

Could you please guide that how can this be done? Like, I've checked some examples they've some kind of middleware.ts file or something, in which all the routes are mentioned, like:

const routes = {
  'user': ['/user'],
  'admin': ['/admin', '/portal'],
};

like this, could you kindly send some reference from where I can take some help?

In this, I'm facing an issue that, usePathname() can't be called inside an async func and neither at the top. It must be present inside - export default function Home() {}. How should this be handled?

The Next.js documentation provides a useful reference: https://nextjs.org/docs/pages/building-your-application/authentication#authorization.

Thanks for the reference, however, I've a doubt in this,
that what they're doing is that the middleware func is receiving a request and then it's checking the pathname(using req.nextUrl.pathname) and authorization of the user, but I'm doing it using supabase using the getSession() to check if user is signed in or not. Also, it's showing this err, since I don't have any such file session.ts in the required dir.
Also, I've a doubt that, I've created this middleware.ts in the root of the project, so will this work or I've to make some changes in other files too to let them know that middleware.ts also exists? AFAIK middleware.ts is used by default (ig there's no need to declare it in any other file), am I correct?

Hi, I was trying to do this by using the middleware.ts:

import { NextRequest, NextResponse } from "next/server";

import { retrieveUser } from "./lib/auth/auth";

const protectedRoutes: string[] = ["/"]; // Routes that require authentication
const publicRoutes: string[] = ["/signin", "/signup"]; // Routes for unauthenticated users

export async function middleware(req: NextRequest) {
  const url = req.nextUrl;
  const path = url.pathname;

  const session = await retrieveUser();

  if (!session && protectedRoutes.includes(path)) {
    // Redirect unauthenticated users to signin page
    return NextResponse.redirect(new URL("/signin", req.url));
  }

  if (session && publicRoutes.includes(path)) {
    // Redirect authenticated users away from signin/signup
    return NextResponse.redirect(new URL("/", req.url));
  }

  return NextResponse.next();
}

// Middleware applies to all routes except API, static files, and images
export const config = {
  matcher: ["/((?!api|_next/static|_next/image|.*\\.png$).*)"],
};

app/page.tsx: (the home page)

import { redirect } from "next/navigation";

import { signOut } from "@/lib/auth/auth";

import { createClient } from "@/utils/supabase/server";

import Button from "@/components/form/Button";

export default async function Home() {
  const supabase = await createClient();
  const { data } = await supabase.auth.getSession();

  if (!data.session) {
    redirect("/signin");
  }

  return (
    <main className="flex items-center justify-center h-screen">
      <h1>Welcome to Home Page</h1>
      <Button onClick={signOut}>Sign out</Button>
    </main>
  );
}

But, here, I'm facing an issue, that after sign out, I'm not getting redirected to /signin route. Could anyone please guide regarding this?

I've done in a smiliar way as mentioned here. Also updated the middleware.ts file (in the root of the project). But, in this I'm facing an issue, that, previously, in this dirutils/supabase/, I already have the middleware.ts present (I copied it from some sample repo which shows how to setup next with supabase), here's the code:

import { createServerClient, type CookieOptions } from "@supabase/ssr";
import { NextResponse, type NextRequest } from "next/server";

export async function updateSession(request: NextRequest) {
  let response = NextResponse.next({
    request: {
      headers: request.headers,
    },
  });

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_KEY!,
    {
      cookies: {
        get(name: string) {
          return request.cookies.get(name)?.value;
        },
        set(name: string, value: string, options: CookieOptions) {
          request.cookies.set({
            name,
            value,
            ...options,
          });
          response = NextResponse.next({
            request: {
              headers: request.headers,
            },
          });
          response.cookies.set({
            name,
            value,
            ...options,
          });
        },
        remove(name: string, options: CookieOptions) {
          request.cookies.set({
            name,
            value: "",
            ...options,
          });
          response = NextResponse.next({
            request: {
              headers: request.headers,
            },
          });
          response.cookies.set({
            name,
            value: "",
            ...options,
          });
        },
      },
    },
  );

  await supabase.auth.getUser();

  return response;
}

But, when I'm copying the code given on the supabase website (the link which you just sent), it's showing an err. I'm not able to understand this, coz both are using createServerClient()?

Also, with this code, which I've just sent, it's working fine, but when I'm logged in, and if I try to redirect to the /signin or /signup route, then I'm able to do so. But, the vice versa isn't. Like, if I'm on signin route and I haven't logged in. then I won't be allowed to the / route (i.e. a protected route).

Now, it's working fine, I tried to debug it more, everything is working as expected 🙂
Thanks for help 👍