Verify shopify with SPA #1173

enmaboya · 2022-07-24T18:26:41Z

If you have a SPA frontend (React, Vue, or something else), there is no point in redirecting to the "authenticate.token" route.

Redirecting and then getting the token has the following disadvantages:

it takes longer to load the application;
the token is added to url as a get parameter.

This PR adds validation:
if you specified in the settings that you are using SPA, a record is created in the table "users" and this user is not deleted, then the request is skipped.

Then you just need to describe the logic in your frontend.

Example for React:

import React from 'react';
import ReactDOM from 'react-dom/client';
import '@shopify/polaris/build/esm/styles.css';
import {AppProvider, Page, Card} from '@shopify/polaris';
import { Provider } from '@shopify/app-bridge-react';
import { AppRoutes } from './AppRoutes';

const root = ReactDOM.createRoot(document.getElementById('root'));

const host = new URLSearchParams(location.search).get("host");
const apiKey = process.env.MIX_SHOPIFY_API_KEY;

const config = { apiKey, host, forceRedirect: true };

root.render(
    <Provider config={config}>
        <AppProvider i18n={{  }}>
            <Page title="Example app">
                <Card sectioned>
                    <AppRoutes />
                </Card>
            </Page>
        </AppProvider>
    </Provider>
  );

Kyon147 · 2022-08-26T09:25:15Z

Hi @enmaboya

The one issue potentially I see is you are not loading AppBridge completely is "SPA mode" is enabled because of your conditional added in default.blade.php

This would theoretically, not load the app inside the iframe - so can you provide how this works in a real example?

enmaboya · 2022-08-26T23:36:18Z

@Kyon147 the SPA (React in my case) does not need a native AppBridge.

Instead, use the npm package "@shopify/app-bridge-react", as in the example I gave, it does the same thing - toast, modal and so on.

shopify_spa_app_record.mp4

Kyon147 · 2022-08-27T07:53:36Z

Apologies, totally missed the import for app bridge!

gnikyt · 2022-09-09T12:57:06Z

Hi @enmaboya
So the Reacyt package is doing something to grab a token for the user in that case?

Kyon147 · 2022-09-09T13:27:29Z

This PR also makes it very React centric, when Laravel bundles with VueJS out the box. As Shopify does not have a "Vue-App-Bridge" package, is this PR maybe constricting users on what languages and frameworks they should be using?

I say this as someone who uses React and Vue but uses Vue more exclusively with Laravel.

If we merged this in, I think we would be one-sided if we did not offer wikis on both Vue and React implementations.

Only because the React/App-Bridge handles the token out the box, with the <Provider /> wrapper. Without this, you'd not get any session token if you did turn on "SPA" mode out the box.

gnikyt · 2022-09-09T14:30:28Z

@Kyon147 True... maybe spa_frontend_used should be changed to a boolean value. Then a new config entry spa_frontend_engine where someone can put in react.

This way, react support initially, and when Vue is figured out, we can check spa_frontend_engine is vue and handle there in the future.

Kyon147 · 2022-09-10T07:16:42Z

@osiset that makes sense - I think the solution would need to be a package like Shopify's react/appbridge package, not sure if one exists so someone would have to make it ha - I do a lot of vue/shopify work so might add it to the list...

…ture/verify_shopify_with_spa

enmaboya · 2022-09-11T16:14:30Z

@osiset @Kyon147
I updated the config

now called "frontend_engine", available values:

blade (default value);
vue;
react;

Checking via a simple switch, if react is selected, the native app bridge won't load.

When using blade or vue, everything works as before

gnikyt

One minor comment, see if it makes sense.

gnikyt · 2022-09-12T13:14:19Z

src/Util.php

