With tiled viewer now handling authentication, app should not have data api key

[dylanmcreynolds]

Before we had the tiled viewer handling authentication on its own, we don't want to set the DATA_API_KEY...it means that only one user can be configured in the app, and the api key appears in the browser (bad if it's a central api key not a user's api key).

However, the app needs to know the user's token today because it needs to make a request for the image when the viewer is closed. @SeijDeLeon , this will take some thought. Can the dash widget provide a callback so that dash server can get the user's access_token after the widget is closed?

[SeijDeLeon]

A few potential options below. These options are under the assumption that the same dash app which hosts the Tiled Viewer component is also making the Tiled api calls, and that the same browser instance is connected to the dash python server.

I think option 1 is probably the most simple since it doesn't require doing js things in dash to get local storage.

Option 1. New callback feature on Tiled Viewer.

When user clicks 'select' we pass into the callback function an additional dictionary item "tiledAccessToken" which can then be used in the dash app. Tiled Viewer handles getting this through its own auth setup. We would need to create a prop in the Tiled Viewer that when enabled passes this extra value into the callback so it is optional.

The dash app frontend then reads this dictionary (which it was already doing I assume) and has immediate access to the tiledAccessToken to be used in its backend when making calls to Tiled.

Option 2. Tiled Viewer stays the same, add more dash logic.

After user clicks 'select', the dash frontend implements a new client side callback which uses js to load the local storage variable (tiledAccessToken, saved automatically by the Tiled Viewer) and then puts it into dcc.store which could be used by the python server side.

[dylanmcreynolds]

I like option 1 as it seems like it's easier to code against, and makes this part of the api

[SeijDeLeon]

Tiled Viewer in Dash has been updated to version 0.0.13 which now includes an additional prop includeAuthTokensInSelectCallback

Example use

app.layout = html.Div([
    tiled_viewer.TiledViewer(
        id='input',
        includeAuthTokensInSelectCallback=True,
    ),
    html.Div(id='output')
])

When includeAuthTokensInSelectCallback=True the dictionary sent into the callback function includes two additional key/values

//dictionary sent into the callback function when user clicks 'select' on an item
{
//new stuff
accessToken: string | null //returns null if nothing found in local storage
refreshToken: string | null //returns null if nothing found in local storage
//old stuff
self: string;
full?: string;
block?: string;
buffers?: string;
partition?: string;
search?: string;
default?: string;
}

If a user logs in with the Tiled Viewer component, then auth tokens are automatically saved into local storage. If a user happens to have outdated or non working tokens in local storage on page refresh, the component automatically clears them and sends a user to the login form.

Previously we were directly sending the contents of the 'links' attribute for a selected item into the callback. Now just adding two additional key/values to the same return dictionary. This should maintain any compatibility with existing dash apps or react apps using the TiledViewer.

https://pypi.org/project/tiled-viewer/0.0.13/