You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

@gadgetinc/react-shopify-app-bridge

Package Overview
Dependencies
Maintainers
6
Versions
60
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@gadgetinc/react-shopify-app-bridge - npm Package Compare versions

Comparing version

to
0.2.5

2

dist/src/context.d.ts

@@ -19,4 +19,6 @@ /// <reference types="react" />

isAuthenticated: boolean;
/** Is the app being rendered outside of a Shopify admin flow, this only applies if type is set to AppType.Embedded. e.g. navigating to this page through a link */
isRootFrameRequest: boolean;
};
export declare const GadgetAuthContext: import("react").Context<GadgetAuthContextValue>;
export declare const useGadget: () => GadgetAuthContextValue;

@@ -11,2 +11,3 @@ "use strict";

appBridge: null,
isRootFrameRequest: false,
});

@@ -13,0 +14,0 @@ const useGadget = () => (0, react_1.useContext)(exports.GadgetAuthContext);

12

dist/src/Provider.js

@@ -51,3 +51,3 @@ "use strict";

// inner component that exists in order to ask for the app bridge
const InnerGadgetProvider = (0, react_2.memo)(({ children, forceRedirect, isEmbedded, gadgetAppUrl, originalQueryParams, api }) => {
const InnerGadgetProvider = (0, react_2.memo)(({ children, forceRedirect, isEmbedded, gadgetAppUrl, originalQueryParams, api, isRootFrameRequest }) => {
const appBridge = (0, react_2.useContext)(context_1.AppBridgeContext);

@@ -60,2 +60,3 @@ const [context, setContext] = (0, react_2.useState)({

appBridge,
isRootFrameRequest: false,
});

@@ -109,3 +110,3 @@ (0, react_2.useEffect)(() => {

(0, react_2.useEffect)(() => {
if (!runningShopifyAuth)
if (!runningShopifyAuth || isRootFrameRequest)
return;

@@ -123,3 +124,3 @@ // redirect to gadget app root pages url with oauth params

}, [appBridge, gadgetAppUrl, isEmbedded, originalQueryParams, runningShopifyAuth]);
const loading = forceRedirect || runningShopifyAuth || sessionFetching;
const loading = (forceRedirect || runningShopifyAuth || sessionFetching) && !isRootFrameRequest;
(0, react_2.useEffect)(() => {

@@ -133,2 +134,3 @@ return setContext({

error,
isRootFrameRequest,
});

@@ -154,2 +156,4 @@ }, [loading, isEmbedded, appBridge, isAuthenticated, error]);

const inDestinationContext = isEmbedded == ((type ?? AppType.Embedded) == AppType.Embedded);
// We need to inform developers if the component is being rendered in a non embedded context when it should be AND we're not in an interstitial installation state. This is determined for now by the absence of both hmac and shop. This will generally occur when someone visits the app url while not in the Shopify admin.
const isRootFrameRequest = !query?.has("hmac") && !query?.has("shop") && (type ?? AppType.Embedded) == AppType.Embedded;
const forceRedirect = isReady && !(0, lodash_1.isUndefined)(host) && !inDestinationContext;

@@ -164,3 +168,3 @@ const gadgetAppUrl = new URL(api.connection.options.endpoint).origin;

let app = (react_2.default.createElement(react_1.Provider, { value: api.connection.currentClient },
react_2.default.createElement(InnerGadgetProvider, { forceRedirect: forceRedirect, isEmbedded: isEmbedded, gadgetAppUrl: gadgetAppUrl, api: api, originalQueryParams: originalQueryParams }, children)));
react_2.default.createElement(InnerGadgetProvider, { forceRedirect: forceRedirect, isEmbedded: isEmbedded, gadgetAppUrl: gadgetAppUrl, api: api, originalQueryParams: originalQueryParams, isRootFrameRequest: isRootFrameRequest }, children)));
// app bridge provider seems to prevent urql from sending graphql requests when it cannot communicate using postMessage when not embedded so we must skip using the app bridge provider on the very first redirect from shopify

@@ -167,0 +171,0 @@ if (host && (!isInstallRequest || inDestinationContext)) {

{
"name": "@gadgetinc/react-shopify-app-bridge",
"version": "0.2.4",
"version": "0.2.5",
"source": "src/index.ts",

@@ -5,0 +5,0 @@ "main": "dist/src/index.js",

@@ -99,3 +99,3 @@ <div align="center">

function ProductManager() {
const { loading, appBridge } = useGadget();
const { loading, appBridge, isRootFrameRequest, isAuthenticated } = useGadget();
const [, deleteProduct] = useAction(api.shopifyProduct.delete);

@@ -123,3 +123,5 @@ const [{ data, fetching, error }, refresh] = useFindMany(api.shopifyProduct);

{loading && <span>Loading...</span>}
{!loading &&
{/* A user is viewing this page from a direct link so show them the home page! */}
{!loading && isRootFrameRequest && <div>Welcome to my cool app's webpage!</div>}
{!loading && isAuthenticated &&
data.map((product) => (

@@ -126,0 +128,0 @@ <button

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet