使用@auth0/auth0-react跨多个选项卡同步帐户

Question

我已经使用

@auth0/auth0-react

开发了 React 应用程序和登录功能，现在我正在使用

@auth0/auth0-react

在 Next JS 登录功能中开发网站，现在我想跨应用程序和网站访问同一用户，所以我没有得到任何特定的信息想法如何获取相同的用户数据并反之亦然地使用它......

经过一番努力发现，如果用户通过 auth0 rest 的登录按钮登录，

getAccessTokenSilently

将会有所帮助，它会给我一个需要登录的错误，但我已经在另一个选项卡中登录了....

现在登录工作正常，但注销（）功能不起作用。

Answer 1

不确定您的具体要求是什么，但让我告诉您

auth0

登录和注销如何与

react

配合使用

检查您的应用程序中的身份验证

import { useAuth0 } from '@auth0/auth0-react';

function App() {
  const { isAuthenticated, getAccessTokenSilently, user } = useAuth0();
  
  useEffect(() => {
    if (isAuthenticated) {
      getAccessTokenSilently().then((token) => {
         //If you want to store the token or call an API with the access_token
      })
    };
  }, [isAuthenticated])

  return (
   <>Your JSX</>
  )
}

登录：

import { useAuth0 } from '@auth0/auth0-react';

const Login = () => {
    const { loginWithPopup, isAuthenticated, isLoading } = useAuth0();
    //IsLoading can be used to show a loading screen while the authentication is being performed

    async function handleLogin(){
        await loginWithPopup()
        //Other conditions
    }

    useEffect(() => {
        if (isAuthenticated) {
            //Some condition such as navigating to a particular page
        }
    }, [isAuthenticated])

    return (
        <button
            onClick={handleLogin}
        >
            Login

        </button>
    )

退出：

import { useAuth0 } from '@auth0/auth0-react'

const LogOutBtn = () => {
  const { logout, isAuthenticated } = useAuth0();
  
  function handleLogoutEvent() {
    logout()
  }

  return (
    (isAuthenticated) 
     ? <button onClick={handleLogoutEvent}>
          Log Out
      </button>
     <>Some other condition</>
  )
}