document.referrer not working as expected in Mozilla Firefox on refresh

I have a simple react app, and I'm trying to redirect the user to a login page if they came directly without logging in.

App.js

 useEffect(() => { 
        if (document.referrer === "") { 

           window.location.replace("../loginpage.php");

        } else { 

            console.log("user came through login")
        } 
      })

This works perfectly for Chrome and Edge.

The problem

When I refresh the pages, Mozilla directs me back to the Login page whereas Chrome and Edge stays on the same page.

For some reason document.referrer is not working as expected in Mozilla. Any help is appreciated. Thanks !

Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1324860.

Though what you are trying to do it quite odd from a user experience perspective. Usually you would only redirect to logon if they didn't have a session, and you would make an API call to check that server side.

Typically, relying on referrer for anything at all raises flags since the referrer header is easily manipulated by the client.