Oauth flow not showing grant screen on Safari browser/container

4 1 0

Hello everyone,

We did developed a Vue app (SPA) hosted on a domain (foo.example.com) that talks to a REST api hosted on (api.example.com)

Using the shopify bridge on the first install we do generate the authorize url on the backend and the app is redirected to the permission url.

First Install : 

  • On MacOS/iOS Safari 

The application tries to load  but right after the first Vue hook, created we call the api (which is, again on a different domain) we get redirected right away to the 'cannot display page' page

  • On Chrome : 

The application renders as expected then redirected to the grant screen

Refreshing the page : 

  • On Chrome : everything works as expected : 

The user is redirected to the grant screen and proceeed with the installation.

  • On MacOS/iOS Safari 

The user is redirected to another embedded screen within the app ... which doesnt exist and displays "cannot display that page'

this is the way is being done when the 




    // If the current window is the 'parent', change the URL by setting location.href
      if (window.top == window.self) {
        console.warn('redirect to permission url...')
        window.location.assign(permissionUrl);  // this is where all the drama is happening, bascially on safari im not being // redirected to the grant screen
      } else {
        console.warn('redirecto to permission url through the app bridge')
        Redirect.create(this.app).dispatch(Redirect.Action.REMOTE, permissionUrl);




BTW : this is exactly what's is the documentation : 
https://shopify.dev/tools/app-bridge/getting-started > Using Modular Javascript section.


Finally, worth mentionning, Pressing back button on the Error screen : 

On the error screen, on MacOS/iOS Safari the user gets the grant screen


Can be Safari is really slow to load the policies for the iframe in order to make it able to send XHR requests on different origin, hence it displays some errror page?


Thanks !