No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Article

Native WebViews


User Authorization

In a normal desktop or mobile web browser, MusicKit on the Web will use a separate tab or window to authorize the user when they choose to sign in.

However, the WebViews used inside most mobile applications usually do not support multiple web tabs or windows. In these cases, MusicKit will have to redirect the user to authorize using the only window available in the WebView.

This means your website loaded in that WebView will be unloaded while the user signs in on the authorization website. Once the user signs in, the user will be redirected back to the same URL on your website they were on before the authorization navigation.

Since your website was unloaded, MusicKit will not know which action you attempted to perform. The user will need to retrace their steps in your user interface to successfully complete the action that required authorization.

This is not ideal for the user. Unfortunately MusicKit cannot save any state to help complete the action, since it does not have knowledge of your website's internal state.

You can help improve the experience for the user by implementing the following logic:

  1. Before your code makes an API request that requires the user to authorize your app, you can check MusicKit.getInstance().isAuthorized to see if authorization has been granted. If the app is not authorized, save some information in sessionStorage that remembers that API action.
  2. Make the MusicKit.getInstance().authorize() call.
  3. At this point your website will unload and the user will go through the MusicKit on the Web authorization flow to sign in and authorize your app. Once authorization is complete, they will return to your website, using the URL that the user was on before the authorization jump.
  4. On page load for your website, if the sessionStorage data you saved in step 1 exists, check MusicKit.getInstance().isAuthorized. If it is true, then attempt the MusicKit on the Web API call again. Be sure to clean up the sessionStorage state so the action is not accidentally repeated if the user reloads your website or comes back to it later.