React Autodesk Forge Create Buckets

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.