I've implemented a Google login in my react app. Currently I'm using react-google-login. The current behavior. There are parts of the site you can use without a login like home and contact page and others that can not be accessed until you login. we'll call that restricted page. so current behavior is User goes to url / sees welcome message and clicks on login. User is routed to url /login there is a Google login button. User clicks it and logs in

Now if the user refreshes the page the app of course reloads and user is not logged in. once they navigates to url /login. as soon as the Google button is rendered it sees the user has logged in (I assume this is from a cookie).

The issue is that is the user logs in and navigates to url /restricted. If they hit refresh then page reloads and react router will take them to page. in the component I have a check that if the user is not logged they get redirected to url /login and they they are automatically logged because of the recent cookie.

I want to make it so that if the user is on url /restricted and hit refresh I can check for the cookie and logged them in and not force them to navigate away from the page. I figure I should ditch the react package and just use the Google API directly. But looking at the docs I cant see how I can do the check and keep them logged in. Its been questioned already but no solid Solution available Soo kind provide solid solution will be very Thankful Below is the code for better understanding.

const Login = (props) => {
const navigate = useNavigate();



const responseGoogle = async (response) => {
console.log(response);
if (response.profileObj.googleId) {
  swal("Succesfully Login!");
  navigate("/Recipe", { replace: true });
 
  console.log("response",response)
  console.log("response.profileObj.googleId",response.profileObj.googleId);
  
  props.handle(false);
} 
else {
  swal("You are not registered");
}


 return(
 <GoogleLogin
            className="btnGoogle"
            clientId="677360402906- 
     k4mm9bpq4tduegb2ebj8.apps.googleusercontent.com"
            buttonText="Continue with Google"
            onSuccess={responseGoogle}
            onFailure={responseGoogle}
            // redirectUri="https://helpros.app"
            isSignedIn={true}

            cookiePolicy={"single_host_origin"}
            render={renderProps => (
              <Button onClick={renderProps.onClick}  size="small" 
    className="googleBtnSign">
                <BsGoogle/>
                Login with Google</Button>)}

          >
            Login with Google
          </GoogleLogin>


  )

When I come back to the login page after logout it directly move to the Recipe page, Even without clicking the button Login with Google.