Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Is it possible to specify input and return types for httpsCallable functions?

I am using a callable function in app to update user claims. The firebase functions are in Typescript and there is an interface to describe the shape of data that the function requires.

I would like to do the same thing client side, so that any developer on the team can quickly find out what the requirements for the cloud function are, without looking at the code in the functions directory.

The Firebase Cloud Function in functions/src/index.ts:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel


// This is the required data, that I would like to specify client side
interface GivePermissionsParams {
  uid: string;
  email: string;
  newClaim: Partial<Permissions>;
}

/**
 * Callable function to give a user new permissions in the form
 * of custom claims and firestore properties
 */
exports.givePermission = functions.https.onCall(
  async (data: GivePermissionsParams, context) => {
    if (!context.auth?.token.admin) {
      throw new HttpsError(
        'permission-denied',
        `Non admin user ${context.auth?.uid} attempted to update permissions`
      );
    }
    return grantPermission(data.uid, data.newClaim).then(() => {
      log(`Successfully updated permissions for ${data.email}`);
      return {
        result: `Successfully updated permissions for ${data.email}`,
      };
    });
  }
);

Client side usage:

// firebase.ts

// I would like to specify the function param and return types here.
// eg: httpsCallable<myParamsType, myReturnType>
export const givePermission = httpsCallable(functions, 'givePermission');
// in my reactComponent.tsx

  const changePermission = async (permission: string, value: boolean) => {

    // This payload should match the GivePermissionsParams type as defined in the functions index.ts file. 
    const functionParams = {
      uid: user.uid,
      email: user.email,
      newClaim: {[permission]: value}
    }

    const functionRes = await givePermission(functionParams);
  };

>Solution :

It seems the solution is what you are trying to do. You can specify types for for request data and response like this:

interface ReqInterface {
  uid: string;
  email: string;
  newClaim: Partial<Permissions>;
}

interface ResInterface {
  result: string;
}

const givePermission = httpsCallable<ReqInterface, ResInterface>(functions, 'givePermission')

const { data } = await givePermission({ url })
// data is ResInterface
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading