Problem with infura.io gateway requiring auth posting to IPFS - ipfs-http-client

Question

Before Oct 2022, Infura.io allow users to post using its gateway as follows: No auth is required. My original code is as follows in ipfs.js file.
const IPFS = require('ipfs-api');
const ipfs = new IPFS({host: 'ipfs.infura.io', port: 5001, protocol: 'https'});
export default ipfs;
When auth is needed I included the following:
const projectId ='ZZZZZZZZZZZZZZz';
const projectSecret='ZXXXZZXXXXXXXXXX';
const auth = 'Bearer ' + (projectId + ':' +projectSecret);
const ipfs = new IPFS({
host: 'ipfs.infura.io',
//host: 'nftpatent.infura-ipfs.io/',
port: 5001,
protocol: 'https',
headers: {
authorization: auth,
}
});
The issue is that i am unable to upload and post/pin to IPFS. My first thought is that I use the wrong host which should be the dedicated 'nftpatent.infura-ipfs.io' as this requires the auth but from what I have read research it seems everything stays the same and we need to provide auth only.
In my App.js, I have this to do the heavy lifting
// save document to IPFS,return its hash#, and set hash# to state
// https://github.com/ipfs/interface-ipfs-core/blob/master/SPEC/FILES.md#add
//setState by setting ipfsImageHash to ipfsImageHash[0].hash
if (this.state.myToken.imageBuffer && this.state.myToken.imageBuffer.length > 0) {
await ipfs.add(this.state.myToken.imageBuffer, (err, ipfsHash) => {
console.log('IPFS hash: ' + ipfsHash + ', error: ' + err);
let myMetadata = JSON.parse(JSON.stringify(this.state.myToken.metadataBuffer));
myMetadata.image = this.state.web3ctx.ipfsGateway + ipfsHash[0].hash;
this.setState({
myToken: {
...this.state.myToken,
ipfsImageHash: ipfsHash[0].hash,
ipfsImageUrl: myMetadata.image,
metadataBuffer: myMetadata,
imageBuffer: ''
},
selectedTab: 'Metadata'
});
})
} else if (this.state.myToken.metadataBuffer && this.state.myToken.metadataBuffer.toString().length > 0) {
await ipfs.add(Buffer.from(JSON.stringify(this.state.myToken.metadataBuffer)), (err, ipfsHash) => {
console.log('IPFS hash: ' + ipfsHash + ', error: ' + err);
this.setState({
myToken: {
...this.state.myToken,
ipfsMetadataHash: ipfsHash[0].hash,
ipfsMetadataUrl: this.state.web3ctx.ipfsGateway + ipfsHash[0].hash
},
selectedTab: 'Metadata'
});
})
} else {
console.log('file could not be found: '
+ JSON.stringify(this.state.myToken.metadataBuffer, null, 2));
return 1;
}
};
`
And the error is
TypeError: Cannot read properties of undefined (reading '0')
Duplex.
src/App.js:287
myMetadata.image = this.state.web3ctx.ipfsGateway + ipfsHash[0].hash;
enter image description here
Please help as I can't seem to figure out the issues. ``
I tried working the auth and checking whether the host is correctly called. I believe the issue is with "auth" and not with scripts as they were working previously. Thanks in advance. `