Imagekit react SDK show error when upload image {message: 'The authenticator function is not provided.'}

Question

Here my code to upload file

import React from 'react'
import { IKContext, IKImage, IKUpload, IKVideo } from "imagekitio-react";

const publicKey = "myPblickey.......";
const urlEndpoint = "https://ik.imagekit.io/myimagekitID";
const authenticationEndpoint = "http://localhost:3500/api/v1/auth/imagekitauth";


const onError = (err) => {
  console.log("Error", err);
};

const onSuccess = (res) => {
  console.log("Success", res);
};

const onUploadProgress = (progress) => {
  console.log("Progress", progress);
};

const onUploadStart = (evt) => {
  console.log("Start", evt);
};
function Aboutus() {
  return (
    <div className="App">
      <IKContext
        publicKey={publicKey}
        urlEndpoint={urlEndpoint}
        authenticationEndpoint={authenticationEndpoint}
      >
        <h2>File upload</h2>
        <IKUpload
          onError={onError}
          onSuccess={onSuccess}
        />
      </IKContext>
    </div>
  )
}

export default Aboutus

Here response we get in console

Error {message: 'The authenticator function is not provided.'}

same thing i tried in Codesandbox and it work fine Codesendbox

the authenticationEndpoint url also work fine

http://localhost:3500/api/v1/auth/imagekitauth

the response given by authenticationEndpoints

{
"token": "bc1e2b3f-0e7d-45a0-9a13-d3f54........",
"expire": 1697286695,
"signature": "b7456096d164........"
}

Answer 1

The error message you received, "Error: The authenticator function is not provided," suggests that you haven't provided an authenticator function for the IKContext component in your code.

import React from 'react';
import { IKContext, IKUpload } from "imagekitio-react";

const publicKey = "myPblickey.......";
const urlEndpoint = "https://ik.imagekit.io/myimagekitID";
const authenticationEndpoint = 
"http://localhost:3500/api/v1/auth/imagekitauth";

const authenticator = () => {
  return fetch(authenticationEndpoint) // Replace with your actual 
authentication endpoint
    .then((response) => response.json())
    .then((data) => data.token);
};

const onError = (err) => {
  console.log("Error", err);
};

const onSuccess = (res) => {
  console.log("Success", res);
};

function Aboutus() {
  return (
    <div className="App">
      <IKContext
        publicKey={publicKey}
        urlEndpoint={urlEndpoint}
        authenticationEndpoint={authenticator} // Pass the authenticator 
function here
      >
        <h2>File upload</h2>
        <IKUpload
          onError={onError}
          onSuccess={onSuccess}
        />
      </IKContext>
    </div>
  );
}

export default Aboutus;