Add roles support server and client side

src/store/auth.ts

@@ -4,12 +4,14 @@ import { AppState } from "."
 // Define a type for the slice state
 interface AuthState {
     id: number
+    roles: string[]
     jwt: string
 }
 
 // Define the initial state using that type
 const initialState: AuthState = {
     id: 0,
+    roles: [],
     jwt: "",
 }
 
@@ -19,11 +21,13 @@ export const auth = createSlice({
     reducers: {
         setCurrentUser: (state, action: PayloadAction<AuthState>) => {
             state.id = action.payload.id
+            state.roles = action.payload.roles
             state.jwt = action.payload.jwt
         },
         logoutUser: (state) => {
             // Unused, just reload page :/
             state.id = 0
+            state.roles = []
             state.jwt = ""
         },
     },
@@ -35,6 +39,8 @@ export const selectAuthData = (state: AppState): AuthState => state.auth
 
 export const selectUserJwtToken = createSelector(selectAuthData, (authData) => authData.jwt)
 
+export const selectUserRoles = createSelector(selectAuthData, (authData) => authData.roles)
+
 export const isUserConnected = createSelector(selectUserJwtToken, (token) => !!token)
 
 export default auth.reducer

src/store/index.ts

@@ -13,11 +13,12 @@ interface Arg {
     url?: string
     jwt?: string
     id?: number
+    roles?: string[]
 }
 
 // Use inferred return type for making correctly Redux types
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const createStore = ({ initialState, url, jwt, id }: Arg = {}) => {
+const createStore = ({ initialState, url, jwt, id, roles }: Arg = {}) => {
     const history = __SERVER__
         ? createMemoryHistory({ initialEntries: [url || "/"] })
         : createBrowserHistory()
@@ -32,8 +33,8 @@ const createStore = ({ initialState, url, jwt, id }: Arg = {}) => {
         devTools: __DEV__,
     })
 
-    if (jwt && id) {
-        store.dispatch(setCurrentUser({ jwt, id }))
+    if (jwt && id && roles) {
+        store.dispatch(setCurrentUser({ jwt, id, roles }))
     } else {
         store.dispatch(logoutUser())
     }
@@ -42,12 +43,14 @@ const createStore = ({ initialState, url, jwt, id }: Arg = {}) => {
 }
 
 const id = +(Cookies.get("id") || 0)
+const roles = Cookies.get("roles")?.split(",") || []
 const jwt = Cookies.get("jwt")
-if (id && jwt) {
+if (id && jwt && roles) {
     Cookies.set("id", `${id}`, { expires: 3650 })
+    Cookies.set("roles", roles.join(","), { expires: 3650 })
     Cookies.set("jwt", jwt, { expires: 3650 })
 }
-const { store } = createStore({ id, jwt })
+const { store } = createStore({ jwt, id, roles })
 
 export type AppState = ReturnType<typeof store.getState>
 

src/store/volunteerLogin.ts

@@ -39,7 +39,7 @@ export const fetchVolunteerLogin = elementFetch<VolunteerLogin, Parameters<typeo
     getFailure,
     undefined,
     (login: VolunteerLogin) => {
-        setJWT(login.jwt, login.id)
+        setJWT(login.jwt, login.id, login.roles)
         // eslint-disable-next-line no-restricted-globals
         location?.reload()
     }