Getting "The app doesn't support Safe App functionality"

Question

My app already exist, built using Next.js and I want to add Safe App functionality to it in order to list on Safe web interface. Referred the docs and added both manifest.json and config-overrides.js files with following contents respectively as per the docs:

{
  "name": "Mesha",
  "description": "Financial stack for Web3 teams",
  "iconPath": "public/images/mesh_icon.svg",
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET",
  "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
}

/* config-overrides.js */

module.exports = {
    // The function to use to create a webpack dev server configuration when running the development
    // server with 'npm run start' or 'yarn start'.
    // Example: set the dev server to use a specific certificate in https.
    devServer: function (configFunction) {
        // Return the replacement function for create-react-app to use to generate the Webpack
        // Development Server config. "configFunction" is the function that would normally have
        // been used to generate the Webpack Development server config - you can use it to create
        // a starting configuration to then modify instead of having to create a config from scratch.
        return function (proxy, allowedHost) {
            // Create the default config by calling configFunction with the proxy/allowedHost parameters
            const config = configFunction(proxy, allowedHost);

            config.headers = {
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Methods': 'GET',
                'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
            };

            // Return your customised Webpack Development Server config.
            return config;
        };
    },
    webpack: (config, _env) => {
        return config;
    },
};

Then started my app locally using yarn dev command. Here dev inside package.json file under scripts property defined like this "dev": "next dev". App started on http://localhost:3000. Then I used Ngrok with command ngrok http 3000 to give my app a public url like this https://b630-2406-16c0-101-957-48ef-57a4-f240-c4f6.in.ngrok.io.

Now when I use ngrok url in the Safe's Add custom app input then getting following message in the screenshot. I also tried and referred other safe app repos mentioned here and also installed Safe Apps Provider SDK but no luck. I am currently struggling to make it working and move forward. Any guidance or help is appreciated🙏.

Answer 1

Found the solution after getting idea from mikheevm's comment. It is like, steps mentioned in the Safe docs are not applicable for Next.js based apps as they have a dedicated file next.config.js to make it working. So, I did below things.

1. Added manifest.json file in /public folder with following content:

{
  "name": "<app name>",
  "description": "<app description>",
  "iconPath": "<path to app logo>"
}

2. Referred this and added headers in the headers array like this:

[
  {
    key: "Access-Control-Allow-Origin",
    value: '*',
  },
  {
    key: "Access-Control-Allow-Methods",
    value: 'GET',
  },
  {
    key: "Access-Control-Allow-Headers",
    value: 'X-Requested-With, content-type, Authorization',
  },
]

3. Updated Content security policy's frame-ancestors to enable safe url like this:

'self' https://app.safe.global;

I think Safe guys should consider updating documentation as this might be confusing for someone who is not familiar with these things.

Hope this will help others.