Account connection with the sales channel

[RohanVerma]

Hello everyone, I am Rohan, CTO at myplaza.io

We are building a Shopify sales channel app, but I need help with a development problem. Steps to reproduce the development problem:

1. Merchants install our sales channel app from their Shopify admin and give us all the required permissions.
2. They finish their onboarding on the sales channel app.
3. They connect their MyPlaza merchant account with our MyPlaza Shopify Sales Channel app using the Account Connection Component sales channels are required to use.

I couldn't find sufficient materials in Shopify's developer documentation to finish step 3
I found an account connection component in the channel UI docs
https://github.com/Shopify/channels-ui-docs/blob/main/components/AccountConnection.md
"The primary action should open a popup browser window where the merchant can log into your platform."
We are using Firebase backend for both authentication and database. Should I integrate firebase into the Shopify Sales Channel app?

[RohanVerma · Accepted solution]

The solution to this is opening our platform's login/register page using a pop-up.

  const [popup, setPopup] = useState();
  const handleAccountConnect = () => {
    var popWin = window.open(
      isDebug
        ? "http://localhost:3000/auth/login"
        : "https://myplaza.io/auth/login",
      "merchantWindow"
    );
    setPopup(popWin);
  };

On successful login from our platform app, send the email and password of the user back to the Shopify app

  useEffect(() => {
    if (user?.emailVerified === false) return;
    if (password === "") return;
    if (email === "") return;

    window.opener?.postMessage(
      [email, password],
      "https://ef22-2406-7400-98-a119-f97d-b295-8279-7061.in.ngrok.io"
    );
  }, [user, password, email]);

Listen for email and password in the Shopify app
And sign in

  useEffect(() => {
    const login = async (email, password) => {
      await signInWithEmailAndPassword(email, password);
    };
    if (!!!popup) return;
    const childResponse = (event) => {
      // console.log(event.source);
      // console.log(JSON.stringify(event.data));
      // console.log(event.origin);

      if (
        event.origin !==
        (isDebug ? "http://localhost:3000" : "https://myplaza.io")
      )
        return;

  const val = event.data;
      if (val.length == 2 && !!val[0] && !!val[1]) {
        login(val[0], val[1]);
        popup?.close();
      }
    };
    window.addEventListener("message", childResponse);
    return () => {
      setPopup();
      return window.removeEventListener("message", childResponse);
    };
  }, [popup]);

[foundationb2b]

Hello @RohanVerma We are looking to build a sales channel app. Could you help us with this? We can pay.