dmikester1•2y ago

✅ – ✅ – 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.

7 Replies

dmikester1OP•2y ago

Here is my Login component:

dmikester1OP•2y ago

message.txt

dmikester1OP•2y ago

Funny thing is, when i refresh the page, it quickly flashes the Login form before going back to Loading... again.

Unknown User•2y ago

Message Not Public

dmikester1OP•2y 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!

reactibot•2y ago

This question has an answer! Thank you for helping 😄 If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/1100291181306454036 This thread hasn’t had any activity in 36 hours, so it’s now locked. Threads are closed automatically after 36 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/1100291181306454036

✅ – ✅ – dmikester1 – 05-24 Apr 25

Did you find this page helpful?