ratty-blush•12mo ago

custom authProvider - Passing API Url

Hi! I currently have a custom authProvider that queries the /auth/login endpoint of my API. Right now, I have the URL in a const _app.tsx /and/ in authProvider. Is there a way where I can just pass the URL to authProvider?

5 Replies

national-gold•12mo ago

Hi @avangeous I don't understand your question. You want to send a request to the AuthProvider's methods, for example to the login method with a dynamic url? For this case you can pass a value to the useLogin hook and use the same name in the AuthProvider.

useLogin({ email: "test@mail.com", password: "123123", anyVariable: "foo" })

----

const authProvider: AuthBindings = {
        login: async ({ email,password,anyVariable }) => {}
}

useLogin({ email: "test@mail.com", password: "123123", anyVariable: "foo" })

----

const authProvider: AuthBindings = {
        login: async ({ email,password,anyVariable }) => {}
}

ratty-blush•12mo ago

Poorly worded, sorry. I need authProvider to use my dataProvider to query my /auth/login endpoint. Right now its

// authProvider.ts
import { userProvider } from "src/rest-data-provider"
const API_URL = "http://localhost:3000"

export const authProvider: AuthBindings = {
  login: async (props) => {

    const d = await userProvider(API_URL).getUser(props)
    const payload = d.data
[...]

// authProvider.ts
import { userProvider } from "src/rest-data-provider"
const API_URL = "http://localhost:3000"

export const authProvider: AuthBindings = {
  login: async (props) => {

    const d = await userProvider(API_URL).getUser(props)
    const payload = d.data
[...]

// rest-data-provider/index.ts
export const userProvider = (
  apiUrl: string,
  httpClient: AxiosInstance = axiosInstance
) => ({

  getUser: async (props: UserProps) => {

    const { data } = await httpClient["post"](
      `${apiUrl}/auth/login`, props
    )

    return {
      data
    }
  },

})

export const dataProvider = (
  apiUrl: string,
  httpClient: AxiosInstance = axiosInstance
): Omit<
  Required<DataProvider>,
  "createMany" | "updateMany" | "deleteMany"
> => ({
[...]

// rest-data-provider/index.ts
export const userProvider = (
  apiUrl: string,
  httpClient: AxiosInstance = axiosInstance
) => ({

  getUser: async (props: UserProps) => {

    const { data } = await httpClient["post"](
      `${apiUrl}/auth/login`, props
    )

    return {
      data
    }
  },

})

export const dataProvider = (
  apiUrl: string,
  httpClient: AxiosInstance = axiosInstance
): Omit<
  Required<DataProvider>,
  "createMany" | "updateMany" | "deleteMany"
> => ({
[...]

But I'd rather get rid of this userProvider and just use dataProvider, if that's possible.

eastern-cyan•3mo ago

@kapa.ai How can I get the Api url that I provided to the dataprovider in the authprovider?

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In Refine, the getApiUrl method is used to return the apiUrl value that you provided to the dataProvider. This method can be consumed using the useApiUrl data hook. Here is an example of how you can define the getApiUrl method in your dataProvider:

import { DataProvider } from "@refinedev/core";  
  
export const dataProvider = (apiUrl: string): DataProvider => ({  
 getApiUrl: () => apiUrl,  
 // ...  
});

import { DataProvider } from "@refinedev/core";  
  
export const dataProvider = (apiUrl: string): DataProvider => ({  
 getApiUrl: () => apiUrl,  
 // ...  
});

In the authProvider, you can use the getApiUrl method to get the apiUrl value. However, please note that the getApiUrl method is not directly related to the authProvider. The authProvider is more concerned with authentication-related operations such as login, check, logout, and error handling. For more information, you can refer to the Refine documentation (https://refine.dev/docs/data/data-provider#getapiurl-). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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