Problem uploading files in React.js with Transloadit

Question

I'm trying to upload images to my transloadit account but I'm getting this error: INVALID_SIGNATURE

I've been stuck in this, could someone please help me?

import React from 'react';
import crypto from "crypto"
import Uppy from '@uppy/core'
import Webcam from '@uppy/webcam'
import Transloadit from '@uppy/transloadit';
import Dashboard from '@uppy/react/lib/Dashboard'
import '@uppy/dashboard/dist/style.min.css';
import '@uppy/webcam/dist/style.min.css';


const App = () => {

    const utcDateString = (ms) => {
        return new Date(ms)
            .toISOString()
            .replace(/-/g, '/')
            .replace(/T/, ' ')
            .replace(/\.\d+Z$/, '+00:00')
    }

    const expiresTime = Date.now() + 1 * 60 * 60 * 1000
    const expires = utcDateString(expiresTime)
    const authKey = process.env.REACT_APP_AUTH_KEY
    const authSecret = process.env.REACT_APP_AUTH_SECRET
    const template_id = process.env.REACT_APP_TEMPLATE_ID
    const user_id = process.env.REACT_APP_USER_ID
    const upload_key =  process.env.REACT_APP_UPLOAD_KEY
    const notifyUrl = process.env.REACT_APP_NOTIFY_URL

    const params = JSON.stringify({
        auth: {
            key: authKey,
            expires,
        },
        template_id,
    })
    const signatureBytes = crypto.createHmac('sha384', authSecret).update(Buffer.from(params, 'utf-8'))

    const signature = `sha384:${signatureBytes.digest('hex')}`

    const uppy = new Uppy({ autoProceed: false, debug: true })
        .use(Webcam)
        .use(Transloadit, {
            waitForEncoding: true,
            alwaysRunAssembly: true,
            params: {
                template_id,
                auth: {
                    key: authKey,
                    expires
                },
            },
            signature,
            removeFingerprintOnSuccess: true,
            waitForMetadata: true,
            notifyUrl,
            fields: {
                type: 'avatar',
                user_id,
                upload_key,
            },
        })
        .on('transloadit:result', (stepName, result) => {
            console.log('Results:', stepName, result);
        });



    return (
        <>
            <Dashboard
                uppy={uppy}
            />
        </>
    );
};

export default App;

I have tried to use different versions of Uppy and of transloadit but I still have the error

I got the configuration in the documentations of transloadit: https://transloadit.com/docs/topics/signature-authentication/

Answer 1

The INVALID_SIGNATURE error occurs when the signature calculated on Transloadit's server does not match the one you are providing in your SDK setup.

A few things to check:

• Make sure the authSecret value is correct - this is used to generate the signature on your end
• Check that the expires timestamp is being generated correctly in UTC format
• Ensure the params object you are stringifying contains the auth object with key and expires
• Double check that you are generating the HMAC SHA384 hash of the params string using the authSecret
• Make sure the signature you provide in the SDK config matches the generated one

Some things to try:

• Log the params string, authSecret, generated signature, and provided signature to compare
• Use the Transloadit signature generator to test signature creation
• Try a simplified params object without templates first to narrow down issues
• Verify authKey, authSecret, template_id etc are all correct

With HMAC auth, small inconsistencies in the params, secrets, or signature generation will lead to invalid signatures. Double checking everything is formatted correctly should help resolve it.