I have looked all over and cant find jack all on how to do this.
I have a react.js frontend and a PHP backend that when I try to update scopes I get hit with the X-Frame deny issue.
My PHP code essentially calls "headers('Location: ' . $url);" which works fine on initial install and subsequent loads but fails with X-Frame deny when I try to update the scope.
$url format is "https://" . $shop . "/admin/oauth/authorize?client_id=" . $key . "&scope=" . $scopes . "&redirect_uri=" . urlencode($redirect) . "&state=" . $state;"
I have tried app bridge by echoing out the script in PHP (and it does 'work') but it doesn't redirect at all and I don't think I can include the app bridge into my react app as I am using create-react-app with material-ui.
How do I redirect to be able to update the scopes?
You need to redirect out of the iframe to re-authorize your app. Embedded apps should be using App Bridge, and then you can use the App Bridge redirect method.
There are some instructions and sample code here: https://shopify.dev/apps/tools/app-bridge/getting-started#authenticate-with-oauth
App Bridge is compatible with React and even includes some React components.