I am following a MERN tutorial and made a React site where it receive data like name and email of the logged in user and then theses data are shown.
Here my back code:
routes/user.js:
const express = require('express')
const userController = require('../controllers/user')
const route = express.Router()
const checkAuth = require('../middleware/auth')
route.post('/', userController.register)
route.post('/login', userController.login)
route.get('/isauth', checkAuth, userController.isAuthenticated)
route.post('/logout', checkAuth, userController.logout)
route.post('/me', checkAuth, userController.getMe)
module.exports = route
controllers/user.js:
module.exports = {
getMe: (req, res) => {
const {sub} = req.user
User.findOne({_id : sub}, (err, user) => {
if (err) {
res.status(500).json({
message : 'User not found',
data : null
})
} else {
res.status(200).json({
message : 'User found',
data : user
})
}
})
},
}
Here my front code:
authenticationAPI.js:
export const AuthenticationService = {
getMe: () => {
return axiosInstance
.get(requests.getme, { credentials: "include" })
.then((res) => {
return res;
})
.catch((err) => {
return err;
});
},
}
config/requests.js:
export const requests = {
register : '/auth',
login : '/auth/login',
logout : '/auth/logout',
getme : '/auth/me',
}
authenticationSlice.js:
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { AuthenticationService } from "./authenticationAPI";
const initialState = {
registerstatus: "",
errormessage: "",
userDetails: null,
};
//getme redux action
export const getMe = createAsyncThunk(
"users/me",
async () => {
const response = AuthenticationService.getMe();
return response;
}
);
//creation du slice
const authenticationSlice = createSlice({
name: "authentication",
initialState,
extraReducers: {
//getMe http request 3 cases
[getMe.pending]: (state, action) => {
},
[getMe.fulfilled]: (state, action) => {
console.log(action.payload);
state.userDetails = action.payload.data.data
},
[getMe.rejected]: (state, action) => {
},
export const { } = authenticationSlice.actions;
export const selectUserDetails = (state) => state.authentication.userDetails
export default authenticationSlice.reducer;
views/posts/post.jsx:
import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getMe, selectUserDetails } from '../../features/authentication/authenticationSlice'
export default () => {
const dispatch = useDispatch()
useEffect(() => {
dispatch(getMe())
}, [])
const userDetails = useSelector(selectUserDetails)
return (
<h5>{userDetails && userDetails.name}</h5>
<hr />
<h6>{userDetails && userDetails.email}</h6>
)
}
The email and the name still do not render.
I tried runnig this code on browser, but i got theses two errors in devtools Console when i’m logged in (i can see the access_token in Application):
Error: Request failed with status code 404
GET http://localhost:5000/auth/me 404 (Not Found)
I really appreciate your help. Thank you all.
