fontend authorization set user data in reducer

Author: Anonymous

client/package-lock.json

@@ -10,6 +10,7 @@
  "@testing-library/jest-dom": "^5.14.1",
  "@testing-library/react": "^13.0.0",
  "@testing-library/user-event": "^13.2.1",
+ "jsonwebtoken": "^9.0.2",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-hot-toast": "^2.4.1",

client/package.json

@@ -9,6 +9,12 @@ import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 import CreateCategory from "./pages/Category/CreateCategory";
 import PostEdit from "./pages/PostEdit/PostEdit";
 import './App.css';
+import verifyCurrentUser from "./utilies/verifyCurrentUser";
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { setCurrentUser } from "./services/reducer";
+
+
 const router = createBrowserRouter([
  {
  path: "/",
@@ -52,6 +58,12 @@ const router = createBrowserRouter([
 ]);
 
 function App() {
+ const dispatch =useDispatch();
+ const currentUser = verifyCurrentUser();
+ useEffect(() => {
+ dispatch(setCurrentUser(currentUser));
+ }, [currentUser]);
+
  return (
  <RouterProvider router={router} />
  // <Router>

client/src/App.js

@@ -13,9 +13,9 @@ const cookies = new Cookies();
 function TopBar() {
  const token = cookies.get('token');
  // getCurrentUser(token);
- const user = useSelector((state) => state);
+ const user = useSelector((state) => state.user);
 
- console.log(user)
+ console.log(user.user.userId)
 
  const [dropdownMenu, setDropdownMenu] = useState(false);
  const [canvasOpen, setCanvasOpen] = useState(false);

client/src/components/TopBar/TopBar.jsx

@@ -40,7 +40,6 @@ export default function CreateCategory(){
  if(responseinfo.isSuccess){
  toast.success(responseinfo.data.message);
  }
- console.log(responseinfo)
 
  return(
  <section className={classes.create_post_area}>

client/src/pages/Category/CreateCategory.jsx

@@ -36,8 +36,8 @@ export default function Login(){
  if (responseinfo.data.token) {
  defaultHeaders.append("Authorization", `Bearer ${responseinfo.data.token}`);
  }
- dispatch(setCurrentUser(responseinfo.data.token))
- // window.location.href = "/";
+ dispatch(setCurrentUser(responseinfo.data.userData))
+ window.location.href = "/";
  }
 
  return( 

client/src/pages/Login/Login.jsx

@@ -21,13 +21,6 @@ export const authApi = createApi({
  body: credentials,
  }),
  invalidatesTags: ['Users'],
- onSuccess: (result, variables, context) => {
- console.log('res' + result)
- console.log('var' + variables)
- console.log('con' + context)
- // Dispatch the setUser action with the user data from the response
- context.dispatch(setCurrentUser(result.data.user));
- },
  }),
  logoutUser: builder.mutation({
  query: () => ({

client/src/services/authSlice.js

@@ -15,13 +15,4 @@ export const store = configureStore({
  getDefaultMiddleware().concat(authApi.middleware).concat(webApi.middleware)
 });
 
-// Retrieve user data from cookies when the app loads
-// const cookies = await new Cookies();
-// const token = await cookies.get("token");
-
-// if (token) {
-// console.log(token);
-// // Assuming your user data is stored as a JSON string in a cookie
-// store.dispatch(setCurrentUser(token)); // Dispatch setCurrentUser
-// }
 setupListeners(store.dispatch);

client/src/services/store.js

@@ -36,9 +36,7 @@ export const webApi = createApi({
  query: (id) => ({url: `post?id=${id}`}),
  }),
  updatePost: builder.mutation({
- query: ({id, postObj}) => (
- console.log(id, postObj),
- {
+ query: ({id, postObj}) => ({
  url: `post/${id}`,
  method: 'PUT',
  body: postObj,

client/src/services/webSlice.js

@@ -0,0 +1,15 @@
+// import jwt from 'jsonwebtoken';
+import Cookies from 'universal-cookie';
+
+const verifyCurrentUser = () => {
+ try{
+ const cookies = new Cookies();
+ const token = cookies.get('token');
+ const base64Url = token.split('.')[1];
+ const base64 = base64Url.replace('-', '+').replace('_', '/');
+ return JSON.parse(window.atob(base64));
+ }catch(error){
+ return null;
+ }
+}
+export default verifyCurrentUser;