Next.js Discord

Discord Forum

Tutorial to implement auth js v5, with prisma MySQL adapter

Unanswered
Bigheaded ant posted this in #help-forum
Open in Discord
Avatar
Bigheaded antOP
I have been trying to implement auth js v5, with prisma MySQL adapter i tried the offical docs, but it doesn't tell how to handle session providers for navbar and most of documentation isn't for v5. Can someone redirect me to correct documentation.

9 Replies

Avatar
Bigheaded antOP
There are lot of files, so please tell which code file do should I upload
Avatar
Cape lion
look at the "Session Management" section, for example: https://authjs.dev/getting-started/session-management/login
Avatar
@Cape lion look at the "Session Management" section, for example: https://authjs.dev/getting-started/session-management/login
Avatar
Bigheaded antOP
"use client";
import { useState, useEffect } from "react";
import { SessionProvider, useSession } from "next-auth/react"; // Updated to use `useSession` if needed
import { auth } from "@/auth";
import "./globals.css";
import Navbar from "../components/Navbar";

const LoaderSkeleton = () => {
  return (
    <div className="p-4 max-w-sm mx-auto">
      <div className="animate-pulse">
        <div className="h-40 bg-gray-400 rounded mb-4"></div>
        <div className="h-40 bg-gray-400 rounded"></div>
        <div className="mt-4 h-4 bg-gray-400 rounded w-3/4"></div>
        <div className="mt-2 h-4 bg-gray-400 rounded w-full"></div>
        <div className="mt-2 h-4 bg-gray-400 rounded w-5/6"></div>
      </div>
    </div>
  );
};

export default function RootLayout({ children }) {
  const [loading, setLoading] = useState(true);
  const [session, setSession] = useState(null);

  useEffect(() => {
    const fetchSession = async () => {
      const sessionData = await auth(); // Fetch the session asynchronously
      setSession(sessionData);
      setLoading(false);
    };

    fetchSession();
  }, []);

  return (
    <SessionProvider session={session}>
      <html lang="en">
        <body>
          <Navbar />
          {loading ? <LoaderSkeleton /> : children}
        </body>
      </html>
    </SessionProvider>
  );
}


I did implement based on it, but I am getting the error I can't use useEffect, can you guide for this
Avatar
@Bigheaded ant "use client"; import { useState, useEffect } from "react"; import { SessionProvider, useSession } from "next-auth/react"; // Updated to use `useSession` if needed import { auth } from "@/auth"; import "./globals.css"; import Navbar from "../components/Navbar"; const LoaderSkeleton = () => { return ( <div className="p-4 max-w-sm mx-auto"> <div className="animate-pulse"> <div className="h-40 bg-gray-400 rounded mb-4"></div> <div className="h-40 bg-gray-400 rounded"></div> <div className="mt-4 h-4 bg-gray-400 rounded w-3/4"></div> <div className="mt-2 h-4 bg-gray-400 rounded w-full"></div> <div className="mt-2 h-4 bg-gray-400 rounded w-5/6"></div> </div> </div> ); }; export default function RootLayout({ children }) { const [loading, setLoading] = useState(true); const [session, setSession] = useState(null); useEffect(() => { const fetchSession = async () => { const sessionData = await auth(); // Fetch the session asynchronously setSession(sessionData); setLoading(false); }; fetchSession(); }, []); return ( <SessionProvider session={session}> <html lang="en"> <body> <Navbar /> {loading ? <LoaderSkeleton /> : children} </body> </html> </SessionProvider> ); } I did implement based on it, but I am getting the error I can't use useEffect, can you guide for this
Avatar
Maheśvara
You use useSession on the client side

From: https://authjs.dev/getting-started/session-management/get-session
import { useSession } from "next-auth/react"
import { UserAvatar } from "@/components/UserAvatar"
 
export default function Dashboard() {
  const { data: session } = useSession()
 
  return (
    <nav>
      <UserAvatar session={session} />
    </nav>
  )
}
Also, when using a session provider, it works for the children components. So to get the session, you need to call it in the children component. Getting the session in the layout the provider is returned it won't work. For example, it won't work in the RootLayout but it will work in Navbar.
Avatar
Maheśvara
Only the provider
Also, for the session provider, do not pass in the session.
So it should be like:

<SessionProvider>
  <html lang="en">
    <body>
      <Navbar />
      {loading ? <LoaderSkeleton /> : children}
    </body>
  </html>
</SessionProvider>