How to hide API keys when using Lucid-Cardano

Question

Lucid-Cardano requires me to expose my api key on my client side of my app. How can I go around hiding this. I have tried to call my express backend to make a blockfrost request so that I can keep my api key on the backend. It works for connecting to the wallets but it doesn't work for signing transactions. How can I go around this. I am using express backend and react front end. How can I go about this?

//This is where I try to sign the transaction on my client side

import { Lucid, Blockfrost } from "https://unpkg.com/lucid-cardano@0.7.7/web/mod.js"
import axios from 'axios'



async function connect(){
  const data = await axios.get('http://localhost:4000/blockfrost').then((res) => {
  }).catch((err) => {
    console.log(err)
  })

  const lucid = await Lucid.new(data,
    "Testnet",
   );
  
    const api = await window.cardano.nami.enable();
    lucid.selectWallet(api);

    const tx = await lucid.newTx()
    .payToAddress("addr...", { lovelace: 5000000n })
    .complete();

    const signedTx = await tx.sign().complete();

    const txHash = await signedTx.submit();

    console.log(txHash);

}

//This is where i connect to blockfrost

const axios = require('axios')
require('dotenv').config()

axios.defaults.headers.common = {
    "project_id": process.env.BLOCKFROST_KEY,
  };

async function connect(){
    const data = await axios.get('https://cardano-testnet.blockfrost.io/api/v0')
    return data.data
}

module.exports = {connect}
 

export default connect

//This is the error I get
mod.js:2 Uncaught (in promise) Error: expected instance of u_
    at c (mod.js:2:535)
    at j_.new (mod.js:2:157455)
    at new cn (mod.js:4:35867)
    at ln.newTx (mod.js:4:52734)
    at connect (makeTransaction.js:20:1)

Answer 1

In the README.md file of lucid, their is a blockfrost proxy example, illustrating how you could implement a proxy api call.