reactjsshopifypolaris

What is the use of OAuth example in Polaris React App Bridge documentation?


Reading documentation here and the code snippet example. Is this meant to consistently check if the user is logged into the embedded app or used for the initial registration/login process?

Also, if I'm already using the AppProvider component, is this even needed? I know AppProvider handles initialization, according to their documentation here.

Here's the example from their documentation:

import createApp from '@shopify/app-bridge';
import {Redirect} from '@shopify/app-bridge/actions';

const apiKey = 'API key from Shopify Partner Dashboard';
const redirectUri = 'whitelisted redirect URI from Shopify Partner Dashboard';
const permissionUrl = `/oauth/authorize?client_id=${apiKey}&scope=read_products,read_content&redirect_uri=${redirectUri}`;

// If the current window is the 'parent', change the URL by setting location.href
if (window.top == window.self) {
  window.location.assign(`https://${shopOrigin}/admin/${permissionUrl}`)

// If the current window is the 'child', change the parent's URL with Shopify App Bridge's Redirect action
} else {
  const app = createApp({
    apiKey: apiKey,
    shopOrigin: shopOrigin,
  });

  Redirect.create(app).dispatch(Redirect.Action.ADMIN_PATH, permissionUrl);
}

Solution

  • I discovered that page weeks after I had implemented the oauth journey and was similarly confused about its use.

    But now I know that I'll use their example in the scenarios when a user is about to use a feature that requires permissions that they have not given to the app before and I need to redirect them to the authorization page. I tried a simple redirect and of course the loading of admin page was forbidden because I was still in the iframe.