Mapbox GL: How can I handle invalid/expired access tokens? - mapbox

Question

I've implemented Mapbox GL:
script.src = 'https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js';
script.onload = function() {
mapboxgl.accessToken = 'invalid_token';
map = new mapboxgl.Map({
container: 'mapsection', // container ID
style: 'mapbox://styles/mapbox/streets-v11' // style URL
});
}
If the access token is invalid or expired then a message is shown in the console, but how can I handle this in my code? I've tried both try .. catch and map.on('error'), but neither acknowledge there is an error. Any operations on the map are performed without errors, but there is just nothing to see on the page.
Alternatively, is there an API to validate a given token?

Answer 1

I don't know for sure, but if you take one of the URLs that are being requested (by looking in developer tools), and using fetch to query that URL, you will probably get back either 200 for a correct token, or 401 or 403 for an invalid token (or other issue).

Answer 2

Looks like I was almost there, but just made a small mistake. It is indeed the map.on('error') event handler I need to use:
script.src = 'https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js';
script.onload = function() {
mapboxgl.accessToken = 'invalid_token';
map = new mapboxgl.Map({
container: 'mapsection', // container ID
style: 'mapbox://styles/mapbox/streets-v11' // style URL
});
map.on('error', (response) => {
alert(response.error.message)
});
}

Answer 3

Using map.on('error') results in Mapbox GL (v2.12.0) creating the full HTML DIV structure even when a Mapbox access token is invalid.
<div id="map-container" class="mapboxgl-map"><div class="mapboxgl-canary" style="visibility: hidden;"></div><div class="mapboxgl-canvas-container mapboxgl-interactive mapboxgl-touch-drag-pan mapboxgl-touch-zoom-rotate"><canvas class="mapboxgl-canvas" tabindex="0" aria-label="Map" role="region" width="780" height="724" style="width: 519.115px; height: 482.542px;"></canvas></div><div class="mapboxgl-control-container"><div class="mapboxgl-ctrl-top-left"></div><div class="mapboxgl-ctrl-top-right"><div class="mapboxgl-ctrl mapboxgl-ctrl-group"><button class="mapboxgl-ctrl-zoom-in" type="button" aria-label="Zoom in" aria-disabled="false"><span class="mapboxgl-ctrl-icon" aria-hidden="true" title="Zoom in"></span></button><button class="mapboxgl-ctrl-zoom-out" type="button" aria-label="Zoom out" aria-disabled="false"><span class="mapboxgl-ctrl-icon" aria-hidden="true" title="Zoom out"></span></button><button class="mapboxgl-ctrl-compass" type="button" aria-label="Reset bearing to north"><span class="mapboxgl-ctrl-icon" aria-hidden="true" title="Reset bearing to north" style="transform: rotate(0deg);"></span></button></div></div><div class="mapboxgl-ctrl-bottom-left"><div class="mapboxgl-ctrl" style="display: block;"><a class="mapboxgl-ctrl-logo" target="_blank" rel="noopener nofollow" href="https://www.mapbox.com/" aria-label="Mapbox logo"></a></div></div><div class="mapboxgl-ctrl-bottom-right"></div></div></div>
To avoid the unnecessary code execution by mapbox-gl.js, I used #Steve's suggestion of using a fetch query to a Mapbox API. A request to a map styles API URL results in an ~70KB response when the access token is valid. A request to the Mapbox geocoding API (version 5 is older; v6 is the most current version as of Feb 2023), using a non-existent place as the search string results in a 343 byte response.
const url = `https://api.mapbox.com/geocoding/v5/mapbox.places/rndstrasdf.json?access_token=${mapboxAccessToken}`;
This all seems unnecessary, however, as it would more efficient if Mapbox provided an access token verification API before executing any mapbox-gl in much the same way they provide a mapbox-gl-supported plugin.
For performance reasons, it is better to check that Mapbox GL JS is
supported before going to the trouble of loading the script and
initializing the map on your page.
document.addEventListener('DOMContentLoaded', function() {
loadMap()
.then(map => console.log("Map loaded successfully into element with ID: " + map._container.id))
.catch(error => console.error("Map load failed with the error: " + error.message));
});
function loadMap() {
return new Promise((resolve, reject) => {
const mapboxAccessToken = "ADD_YOUR_VALID_OR_INVALID_ACCESS_TOKEN";
// Using the following URL in a 'fetch' API results in a ~70KB response.
//const url = `https://api.mapbox.com/styles/v1/mapbox/streets-v11?access_token=${mapboxAccessToken}`;
//const url = `https://api.mapbox.com/styles/v1/mapbox/streets-v11?access_token=invalid`;
// A URL to Mapbox geocoding to validate a Mapbox access token
// results in a 343 byte response using a non-existent place name.
// Place search at https://www.mapbox.com/geocoding
// Temporary Geocoding API pricing https://www.mapbox.com/pricing#search
// A valid place name -> "Los Angeles"
//const url = `https://api.mapbox.com/geocoding/v5/mapbox.places/Los Angeles.json?access_token=${mapboxAccessToken}`;
const url = `https://api.mapbox.com/geocoding/v5/mapbox.places/rndstrasdf.json?access_token=${mapboxAccessToken}`;
fetch(url)
.then(response => {
if (!response.ok) {
response.message = "Connected to Mapbox service but with an invalid access token.";
reject(response);
return;
}
// Request succeeded. Response is an empty GeoJSON 'features' collection
// 343 bytes
/*
'{"type":"FeatureCollection","query":["rndstrasdf"],"features":[],
"attribution":"NOTICE: © 2023 Mapbox and its suppliers. All rights reserved.
Use of this data is subject to the Mapbox Terms of Service
(https://www.mapbox.com/about/maps/). This response and the information
it contains may not be retained. POI(s) provided by Foursquare."}'
*/
response.text().then(text => {
console.log(text);
});
mapboxgl.accessToken = mapboxAccessToken;
// stackoverflow.com/questions/72254578/how-to-solve-that-a-valid-mapbox-access-token-is-required-to-use-mapbox-gl-js
// github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0
// "Beginning with v2.0.0, a billable map load occurs whenever a
// Map object is initialized. Before updating an existing
// implementation from v1.x.x to v2.x.x, please review the
// pricing documentation to estimate expected costs."
const map = new mapboxgl.Map({
container: "map-container",
style: 'mapbox://styles/mapbox/streets-v11',
center: [12.79690, 47.32350], // Longitude, latitude
zoom: 5
});
// Add zoom and rotation controls to the map
// docs.mapbox.com/mapbox-gl-js/example/navigation
map.addControl(new mapboxgl.NavigationControl());
map.on('load', () => resolve(map));
map.on('error', error => reject(error));
})
.catch(error => {
reject(error);
});
});
}
<link href='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js'></script>
<div id="map-container" style="width: 100%; height: 80vh;"></div>