✅ – ✅ – dmikester1 – 05-24 Apr 25

I have an issue with my React Login component. I have it showing Loading... while it is checking the auth status so on refresh it does not flash the login screen. But for some reason, when try and first login, it only shows Loading... and will never display the Login form.
D
dmikester1359d ago
Here is my Login component:
D
dmikester1359d ago
D
dmikester1359d ago
Funny thing is, when i refresh the page, it quickly flashes the Login form before going back to Loading... again.
UU
Unknown User359d ago
D
dmikester1359d ago
@LEDThereBeLight Here is my useRefreshToken hook:
import { axiosAuth, axiosPrivate } from '../api/axios';
import useAuth from './useAuth';

const useRefreshToken = () => {
const { setAuth } = useAuth();

const refresh = async () => {
console.log('running refresh...');
try {
const response = await axiosAuth.get('/refresh');
console.log({ response });
setAuth((prev) => {
console.log(JSON.stringify(prev));
console.log(response.data.accessToken);
return {
...prev,
roles: response.data.roles,
accessToken: response.data.accessToken,
};
});
return response.data.accessToken;
} catch(err) {
console.log({err});
return err;
}
};

return refresh;
};

export default useRefreshToken;
import { axiosAuth, axiosPrivate } from '../api/axios';
import useAuth from './useAuth';

const useRefreshToken = () => {
const { setAuth } = useAuth();

const refresh = async () => {
console.log('running refresh...');
try {
const response = await axiosAuth.get('/refresh');
console.log({ response });
setAuth((prev) => {
console.log(JSON.stringify(prev));
console.log(response.data.accessToken);
return {
...prev,
roles: response.data.roles,
accessToken: response.data.accessToken,
};
});
return response.data.accessToken;
} catch(err) {
console.log({err});
return err;
}
};

return refresh;
};

export default useRefreshToken;
and my useAuth:
import { useContext, useDebugValue } from "react";
import AuthContext from "../context/AuthProvider";

const useAuth = () => {
const { auth } = useContext(AuthContext);
useDebugValue(auth, auth => auth?.user ? "Logged In" : "Logged Out")
return useContext(AuthContext);
}

export default useAuth;
import { useContext, useDebugValue } from "react";
import AuthContext from "../context/AuthProvider";

const useAuth = () => {
const { auth } = useContext(AuthContext);
useDebugValue(auth, auth => auth?.user ? "Logged In" : "Logged Out")
return useContext(AuthContext);
}

export default useAuth;
@Wouter Yes, I am noticing weird behaviour in the logs. The console log in the 'finally' block only shows when I hit the refresh button, and it shows right away like once the component has unloaded even before the page reloads. Then on page reload, I see the 'try' console log, but no 'finally' after it. I figured it out. My Node server was not correctly sending back the status. That was a tough one. Thanks for the help guys. Your tips led me to finding the issue! The issue was here:
if (!cookies?.jwt) {
return res.status(401);
}
if (!cookies?.jwt) {
return res.status(401);
}
I needed to change that to 'sendStatus' so there was no status ever being returned in that circumstance!
UU
Unknown User357d ago