Adapt with new next-auth version

components/komante/vwe-komante.js

@@ -1,7 +1,7 @@
 import {useState, useEffect, useRef} from 'react'
 import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
-import {useSession} from 'next-auth/client'
+import {useSession} from 'next-auth/react'
 
 import {
   IconButton,
@@ -48,7 +48,7 @@ export default function VweKomante({komante, teks}) {
   const [esOuve, meteEsOuve] = useState(false)
   const [esKoneksyonOuve, meteEsKoneksyonOuve] = useState(false)
   const [esKomenteOuve, meteEsKomanteOuve] = useState(false)
-  const [session] = useSession()
+  const {data: session} = useSession()
   const router = useRouter()
 
   const handleClick = () => {

components/sesyon/dekoneksyon.js

@@ -1,7 +1,7 @@
 import {useState} from 'react'
 import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
-import {signOut} from 'next-auth/client'
+import {signOut} from 'next-auth/react'
 import {Tooltip, Fab, Zoom} from '@mui/material'
 import ExitToAppIcon from '@mui/icons-material/ExitToApp'
 

components/sesyon/koneksyon.js

@@ -1,5 +1,5 @@
 import {useEffect, useState, forwardRef} from 'react'
-import {signIn} from 'next-auth/client'
+import {signIn} from 'next-auth/react'
 import {useRouter} from 'next/router'
 import PropTypes from 'prop-types'
 import Link from 'next/link'

components/sesyon/login-provider.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import Link from 'next/link'
-import {signIn} from 'next-auth/client'
+import {signIn} from 'next-auth/react'
 import {Button} from '@mui/material'
 
 export default function LoginProvider({id, title, icon, callbackUrl}) {

components/teks/teks.js

@@ -12,7 +12,7 @@ import {
 import {styled} from '@mui/material/styles'
 import MuiAlert from '@mui/material/Alert'
 import ExplicitIcon from '@mui/icons-material/Explicit'
-import {useSession} from 'next-auth/client'
+import {useSession} from 'next-auth/react'
 
 import {formatJsonString} from '../../lib/utils/format'
 
@@ -116,7 +116,7 @@ const ExplicitTooltip = Tooltip
 
 export default function Teks({anTeks, komante, open, success, error, setSuccess, setError, handleClose}) {
   const isMobile = useMediaQuery('(max-width:800px)')
-  const [session] = useSession()
+  const {data: session} = useSession()
   const langArray = langToArray(anTeks)
 
   return (

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(() => {