+    {
+        $currentFrontendEngine = self::getShopifyConfig('frontend_engine') ?? FrontendEngine::BLADE;
+
+        switch ($currentFrontendEngine) {


@enmaboya Switch is probably not needed since its only React we need to look for.

return !$currentFrontendEngine->isSame(FrontendEngine::REACT);

So "if current engine is not React, return true and use app bridge"... React will return false and not use app bridge.

gnikyt · 2022-09-12T15:41:47Z

I see the error, my bad, I forgot it was Enum. Let me just pull this in locally and adjust something quick and issue a patch to this PR.

…consistency

…ased

gnikyt · 2022-09-12T16:12:31Z

Adjustments made. Moved it to be string based for the config, as scalars are more user friendly for someone doing config (where possible anyways), it also allows for using environment vars to pass in the frontend engine requirement via SHOPIFY_FRONTEND_ENGINE.

Enum value for the config would've been fine, but as PHPStan complained, because the Enum methods are magic (REACT(), BLADE()) etc, its hard to see the true value. Thus, I migrated it to be string based and the Util method will convert it to the proper Enum for comparison.

I am good with this, @Kyon147 what do you think?

Kyon147 · 2022-09-12T16:18:56Z

@osiset looks good to me and I agree, I think the strings are more readable tbf and just and overall simpler implementation for the same end result.

awebartisan · 2022-10-07T11:24:57Z

@enmaboya how are you getting the token and identifying the currently logged in shop on home route when its clicked the very first time, after installation?

I am trying to make it work with Inertia.js, I can get and set the token for all Inertia ( Axios ) requests but the very first request is not Inertia (Axios). Therefore no token and hence Auth::user() returning null. Any thoughts on this?

Kyon147 · 2022-10-23T14:50:40Z

Just an update on this, billing currently does not work if you want to use the SPA only setting.

There's the Attempt to read property "plan" on null because the middleware tries using "auth" which because we have not gone to the token/auth route before the middleware, no user is logged in.

 if (Util::getShopifyConfig('billing_enabled') === true) {
            /** @var $shop IShopModel */
            $shop = auth()->user(); // on SPA we don't have any user as the authenticate/token route is skipped.
            if (! $shop->plan && ! $shop->isFreemium() && ! $shop->isGrandfathered()) {
                // They're not grandfathered in, and there is no charge or charge was declined... redirect to billing
                return Redirect::route(
                    Util::getShopifyConfig('route_names.billing'),
                    array_merge($request->input(), ['shop' => $shop->getDomain()->toNative()])
                );
            }
        }

So the billing_enabled and billing on the route break. This means we might need to add a patch and add a section in the wiki that a user is going to have to handle billing themselves if they want to use an SPA.

@osiset @enmaboya

kurakin-oleksandr · 2022-11-01T11:40:32Z

For everyone who wants to implement SPA, you can use something like this for proper handling requests

kurakin-oleksandr · 2022-11-01T11:42:17Z

Also, this patch looks like a working solution (at least it works in my case):

Index: vendor/osiset/laravel-shopify/src/Http/Middleware/Billable.php
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/vendor/osiset/laravel-shopify/src/Http/Middleware/Billable.php b/vendor/osiset/laravel-shopify/src/Http/Middleware/Billable.php
--- a/vendor/osiset/laravel-shopify/src/Http/Middleware/Billable.php
+++ b/vendor/osiset/laravel-shopify/src/Http/Middleware/Billable.php	(date 1667258546106)
@@ -5,7 +5,9 @@
 use Closure;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Redirect;
+use Osiset\ShopifyApp\Contracts\Queries\Shop as ShopQuery;
 use Osiset\ShopifyApp\Contracts\ShopModel as IShopModel;
+use Osiset\ShopifyApp\Objects\Values\ShopDomain;
 use Osiset\ShopifyApp\Util;

 /**
@@ -13,6 +15,23 @@
  */
 class Billable
 {
+    /**
+     * The shop querier.
+     *
+     * @var ShopQuery
+     */
+    protected $shopQuery;
+
+    /**
+     * @param ShopQuery $shopQuery The shop querier.
+     *
+     * @return void
+     */
+    public function __construct(ShopQuery $shopQuery)
+    {
+        $this->shopQuery = $shopQuery;
+    }
+
     /**
      * Checks if a shop has paid for access.
      *
@@ -25,7 +44,7 @@
     {
         if (Util::getShopifyConfig('billing_enabled') === true) {
             /** @var $shop IShopModel */
-            $shop = auth()->user();
+            $shop = $this->shopQuery->getByDomain(ShopDomain::fromNative($request->get('shop')));
             if (! $shop->plan && ! $shop->isFreemium() && ! $shop->isGrandfathered()) {
                 // They're not grandfathered in, and there is no charge or charge was declined... redirect to billing
                 return Redirect::route(

Kyon147 · 2022-11-10T15:08:18Z

Also, this patch looks like a working solution (at least it works in my case):

Index: vendor/osiset/laravel-shopify/src/Http/Middleware/Billable.php
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/vendor/osiset/laravel-shopify/src/Http/Middleware/Billable.php b/vendor/osiset/laravel-shopify/src/Http/Middleware/Billable.php
--- a/vendor/osiset/laravel-shopify/src/Http/Middleware/Billable.php
+++ b/vendor/osiset/laravel-shopify/src/Http/Middleware/Billable.php	(date 1667258546106)
@@ -5,7 +5,9 @@
 use Closure;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Redirect;
+use Osiset\ShopifyApp\Contracts\Queries\Shop as ShopQuery;
 use Osiset\ShopifyApp\Contracts\ShopModel as IShopModel;
+use Osiset\ShopifyApp\Objects\Values\ShopDomain;
 use Osiset\ShopifyApp\Util;

 /**
@@ -13,6 +15,23 @@
  */
 class Billable
 {
+    /**
+     * The shop querier.
+     *
+     * @var ShopQuery
+     */
+    protected $shopQuery;
+
+    /**
+     * @param ShopQuery $shopQuery The shop querier.
+     *
+     * @return void
+     */
+    public function __construct(ShopQuery $shopQuery)
+    {
+        $this->shopQuery = $shopQuery;
+    }
+
     /**
      * Checks if a shop has paid for access.
      *
@@ -25,7 +44,7 @@
     {
         if (Util::getShopifyConfig('billing_enabled') === true) {
             /** @var $shop IShopModel */
-            $shop = auth()->user();
+            $shop = $this->shopQuery->getByDomain(ShopDomain::fromNative($request->get('shop')));
             if (! $shop->plan && ! $shop->isFreemium() && ! $shop->isGrandfathered()) {
                 // They're not grandfathered in, and there is no charge or charge was declined... redirect to billing
                 return Redirect::route(

This looks like a good middle ground solution if people want to continue to use the built-in billing route. Can you create a PR for this @kurakin-oleksandr?

kurakin-oleksandr · 2022-11-28T21:18:22Z

@Kyon147 done 🙂
#1275

enmaboya added 4 commits July 24, 2022 20:06

update config, add spa variable

9ad7839

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

cfb1d5f

disable cdn app bridge if spa used

62158d7

update verify

a5ae5c3

gnikyt self-assigned this Sep 9, 2022

gnikyt added the feature Enhancement to the code label Sep 9, 2022

enmaboya added 8 commits September 11, 2022 18:20

Merge branch 'master' of github.com:enmaboya/laravel-shopify into fea…

1dada3f

…ture/verify_shopify_with_spa

add util helper

0a89f67

update validation

e246ed8

add frontend engine enum

3e7297f

update frontend validation

365fd34

add frontend_engine config setting

7e75aba

linter fix

40a058c

add tests

c52b114

gnikyt reviewed Sep 12, 2022

View reviewed changes

simplified verification

b8ec01a

gnikyt added 5 commits September 12, 2022 13:23

Fixes issue comparing enum for useNativeAppBridge utility method

7c10b93

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

6c66fb8

…consistency

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

638aeea

…consistency

Changes enum/config setup for app bridge configuration to be string b…

2a1acca

…ased

Fixes to solve undefined magic method for frontend engine

325f2c1

gnikyt approved these changes Sep 12, 2022

View reviewed changes

gnikyt merged commit f07ccce into gnikyt:master Sep 12, 2022

Kyon147 mentioned this pull request Oct 1, 2022

App must set security headers to protect against clickjacking && App must verify the authenticity of the request from Shopify. #1225

Closed

tinhphantrong0612 mentioned this pull request Nov 2, 2022

"Shopify App Outdated" but running latest app bridge, osiset, etc #1250

Open

kurakin-oleksandr mentioned this pull request Nov 28, 2022

Improve validation for billable shops #1275

Open

kurakin-oleksandr mentioned this pull request Dec 1, 2022

Improve validation for billable shop Kyon147/laravel-shopify#2

Merged

Kyon147 mentioned this pull request Dec 28, 2022

React SPA - Can't get the latest version to work using Laravel 8 or Laravel 9 Kyon147/laravel-shopify#30

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Verify shopify with SPA #1173

Verify shopify with SPA #1173

enmaboya commented Jul 24, 2022 •

edited

Kyon147 commented Aug 26, 2022

enmaboya commented Aug 26, 2022

Kyon147 commented Aug 27, 2022

gnikyt commented Sep 9, 2022

Kyon147 commented Sep 9, 2022 •

edited

gnikyt commented Sep 9, 2022

Kyon147 commented Sep 10, 2022

enmaboya commented Sep 11, 2022

gnikyt left a comment

gnikyt Sep 12, 2022

gnikyt commented Sep 12, 2022

gnikyt commented Sep 12, 2022 •

edited

Kyon147 commented Sep 12, 2022

awebartisan commented Oct 7, 2022

Kyon147 commented Oct 23, 2022 •

edited

kurakin-oleksandr commented Nov 1, 2022

kurakin-oleksandr commented Nov 1, 2022

Kyon147 commented Nov 10, 2022

kurakin-oleksandr commented Nov 28, 2022

Verify shopify with SPA #1173

Verify shopify with SPA #1173

Conversation

enmaboya commented Jul 24, 2022 • edited

Kyon147 commented Aug 26, 2022

enmaboya commented Aug 26, 2022

Kyon147 commented Aug 27, 2022

gnikyt commented Sep 9, 2022

Kyon147 commented Sep 9, 2022 • edited

gnikyt commented Sep 9, 2022

Kyon147 commented Sep 10, 2022

enmaboya commented Sep 11, 2022

gnikyt left a comment

Choose a reason for hiding this comment

gnikyt Sep 12, 2022

Choose a reason for hiding this comment

gnikyt commented Sep 12, 2022

gnikyt commented Sep 12, 2022 • edited

Kyon147 commented Sep 12, 2022

awebartisan commented Oct 7, 2022

Kyon147 commented Oct 23, 2022 • edited

kurakin-oleksandr commented Nov 1, 2022

kurakin-oleksandr commented Nov 1, 2022

Kyon147 commented Nov 10, 2022

kurakin-oleksandr commented Nov 28, 2022

enmaboya commented Jul 24, 2022 •

edited

Kyon147 commented Sep 9, 2022 •

edited

gnikyt commented Sep 12, 2022 •

edited

Kyon147 commented Oct 23, 2022 •

edited