AppCheck Simulator IOS with expo

[wortkotze]

`on iOS
App Check may be used in CI environments by following the upstream documentation to configure a debug token shared with your app in the CI environment.

In certain react-native testing scenarios it may be difficult to access the shared secret, but the react-native-firebase testing app for e2e testing does successfully fetch App Check tokens via setting an environment variable and initializing the debug provider before firebase configure in AppDelegate.m for iOS.`

sry for the second dump question. Does anyone has an working example how to get expo with eas configured to get also the simulator working with AppCheck / Device Check?
We did everything and its working when everything is deployed but our simulator not so its hard to change the backend to a secured mode ;)

[mikehardy]

Hey there

It's not all different between non-Expo and Expo. At the end, you're running an app on a device. There is not a magically-different way to do everything just because Expo is involved, though it does seem that way to me sometimes

Configure an AppCheck debug token in the Firebase web console
Start the app on the simulator using simctl
Make sure to pass the shared secret debug token in to the simctl launch line as an environment variable that will make it to the app
Example:

react-native-firebase/package.json

Line 45 in ef7895c

"tests:ios:test:debug": "cd tests && SIMCTL_CHILD_GULGeneratedClassDisposeDisabled=1 SIMCTL_CHILD_FIRAAppCheckDebugToken=698956B2-187B-49C6-9E25-C3F3530EEBAF yarn detox test --configuration ios.sim.debug --loglevel warn --inspect",

[wortkotze]

thx for showing this.
I have an own env in expo where I can add the token to.
this is what I have done already. I think the problem is that I need to do a change in the AppDelegate.m what I can't do so easy.

I'm not sure is there probably anyone who created a boilerplate with expo and eas with all the functions this would be so helpfull. Everything is working really great but all this minor things are really hard to get done

[mikehardy]

What I posted involves no change to AppDelegate. That's an environment variable that I believe the firebase-ios-sdk will use if it exists. I looked in our Test App (you may, as well) and we do not have AppCheck code in there. But it works. So that's my evidence on my assertion.

The AppDelegate.m change that you must make for react-native-firebase should be handled by the Expo config plugin for our @react-native-firebase/app module here.

[wortkotze]

hm ok then I will have another try. Can you tell me the exact name of the variable that I need to set?

[mikehardy]

I have provided deep links to working code from which you can see variable names in actual use

[wortkotze]

@mikehardy I tried to get it working with different options ;)

thats my sh file
export SIMCTL_CHILD_FIRAAppCheckDebugToken="tokenid" xcrun simctl boot deviceid xcrun simctl getenv booted SIMCTL_CHILD_FIRAAppCheckDebugToken xcrun simctl getenv booted FIRAAppCheckDebugToken

this is working and sets an env variable for the simulator with the name FIRAAppCheckDebugToken as wished and documented.
but the simulator is still not going through as accepted device so when I activate app check in the backend the simulator will not work anymore :(

probably did I do something wrong ?

thx
Stephan

[mikehardy]

I don't sorry - I've got working code that I pointed to and that's the only way I know how to do it, using simctl to launch the app on the simulator, passing the vars through that way so simctl passes them on (after stripping the prefix)

[wortkotze]

ok I try further probably I find a way - if yes I will document it here ;) - thx for your effort

[wortkotze]

@mikehardy sry for disturbing you one more time. I was checking everything the whole weekend and I found the following in the app-check package from react native firebase

`// TODO
// - set up DeviceCheckProvider and Debug provider
// FIRAppCheckDebugProviderFactory *providerFactory =
// [[FIRAppCheckDebugProviderFactory alloc] init];
// [FIRAppCheck setAppCheckProviderFactory:providerFactory];

// Write a custom provider factory, and allow the AppAttest provider`

https://github.com/invertase/react-native-firebase/blob/ef7895cd49eed3a4d103df624e52315250c68ab3/packages/app-check/ios/RNFBAppCheck/RNFBAppCheckModule.m

As far as I understood the documentation from firebase we need to initiate the debug provider when we are running in the simulator. Could it be that just this code is missing ? so that the environment variable that we set is not really used?

thx for your thoughts

[wortkotze]

@mikehardy thx for your support

I think I found now a solution for expo eas.
It was needed to create a config plugin to be able to build an dev client including the debugprovider

here is the code for the plugin

//this plugin enables the debug provider when the environment variable FIREBASE_APP_CHECK_DEBUG is set to true
//in this way you can build your developer client via eas including this provider and the production version without
//
// ...
// "build": {
//     "simulatorIOS": {
//       "developmentClient": true,
//       "distribution": "internal",
//       "ios": {
//         "simulator": true,
//         "cocoapods": "1.11.2"
//       },
//       "env": {
//         "FIRAAppCheckDebugToken": "XXXXXXXXXXXXXXXXXXXXXXXXXX",
//         "FIREBASE_APP_CHECK_DEBUG": "true"
//       }
//     },
// ...

