Is it possible to have the a callback fire when the api key is invalid?

[RM-Eric]

Is it possible to get a callback to fire when the API key is invalid? The provider has an onError callback, but that does not seem to be triggered if the error is an invalid API key

[usefulthink]

You're right, iirc the onError callback is only used for "failed to load script" type errors. For the API key, we're handling that case as well, but it's not very elegant: You can use the useApiLoaderStatus() hook in a child-component of the APIProvider. When the returned value is APILoadingStatus.AUTH_FAILURE, the API key failed verification.

Note that the key verification happens after the API has been successfully loaded (not sure when exactly, I think it might be when a map-instance is being created).

See here for the implementation:

react-google-maps/src/libraries/google-maps-api-loader.ts

Lines 166 to 169 in b9760e9

	window.gm_authFailure = () => {
	this.loadingStatus = APILoadingStatus.AUTH_FAILURE;
	this.notifyLoadingStatusListeners();
	};

[chama-x]

Yes, you can detect an invalid API key using the useApiLoaderStatus() hook as mentioned above. Once the API has been loaded, check the APILoadingStatus value:

const { status } = useApiLoaderStatus();

if (status === APILoadingStatus.AUTH_FAILURE) {
  // API key is invalid - handle error here
}

Alternatively, you can listen to changes using the useApiLoaderStatus() hook with a useEffect to trigger a callback whenever the status changes:

const status = useApiLoaderStatus();

useEffect(() => {
  if (status === APILoadingStatus.AUTH_FAILURE) {
    // Call your callback function
    handleApiKeyError();
  }
}, [status]);

This approach gives you full control over how to respond to API key validation failures in your application.