Getting an error when making a call to netlify function to get my key

Support
, ,
1

i wanted to get my env variable that has an api key from a netlify function to hide it from the client , i have coded the function i have tested it by running **netlify dev** to see what i get in the console sadly i am getting an error in the console here is my function
``import type { Handler, HandlerEvent, HandlerContext } from “@netlify/functions”;

const getKey: Handler = async (event: HandlerEvent, context: HandlerContext) => {
console.log(context)
const key = ‘Dsdsdsdsd’
return {
statusCode: 200,
body:JSON.stringify({key:‘dsd’}),
};

};

export { getKey };``

netlify.toml file :
[build]
command = “# no build command”
functions = “netlify”
publish = “src”

firebase.js file : -
const url = /.netlify/functions/getKey
const get = async () => {
const req = await fetch(url)
const res = req.json()
console.log(res)

}
get()

here is the error i am getting
firebase.js:9 GET http://localhost:8888/.netlify/functions/getKey 404 (Not Found)

2

While we can try to help you fix this, I don’t think this is doing what you think it’s doing. Your key will still be exposed to the client this way. You should instead use the API key to make an API request from the function itself and return the response to the client.

3

well i want to return it to be able to use it in firebase config object which needs to be passed to a initilizeApp function
``export const firebaseConfig = {

apiKey: xxxxxxxx, // i wanna pass it here
authDomain: “xxxx”,
databaseURL: process.env.REACT_FIREBASE_DATABASEURL,
projectId: “e-commerce-cbe7c”,
storageBucket: “xxxxxx”,
messagingSenderId: “xxxxxx”,
appId:xxxxxxx,
measurementId: “xxxxxx”

};
const app = initializeApp(firebaseConfig);``

4

You can pass it directly. You’re not making it any secure by fetching the key from the function. You’ve two options:

  1. Either use Firebase inside Netlify Functions
  2. OR use Firebase on the client-side and pass the key directly
5

@hrishikesh well first i need to know what is causing this error in the console
here is my folder structure :
2023-07-02 20-09-12
if that has to do with anything related to my problem

6

tsx is not a valid extension for Functions. js or ts only.

But as I mentioned, you’re approaching this problem incorrectly. You can continue to pursue this path, but you’re not making your app any secure or hiding the key this way.

7

i have changed it to .ts same problem

8

Did you restart Netlify CLI?

9

yes i did still the same tho

10

Then it’s because of this. Remove this line.

11

now i get a 500 internal server error

2023-07-02 20-44-54
2023-07-02 20-44-54992×177 20.1 KB

12

Check the network tab for the complete response. This isn’t a Netlify problem at this point, but a problem with your code. You’re trying to parse the response as a JSON, when it’s not a JSON. Your terminal would also have some info.

13

2023-07-02 20-51-30
2023-07-02 20-51-301130×881 66.8 KB

what should i do to fix it ?

14

Click on getKey → Check the response tag and figure out what the error is. It’s a TypeError, so something is wrong with your code.

As far as I know,

that is incorrect. The export should be always named handler. You can try export {getKey as handler} or simply rename your getKey const to handler.

15

thank you it worked , now do i need the netlify.toml file

16

I don’t think so. But you can try and see.

17

why are some things not mentioned in the docs for example i had to figure that i need to call this handler function by having it inside of a url then calling that url because it’s a serveless function if that’s correct however there was no mentions in the docs that u have to do that , i had to look up some tutorials to figure that out

18

I’m not sure what you mean. As far as the docs are concerned, this section explains that: Create functions | Netlify Docs. Quoting:

These formats would deploy a synchronous function that can be called on the following endpoint, relative to the base URL of your site: /.netlify/functions/hello .