fix(auth) - session change in client 🚑

Session change was not visible on client as Auth.js login and signout stopped refreshing the page
solution to implement Session provider with getSession() rather than auth()
refer: nextauthjs/next-auth#10016 (comment)
also fixed Skeleton Lint issues in Loading 🚨

src/app/(protected)/settings/signout.tsx

@@ -1,10 +1,17 @@
 'use client'
 import { logout } from '@/server/actions/auth'
 
-
-
 const Signout = () => {
-  return <button onClick={() => logout()}>signout</button>
+  return (
+    <button
+      onClick={async () => {
+        await logout()
+        location.reload()
+      }}
+    >
+      signout
+    </button>
+  )
 }
 
 export default Signout

src/app/movie/[movieid]/loading.tsx

@@ -7,7 +7,7 @@ const MoviePageLoading = () => {
   return (
     <>
       <Skeleton>
-        <VideoPlayer url={`TEMP`} backdrop_path={`TEMP`} poster_path={`TEMP`} />
+        <VideoPlayer url={`TEMP`} backdrop_path={`TEMP`} poster_path={`TEMP`} type='movie' tmdbId={1}/>
       </Skeleton>
       <div className="m-10 flex gap-5 flex-wrap">
         <Skeleton className='h-[25rem]'>

src/app/providers.tsx

@@ -1,10 +1,35 @@
 'use client'
+/*
+  workaround for https://github.com/nextauthjs/next-auth/issues/10016#issuecomment-1983672453
+  the workaround can be understood by the comments below
+*/
+
+
 import { NextUIProvider } from '@nextui-org/react'
 import ReactQueryProviders from '@/lib/react-query/react-query-provider'
 import { Toaster } from 'react-hot-toast'
 import posthog from 'posthog-js'
 import { PostHogProvider } from 'posthog-js/react'
 
+// Next Session imports
+import { Session } from "next-auth";
+import {
+    SessionProvider as NextSessionProvider,
+    getSession
+} from "next-auth/react";
+import { usePathname } from "next/navigation";
+import {
+    ReactNode,
+    useCallback,
+    useEffect,
+    useState
+} from "react";
+// Next Session imports done
+
+
+
+
+
 if (typeof window !== 'undefined') {
   posthog.init(
     process.env.NEXT_PUBLIC_POSTHOG_KEY
@@ -17,7 +42,33 @@ if (typeof window !== 'undefined') {
 }
 
 export function Providers({ children }: { children: React.ReactNode }) {
+
+  // Next Session Fix
+  const [ session, setSession ] = useState<Session | null>(null);
+    const pathName = usePathname();
+
+    const fetchSession = useCallback(async () => {
+        try {
+            const sessionData = await getSession();
+            setSession(sessionData);
+        } catch (error) {
+            setSession(null);
+
+            if (process.env.NODE_ENV === "development") {
+                console.error(error);
+            }
+        }
+    }, []);
+
+    useEffect(() => {
+        fetchSession().finally();
+    }, [fetchSession, pathName]);
+
+    //Next Session fix end
+
+
   return (
+    <NextSessionProvider session={session}>
     <ReactQueryProviders>
       <NextUIProvider>
         <PostHogProvider client={posthog}>
@@ -26,5 +77,6 @@ export function Providers({ children }: { children: React.ReactNode }) {
         </PostHogProvider>
       </NextUIProvider>
     </ReactQueryProviders>
+    </NextSessionProvider>
   )
 }

src/app/scProviders.tsx

@@ -1,13 +1,23 @@
-import { SessionProvider } from 'next-auth/react'
-import { auth } from '@/auth'
+/*
+  the Session Provider Stopped Working
+  the auth() functions works only on reload but the login and signout stopped reloading
+  so made a Next Session provider in client side
+  the fix is in providers file
+  used this for the fix https://github.com/nextauthjs/next-auth/issues/10016#issuecomment-1983672453
+*/
+
+// import { SessionProvider } from 'next-auth/react'
+// import { auth } from '@/auth'
 import { Providers } from './providers'
 
 const SCProviders = async ({ children }: { children: React.ReactNode }) => {
-  const session = await auth()
+  // const session = await auth()
   return (
-    <SessionProvider session={session}>
+    <>
+    {/* <SessionProvider session={session}> */}
       <Providers>{children}</Providers>
-    </SessionProvider>
+    {/* </SessionProvider> */}
+    </>
   )
 }
 

src/app/tv/[tvId]/[season]/[episode]/loading.tsx

@@ -7,7 +7,7 @@ const TVShowPageLoading = () => {
   return (
     <>
       <Skeleton>
-        <VideoPlayer url={`TEMP`} backdrop_path={`TEMP`} poster_path={`TEMP`} />
+        <VideoPlayer url={`TEMP`} backdrop_path={`TEMP`} poster_path={`TEMP`} type='movie' tmdbId={1}/>
       </Skeleton>
       <div className="m-10 flex gap-5 flex-wrap">
         <Skeleton className="h-[25rem]">