Support token callbacks

[Nicolapps]

Expand the existing Map component API to support passing a token callback instead of the token directly.

[nikischin]

What exactly should the token callback do? I agree that it could be beneficial, to have a callback for the generation of the mapkit tokens, though I am a bit worried, this would requiring exposing the private key to the React code, which I would consider potentially insecure. Though maybe there are good concepts for this I haven't yet thought about.

If you could refine your requirement by adding some more details on both the need and a potential implementation, I could evaluate if I could also provide some contribution to this.

[Nicolapps]

With the current API, you have to provide the token as a string, which works well if your MapKit JS token is an environment variable of your React app (which is what I do in my own projects).

However, there are some environments where the token must be obtained asynchronously. For instance, it is possible to set up a server for your project that generates a short-lived API request for every visitor of your website, and use fetch to get the token from the UI code. (As you pointed out, it would be insecure to generate the token on the client side itself.)

For this reason, the API that MapKit JS exposes doesn’t have a token parameter, but authorizationCallback which is a callback that returns the token once it is obtained. It could be possible to extend mapkit-react’s API to have something like this:

token: string | () => string;

When I created mapkit-react, I only implemented the synchronous case, as it was simpler to implement and I don’t need asynchronous token obtention in my own projects. I still created this issue to mention the possibility of this being implemented later if needed. I personally don’t need this to be implemented, but please feel free to send a PR implementing the change if it looks interesting to you!

Note that since this issue was created, an external contributor submitted #28, which allows the user to import MapKit JS by themselves. While this is primarily useful for users that want fine-grained control over the version of MapKit JS that is used (e.g. when using a JS bundle that doesn’t contain all the features of MapKit JS to reduce the bundle size), it could also be used to obtain tokens asynchronously. However, this issue is still relevant: if the user only wants to use an asynchronous token, they shouldn’t need to reimplement how MapKit JS is loaded.

[nikischin]

Oh thank you so much for the answer! So it is less about the fact that it is a callback and more the focus on the fact that it is asynchronous.

Indeed I planned to generate the JWT server side in my project and would need some asynchronous behavior, though would not necessarily need a callback for that, as Redux RTK Query does provide variables already.

I haven't yet tried, what happens when putting the mapKit JS Key in a state and changing it at a later state with a valid token.

[nikischin]

Ok, so I set up a small sample implementation for my case and indeed, as you pointed out, it is not possible to set the token after the map has been initialized already. However, as a workaround I can make the full map component conditional as a workaround for the problem in my implementation like

{mapKitToken !== '' &&
  <Map token={mapKitToken} {...otherProps} />
}

As I guess the MapKit JS is technically capable of being initialized without a token and doing things already (like loading markers within the view, ... but not the map tiles) it would be a nicer user experience for the user to just wait for those few pending things once the token arrives than for all the map to be initialized.

https://developer.apple.com/documentation/mapkitjs/mapkitinitoptions/2980159-authorizationcallback

[Nicolapps]

Yes, your observations are correct. We can’t change the token after MapKit JS has been initialized, so we would need to change how loader.ts is implemented.