extended-salmon•2mo ago

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•2mo 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•2mo ago

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