Prerequisite

Read this extensive tutorial from Shopify to get more understanding about the SameSite cookie attribute.

Working with SameSite cookie attribute

Read it? 🤓

Make sure you understand the problem! 🙌🏼

Oh you are sure? 👀

So what should be the value of SameSite attribute and what other attribute that you need to set to get it working? 🤔

Did you answer the above question correctly? 🧐

How would I know 🤪

Let's continue 😌

Solution

You need to set SameSite=None and always pair it another attribute, Secure=true.

PHP Implementation

setcookie('cross-site-cookie', 'bar', ['samesite' => 'None', 'secure' => true]);

Example link

Laravel implementation

Laravel has a session.php config file. In this file you can find these attributes and set their values as following:

///

'secure' => env('SESSION_SECURE_COOKIE', true),

///

'same_site' => 'none',

Important! It will set these attributes for all cookies.

Simple, right? Well, No!!

So, what's the Catch?

Not all browsers support SameSite=None attribute. There are known incompatibilities.

List of incompatible browsers

Setting SameSite and Secure attributes for only compatible clients

If you are using ohmybrew/laravel-shopify package to develop your Shopify App, just upgrade this package to 10.3.1 and you are covered.
In order to detect the Browser client details in PHP, we can leverage jenssegers/agent package.

     /**
     * Sets the cookie policy.
     *
     * Enables SameSite none and Secure cookies on:
     *
     * - Chrome v67+
     * - Safari on OSX 10.14+
     * - iOS 13+
     * - UCBrowser 12.13+
     *
     * @return null
     */
    public function setCookiePolicy()
    {
        if ($this->checkSameSiteNoneCompatible()) {
            config([
                'session.secure'    => true,
                'session.same_site' => 'none',
            ]);
        }
    }

    /**
     * Checks to see if the current browser session should be
     * using the SameSite=none cookie policy.
     *
     * @return bool
     */
    private function checkSameSiteNoneCompatible()
    {
        $compatible = true;

        $this->agent = new Agent();

        $browser = $this->getBrowserDetails();
        $platform = $this->getPlatformDetails();

        if ($this->agent->browser() == 'Chrome' && $browser['float'] < 67) {
            $compatible = false;
        }

        if ($this->agent->is('iOS') && $platform['float'] < 13) {
            $compatible = false;
        }

        if ($this->agent->is('OS X') &&
            ($this->agent->browser() == 'Safari' && !$this->agent->is('iOS')) &&
            $platform['float'] < 10.15
        ) {
            $compatible = false;
        }

        if ($this->agent->browser() == 'UCBrowser' &&
            $browser['float'] < 12.132
        ) {
            $compatible = false;
        }

        return $compatible;
    }

    /**
     * Returns details about the current web browser.
     *
     * @return array
     */
    private function getBrowserDetails()
    {
        $version = $this->agent->version($this->agent->browser(), Agent::VERSION_TYPE_FLOAT);

        return [
            'float' => ($version ?: 0),
        ];
    }

    /**
     * Returns details about the current operating system.
     *
     * @return array
     */
    private function getPlatformDetails()
    {
        $version = $this->agent->version($this->agent->platform(), Agent::VERSION_TYPE_FLOAT);

        return [
            'float' => ($version ?: 0),
        ];
    }

Snippet Source

Conclusion

This is how you can make your Embedded Shopify Apps made with PHP/Laravel work with SameSite cookie attribute and be ready for this change.

Let me know in comments if I missed something or there is a better solution.

Dealing with Chrome SameSite cookie attribute in Shopify Apps made with PHP/Laravel