Hi everyone,
I'm new to the Retool community and I'm trying to get an access token for Google APIs using JavaScript within a Retool query. I understand that Retool doesn't support importing external libraries like crypto or using require.
I'm looking for a method to automate this process entirely within Retool. If anyone could share different approaches or best practices for achieving this, I would greatly appreciate it.
Thank you in advance for your help!
bump, please anyone can help me?
bump
Hey @Jagdish_Parmar,
I'm not really sure I understand what you're trying to achieve. Would you mind providing the following information:
Thanks, the more info you provide the more you will receive help from brilliant people in the forum
I want to use Google Cloud Storage API to upload files after renaming them. I've already set up the REST API resource in Retool, but I'm unsure how to use the access token or authenticate the API requests in my script.
The automation process works as follows:
First, an image file is uploaded to Retool; then, the script automatically renames the file and uploads it to a specific folder in Google Cloud.
I have successfully implemented this, but currently, I need to hardcode the access token in the script each time I run it.
Therefore, I'm looking to automate this process so that I don't need to hardcode the access token. Ideally, I'd like to find a way to automatically retrieve the latest access token for use in my script.
I don't know how it can be achieved but my script don't use Rest API resource or any other query for authentication. i just setup Rest API resource for experimenting (does it can be acheived using Rest API resource?)
Below are some images for what info i put in in Rest resource. Fill free to share all the ways to achieve what i want.
thank you.
bump
Hi there @Jagdish_Parmar
HAve you tried adding Bearer OAUTH2_TOKEN to your Heather? This would store your token within the resource and pass it to your apps whilst using the resuorce.
@MiguelOrtiz , should i add the Bearer OAUTH2_TOKEN in my javascript?
or in Rest api resource.
In rest api it works but i want to authorize the requests in javascript query.
but that javascript query renames all the filenames and get the screenshot file and upload it to google cloud, by first converting the base64 file to binary.
I want a way to just authorize my google api requests dynamically. that will automatically generate new access tokens, when it expires.
or how can i use or call the Rest resource from javascript query to upload the newly renamed screenshot on google cloud.
can we pass the file data to Rest api resource? dynamically?
In the REST API resource.
I'm not sure about generating new access tokens when they expire. You're able to add an Auth Login component which will trigger the oauth flow and generate a token for your REST API resource.
In your app, you can prepare all the info you want in javascript queries and then refer to the results of your query within your rest api resource dynamically.
@MiguelOrtiz
here is my sample javascript query:
// JavaScript query function in Retool to upload an image file to Google Cloud Storage
async function uploadImageToGCS() {
// Get the file from the Retool file picker component
const file = filepicker1.value[0]; // Assuming 'filepicker1' is the ID of your file picker component
// Convert file to binary
const reader = new FileReader();
reader.onloadend = async () => {
const binaryData = reader.result;
// Create the request URL
const folderStructure = ${Random it will change dynamically}; // e.g., "images/uploads"
const bucketName = "bucket name";
const fileName = {file name dynamic};
const url = `https://storage.googleapis.com/upload/storage/v1/b/${bucketName}/o?uploadType=media&name=${folderStructure}/${fileName}`;
// Make the API request to upload the file
try {
const response = await fetch(url, {
method: 'POST',
headers: {
'Authorization': `Bearer {my hard coded access token}`, // Paste your access token here
'Content-Type': file.type,
},
body: binaryData,
});
if (response.ok) {
const responseData = await response.json();
console.log('File uploaded successfully:', responseData);
return responseData;
} else {
const errorData = await response.json();
console.error('Error uploading file:', errorData);
throw new Error(errorData.error.message);
}
} catch (error) {
console.error('Upload failed:', error);
throw new Error('Upload failed: ' + error.message);
}
};
// Read the file as binary
reader.readAsArrayBuffer(file);
}
// Run the function
uploadImageToGCS();
Ignore any minor errors, please. I'm looking to authorize API requests using JavaScript. Can I do this using a REST resource? My data changes every time I upload a file or make changes in my app that lead to new values being generated.
How can I send these changing values to a REST resource so they can be uploaded to the correct folder structure on Google Cloud? Also, how do I send binary data to be uploaded and use the REST API to handle this?
I want to make this process automatic, like the script does, but without having to manually enter the access token every time. Any other suggestions on how to achieve this would be really helpful. Thanks!
Hey there @Jagdish_Parmar,
You can definitely build a dynamic rest resource. This is not my specialty, and most likely the below suggestion isn't the most proper way of doing it, but it may guide you in the right direction.
Your javascript can either return all of the dynamic values that your rest resource will use, OR can set them in variables that you can reference in your resource, e.g.
As you can see, the url is dynamically built using variables (this can actually be values returned by your javascript query OR even data available from your components).
As visible, you can also add your binary data in the body, it is just a matter of creating a result/variable that can be referenced in your rest resource.
By doing this, your token is stored in the resource and it is used in the header whenever it runs. Once it expires, you will only need to re-authenticate the resource once again.
Hope this makes sense.
Thanks @MiguelOrtiz I will try this.
