1

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.

enter image description here

chakshu jain
  • 365
  • 2
  • 14
  • 1
    Do you see any errors in the console? Such an error will generally be shown if the manifest.json is malformed or can't be fetched. In your case, it seems valid, so I guess it cannot be fetched. For the exact error message, you should check the console/networks tab in your browser. – mikheevm Apr 26 '23 at 14:27
  • Checked, so I am getting CORS error. Cross-Origin Resource Sharing error: MissingAllowOriginHeader. I even shifted the manifest.json in public folder but it is still showing CORS error but working when i simply try the url in browser. Browser shows data in manifest.json file. – chakshu jain Apr 27 '23 at 12:16
  • Then it would be best if you looked up how to properly set up CORS on the server you're using – mikheevm Apr 28 '23 at 08:52

1 Answers1

0

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>"
}
  1. 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',
  },
]
  1. 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.

chakshu jain
  • 365
  • 2
  • 14