firm-tan•6mo ago

AuthProvider and AccessControl mismatch during checkLoginIframe keycloak

There seems to be a mismatch in the context updates between the AuthProvider and the AccessControlProvider using keycloak default settings in our project. By default KeyCloak checks the login states in an iframe. This can lead to the AccessControlProvider knowing that the client has logged out. Which in turn may be used to display AccessControl based components. Refine's internal authProvider does not check whether the user is still authenticated similarly to keycloak, and thus we have a situation where we set the role state globally to be an empty string with a logged out user, but the webpage still displays that the user is logged out because of refine's authentication (before refresh or user actions). Current workaround exists on remounting the entire AuthProvider which seems to lead to weird implementations or simply setting keycloaks options as such: initOptions={{ checkLoginIframe: false }. Is it somehow possible to trigger the AuthProvider to call the check() on changes of the AuthProvider? The KeyCloak instance has a changed keyCloakInstance.token so it seems logical to be able to have things like this as a dependency to the AuthContext and rerender.

6 Replies

kapa.ai•6mo ago

Hi @haib. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The information extracts provided do not contain specific details about the interaction between Keycloak, AuthProvider, and AccessControlProvider. However, I can share that in Refine, the AuthProvider's check method is used to verify the authentication status of the user. This method is used by the Authenticated component and the useIsAuthenticated hook to redirect unauthenticated users to the login page. You can find more details about this in the Refine documentation (https://refine.dev/docs/guides-concepts/usage-with-existing-projects#check-method). For more complex scenarios, it might be necessary to manually invalidate the auth store when you authenticate outside of the AuthProvider. This is discussed in this Github issue (https://github.com/refinedev/refine/issues/3019). For a more specific answer to your question, I would recommend checking the official Refine documentation or reaching out to the Refine community. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@525050092005359626> kapa.ai is still learning and improving, please let us know how it did by reacting below

firm-tan•6mo ago

@kapa.ai the answer links to a legacy provider which we do not use.

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion. Based on the information provided in the extracts, the check method in the AuthProvider is used to verify if the user is authenticated. This method is internally called when the user navigates to a page that requires authentication. If you want to trigger the AuthProvider to call the check() method on changes of the AuthProvider, you might need to implement a custom logic in your application. Here is a basic example of how the check method is used in Refine:

import { AuthProvider } from "@refinedev/core";  
  
const authProvider: AuthProvider = {  
 check: async () => {  
 const user = localStorage.getItem("auth");  
  
 if (user) {  
 return {  
 authenticated: true,  
 };  
 }  
  
 return {  
 authenticated: false,  
 logout: true,  
 redirectTo: "/login",  
 error: {  
 message: "Check failed",  
 name: "Unauthorized",  
 },  
 };  
 },  
 // ---  
};

import { AuthProvider } from "@refinedev/core";  
  
const authProvider: AuthProvider = {  
 check: async () => {  
 const user = localStorage.getItem("auth");  
  
 if (user) {  
 return {  
 authenticated: true,  
 };  
 }  
  
 return {  
 authenticated: false,  
 logout: true,  
 redirectTo: "/login",  
 error: {  
 message: "Check failed",  
 name: "Unauthorized",  
 },  
 };  
 },  
 // ---  
};

(Source: Refine Documentation (https://refine.dev/docs/authentication/auth-provider#check)) However, the extracts do not provide specific details on how to handle the interaction between Keycloak, AuthProvider, and AccessControlProvider. For a more specific solution, you might need to refer to the official Refine documentation or reach out to the Refine community. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@525050092005359626> kapa.ai is still learning and improving, please let us know how it did by reacting below

metropolitan-bronze•6mo ago

Hello @haib, Thanks for the issue, It seems interesting. Can you provide reproducible example for us ? If you, we would happy to debug