React Autodesk Forge Create Buckets - reactjs

Question

I'm trying to create a bucket from the front end of a react app, once I work this out I will make the requests through the backend. I am passing in an options object inside of the useEffect hook and logging the result to the console. The headers are returning undefined on the environment variables I have passed in from a .env.I would like to know how do I pass in the headers from the .env or hard code for now? I aslo need to pass in scope into the headers bucket:create, bucket: read
Buckets.js
import React, { useEffect } from 'react'
import axios from 'axios'
const Buckets = () => {
useEffect(() => {
const options = {
method: 'POST',
url: 'https://developer.api.autodesk.com/authentication/v1/authenticate',
headers: {
ContentType: 'application/json',
Authorization: process.env.REACT_APP_FORGE_ACCESS_TOKEN,
client_id: process.env.REACT_APP_FORGE_CLIENT_ID,
client_secret: process.env.REACT_APP_FORGE_CLIENT_SECRET,
},
}
console.log(options)
}, [])
return <div>Buckets</div>
}
export default Buckets

Answer 1

There are a couple of problems with the code snippet:
first of all, you should never expose the client secret to the browser; implementing bucket creation on the server side is pretty straightforward
second, the process.env construct you use in your code is a Node.js feature, not something that's available in browser; that's most likely why the headers end up being empty
So with that, I would just suggest that you implement any of the Forge requests on the server side (for example, by following https://learnforge.autodesk.io), and then expose that functionality to your React frontend via a couple of endpoints.
EDIT: as mentioned in the comments, I'm working on "unofficial Forge SDK for Node.js", and that library does have an experimental support for browsers. Try something like this:
<script src="https://cdn.jsdelivr.net/npm/forge-server-utils/dist/browser/forge-server-utils.js"></script>
<script>
const client = new forge.DataManagementClient({ client_id: '...', client_secret: '...' });
client.listBuckets()
.then(buckets => { console.log('Buckets', buckets); })
.catch(err => { console.error('Could not get buckets', err); });
</script>