Next.js Discord

Discord Forum

Issue with Next.js 13, Supabase, and Server Actions in layout.tsx

Unanswered
Miniature Schnauzer posted this in #help-forum
Open in Discord
Miniature SchnauzerOP
I'm working on a Next.js 13 application and trying to manage user authentication with Supabase. I'm running into problems when I attempt to check if a user is logged in using an asynchronous function inside my layout component. Specifically, I'm using server actions with the getSessionStatus function to see if a user is logged in.

In this code, I'm using the getSessionStatus function, defined as a server action, to see if a user is logged in and then displaying different buttons based on that status.

I'm facing these issues:

1. TypeScript Error: I receive a TypeScript error stating This condition will always return true since this 'Promise<boolean>' is always defined.ts(2801). How should I correctly handle this Promise?
2. Server Error: When trying to assign the value inside the function, I encounter a server error like isLoggedIn is not defined. How do I properly define and use the isLoggedIn variable?

I've been reading the documentation but still can't figure out how to implement this correctly in my layout component with the use of server actions. Any guidance would be greatly appreciated!

1 Reply

@Miniature Schnauzer I'm working on a Next.js 13 application and trying to manage user authentication with Supabase. I'm running into problems when I attempt to check if a user is logged in using an asynchronous function inside my layout component. Specifically, I'm using server actions with the `getSessionStatus` function to see if a user is logged in. In this code, I'm using the `getSessionStatus` function, defined as a server action, to see if a user is logged in and then displaying different buttons based on that status. I'm facing these issues: 1. **TypeScript Error**: I receive a TypeScript error stating `This condition will always return true since this 'Promise<boolean>' is always defined.ts(2801)`. How should I correctly handle this Promise? 2. **Server Error**: When trying to assign the value inside the function, I encounter a server error like `isLoggedIn is not defined`. How do I properly define and use the `isLoggedIn` variable? I've been reading the documentation but still can't figure out how to implement this correctly in my layout component with the use of server actions. Any guidance would be greatly appreciated!
Miniature SchnauzerOP
Here's the code snippet for my RootLayout component:
import Link from 'next/link';
import './globals.css';
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { Database } from "@/types/supabase";
import { cookies } from "next/headers";

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  async function getSessionStatus() {
    'use server';
    const supabase = createServerComponentClient<Database>({ cookies });
    const {
      data: { session },
    } = await supabase.auth.getSession();

    return Boolean(session);
  }

  const isLoggedIn = getSessionStatus();

  return (
    <html lang="en">
      <head>
      </head>
      <body>
        <nav className="">
          <div className="">
          </div>
          <div className="">
          </div>
          <div className="">
            <div className="">
              <Link href="/ingresos" passHref>
                <span className="">
                  Ingresos
                </span>
              </Link>
            </div>
            <div>
              {isLoggedIn ? (
                <button className="">Log Out</button>
              ) : (
                <>
                  <button className="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white lg:mt-0 mr-2">Log In</button>
                  <button className="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white lg:mt-0">Sign Up</button>
                </>
              )}
            </div>
          </div>
        </nav>
        <main className="">
          {children}
        </main>
      </body>
    </html>
  );
}