Bearer token for keycloak

Hi, am a little lost with the documentation as there doesn't seem to be much information on how the login works for the keycloak abstraction. This was what my project was generated with:
const authProvider: AuthProvider = {
login: async () => {
signIn('keycloak', {
callbackUrl: to ? to.toString() : '/',
redirect: true
});

return {
success: true
};
},
logout: async () => {
signOut({
redirect: true,
callbackUrl: '/login'
});

return {
success: true
};
},
onError: async (error) => {
if (error.response?.status === 401) {
return {
logout: true
};
}

return {
error
};
},
check: async () => {
if (status === 'unauthenticated') {
return {
authenticated: false,
redirectTo: '/login'
};
}

return {
authenticated: true
};
},
getPermissions: async () => {
return null;
},
getIdentity: async () => {
if (data?.user) {
const { user } = data;
return {
name: user.name,
avatar: user.image
};
}

return null;
}
};
const authProvider: AuthProvider = {
login: async () => {
signIn('keycloak', {
callbackUrl: to ? to.toString() : '/',
redirect: true
});

return {
success: true
};
},
logout: async () => {
signOut({
redirect: true,
callbackUrl: '/login'
});

return {
success: true
};
},
onError: async (error) => {
if (error.response?.status === 401) {
return {
logout: true
};
}

return {
error
};
},
check: async () => {
if (status === 'unauthenticated') {
return {
authenticated: false,
redirectTo: '/login'
};
}

return {
authenticated: true
};
},
getPermissions: async () => {
return null;
},
getIdentity: async () => {
if (data?.user) {
const { user } = data;
return {
name: user.name,
avatar: user.image
};
}

return null;
}
};
I am also utilizing a simple-rest server.
'use client';

import dataProviderSimpleRest from '@refinedev/simple-rest';

const API_URL = 'http://localhost:3000/api';

export const dataProvider = dataProviderSimpleRest(API_URL);
'use client';

import dataProviderSimpleRest from '@refinedev/simple-rest';

const API_URL = 'http://localhost:3000/api';

export const dataProvider = dataProviderSimpleRest(API_URL);
Where does it store the auth token? And how can i pass this auth token in my simple-rest provider?
2 Replies
kapa.ai
kapa.ai2mo ago
Hi @dion. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To handle authentication with Keycloak and ensure that the bearer token is passed in your simple-rest provider, you need to store the token and configure your axios instance to include it in the headers for every request. Here's how you can achieve this: 1. Store the Token: When you log in, you need to store the token in a place where it can be accessed later, such as localStorage. 2. Configure Axios to Include the Token: Create a custom axios instance and use an interceptor to add the token to the headers of every request. 3. Update the Data Provider: Pass the custom axios instance to the simple-rest data provider. Here is an example based on the information provided: Step 1: Store the Token Modify your authProvider to store the token in localStorage when logging in:
import { AuthProvider } from "@refinedev/core";
import { signIn, signOut } from "next-auth/client"; // Adjust the import based on your setup

const authProvider: AuthProvider = {
login: async () => {
signIn('keycloak', {
callbackUrl: to ? to.toString() : '/',
redirect: true
});

// Assuming the token is returned in the response, store it in localStorage
const token = "your_token"; // Replace with actual token retrieval logic
localStorage.setItem('access_token', token);

return {
success: true
};
},
logout: async () => {
signOut({
redirect: true,
callbackUrl: '/login'
});

localStorage.removeItem('access_token');

return {
success: true
};
},
onError: async (error) => {
if (error.response?.status === 401) {
return {
logout: true
};
}
return {
error
};
},
check: async () => {
const token = localStorage.getItem('access_token');
if (!token) {
return {
authenticated: false,
redirectTo: '/login'
};
}

return {
authenticated: true
};
},
getPermissions: async () => {
return null;
},
getIdentity: async () => {
const token = localStorage.getItem('access_token');
if (token) {
// Retrieve user information using the token
const user = { name: "User Name", avatar: "User Avatar" }; // Replace with actual user retrieval logic
return user;
}

return null;
}
};
import { AuthProvider } from "@refinedev/core";
import { signIn, signOut } from "next-auth/client"; // Adjust the import based on your setup

const authProvider: AuthProvider = {
login: async () => {
signIn('keycloak', {
callbackUrl: to ? to.toString() : '/',
redirect: true
});

// Assuming the token is returned in the response, store it in localStorage
const token = "your_token"; // Replace with actual token retrieval logic
localStorage.setItem('access_token', token);

return {
success: true
};
},
logout: async () => {
signOut({
redirect: true,
callbackUrl: '/login'
});

localStorage.removeItem('access_token');

return {
success: true
};
},
onError: async (error) => {
if (error.response?.status === 401) {
return {
logout: true
};
}
return {
error
};
},
check: async () => {
const token = localStorage.getItem('access_token');
if (!token) {
return {
authenticated: false,
redirectTo: '/login'
};
}

return {
authenticated: true
};
},
getPermissions: async () => {
return null;
},
getIdentity: async () => {
const token = localStorage.getItem('access_token');
if (token) {
// Retrieve user information using the token
const user = { name: "User Name", avatar: "User Avatar" }; // Replace with actual user retrieval logic
return user;
}

return null;
}
};
Step 2: Configure Axios to Include the Token Create a custom axios instance and use an interceptor to add the token to the headers:
import axios from "axios";

const axiosInstance = axios.create({
baseURL: "<http://localhost:3000/api",> // Replace with your API URL
});

axiosInstance.interceptors.request.use(
(config) => {
const token = localStorage.getItem('access_token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
import axios from "axios";

const axiosInstance = axios.create({
baseURL: "<http://localhost:3000/api",> // Replace with your API URL
});

axiosInstance.interceptors.request.use(
(config) => {
const token = localStorage.getItem('access_token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
Step 3: Update the Data Provider Pass the custom axios instance to the simple-rest data provider:
import dataProviderSimpleRest from '@refinedev/simple-rest';

const API_URL = '<http://localhost:3000/api';>

export const dataProvider = dataProviderSimpleRest(API_URL, axiosInstance);
import dataProviderSimpleRest from '@refinedev/simple-rest';

const API_URL = '<http://localhost:3000/api';>

export const dataProvider = dataProviderSimpleRest(API_URL, axiosInstance);
By following these steps, you ensure ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai2mo ago
<@1120211410354446426> kapa.ai is still learning and improving, please let us know how it did by reacting below