How we use CodeSigningPlugin with react-native@0.76.5 & Repack@5.0.0-rc.2?

[baka3k]

I created sample React by command:

npx react-native TestApp --skip-install
cd TestApp
npx @callstack/repack-init@5.0.0-rc.2

After the project was created, I also tried generating the index.bundle file using a command:

react-native bundle --platform android --dev false --minify true --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle

The sample project works well with React Native version 0.76.5.
The package.json file is shown below

{
  "name": "TestApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "react": "18.3.1",
    "react-native": "0.76.5",
    "react-native-safe-area-context": "^5.0.0",
    "react-native-screens": "^4.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@callstack/repack": "^5.0.0-rc.2",
    "@callstack/repack-init": "5.0.0-rc.2",
    "@react-native-community/cli": "15.0.1",
    "@react-native-community/cli-platform-android": "15.0.1",
    "@react-native-community/cli-platform-ios": "15.0.1",
    "@react-native/babel-preset": "0.76.5",
    "@react-native/eslint-config": "0.76.5",
    "@react-native/metro-config": "0.76.5",
    "@react-native/typescript-config": "0.76.5",
    "@rspack/core": "^1.1.5",
    "@rspack/plugin-react-refresh": "^1.0.1",
    "@swc/helpers": "^0.5.15",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "babel-loader": "^9.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.3.1",
    "terser-webpack-plugin": "5.3.10",
    "typescript": "5.0.4",
    "webpack": "5.93.0"
  },
  "engines": {
    "node": ">=18"
  }
}

I tried to add config to rspack.config.mjs file

new Repack.plugins.ChunksToHermesBytecodePlugin({
        enabled: true,
        test: /\.(js)?bundle$/,
      }),

It works well, bundle transformed to binary
But when I tried add

new Repack.plugins.CodeSigningPlugin({
        enabled: true,
        privateKeyPath: './private_key.pem',
      }),

Nothing happened, Have no error,
But bundle is not signed, I can not find signature & 'RCSSB' in bundle file

So, how we use CodeSigningPlugin with react-native@0.76.5 & Repack@5.0.0-rc.2?

[jbroma]

Thanks for lettings us know, I'll verify this and get back to you

[jbroma]

@baka3k I've checked and CodeSigning seems to be working in our super app showcase, can you verify you've configured everything properly based on https://github.com/callstack/super-app-showcase?

Remember to generate RSA256 keys and put the in the root of the repo and then run bundle:ios in one of the mini-apps like auth or dashboard

[baka3k]

Thanks @jbroma , let me check it again.

One more question,

The situation we're facing is as follows:

We have multiple independent MiniApp development teams, and we want each team to use their own unique private key.
This means that when verifying a bundle, we need to pass in the public key of the respective team (which is fetched from the server).
However, when examining the repack source code, we found that the 'verify' function is currently only allowing for a single public key that is hardcoded into the source code, as shown below."

fun verifyBundle(context: Context, token: String?, fileContent: ByteArray?) {
            if (token == null) {
                throw Exception("The bundle verification failed because no token for the bundle was found.")
            }

            val stringPublicKey = getPublicKeyFromStringsIfExist(context)
                    ?: throw Exception("The bundle verification failed because PublicKey was not found in the bundle. Make sure you've added the PublicKey to the res/values/strings.xml under RepackPublicKey key.")

            val publicKey = parsePublicKey(stringPublicKey)
                    ?: throw Exception("The bundle verification failed because the PublicKey is invalid.")

            val claims: Map<String, Any?> = verifyAndDecodeToken(token, publicKey)

            val contentHash = claims["hash"] as String?
                    ?: throw Exception("The bundle verification failed because the token is invalid.")

            val fileHash = computeHash(fileContent)

            if (contentHash != fileHash) {
                throw Exception("The bundle verification failed because the bundle hash is invalid.")
            }
        }

               context: Context
       ): String? {
           val packageName: String = context.packageName
           val resId: Int =
                   context.resources.getIdentifier("RepackPublicKey", "string", packageName)
           if (resId != 0) {
               return context.getString(resId).ifEmpty {
                   null
               }
           }
           return null
       }

Is there a way to make the transmission of this public key dynamic?
For example:

• MiniAppA verification using PublickeyA
• MiniAppB verification using PublickeyB
• MiniAppC verification using PublickeyC

Thanks & BestRegards,

[jbroma]

You are correct, we only support one public key now. Could you please submit a feature request which would also explain how would you like this to work? Then we can agree on some spec for that and proceed with it 👍

[baka3k]

Thank you, I will submit new feature request, let's continue this discussion in a new ticket
I think allowing verification with multiple public keys will increase the flexibility of development teams and significantly enhance security

Thanks & BestRegard,

[baka3k]

Hi @jbroma ,
I have rechecked the application you provided, and Codesigning ONLY works with this configuration

new Repack.plugins.ModuleFederationPluginV2({
        name: 'shopping',
        filename: 'index.c.bundle',
        dts: false,
        /**
         * This is a list of modules that will be shared between remote containers.
         */
        exposes: {
          './App': 'App',
        },
        remotes: {
          auth: `auth@http://localhost:9003/${platform}/mf-manifest.json`,
        },
      }),

JSBundle signing is only possible with this configuration.
Is this the specs? or bug at Repack@5.0.0-rc.2?
Is there a way to sign individual standalone bundles?

Thanks & BestRegards,

[jbroma]

This is the correct behaviour, we don't sign the index.bundle since they contain the main entry to the app and need to be bundled with the app itself so there is no point in doing code signing there.

compiler.hooks.assetEmitted.tapPromise(
      { name: pluginName, stage: 20 },
      async (file, { outputPath, content, compilation }) => {
		// 👇 this is usually equal to `index.bundle`
        const mainBundleName = compilation.outputOptions.filename as string;
        if (!this.shouldSignFile(file, mainBundleName, excludedChunks)) {
          return;
        }
      // ...
	  }
);

[baka3k]

@jbroma
Thanks for you confirmation, but I think index.bundle can be dynamically loaded from the server instead of being statically bundled within the app.
You may refer to the following :

How do you think about it?

[jbroma]

if you are referring to the index.bundle of mini apps then that is not the case - the entry for mini apps is generated during build time and is called usually miniapp.container.bundle. If you want to use the MiniApp as a remote then index.bundle (or whatever is inside config output.filename) is not needed - it's only useful when running the app in standalone mode

[baka3k]

Got it.
My approach isn't limited to React Native for a Super App.
We can explore Flutter, React JS, and more....
And We have to ensure that all downloaded mini-apps are verified
Thanks for your help