Verify shopify with SPA (#1173)

* update config, add spa variable

* Continue if app already installed and has access token and not deleted

* disable cdn app bridge if spa used

* update verify

* add util helper

* update validation

* add frontend engine enum

* update frontend validation

* add frontend_engine config setting

* linter fix

* add tests

* simplified verification

* Fixes issue comparing enum for `useNativeAppBridge` utility method

* Changes test to ensure all tests use app config over Config::set for consistency

* Changes test to ensure all tests use app config over Config::set for consistency

* Changes enum/config setup for app bridge configuration to be string based

* Fixes to solve undefined magic method for frontend engine

Co-authored-by: Tyler King <tyler@osiset.com>

Author: enmaboya

src/Http/Middleware/VerifyShopify.php

@@ -101,7 +101,16 @@ public function handle(Request $request, Closure $next)
             return $next($request);
         }
 
+        if (!Util::useNativeAppBridge()) {
+            $storeResult = !$this->isApiRequest($request) && $this->checkPreviousInstallation($request);
+
+            if ($storeResult) {
+                return $next($request);
+            }
+        }
+
         $tokenSource = $this->getAccessTokenFromRequest($request);
+
         if ($tokenSource === null) {
             //Check if there is a store record in the database
             return $this->checkPreviousInstallation($request)

src/Objects/Enums/FrontendEngine.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace Osiset\ShopifyApp\Objects\Enums;
+
+use Funeralzone\ValueObjects\Enums\EnumTrait;
+use Funeralzone\ValueObjects\ValueObject;
+
+/**
+ * Online Store 2.0 theme support
+ */
+class FrontendEngine implements ValueObject
+{
+    use EnumTrait;
+
+    /**
+     * Laravel Blade
+     *
+     * @var int
+     */
+    public const BLADE = 0;
+
+    /**
+     * Vue.js
+     *
+     * @var int
+     */
+    public const VUE = 1;
+
+    /**
+     * React
+     *
+     * @var int
+     */
+    public const REACT = 2;
+}

src/Util.php

@@ -6,6 +6,7 @@
 use Illuminate\Support\Facades\Config;
 use Illuminate\Support\Str;
 use LogicException;
+use Osiset\ShopifyApp\Objects\Enums\FrontendEngine;
 use Osiset\ShopifyApp\Objects\Values\Hmac;
 
 /**
@@ -230,4 +231,19 @@ public static function getShopsTableForeignKey(): string
     {
         return Str::singular(self::getShopsTable()).'_id';
     }
+
+    /**
+     * Checking to see if you need to use the native App Bridge
+     *
+     * @return bool
+     */
+    public static function useNativeAppBridge(): bool
+    {
+        $frontendEngine = FrontendEngine::fromNative(
+            self::getShopifyConfig('frontend_engine') ?? 'BLADE'
+        );
+        $reactEngine = FrontendEngine::fromNative('REACT');
+
+        return !$frontendEngine->isSame($reactEngine);
+    }
 }

src/resources/config/shopify-app.php

@@ -478,4 +478,16 @@
     ],
 
     'session_token_refresh_interval' => env('SESSION_TOKEN_REFRESH_INTERVAL', 2000),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Frontend engine used
+    |--------------------------------------------------------------------------
+    |
+    | Available engines: "BLADE", "VUE", or "REACT".
+    | For example, if you use React, you do not need to be redirected to a separate page to get the JWT token.
+    | No changes are made for Vue.js and Blade.
+    |
+    */
+    'frontend_engine' => env('SHOPIFY_FRONTEND_ENGINE', 'BLADE'),
 ];

src/resources/views/layouts/default.blade.php

@@ -17,7 +17,7 @@
             </div>
         </div>
 
-        @if(\Osiset\ShopifyApp\Util::getShopifyConfig('appbridge_enabled'))
+        @if(\Osiset\ShopifyApp\Util::getShopifyConfig('appbridge_enabled') && \Osiset\ShopifyApp\Util::useNativeAppBridge())
             <script src="https://unpkg.com/@shopify/app-bridge{{ \Osiset\ShopifyApp\Util::getShopifyConfig('appbridge_version') ? '@'.config('shopify-app.appbridge_version') : '' }}"></script>
             <script src="https://unpkg.com/@shopify/app-bridge-utils{{ \Osiset\ShopifyApp\Util::getShopifyConfig('appbridge_version') ? '@'.config('shopify-app.appbridge_version') : '' }}"></script>
             <script

tests/UtilTest.php

@@ -68,7 +68,7 @@ public function testRouteNames(): void
 
     public function testGetShopifyConfig(): void
     {
-        Config::set('shopify-app.config_api_callback', function (string $key, $shop) {
+        $this->app['config']->set('shopify-app.config_api_callback', function (string $key, $shop) {
             if ($key === 'api_secret') {
                 return 'hello world';
             }
@@ -105,4 +105,22 @@ public function testGraphQLWebhookTopic(): void
             Util::getGraphQLWebhookTopic('ORDERS_PARTIALLY_FULFILLED')
         );
     }
+
+    public function testUseNativeAppBridgeIsTrue(): void
+    {
+        $this->app['config']->set('shopify-app.frontend_engine', 'VUE');
+
+        $result = Util::useNativeAppBridge();
+
+        $this->assertTrue($result);
+    }
+
+    public function testUseNativeAppBridgeIsFalse(): void
+    {
+        $this->app['config']->set('shopify-app.frontend_engine', 'REACT');
+
+        $result = Util::useNativeAppBridge();
+
+        $this->assertFalse($result);
+    }
 }