other-emerald•5mo ago

AuthProvider with Spring Boot

Hello, I've just recently started playing around with React in general and Refine. I'm trying to connect the starter app's login page with a Spring Boot backend to initially authenticate and I'm having some trouble. I was able to get my data provider seemingly setup correctly (just using the simple-rest provider that comes with Refine out of box) and was able to fetch some data without issue. But the login method on my AuthProvider keeps returning an error and I'm not sure why. On the Spring Boot side of things, I added some debug output in and can see that I'm getting a server hit, but there's no content being passed in the body of the request (which I imagine makes Spring boot discard it as a bad request since it can't match to the exposed method which is expecting an email address). My AuthProvider is attached below - any insight into why its not passing anything?

export const authProvider: AuthBindings = {
    login: async ({ email }) => {
        try {
            const { data } = await restProvider.custom({
                url: API_BASE_URL,
                method: "post",
                headers: {},
                query: {
                    email: email
                }
            });

            localStorage.setItem("access_token", data.login.accessToken);

            return {
                success: true,
                redirectTo: "/",
            };
        } catch (e) {
            const error = e as Error;

            return {
                success: false,
                error: {
                    message: "message" in error ? error.message : "Login failed",
                    name: "name" in error ? error.name : "Invalid email or password",
                },
            };
        }
    },

export const authProvider: AuthBindings = {
    login: async ({ email }) => {
        try {
            const { data } = await restProvider.custom({
                url: API_BASE_URL,
                method: "post",
                headers: {},
                query: {
                    email: email
                }
            });

            localStorage.setItem("access_token", data.login.accessToken);

            return {
                success: true,
                redirectTo: "/",
            };
        } catch (e) {
            const error = e as Error;

            return {
                success: false,
                error: {
                    message: "message" in error ? error.message : "Login failed",
                    name: "name" in error ? error.name : "Invalid email or password",
                },
            };
        }
    },

3 Replies

kapa.ai•5mo ago

Hi @MesbearizingMeat. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the code you provided, it seems like you're trying to pass the email as a query parameter in the URL. However, if your Spring Boot backend is expecting the email in the request body, you should pass it in the data field of the request, not the query field. Here's how you can modify your login method to send the email in the request body:

export const authProvider: AuthBindings = {
    login: async ({ email }) => {
        try {
            const { data } = await restProvider.custom({
                url: API_BASE_URL,
                method: "post",
                headers: {},
                data: {
                    email: email
                }
            });

            localStorage.setItem("access_token", data.login.accessToken);

            return {
                success: true,
                redirectTo: "/",
            };
        } catch (e) {
            const error = e as Error;

            return {
                success: false,
                error: {
                    message: "message" in error ? error.message : "Login failed",
                    name: "name" in error ? error.name : "Invalid email or password",
                },
            };
        }
    },

export const authProvider: AuthBindings = {
    login: async ({ email }) => {
        try {
            const { data } = await restProvider.custom({
                url: API_BASE_URL,
                method: "post",
                headers: {},
                data: {
                    email: email
                }
            });

            localStorage.setItem("access_token", data.login.accessToken);

            return {
                success: true,
                redirectTo: "/",
            };
        } catch (e) {
            const error = e as Error;

            return {
                success: false,
                error: {
                    message: "message" in error ? error.message : "Login failed",
                    name: "name" in error ? error.name : "Invalid email or password",
                },
            };
        }
    },

This should send the email in the request body as a JSON object, which should be correctly processed by your Spring Boot backend. For more information on how to use the authProvider in Refine, you can refer to the official documentation (https://refine.dev/docs/authentication/auth-provider). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

other-emerald•5mo ago

hmm, changing it from query to data gives me an error that 'data' doesn't exist as a property for type 'CustomParams<Unknown, Unknown>' okay, I think I'm on the right track now. Looking at CustomParams, I saw a property called payload which seemed like probably what I was looking for. Then after a few hours of annoying spring boot configuration fixes, I'm finally getting the auth call up to the server and getting data back that I'm expecting - huzzah