Logging out from system

[shirkan]

Hi, I followed the instructions on https://docs.fief.dev/integrate/javascript/frontend/react/ to implement a login/logout mechanism in React. it works great when I place the code for https://docs.fief.dev/integrate/javascript/frontend/react/#manage-authentication in the main page. In my web service there's a dashboard where only logged in users can access. when a logged in user is in the dashboard and tries to logout, he automatically return to the callback page where he is redirected to fief login page.
The relevant code in the dashboard page looks like this:

...
import { useFiefAuth, useFiefUserinfo } from "@fief/fief/build/esm/react";

const AppHeaderDropdown = () => {
  const userinfo = useFiefUserinfo();
  const fiefAuth = useFiefAuth();

  const logout = useCallback(() => {
    fiefAuth.logout(`${window.location.protocol}//${window.location.host}`);
  }, [fiefAuth]);
...
   return (<>
...
        <Button onClick={() => logout()}>Log out</Button>
...
    </>
);

The code in the main page:

...
import {
  useFiefAuth,
  useFiefIsAuthenticated,
  useFiefUserinfo,
} from "@fief/fief/build/esm/react";
...

export default function MainNavbar(props) {
  const fiefAuth = useFiefAuth();
  const isAuthenticated = useFiefIsAuthenticated();
  const userinfo = useFiefUserinfo();
  
  const login = useCallback(() => {
    fiefAuth.redirectToLogin(
      `${window.location.protocol}//${window.location.host}/callback`
    );
  }, [fiefAuth]);

  const logout = useCallback(() => {
    fiefAuth.logout();
  }, [fiefAuth]);

...
    return (<>
        ...
        <Button onClick={() => login()}>Sign in</Button>
        ...
    </>
);

On App.js i use this route which is the only route using RequireAuth:

<Route path="/dashboard/*" element={<RequireAuth><Dashboard /></RequireAuth>}/>

Do you need more info?

[frankie567]

When you call fiefAuth.logout, the first argument is the URL where you want to redirect the user after being logged out.

Make sure this URL points to a "public" page, otherwise, they will be redirected back to the login page.

Also, I see that your logout hook in your main page doesn't set the redirect URL, is it wanted?

[shirkan]

Also, I see that your logout hook in your main page doesn't set the redirect URL, is it wanted?

Well I actually I've paste a code with an attempt to send an empty string to logout. The actual code is

  const logout = useCallback(() => {
    fiefAuth.logout(`${window.location.protocol}//${window.location.host}`);
  }, [fiefAuth]);

as specified in the tutorial. The problem is, as mentioned, with the logout in the dashboard. for some reason it logs out, but redirects to fief login page and not the website's main page.

[frankie567]

Ok. Are you sure that your main page is not under RequireAuth, which would explain why you are automatically redirected to login?

[shirkan]

I'm quite sure, my main route is:

return (
    <>
      <FiefAuthProvider
        baseURL={process.env.REACT_APP_FIEF_ENDPOINT}
        clientId={process.env.REACT_APP_FIEF_CLIENT_ID}
      >
        <Provider store={store}>
          <BrowserRouter>
            <Routes>
              <Route path="/" element={<Main />} />
              <Route exact path="/privacy" element={<Privacy />} />
              <Route
                exact
                path="/terms_of_service"
                element={<TermsOfService />}
              />
              <Route exact path="/callback" element={<Callback />} />
              <Route
                path="/dashboard/*"
                element={
                  <RequireAuth>
                    <Dashboard />
                  </RequireAuth>
                }
              />
            </Routes>
          </BrowserRouter>
        </Provider>
      </FiefAuthProvider>
    </>
  );

[frankie567]

So, after investigating, it seems that there is a race condition between <RequireAuth> and the logout redirection. When we call logout, it clears the session from the storage, which triggers a re-render of <RequireAuth> and prevent the redirection to logout from happening.

I'll see how to improve this in the SDK.

In the meantime, an easy solution is to implement a public <Logout> page which calls the logout method. Then, in your user menu, just make a link to this page.

[shirkan]

In the meantime, an easy solution is to implement a public <Logout> page which calls the logout method. Then, in your user menu, just make a link to this page.

Thanks, the workaround works as expected 🥳