eager-peach
eager-peach•15mo ago

Token not visible in header after passing

const check = async () => { try { const { token } = keycloak if (token) {
axiosInstance.interceptors.request.use((request: AxiosRequestConfig) => { if (request.headers) {
request.headers["Authorization"] = Bearer ${token}; } else {
request.headers = { Authorization: Bearer ${token}, }; }
return request; }); await setToken(token) await setPermissionsFetched(true) return { authenticated: true } } else { return authenticateFailed } } catch (error) { return authenticateFailed } }
3 Replies
kapa.ai
kapa.ai•15mo ago
Hi @jash.s. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The check function you provided is an asynchronous function that checks if a user is authenticated. It uses the keycloak object to get the user's token. If the token exists, it sets the Authorization header for all axios requests to Bearer ${token}. It then sets the token and permissions fetched to true and returns an object with authenticated: true. If the token does not exist or an error occurs, it returns authenticateFailed. This function is similar to the check method in the authProvider object in refine. The check method in refine is used to check if the user is authenticated and is called when the user navigates to a page that requires authentication. It expects to return a resolved promise with an object that indicates whether the user is authenticated or not, and optionally includes a redirect URL, a logout boolean, and an error object [^1^]. Here is an example of how the check method is implemented in refine: 
const authProvider: AuthBindings = {  
 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",  
 },  
 };  
 },  
};
const authProvider: AuthBindings = {  
 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",  
 },  
 };  
 },  
};
In this example, the check method checks if the user data exists in local storage. If it does, it returns an object with authenticated: true. If it doesn't, it returns an object with authenticated: false, logout: true, a redirect URL, and an error object. [^1^]: (https://refine.dev/docs/api-reference/core/providers/auth-provider/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•15mo ago
<@1129363768661516329> kapa.ai is still learning and improving, please let us know how it did by reacting below
absent-sapphire
absent-sapphire•15mo ago
Hello @jash.s you should define interceptors outside of auth provider and ideally keep token somewhere you can access like localstorage. https://refine.dev/docs/tutorial/understanding-authprovider/create-authprovider/#implementing-refresh-token-mechanism
2. Create Auth Provider From Scratch | refine
We will show you how to create an auth provider from scratch in this section. After you understand the logic of the auth provider, you can easily integrate third-party authentication services or custom auth providers. We will be using mock data to better focus on the auth provider.