Adapt with new next-auth version

pages/_app.js

@@ -3,7 +3,7 @@ import {useRouter} from 'next/router'
 import PropTypes from 'prop-types'
 import {createTheme, ThemeProvider} from '@mui/material/styles'
 import CssBaseline from '@mui/material/CssBaseline'
-import {Provider, useSession} from 'next-auth/client'
+import {SessionProvider, useSession} from 'next-auth/react'
 import {CacheProvider} from '@emotion/react'
 import {grey, green, red} from '@mui/material/colors'
 import NProgress from 'nprogress'
@@ -99,21 +99,22 @@ export default function MyApp(props) {
     <CacheProvider value={emotionCache}>
       <ThemeProvider theme={theme}>
         <CssBaseline />
-        <Provider session={pageProps.session}>
+        <SessionProvider session={pageProps.session} refetchInterval={5 * 60}>
           <SwitchTheme switchFixed={switchFixed} mode={mode} setMode={setMode} />
           {Component.auth ? (
             <Auth><Component {...pageProps} /></Auth>
           ) : (
             <Component {...pageProps} />
           )}
-        </Provider>
+        </SessionProvider>
       </ThemeProvider>
     </CacheProvider>
   )
 }
 
 function Auth({children}) {
-  const [session, loading] = useSession()
+  const {data: session, status} = useSession()
+  const loading = status === 'loading'
   const isUser = Boolean(session?.user)
   const router = useRouter()
   useEffect(() => {

pages/api/auth/[...nextauth].js

@@ -1,10 +1,10 @@
 import NextAuth from 'next-auth'
-import Providers from 'next-auth/providers'
+import CredentialsProvider from 'next-auth/providers/credentials'
 import axios from 'axios'
 
 const options = {
   providers: [
-    Providers.Credentials({
+    CredentialsProvider({
       name: 'Credentials',
       credentials: {
         username: {label: 'Email', type: 'email', placeholder: 'email@exemple.net'},
@@ -28,8 +28,9 @@ const options = {
       }
     })
   ],
+  secret: process.env.NEXT_PUBLIC_JWT_SECRET,
   session: {
-    jwt: true
+    strategy: 'jwt'
   },
   pages: {
     signIn: '/soumet',

pages/soumet.js

@@ -1,5 +1,5 @@
 import {useState, useEffect} from 'react'
-import {useSession} from 'next-auth/client'
+import {useSession} from 'next-auth/react'
 
 import HeadLayout from '../components/head-layout'
 import Koneksyon from '../components/sesyon/koneksyon'
@@ -9,7 +9,7 @@ import EkriTeks from '../components/soumet/ekri-teks'
 import {jwennTeksEpiUserId} from '../lib/oki-api'
 
 export default function Soumet() {
-  const [session] = useSession()
+  const {data: session} = useSession()
   const [teksEpiUserId, setTeksEpiUserId] = useState([])
 
   useEffect(() => {