I tried to store my api keys in netlify env variables but I am unable to fetch them. I have been trying from last 5 days but no improvement. I am providing link to the page of website which is trying to deal with api and also the link to GitHub repo. Please help if possible.
Link to website :- [NotesBook Uploader (NotesBook Uploader)
Link to code of website:- https://github.com/bhatmohsin/notesbook
@Batman Please provide more specific detail so that others don’t have to dig through your site/code.
Where are you seeing the error?
What have you already tried?
Point to relevant locations on your site and in your code etc.
Sorry I’ll give you more details. Actually I have a webpage dedicated for uploading files via Google drive api and Google OAuth key. In need of avoiding backend for hiding Api. I tried to use netlify env variables and tried to fetch the API from netlify by using netlify function below:-
const fetch = require(‘node-fetch’);
exports.handler = async function(event, context) {
const apiKey = process.env.API_KEY;
const clientId = process.env.CLIENT_ID;
try {
// Instead of making an API call, we’re just returning the credentials
return {
statusCode: 200,
body: JSON.stringify({ apiKey, clientId }),
headers: {
“Content-Type”: “application/json”,
“Access-Control-Allow-Origin”: “*”,
},
};
} catch (error) {
return {
statusCode: 500,
body: JSON.stringify({ error: ‘Failed to fetch credentials’, details: error.message }),
};
}
};
The path of the above code snippet is netlify/functions/fetchApi.js.
I am unable to fetch api. I tried many things by editing the code but didn’t worked included netlify.toml and package.json but nothing worked. It is throwing some errors on console too I’ll attach screenshot of that.
The javascript code for handling the api is given below:-
const DISCOVERY_DOCS = [“https://www.googleapis.com/discovery/v1/apis/drive/v3/rest”];
const SCOPES = ‘https://www.googleapis.com/auth/drive.file’;
let tokenClient;
let gapiInited = false;
let gisInited = false;
let folderIds;
async function fetchCredentials() {
try {
const response = await fetch('/netlify/functions/fetchApi');
if (!response.ok) {
throw new Error('Failed to fetch credentials');
}
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching credentials:', error);
showPopup('Error fetching API credentials. Please try again later.');
}
}
async function gapiLoaded() {
await gapi.load('client', initializeGapiClient);
}
async function initializeGapiClient() {
try {
const credentials = await fetchCredentials();
if (!credentials) return;
await gapi.client.init({
apiKey: credentials.apiKey,
discoveryDocs: DISCOVERY_DOCS,
});
gapiInited = true;
maybeEnableButtons();
} catch (error) {
console.error('Error initializing GAPI client:', error);
showPopup('Error initializing Google API client. Please try again later.');
}
}
async function gisLoaded() {
try {
const credentials = await fetchCredentials();
if (!credentials) return;
tokenClient = google.accounts.oauth2.initTokenClient({
client_id: credentials.clientId,
scope: SCOPES,
callback: '', // defined later
});
gisInited = true;
maybeEnableButtons();
} catch (error) {
console.error('Error initializing GIS client:', error);
showPopup('Error initializing Google Identity Services. Please try again later.');
}
}
I’m not sure what you’re trying to do. Are you fetching Environment Variable from Functions? If yes, why? You do realise, you’ve publicly exposed the variables: cusnotes.netlify.app/.netlify/functions/fetchApi, right?
You should be doing all the Google API work within the Function and not fetch the environment variables in the client.
I’d highly recommend changing your variables by the way.
Although I don’t know how I am going to do that. But I’ll try my best thank you for your guidance sir