Revize fc79a8cb

re #9368 jwt simple login

backend/src/main/java/cz/zcu/kiv/backendapi/security/SecurityConfig.java

@@ -17 +17 @@
 import org.springframework.security.config.http.SessionCreationPolicy;
 import org.springframework.security.core.userdetails.UserDetailsService;
 import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
+import org.springframework.web.cors.CorsConfiguration;
+import org.springframework.web.cors.CorsConfigurationSource;
+import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
 
 /**
  * Security config class
@@ -54 +57 @@
      */
     @Override
     protected void configure(HttpSecurity http) throws Exception {
-        http.
-                csrf().disable()
+        http.csrf().disable()
+                .cors()
+                .and()
                 .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                 .and()
                 .addFilter(new JwtUsernameAndPasswordAuthenticationFilter(authenticationManager(), jwtUtils))
@@ -69 +73 @@
                 .antMatchers("/delete/**").hasAuthority(Permission.DELETE.name())
                 .anyRequest()
                 .authenticated();
-
     }
 
     /**
@@ -95 +98 @@
         provider.setPasswordEncoder(bCryptPasswordEncoder);
         return provider;
     }
+
+    @Bean
+    CorsConfigurationSource corsConfigurationSource() {
+        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
+        source.registerCorsConfiguration("/**", new CorsConfiguration().applyPermitDefaultValues());
+        return source;
+    }
 }

frontend/package.json

@@ -13 +13 @@
     "axios": "^0.26.0",
     "dotenv": "^16.0.0",
     "formik": "^2.2.9",
+    "jwt-decode": "^3.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",

frontend/src/features/Auth/Login.tsx

@@ -5 +5 @@
 import { useNavigate } from 'react-router-dom'
 import * as yup from 'yup'
 import { SchemaOf } from 'yup'
-import { PasswordDto, UserDto } from '../../swagger/data-contracts'
 import { RootState } from '../redux/store'
 import { logIn } from './userThunks'
 
@@ -30 +29 @@
         onSubmit: () => {
             dispatch(
                 logIn({
-                    name: formik.values.username,
-                    passwords: {
-                        password: formik.values.password,
-                        confirmationPassword: '',
-                    } as PasswordDto,
-                } as UserDto)
+                    username: formik.values.username,
+                    password: formik.values.password,
+                })
             )
         },
     })

frontend/src/features/Auth/userSlice.ts

@@ -41 +41 @@
             ...state,
             lastErr: action.payload,
         }),
+        setUserState: (state, action) => {
+            console.log('user state set')
+            return ({ ...state, ...action.payload })
+        },
     },
 
     // Thunks
     extraReducers: (builder) => {
-        builder.addCase(logIn.fulfilled, () => {
-            console.log('Action performed') // TODO remove
-        }) // TODO funny
+        builder.addCase(logIn.fulfilled, (state, action) => {
+            return ({ ...state, ...action.payload })
+        })
+        builder.addCase(logIn.rejected, (state, action) => {
+            if (action.payload && typeof action.payload === 'string') {
+                return ({ ...state, lastErr: action.payload })
+            }
+        })
     },
 })
 
 const userReducer = persistReducer(persistConfig, userSlice.reducer)
 
+export const { logout, refreshTokens, setErr, setUserState } = userSlice.actions
+
 export default userReducer

frontend/src/features/Auth/userThunks.ts

@@ -1 +1 @@
 import { createAsyncThunk } from '@reduxjs/toolkit'
 import axiosInstance from '../../api/api'
 import { UserDto } from '../../swagger/data-contracts'
+import { setErr, setUserState, UserState } from './userSlice'
+import jwt from 'jwt-decode' 
+import { RootState } from '../redux/store'
 
 const loginError =
     'Server error occurred while logging in. Please contact help service to resolve this issue or try again later.'
 
+// This is not present in the swagger since spring generates
+export interface UserLogin {
+    username: string,
+    password: string
+}
 
 export const logIn = createAsyncThunk(
     'user/login',
-    async (userDto: UserDto, { dispatch, getState }) => {
+    async (userDto: UserLogin, { dispatch, getState }) => {
         try {
             // @ts-ignore
-            // TODO fix
             if (getState().user.isLoggedIn) {
-                return
+                return Promise.reject(undefined)
             }
-            console.log('Dispatching login thunk') // TODO remove
+
             const { data, status } = await axiosInstance.post('/login', userDto)
-            const { accessToken, refreshToken } = data
-            console.log(data) // TODO remove
+            const [ accessToken, refreshToken ] = [data.access_token, data.refresh_token]
             if (status !== 200) {
                 // TODO read API err
-                dispatch({ type: 'user/setErr', payload: loginError })
-                return
+                return Promise.reject(loginError)
+            }
+
+            // Strip bearer from access token
+            const userInfo = jwt(accessToken.replace('Bearer ', '')) as any
+            const { sub, authorities } = userInfo
+            if (!sub || !authorities) {
+                return Promise.reject(loginError)
             }
 
-            dispatch({ type: 'user/refreshTokens', payload: { accessToken, refreshToken } })
+            const userState: UserState = {
+                accessToken,
+                refreshToken,
+                username: sub,
+                roles: authorities,
+                isLoggedIn: true
+            }
+            
+            return userState
         } catch (err: any) {
-            dispatch({ type: 'user/setErr', payload: loginError })
+            console.log(err)
+            return Promise.reject(loginError)
         }
     }
 )

frontend/src/features/Home/Home.tsx

@@ +1 @@
+import { Button } from '@mui/material'
+import { useDispatch, useSelector } from 'react-redux'
+import { logout } from '../Auth/userSlice'
+import { RootState } from '../redux/store'
+
 const Home = () => {
+    const dispatch = useDispatch()
+
+    const userLoggedIn = useSelector(
+        (state: RootState) => state.user.isLoggedIn
+    )
 
-    return (<>
-    <h1>Home</h1>
-    </>)
+    return (
+        <>
+            <h1>Home</h1>
+            {userLoggedIn ? (
+                <Button
+                    size="large"
+                    variant="contained"
+                    color="primary"
+                    onClick={() => dispatch(logout())}
+                >
+                    Logout
+                </Button>
+            ) : null}
+        </>
+    )
 }
 
-export default Home
+export default Home

frontend/src/utils/ApiCallError.ts

@@ -1 @@
-export default class ApiCallError extends Error {}

frontend/src/utils/thunkResponse.ts

@@ +1 @@
+
+export default interface ThunkResponse<T> {
+    success: boolean
+    data?: T
+}