I have a react application where I have integrated OIDC connect through react-oidc-context referring to installation instructions with some additions.
I can Sign the user in the application. Doing so redirects me to the OIDC Sign-In screen, I fill in credentials, and then I am redirected back to my React SPA and my access token is available. All good so far.
However, clicking Sign Out I am redirected to OP /logout. If I then navigate back in the browser I again get logged in without asking for credentials but if I refresh the screen then I get logged out.
Can you please help me with this?
My OIDC configuration
import { WebStorageStateStore } from "oidc-client-ts";
export const oidcConfig = {
authority: window.ENV.AUTHORITY,
client_id: window.ENV.CLIENT_ID,
response_type: "code",
scope: "openid offline groups builder.access",
redirect_uri: `${window.location.origin}/callback`,
post_logout_redirect_uri: `${window.location.origin}/logout`,
automaticSilentRenew: false,
revokeTokenTypes: ["access_token", "refresh_token"],
revokeTokensOnSignout: true,
userStore: new WebStorageStateStore({ store: window.sessionStorage }),
};
Here is my Login file
import { useAuth } from "react-oidc-context";
import "./Login.scss";
import Layout from "./Layout";
import { DefaultRoute } from "../routes";
export const Login = () => {
const auth = useAuth();
if (auth.error) {
return (
<div className="error">
Oops something went wrong...
<p>
Refresh the browser and try again <br />
<code> {auth.error.message}</code>
</p>
</div>
);
}
if (auth.isLoading) {
return <div className="loading">Loading...</div>;
}
if (auth.isAuthenticated) {
return (
<Layout>
<DefaultRoute />
</Layout>
);
}
if (!auth.isAuthenticated) {
auth.signinRedirect();
}
return <></>;
};
export default Login;
Logout method to logout user
import { useAuth } from "react-oidc-context";
export const Logout = () => {
const auth = useAuth();
const handleLogout = () => {
auth.removeUser();
auth.signoutRedirect();
};
return (
<>
<button onClick={handleLogout}>Log Out user </button>
</>
);
};
I tried adding revokeTokenTypes: ["access_token", "refresh_token"], revokeTokensOnSignout: true
properties in the oidc config file, but it didn’t work. I expect the user to be logged out after logging out, and if he clicks the browser back button, he should not be led back to the application, but rather remain on the login screen.