Detect admin users

In some specific use cases you may want to adapt the application when the merchant is navigating your Front-Commerce application. For instance, some pages may be protected and only accessible to the e-merchants of your shop. The rest of the users won't be able to read their content. This guide explains how Front-Commerce supports these use cases.

In Front-Commerce, we've achieved this by injecting a state in the user's session when they are navigating Magento's backend. This documentation page details how it works and how you can use it.

Configuring your environment

First, you need to make sure that you've configured the tokens that will enable the communication between Magento and Front-Commerce:

• In Magento's store configuration, under the "General > General > Front-Commerce" section, fill in the "Magento Admin Token" field. It should be a random string of 32+ characters.
• In your .env in Front-Commerce's folder, add FRONT_COMMERCE_MAGENTO2_ADMIN_TOKEN=<token> where <token> should be replaced by the string you used in Magento.

You can then restart your environment and the admin role should now be enabled for all the users that have logged into Magento's administration panel in the previous 30 minutes.

If you think it didn't work correctly, you can manually force a new authentication from the "Reload storefront session" link in the admin footer. It is added by the Front-Commerce Magento module:

Detecting the admin role in Front-Commerce

Front-Commerce provides mechanisms to restrict access to certain pages based on user roles.

To detect if the user is an admin on a specific page, you can use the MagentoUserService.createUser function inside a Remix loader function:

app/routes/hello-admin.tsx

import { FrontCommerceApp } from "@front-commerce/remix";
import { json } from "@front-commerce/remix/node";
import { useLoaderData } from "@front-commerce/remix/react";
import type { LoaderFunctionArgs } from "@remix-run/node";
import {
  MagentoAdmin,
  MagentoUserService,
} from "@front-commerce/magento2/user";

export const loader = async ({ context }: LoaderFunctionArgs) => {
  const app = new FrontCommerceApp(context.frontCommerce);
  const user = MagentoUserService.createUser(app.user);

  return json({
    isAdmin: user instanceof MagentoAdmin,
  });
};

export default function HelloAdmin() {
  const { isAdmin } = useLoaderData<typeof loader>();

  return isAdmin ? "Hello ADMIN" : "Hello CUSTOMER";
}

Change the behavior depending on the admin connected

In some cases you may need more granularity in your authentication process. In the above section, all admins are considered equal. But in practice, there might be some roles or custom authentication process.

This can be done in Front-Commerce by customizing the data available in user.adminData. By default it is an empty object when the admin is connected. But this object can be configured by injecting a custom AuthenticatedAdminDataInterface in your Magento DI.

To do so, in a custom Magento module, you must:

• Add a new preference in your etc/di.xml:

etc/di.xml

<preference for="FrontCommerce\AdminBar\Api\AuthenticatedAdminDataInterface" type="Acme\ModuleName\Model\AuthenticatedAdminData" />

• Create the new class that will implement AuthenticatedAdminDataInterface and fetch the additional admin data. Since you are in a Magento context, feel free to inject any class you may need to fetch the relevant data. To keep it simple here, we've just set a hardcoded id.

<?php
namespace Acme\ModuleName\Model;

use FrontCommerce\AdminBar\Api\AuthenticatedAdminDataInterface;

class AuthenticatedAdminData implements AuthenticatedAdminDataInterface
{
    public function getAdminData()
    {
        return [
            'adminId' => '13'
        ];
    }
}

• If you are not in developer mode in magento, please make sure to rerun bin/magento setup:di:compile command.
• You will then be able to use the following in Front-Commerce for any authenticated admin users.

const adminData = user instanceof MagentoAdmin && user.adminData;
console.log(adminData.adminId);

Simulating different admin data

In development mode, one can call the /__front-commerce/injectRole url with a data query parameter to inject custom JSON serialized data in the admin session. It is useful to simulate different admin information locally without worrying about session cookies issues.

via Browser

Here is a sample url request which you can run in your browser to achieve this:

http://localhost:4000/__front-commerce/injectRole?data={"foo":"bar"}

via Curl

Here is a sample curl request to achieve this:

curl -v 'http://localhost:4000/__front-commerce/injectRole?data=%7B%22foo%22%3A%22bar%22%7D'

Please note that this feature is only enabled if the environment is configured and NODE_ENV is development.