✅ – ✅ – dmikester1 – 05-24 Apr 25

Ddmikester1

4/25/2023

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. Here is my Login component:

Ddmikester1

4/25/2023

Ddmikester1

4/25/2023

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

UUUnknown User

4/25/2023

5 Messages Not Public

Ddmikester1

4/26/2023

@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!

UUUnknown User

4/27/2023

4 Messages Not Public

Looking for more? Join the community!

Reactiflux

✅ – ✅ – dmikester1 – 05-24 Apr 25

Join Server

Reactiflux

✅ – ✅ – dmikester1 – 05-24 Apr 25

Join Server

Want results from more Discord servers?

Add your server