How can we use this repository with shopify checkout extension.

[TeerthSurani]

I have an existing app with this package no I want to create a shopify checkout extension in this project with shopify CLI how can I merge this code with the Checkout extension?

[jeroendelau]

I've started working through this. Long story short I will need to create a PR that handle the SessionToken from app extensions that is slightly different. The process is roughly as follows:

1. Use shopify-cli to create an app extension
2. Capture the session token and attach it to the call

import React, { useCallback, useState } from 'react';
import { useApi } from '@shopify/ui-extensions-react/checkout';

export default function useBackend(
    route: string,
    method: string,
    data?: any,
    params?: any,
    onSuccess?: (response: any) => void,
) {
    const [token, setSessionToken] = useState('');
    const { sessionToken } = useApi();
    sessionToken.get().then(setSessionToken);

    const [calling, setCalling] = React.useState(false);

    const call = useCallback(() => {
        const doCall = async () => {
            setCalling(true);

            const url = route + (params ? `?${new URLSearchParams(params).toString()}` : '');
            const response = await fetch(url, {
                method,
                headers: {
                    'Content-Type': 'application/json',
                    Accept: 'application/json',
                    Authorization: `Bearer ${token}`,
                },
                body: data ? JSON.stringify(data) : null,
            });

            setCalling(false);
            if (onSuccess) {
                onSuccess(response);
            }
        };
        doCall();
    }, [route, method, data, params, onSuccess, token]);

    return [call, calling];
}

3. This will fail however because this session token is not the same as the application token

• It does not contain sub, sid or iss
• dest contains only the host

Editing: Osiset\ShopifyApp\Objects\Values\SessionToken with the below will result in successful responses. I will attempt to create a PR that allows SessionToken to parse both types of tokens without loss of security.

...
protected function decodeToken(): void
    {
        // Confirm token formatting
        Assert::that($this->string)->regex(self::TOKEN_FORMAT, self::EXCEPTION_MALFORMED);

        // Decode the token
        $this->parts = explode('.', $this->string);
        $body = json_decode(Util::base64UrlDecode($this->parts[1]), true);

        info("body", $body);
        // Confirm token is not malformed
        Assert::thatAll([
            //$body['iss'],
            $body['dest'],
            $body['aud'],
            //$body['sub'],
            $body['exp'],
            $body['nbf'],
            $body['iat'],
            $body['jti'],
            //$body['sid'],
        ])->notNull(self::EXCEPTION_MALFORMED);

        // Format the values
        $this->iss = $body['iss'] ?? '';
        $this->dest = $body['dest'];
        $this->aud = $body['aud'];
        $this->sub = $body['sub'] ?? '';
        $this->jti = $body['jti'];
        $this->sid = SessionId::fromNative($body['sid'] ?? '');
        $this->exp = new Carbon($body['exp']);
        $this->nbf = new Carbon($body['nbf']);
        $this->iat = new Carbon($body['iat']);

        // Parse the shop domain from the destination
        $host = parse_url($body['dest'], PHP_URL_HOST);
        $this->shopDomain = NullableShopDomain::fromNative($body['dest']);
    }
    
    ...
    
     protected function verifyValidity(): void
    {
        // Assert::that($this->iss)->contains($this->dest, self::EXCEPTION_INVALID);
        Assert::that($this->aud)->eq(Util::getShopifyConfig('api_key', $this->getShopDomain()), self::EXCEPTION_INVALID);
    }

[jeroendelau]

PR for support is ready
#329