I am using Reactjs, Laravel and JWT. I am trying to login and fetch data from the backend into dashboard after I log in but it gives me “Request failed with status code 500”. I have tried with get instead of post but doesnt work. If I removed “http.post” stuff in dashboard.js it doesnt give error but I need it as I need user’s details.
Laravel
api.php
Route::post('login', [AuthController::class,'login']);
Route::post('register', [AuthController::class,'register']);
Route::group(['middleware'=>'api'],function(){
Route::post('logout', [AuthController::class,'logout']);
Route::post('refresh', [AuthController::class,'refresh']);
Route::post('me', [AuthController::class,'me']);
});
Reactjs :
Auth.js
export default function AuthUser(){
const navigate = useNavigate();
const getToken = () =>{
const tokenString = sessionStorage.getItem('token');
const userToken = JSON.parse(tokenString);
return userToken;
}
const getUser = () =>{
const userString = sessionStorage.getItem('user');
const user_detail = JSON.parse(userString);
return user_detail;
}
const [token,setToken] = useState(getToken());
const [user,setUser] = useState(getUser());
const saveToken = (user,token) =>{
sessionStorage.setItem('token',JSON.stringify(token));
sessionStorage.setItem('user',JSON.stringify(user));
setToken(token);
setUser(user);
navigate('/dashboard');
}
const logout = () => {
sessionStorage.clear();
navigate('/login');
}
const http = axios.create({
baseURL:"http://localhost:8000/api",
headers:{
"Content-type" : "application/json",
"Authorization" : `Bearer ${token}`
}
});
return {
setToken:saveToken,
token,
user,
getToken,
http,
logout
}
}
Dashboard.js
import { useEffect, useState } from 'react';
import AuthUser from './AuthUser';
export default function Dashboard() {
const {http} = AuthUser();
const [userdetail,setUserdetail] = useState('');
useEffect(()=>{
fetchUserDetail();
},[]);
const fetchUserDetail = () =>{
http.post('/me').then((res)=>{
setUserdetail(res.data);
});
}
function renderElement(){
if(userdetail){
return <div>
<h4>Name</h4>
<p>{userdetail.name}</p>
<h4>Email</h4>
<p>{userdetail.email}</p>
</div>
}else{
return <p>Loading.....</p>
}
}
return(
<div>
<h1 className='mb-4 mt-4'>Dashboard page</h1>
{ renderElement() }
</div>
)
}
I am trying to follow https://github.com/AjayYadavAi/react-js-authentication-laravel tutorial but it works on his and not mine. I did the exact same thing.