Filament•7mo ago

Using api key from backend to frontend

I am working on a project where I need an API key in the frontend. I have the api key stored in the backend, and now have set up the javascript for this to get to the frontend, code is down below. Is there a way to hide this key? Right now it gets shown in the sources. Or is this not possible at all?

// Import any external JavaScript libraries from NPM here.

export default function testComponent({
    state,
    mapsUrl,
}) {
    return {
        state,

        // You can define any other Alpine.js properties here.

        init: function () {
            // You can define any other Alpine.js initialization code here
        },

        loadMaps: async function () {
            console.log(mapsUrl);
        }

        // You can define any other Alpine.js functions here.
    }
}

// Import any external JavaScript libraries from NPM here.

export default function testComponent({
    state,
    mapsUrl,
}) {
    return {
        state,

        // You can define any other Alpine.js properties here.

        init: function () {
            // You can define any other Alpine.js initialization code here
        },

        loadMaps: async function () {
            console.log(mapsUrl);
        }

        // You can define any other Alpine.js functions here.
    }
}

2 Replies

Tieme•7mo ago

If you need it in fronted than it is not possible to hide the key. The best way to hide a key is to do the calls in backend

kian•7mo ago

I want to do that, but im not sure how i can return data that way. I know i can use $wire.<method> but that will fire the method set in CreateLocation.php in my case. Or is the only way to do this is by dispatching two events? One for calling the initial event, and one for retrieving the data in the javascript?

Gaming

Programming

Using api key from backend to frontend