reactjsimagekit

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


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........"
}

Solution

  • 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;