Auth0 로그인 및 로그아웃 프로필이 작동하지 않습니다. 타이프스크립트에 반응하다

Question

Auth0에 대해 질문이 있습니다. 로그인. 그리고 로그아웃합니다. 반응형 타이프스크립트를 사용합니다.

이 파일은 Index.tsx에 있습니다.

root.render(
  <인증0제공자
        도메인="somecode.us.auth0.com"
        clientId="somecode"
        AuthorizationParams={{
          리디렉션_우리: window.location.origin
        }}
      >
      <React.StrictMode>
        <공급업체 스토어={스토어}>
          <CssBaseline />
          <앱 />
        </공급자>
      </React.StrictMode>
  </Auth0Provider>
);

인증 구성에 일부 코드가 제공됩니다.

이제 로그인 또는 로그아웃 버튼이 생겼습니다.

const AuthButton = () =>
  const { isAuthenticated, loginWithRedirect, 로그아웃 } = useAuth0();

  const handlerLogin = () =>
    loginWithRedirect();
  };

  const handlerLogout = () =>
    logout({ logoutParams: { returnTo: window.location.origin } });
  };

  반품 (
    <버튼
      스타일={{
        색상: '흰색',
        배경색상: '#142952',
        marginRight: '4rem',
        글꼴 패밀리: '콘솔라',
        테두리: '없음',
        borderRadius: '3px',
        너비: '110px',
        높이: '40px'
      }}
      onClick={isAuthenticated ? handlerLogout : 핸들로그인}
    >
      {인증됨 ? '로그아웃' : '로그인'}
    </버튼>
  );
};

기본 AuthButton 내보내기;

또한요. 표시할 사용자 정보를 검색합니다.

const 프로필 = () =>
  const { user, isAuthenticated, getAccessTokenSilently } = useAuth0();
  const [accessToken, setAccessToken] = useState('');

  useEffect(() => {
    const getAccessToken = 비동기 () =>
      노력하다 {
        const 토큰 = getAccessTokenSilently()를 기다립니다.
        setAccessToken(토큰);
      } 잡기(오류) {
        console.error(오류);
      }
    };

    if (isAuthenticated) {
      getAccessToken();
      console.log("인증됨")
    }
  }, [isAuthenticated, getAccessTokenSilently]);

  if (!isAuthenticated) {
    return <div>프로필을 보려면 로그인하세요.</div>;
  }

  반품 (
    <div>
      {사용자?.사진 &&
        <img src={user.picture} alt="프로필 사진"
      )}
      <h2>안녕하세요 {user?.name}</h2>
      <p>이메일: {user?.email}</p>
      <p>로그인 방법: {user?.sub?.split('|')[0]}</p>
      <p>액세스 토큰: {accessToken}</p>
    </div>
  );
};

기본 프로필 내보내기

내 문제는 다음과 같습니다: Auth0 프로토콜로 로그인한 후 로그인 로그아웃 버튼이 변경되지 않습니다. 첫 번째. 그러면 auth0 대화 상자가 열리고 이동합니다. 하지만. 내 Google 계정으로 로그인 한 후. 그런 다음 버튼에는 여전히 "로그인"이 표시됩니다. 즉, 로그인하지 않는다는 의미입니다. 나는 정말로 무엇을 해야할지 모르겠습니다. 내가 가지고 있는 auth0 구성 설정은 다음과 같습니다.

위에서 설명한 대로

Answer 1

loginredirect 대신 loginWithPopup을 사용하여 이 문제를 해결했습니다. 저도 이 링크를 사용했습니다.

으아악

window.location.origin을 사용하지 않습니다. 하지만 코드의 이 부분에서는 주소를 사용하고 있습니다.