ReactJS+Auth0示例应用程序使用原始登录电子邮件.如何清除

Question

我在这里学习教程：https://github.com/auth0-blog/auth0-react-sample

我的大部分身份验证都在工作，但遇到了以下问题：

我第一次登录时(缓存清除后(，它会问我gmail用户名。如果我选择了合适的，它会让我登录。如果我注销，然后点击登录，它不会再问我，它只会使用我输入的原始登录。

如果我输入了一个无效的gmail，它不会登录，但不会再询问。

无论哪种方式，我怀疑它使用的是它返回的原始响应(无论是否经过身份验证(。

有没有一种方法可以更改它，这样如果我点击注销按钮(或者登录失败(，它就会删除响应。

我相信2018年的这篇帖子是类似的，但我不确定如何将其修改到今天：https://community.auth0.com/t/does-not-show-user-login-prompt-anymore-after-the-first-logging-in/16504

我是react/auth0的新手，但以下是我认为相关的文件：

具有history.js的auth0提供程序

import React from "react";
import { useHistory } from "react-router-dom";
import { Auth0Provider } from "@auth0/auth0-react";
const Auth0ProviderWithHistory = ({ children }) => {

const history = useHistory();
const domain = process.env.REACT_APP_AUTH0_DOMAIN;
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
const audience = process.env.REACT_APP_AUTH0_AUDIENCE;
const onRedirectCallback = (appState) => {
history.push(appState?.returnTo || window.location.pathname);
};
return (
<Auth0Provider
domain={domain}
clientId={clientId}
redirectUri={window.location.origin}
onRedirectCallback={onRedirectCallback}
audience={audience}
>
{children}
</Auth0Provider>
);
};
export default Auth0ProviderWithHistory;

受保护的路由.js

// src/auth/protected-route.js
import React from "react";
import { Route } from "react-router-dom";
import { withAuthenticationRequired } from "@auth0/auth0-react";
import { Loading } from "../components/index";
const ProtectedRoute = ({ component, ...args }) => (
<Route
component={withAuthenticationRequired(component, {
onRedirecting: () => <Loading />,
})}
{...args}
/>
);
export default ProtectedRoute;

登录按钮.js

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
const LoginButton = () => {
const { loginWithRedirect } = useAuth0();
return (
<button
className="btn btn-primary btn-block"
onClick={() => loginWithRedirect()}
>
Log In
</button>
);
};
export default LoginButton;

注销按钮.js

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
const LogoutButton = () => {
const { logout } = useAuth0();
return (
<button
className="btn btn-danger btn-block"
onClick={() =>
logout({
returnTo: window.location.origin,
})
}
>
Log Out
</button>
);
};
export default LogoutButton;

Answer 1

我不确定这是否是最好的方法，但我可以通过在适当的位置添加localStorage.clear();来删除存储的任何内容来实现这一点。

希望这对将来的某个人有所帮助。

具体而言：

注销按钮.js

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
const LogoutButton = () => {
const { logout } = useAuth0();
localStorage.clear(); // this clears the old email address
return (
<button
className="btn btn-danger btn-block"
onClick={() =>{
logout({
returnTo: window.location.origin,
})
}
}
>
Log Out
</button>
);
};
export default LogoutButton;

app.js

import React from "react";
import { Route, Switch } from "react-router-dom";
import { useAuth0 } from "@auth0/auth0-react";
import { NavBar, Footer, Loading } from "./components";
import { Home, Profile, ExternalApi } from "./views";
import ProtectedRoute from "./auth/protected-route";
import "./app.css";
const App = () => {
const { isLoading, logout,  error} = useAuth0();
if (isLoading) {
return <Loading />;
}
if (typeof error !== 'undefined' && error.error === "unauthorized") { // The user does not exist. Completely log them out.

localStorage.clear(); 
logout({
returnTo: window.location.origin,
});

}
return (
<div id="app" className="d-flex flex-column h-100">
<NavBar />
<div className="container flex-grow-1">
<Switch>
<Route path="/" exact component={Home} />
<ProtectedRoute path="/profile" component={Profile} />
<ProtectedRoute path="/external-api" component={ExternalApi} />
</Switch>
</div>
<Footer />
</div>
);
};
export default App;