national-gold
national-gold15mo ago

Invalidate login when API authentication expires?

I'm trying to log a user out, and send them to the login page, if our API responds to say the session is invalid. As an example, a login session is invalidated if someone logs in with the same account on a different browser/device. Our API will start responding with a 401. I can get the 401 via an axios interceptor. How can I kick the "check" login functionality at this point, to then handle the redirect to login?
5 Replies
kapa.ai
kapa.ai15mo ago
Hey @johnwards! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
kapa.ai
kapa.ai15mo ago
---------------------- You can use the useLogout (https://refine.dev/docs/api-reference/core/hooks/auth/useLogout/) hook to call the logout method of the authProvider (https://refine.dev/docs/api-reference/core/providers/auth-provider/). This will log out the user and redirect them to the /login page by default. You can also provide a custom URL to the mutate function of the useLogout hook, which will override the one on the authProvider.
import { useLogout } from "@pankod/refine-core";

const { mutate: logout } = useLogout<{ redirectPath: string }>();

logout({ redirectPath: "/custom-url" });
import { useLogout } from "@pankod/refine-core";

const { mutate: logout } = useLogout<{ redirectPath: string }>();

logout({ redirectPath: "/custom-url" });
Then, you can handle this URL in your logout method of the authProvider.

const authProvider: AuthProvider = {
...
logout: ({ redirectPath }) => {
...
return Promise.resolve(redirectPath);
}
}


const authProvider: AuthProvider = {
...
logout: ({ redirectPath }) => {
...
return Promise.resolve(redirectPath);
}
}

You can also use an axios interceptor (https://github.com/axios/axios#interceptors) to detect a 401 response from the API and call the logout method.
import axios from "axios";

const axiosInstance = axios.create();

axiosInstance.interceptors.response.use(
(response) => response,
(error) => {
if (error.response.status === 401) {
logout({ redirectPath: "/custom-url" });
}
return Promise.reject(error);
}
);
import axios from "axios";

const axiosInstance = axios.create();

axiosInstance.interceptors.response.use(
(response) => response,
(error) => {
if (error.response.status === 401) {
logout({ redirectPath: "/custom-url" });
}
return Promise.reject(error);
}
);
----------------------
useLogout | refine
useLogout data hook from refine is a modified version of react-query's useMutation for unauthentication.
GitHub
GitHub - axios/axios: Promise based HTTP client for the browser and...
Promise based HTTP client for the browser and node.js - GitHub - axios/axios: Promise based HTTP client for the browser and node.js
kapa.ai
kapa.ai15mo ago
<@128446913274970112> kapa.ai is still learning and improving, please let us how it did by reacting below
national-gold
national-gold15mo ago
@kapa.ai I don't think you can use useLogout in an axios interceptor. That looks to be breaking rules of hooks. Ah! Simply intercepting the error, deleting the local storage and then doing a window.location.reload(); will do nicely It's hacky, I'd rather redraw so I can pass a message. But it will do for now. Any bright ideas about how to do this without reloading very welcome
Omer
Omer15mo ago
I think it is a good solution 👏🏻