Next.js Discord

Discord Forum

How to conditionally choose the page.tsx?

Unanswered
rex1410 posted this in #help-forum
Open in Discord
rex1410OP
So in my project, I have the default root layout and page.tsx. In this through server actions I am checking if the user session is still active, making the root layout a server component.

If the user session is expired they need to login again, how can I send them to the /sign-in route from this point of code in the root layout?

40 Replies

rex1410OP
My code:
export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const isAuth = await isUserAuthenticated();

  return (
    <html lang="en" className={`${GeistSans.variable}`}>
      <script
        type="text/javascript"
        id="hs-script-loader"
        async
        defer
        src="//js.hs-scripts.com/24403337.js"
      ></script>
      <body className={inter.className}>{children}</body>
    </html>
  );
}
if isAuth is false, I want the user to go to sign-in route
@ts-ignore
this check should not be performed in layout but in middleware
I will look into that
@@ts-ignore this check should not be performed in layout but in middleware
rex1410OP
So I wrote this simple middleware.ts in the app folder.

import { isUserAuthenticated } from "@utils/firebaseAdmin";
import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

export async function middleware(request: NextRequest) {
  const isAuthenticated = await isUserAuthenticated();
  console.log(isAuthenticated);

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


And I am currently logged out. It does not redirect me to the /login route. Is there a way to log stuff in middle ware? Coz I placed a log statement but I don't see either true or false in my terminal or the browser
@ts-ignore
where did you add this middleware
I mean in which folder
rex1410OP
app folder
beside the root layout
@ts-ignore
it must either be in root of your project or in src(if you have that folder)
rex1410OP
ohhhhh
@@ts-ignore it must either be in root of your project or in `src`(if you have that folder)
rex1410OP
I have the src folder and then inside it the app folder. I had added it to the app folder. When I switched it to the src folder (at same level as the app folder) then I get this error
rex1410OP
ok got it
@@ts-ignore remove .next and restart dev server
rex1410OP
did this, no change, still same error message
@ts-ignore
is your code using node:stream anywhere?
or maybe the package you're using
rex1410OP
lemme check
ok so not directly in the code
wait.... firebase-admin might be
nope firebase admin does not depend on it either
@@ts-ignore or maybe the package you're using
rex1410OP
in the middleware this is the only function, and this only involves firebase admin
@ts-ignore
the firebase-admin does use stream and I don't think it will work in middleware as it runs on edge
but isn't the package for firebase just firebase?
for anything server side we need to use firebase-admin
@ts-ignore
oh, then this package is made for nodejs and won't work in edge runtime
maybe you will have to add this check in every route
page.tsx
@@ts-ignore page.tsx
rex1410OP
I see, ig its worth making an issue in firebase repository? they might be able to fix a workaround for this.

Also, so I should just use this check on every page and redirect on client side if they are not authenticated? The thing is the session is in cookies so I can only access it in the server side. So how do I check that then also route the user to the correct login endpoint?
and you can try to create an issue on their repo
@@ts-ignore you can access cookies in page
rex1410OP
fair. But I need to redirect them as well, I can't do that on server side right?

I am guessing this will have to be like check in layout and send the result to client side page.tsx to use useRouter and redirect the user right?
@@ts-ignore https://nextjs.org/docs/app/api-reference/functions/redirect
rex1410OP
ohh damn, did not know about this. Thanks a lot man!