Using API Key causes all public layers to be inaccessible

Question

I hope everyone out there is having a good week.

I'm developing a custom web app using the JS Maps SDK and am accessing a lot of publicly available layers throughout the app.  I want to query a rainfall database and update a rainfall layer overnight so I added an API key to allow the app to edit my publicly available rainfall layer that is stored on our AGOL.

Adding the API key to the app causes all layers to return "invalid API key".  I can't specifically provide access for the API Key to layers I don't own, like state boundaries, etc.

[esri.layers.FeatureLayer] Failed to load layer (, 19c76fabfc4-layer-24) portal item (44801dcc31aa4085b38f540ac9947f62) [request:server]: Invalid token.

I'm not sure if I'm implementing it correctly because all of tutorial links in the documentation are just boxes that don't link anywhere, but I'm basing the implementation off of the pattern I learned at the DevSummit.

esriConfig.apiKey = import.meta.env.VITE_KEY

In my .env file is the long string that you can only see once when you generate the key and have to copy somewhere so you don't lose it.

Has anyone else ever run into this?

MichelleStuart · Answer

Thank you Anne.  I tried adding the api key directly to the feature layer.  I do like that approach.  I no longer have the global problem of all layers becoming invalid, but I'm still having problems with the API key.

1. If I try to run the code from my development environment with http://localhost:3000  it says invalid key.  I did include this url in my Application Environment: Referrers section.  Are http://localhost urls denied regardless?  Does anyone have any tips for testing the API key in dev.
2. On my production server, the code runs until it gets to the point where it needs to edit the layer and then it pops up a "sign in" dialog box.  I double checked that the key has access to the feature layer and that the privileges are create,edit,update content and edit features.  I invalidated and re-created my api key to make sure I had the exact correct one copied into my .env file.  I even changed the FeatureLayer statement to use our organization's portal url.  But the sign in popup still appears and I can't even sign in because it doesn't show an option to log in with "myorganization.maps.arcgis.com".

Does anyone have any troubleshooting tips or tips for working this out in a development environment?

AnneFitz · Answer

Hi @MichelleStuart - try adding the apiKey directly to the FeatureLayer you want to edit (using FeatureLayer.apiKey) instead of applying it globally via esriConfig.