Fix user session error

components/soumet/ekri-teks.js

@@ -1,7 +1,7 @@
-import {useCallback, useEffect, useState} from 'react'
+import {useCallback, useEffect, forwardRef, useState} from 'react'
 import {styled} from '@mui/material/styles'
-import PropTypes from 'prop-types'
 import axios from 'axios'
+import {useSession} from 'next-auth/react'
 import {
   Box,
   Button,
@@ -56,13 +56,14 @@ const textLabels = {
   }
 }
 
-function Alert(props) {
-  return <MuiAlert elevation={6} variant='filled' {...props} />
-}
+const Alert = forwardRef(function Alert(props, ref) {
+  return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
+})
 
 const RemoveTooltip = Tooltip
 
-function EkriTeks({session}) {
+function EkriTeks() {
+  const {data: session} = useSession()
   const {jwt, user} = session
   const [teksEkri, setTeksEkri] = useState({awtis: '', tit: '', transkripsyon: ''})
   const [tradiksyon, setTradiksyon] = useState({fr: '', en: '', es: ''})
@@ -289,8 +290,4 @@ function EkriTeks({session}) {
   )
 }
 
-EkriTeks.propTypes = {
-  session: PropTypes.object.isRequired
-}
-
 export default EkriTeks

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

@@ -32,6 +32,26 @@ const options = {
   session: {
     strategy: 'jwt'
   },
+  callbacks: {
+    async jwt({token, user, account}) {
+      if (user) {
+        const response = await fetch(
+          `${process.env.NEXT_PUBLIC_API_URL}/auth/${account.provider}/callback?access_token=${account?.accessToken}`
+        )
+        const data = await response.json()
+        token.id = data.id || user.id
+        token.jwt = data.jwt || user.jwt
+        token.user = data.user || user.user
+      }
+
+      return Promise.resolve(token)
+    },
+    async session({session, token}) {
+      session.jwt = token.jwt
+      session.user = token.user
+      return Promise.resolve(session)
+    }
+  },
   pages: {
     signIn: '/soumet',
     error: '/soumet'