Next.js Discord

Discord Forum

Double checking how secure this is

Answered
In&Out posted this in #help-forum
Open in Discord
In&OutOP
im wondering how secure is what i did, i passed sessions object to navbar component, which is a client component and when i console log the session, it gets printed, not sure if that is well, can you tell me if its all made well or no?
import { Geist } from "next/font/google";
import "./globals.css";
import Navbar from "./_components/home/utils/Navbar";
import { createClient } from "@/utils/supabase/server";

const defaultUrl = process.env.VERCEL_URL
  ? `https://${process.env.VERCEL_URL}`
  : "http://localhost:3000";

export const metadata = {
  metadataBase: new URL(defaultUrl),
  title: "Next.js and Supabase Starter Kit",
  description: "The fastest way to build apps with Next.js and Supabase",
};

const geistSans = Geist({
  display: "swap",
  subsets: ["latin"],
});

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const supabase = await createClient();

  const {
    data: { session },
  } = await supabase.auth.getSession();

  return (
    <html lang="en" className={geistSans.className}>
      <body>
        <Navbar session={session?.user} />
        {children}
      </body>
    </html>
  );
}
Answered by American black bear
also if your component is as is you can move it to the server and use <Link /> instead of onClick like you are doing here
View full answer

9 Replies

In&OutOP
And navbar component:
"use client";

import { redirect, useRouter } from "next/navigation";
import styles from "./Navbar.module.css";
import { Session } from "@supabase/supabase-js";
import { createClient } from "@/utils/supabase/client";

function Navbar({ session }: { session: any | null }) {
  const router = useRouter();
  console.log(session)

  const signOutAction = async () => {
    const supabase = createClient()
    await supabase.auth.signOut();
    return redirect("/login");
  };
  
  return (
    <div className={styles.Container}>
      <div className={styles.Content}>
        <div className={styles.Logo} onClick={() => router.push("/")}>
          VerseHub
        </div>
        <div className={styles.Buttons}>
          <div onClick={() => router.push("/dashboard")}>Dashboard</div>
          <div onClick={() => router.push("/top-poets")}>Top Poets</div>
          {session ? (
            <div className={styles.Login} onClick={signOutAction}>
              Logout
            </div>
          ) : (
            <div className={styles.Login} onClick={() => router.push("/login")}>
              Login
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default Navbar;
In&OutOP
anyone
American black bear
https://supabase.com/docs/reference/javascript/auth-getuser
probably better to use this. if you are unsure you can always get the session on server, and pass the isLoggedIn to client components.

const {session} = await supabase.auth.getSession()

const isLoggedIn = !!session

return (
  <ClientComponent isLoggedIn={isLoggedIn} />
)
Answer
American black bear
if prefetching is the problem and logs out your user you can just pass prefetch={false}