const {
  withAppDelegate,
  createRunOncePlugin,
} = require("@expo/config-plugins");

const RNFI_CONFIGURE = `[FIRApp configure];\n`;
const RNFI_CONFIGURE_WithDEBUGAPPCHECK = `// Install the AppCheck debug provider so we may get tokens on iOS Simulators for testing.\n// See https://firebase.google.com/docs/app-check/ios/debug-provider for instructions on configuring a debug token\n// This *must* be done before the '[FIRApp configure]' line, so it must be done in AppDelegate for any app\n
// that wants to enforce AppCheck restrictions on their backend while also doing testing on iOS Simulator.\nFIRAppCheckDebugProviderFactory *providerFactory = [[FIRAppCheckDebugProviderFactory alloc] init];\n[FIRAppCheck setAppCheckProviderFactory:providerFactory];\n\n`;

const withCustomAppCheck = (config) => {
  return withAppDelegate(config, async (config) => {
    if (
      config.modResults.contents.includes(RNFI_CONFIGURE) &&
      process.env.FIREBASE_APP_CHECK_DEBUG === "true"
    ) {
      const block = RNFI_CONFIGURE_WithDEBUGAPPCHECK + RNFI_CONFIGURE;
      config.modResults.contents = config.modResults.contents.replace(
        RNFI_CONFIGURE,
        block
      );
    }

    return config;
  });
};

module.exports = createRunOncePlugin(withCustomAppCheck);

In this way you can develop including app check active.

[mikehardy]

That looks fantastic! If you want to post a PR like the other expo plugins (you can search for PRs that added them) I'd be happy to add it so it's in-tree here and others could benefit + help maintain it

[wortkotze]

will do the next days.

[stefancata92]

It didn't work for me... other solutions to run the ios simulator when appCheck is enable ?

[wortkotze]

sry for not replying so fast. I just checked it out the last days. For me the above solution is still working.
I'm using the plugin above for the expo build, in this way the debug provider is available in the simulator.

Then you need to start the simulator with the environment variable
`export APP_CHECK_DEBUG_TOKEN=B035D45D-A8EF-4246-8406-BC7F798E410E
export SIMCTL_CHILD_APP_CHECK_DEBUG_TOKEN=B035D45D-A8EF-4246-8406-BC7F798E410E
export SIMCTL_CHILD_FIRAAppCheckDebugToken
xcrun simctl boot A37D81A8-268F-4327-ABDA-4F3A9E85C004
xcrun simctl launch A37D81A8-268F-4327-ABDA-4F3A9E85C004 app.hapahapa

xcrun simctl getenv booted FIRAAppCheckDebugToken`

and then it should work

[qalqi]

In app.json

expo.plugins: ["./withCustomAppCheck"]

in withCustomAppCheck.js

const {
    withAppDelegate,
    createRunOncePlugin,
} = require("@expo/config-plugins");

const RNFI_CONFIGURE = `[FIRApp configure];\n`;
const RNFI_CONFIGURE_WithDEBUGAPPCHECK = `[RNFBAppCheckModule sharedInstance];\n`;

const withCustomAppCheck = (config) => {
    return withAppDelegate(config, async (config) => {
        // Add import
        if (!config.modResults.contents.includes('#import "RNFBAppCheckModule.h"')) {
            config.modResults.contents = config.modResults.contents.replace(
                /#import "AppDelegate.h"/g,
                `#import "AppDelegate.h"\n#import "RNFBAppCheckModule.h"`,
            );
        }
        if (
            config.modResults.contents.includes(RNFI_CONFIGURE) && !config.modResults.contents.includes(RNFI_CONFIGURE_WithDEBUGAPPCHECK)
        ) {
            const block = RNFI_CONFIGURE_WithDEBUGAPPCHECK + RNFI_CONFIGURE;
            config.modResults.contents = config.modResults.contents.replace(
                RNFI_CONFIGURE,
                block
            );
        }

        return config;
    });
};

module.exports = createRunOncePlugin(withCustomAppCheck);

After changing above two files, we need sync the ios folder with command

npx expo prebuild

and remaining steps as
https://rnfirebase.io/app-check/usage

In iOS simulator it test pass for version
"@react-native-firebase/app-check": "^18.5.0",

[bensaine]

Thanks, this is great ! In this solution, .env params are not used, how are you achieving the same solution without using .env variables like in the original solution #6184 (reply in thread) ? Surely we need to put the debug token somewhere. I'm also not sure how you are determining if a debug token should be used. Thanks

[harelw]

@qalqi This works perfectly, thanks! This code or something like it should be added as an Expo official plugin to the library.

[mikehardy]

@harelw Expo support is community provided in this open source library :-)

This code or something like it should be added as an Expo official plugin to the library.

In an open source context, this should read more like "I will see what I can do to post a PR with this code as a config plugin here"

[harelw]

Ha, yea, that would have been my response if I was confident I'd have time to do that anytime soon.

[Eli-code1]

Works perfect for me @qalqi! Thanks so much!