Hi, that's an excellent and crucial question for building secure integrations.
The short answer is: You are correct, you should not store secrets in the front-end Add-In. You need a backend proxy.
Storing secrets like a bearer token directly in your React Add-In is a significant security risk, as anyone could extract them from the client-side code.
The correct and industry-standard approach is to use a Backend for Frontend (BFF) or Proxy Pattern. Here is the recommended workflow:
- The Add-In calls your backend: When the Add-In needs data, it makes a request to your own backend service (e.g., an Azure Function, AWS Lambda, or a simple Node.js server). It does not call your final API directly.
- Authenticate the Add-In (Optional but Recommended): Your backend can verify that the request is legitimate by validating the JWT (JSON Web Token) claims that Geotab passes to the Add-In. This ensures your backend only serves requests from an authenticated Geotab session.
- The backend handles the secrets: Your backend service securely stores the API keys or other secrets needed to get the bearer token (using environment variables, a Key Vault, etc.). It then requests the token from your authentication provider.
- The backend calls your API: With the bearer token, your backend calls your protected API, gets the data, and then passes it back to the Add-In.
This way, your secrets are never exposed to the client.
As I'm not a full-time developer myself, I would appreciate it if some of the other developers here could corroborate my comments or add their own insights.
From my research, this approach is based on the "Backend for Frontend (BFF)" architectural pattern, which is the standard and secure way to solve this problem.