feat: enabled session based authentication for web

web/src/context/appContext.tsx

@@ -7,127 +7,71 @@ import React, {
   useCallback,
   ReactNode
 } from 'react'
-
 import axios from 'axios'
 
-const NODE_ENV = process.env.NODE_ENV
-const PORT_API = process.env.PORT_API
-const baseUrl =
-  NODE_ENV === 'development' ? `http://localhost:${PORT_API ?? 5000}` : ''
-
-const isAbsoluteURLRegex = /^(?:\w+:)\/\//
-
-const setAxiosRequestHeader = (accessToken: string) => {
-  axios.interceptors.request.use(function (config) {
-    if (baseUrl && !isAbsoluteURLRegex.test(config.url as string)) {
-      config.url = baseUrl + config.url
-    }
-    console.log('axios.interceptors.request.use', accessToken)
-    config.headers!['Authorization'] = `Bearer ${accessToken}`
-    config.withCredentials = true
-
-    return config
-  })
-}
-
-const setAxiosResponse = (setTokens: Function) => {
-  // Add a response interceptor
-  axios.interceptors.response.use(
-    function (response) {
-      // Any status code that lie within the range of 2xx cause this function to trigger
-      return response
-    },
-    async function (error) {
-      if (error.response?.status === 401) {
-        // refresh token
-        // const { accessToken, refreshToken: newRefresh } = await refreshMyToken(
-        //   refreshToken
-        // )
-
-        // if (accessToken && newRefresh) {
-        //   setTokens(accessToken, newRefresh)
-        //   error.config.headers['Authorization'] = 'Bearer ' + accessToken
-        //   error.config.baseURL = undefined
-
-        //   return axios.request(error.config)
-        // }
-        console.log(53)
-        setTokens(undefined)
-      }
-
-      return Promise.reject(error)
-    }
-  )
-}
-
-const getTokens = () => {
-  const accessToken = localStorage.getItem('accessToken')
-  const refreshToken = localStorage.getItem('refreshToken')
-
-  if (accessToken && refreshToken) {
-    setAxiosRequestHeader(accessToken)
-    return { accessToken, refreshToken }
-  }
-  return undefined
-}
-
 interface AppContextProps {
+  checkingSession: boolean
+  loggedIn: boolean
+  setLoggedIn: Dispatch<SetStateAction<boolean>> | null
   userName: string
   setUserName: Dispatch<SetStateAction<string>> | null
-  tokens?: { accessToken: string; refreshToken: string }
-  setTokens: ((accessToken: string, refreshToken: string) => void) | null
+  displayName: string
+  setDisplayName: Dispatch<SetStateAction<string>> | null
   logout: (() => void) | null
 }
 
 export const AppContext = createContext<AppContextProps>({
+  checkingSession: false,
+  loggedIn: false,
+  setLoggedIn: null,
   userName: '',
-  tokens: getTokens(),
   setUserName: null,
-  setTokens: null,
+  displayName: '',
+  setDisplayName: null,
   logout: null
 })
 
 const AppContextProvider = (props: { children: ReactNode }) => {
   const { children } = props
+  const [checkingSession, setCheckingSession] = useState(false)
+  const [loggedIn, setLoggedIn] = useState(false)
   const [userName, setUserName] = useState('')
-  const [tokens, setTokens] = useState(getTokens())
+  const [displayName, setDisplayName] = useState('')
 
   useEffect(() => {
-    setAxiosResponse(setTokens)
+    setCheckingSession(true)
+
+    axios
+      .get('/SASjsApi/session')
+      .then((response: any) => {
+        setCheckingSession(false)
+        setLoggedIn(true)
+        setUserName(response.userName)
+        setDisplayName(response.displayName)
+      })
+      .catch(() => {
+        setLoggedIn(false)
+      })
   }, [])
 
-  useEffect(() => {
-    console.log(97)
-    if (tokens === undefined) {
-      console.log(99)
-      localStorage.removeItem('accessToken')
-      localStorage.removeItem('refreshToken')
-    }
-  }, [tokens])
-
-  const saveTokens = useCallback(
-    (accessToken: string, refreshToken: string) => {
-      localStorage.setItem('accessToken', accessToken)
-      localStorage.setItem('refreshToken', refreshToken)
-      console.log(accessToken)
-      setAxiosRequestHeader(accessToken)
-      setTokens({ accessToken, refreshToken })
-    },
-    []
-  )
-
   const logout = useCallback(() => {
-    setUserName('')
-    setTokens(undefined)
+    axios.get('/logout').then(() => {
+      setLoggedIn(false)
+      setUserName('')
+      setDisplayName('')
+    })
   }, [])
 
   return (
     <AppContext.Provider
       value={{
+        checkingSession,
+        loggedIn,
+        setLoggedIn,
         userName,
         setUserName,
-        tokens,
-        setTokens: saveTokens,
+        displayName,
+        setDisplayName,
         logout
       }}
     >