Added useId hook for id retrival from token

front/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@types/leaflet": "^1.9.3",
         "bootstrap": "^5.3.0",
+        "jwt-decode": "^3.1.2",
         "leaflet": "^1.9.4",
         "react": "^18.2.0",
         "react-bootstrap": "^2.8.0",
@@ -2378,6 +2379,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "node_modules/leaflet": {
       "version": "1.9.4",
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",

front/package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@types/leaflet": "^1.9.3",
     "bootstrap": "^5.3.0",
+    "jwt-decode": "^3.1.2",
     "leaflet": "^1.9.4",
     "react": "^18.2.0",
     "react-bootstrap": "^2.8.0",

front/src/hooks/index.ts

@@ -4,3 +4,4 @@ export { default as useFetch } from './useFetch'
 export { default as useStoryIndex } from './useStoryIndex'
 export { default as useFilters } from './useFilters'
 export { default as useSendWithButton } from './useSendWithButton'
+export { default as useId } from './useId'

front/src/hooks/useId.ts

@@ -0,0 +1,16 @@
+import { useNavigate } from 'react-router-dom'
+import { getId } from '../utils/auth'
+
+function useId() {
+    const navigate = useNavigate()
+
+    const id = getId()
+
+    if (id < 0) {
+        navigate('/login')
+    }
+
+    return id
+}
+
+export default useId

front/src/pages/LoginPage.tsx

@@ -24,7 +24,11 @@ function LoginPage() {
             password: formData.get('password') as string
         }
 
-        const token = import.meta.env.PROD ? await doAuth(data, newAccount) : 'a'
+        const token = import.meta.env.PROD ? (
+            await doAuth(data, newAccount)
+        ) : (
+            'eyJhbGciOiJIUzI1NiJ9.eyJpZCI6IjUifQ.1S46AuB9E4JN9yLkqs30yl3sLlGLbgbrOCNKXiNK8IM'
+        )
 
         if (token) {
             setToken(token)

front/src/utils/auth.ts

@@ -1,13 +1,76 @@
-const getToken = () => {
-    const token = localStorage.getItem('Token')
+import jwt_decode, { JwtPayload } from 'jwt-decode'
 
-    /* check expirity */
+import { isInt, isObject } from './types'
+
+const TOKEN_KEY = 'Token'
+
+function getToken() {
+    const token = localStorage.getItem(TOKEN_KEY)
+
+    if (token === null) {
+        return null
+    }
+
+    const payload = jwt_decode<JwtPayload>(token)
+
+    // Checks only expiration, not validity
+    if (
+        payload.exp &&
+        (Date.now() >= payload.exp * 1000)
+    ) {
+        return null
+    }
 
     return token
 }
 
 function setToken(token: string) {
-    localStorage.setItem('Token', token)
+    localStorage.setItem(TOKEN_KEY, token)
 }
 
-export { getToken, setToken }
+function clearToken() {
+    localStorage.removeItem(TOKEN_KEY)
+}
+
+type TokenPayload = {
+    id: string
+}
+
+const isTokenPayload = (data: unknown): data is TokenPayload => isObject(data, {
+    'id': 'string'
+})
+
+function getId() {
+    try {
+        const token = getToken()
+
+        if (token === null) {
+            return -1
+        }
+
+        const payload = jwt_decode(token)
+
+        if (!isTokenPayload(payload)) {
+            throw new Error('Malformed token payload')
+        }
+
+        const id = Number.parseInt(payload.id)
+
+        if (!isInt(id) || id < 0) {
+            throw new Error(`Not valid id: ${id}`)
+        }
+
+        return id
+    }
+    catch (err) {
+        if (import.meta.env.DEV) {
+            console.error(err)
+        }
+
+        clearToken()
+
+        return -1
+    }
+}
+
+export { getToken, setToken, getId }