我在react中有一个前端，当前显示两个按钮，一个用于验证，一个用于验证后显示数据
前端：

const auth = async () => {
    window.open("callbackApiRouteOnBackend")
}

const displayData = async () => {
// this function displays our data on frontend 
}

return (
  <>
      <button onClick={auth}>Authenticate</button> 
      <button onClick={displayData}>Display data</button>
  </>
)

在后端使用oauth2完成身份验证，以获取访问令牌和刷新令牌。这一切都工作正常。唯一的问题是，现在可以单击前端上的按钮，以在用户未通过身份验证时显示数据，但它不会工作，因为没有访问令牌时，获取不起作用。我知道，我可以使用条件渲染在用户通过身份验证时隐藏按钮，但我似乎找不到在前端确定用户是否已验证的
这是我的后端，用于在节点js和express中进行身份验证：

export const callback = async (req, res) => {
  res.redirect("placeholder for external login page");
  // then redirect to our redirect function to get access token
};

export const redirect = async (req, res) => {
  
  
  const link = "external api link to get access token"
  try {
    const response = await axios.post(link);
    // This is where it gets access token 
    // after access token is got how can i set a state to know the user is authenticated
    // and then redirect them back to frontend with the frontend also knowing if 
       the user is authenticated or not
  } catch (error) {
    console.log(error);
  }
  res.redirect(307, "http://localhost:3000");
  

};

什么是最好的方法去做这件事，因为在用户从后端认证后，我重定向到前端，但没有办法告诉后端或前端，如果用户实际上是认证与否。