React Native localhost SSL certificate is Invalid

Question

I've started this React Native project using Expo a few weeks ago, and everything was going fine until yesterday.

When I ran expo start, I got the Metro Bundler as usual, and I click "Run in web browser", as usual, the VS Code terminal prompted me with a password input for a localhost certificate thing. I have no idea what it was, but there was this link to some local SSL signing tool, that I also don't know anything about. Even with the link I wasn't sure what password I was supposed to type in, so I just pressed enter without typing anything and that's where I'm at now.

I can't run my app in the browser anymore. Whenever I try to do so, I get this:

And the log only has this:

PS D:\Projects\GroceryApp\GroceryApp.Web> expo start

Starting project at D:\Projects\GroceryApp\GroceryApp.Web

Expo DevTools is running at http://localhost:19003

Opening DevTools in the browser... (press shift-d to disable)

Ensuring auto SSL certificate is created (you might need to re-run with sudo)

Starting Metro Bundler on port 19001.

debug Watch mode is not supported in this environment

debug Checking for a newer version of React Native

debug Current version: 0.61.4

debug No release cache found

debug No release cache found

debug Checking for newer releases on GitHub

debug No release cache found

debug Saving "6d6386b01438c6ef0acd213d304b5839" to cache

debug No release cache found

debug No release cache found

debug Latest release: 0.60.0

Tunnel ready.

exp://192.168.0.108:19000

QRCODE

To run the app with live reloading, choose one of:

• Sign in as @redacted in Expo client on Android or iOS. Your projects will automatically appear in the "Projects" tab.

• Scan the QR code above with the Expo app (Android) or the Camera app (iOS).

• Press a for Android emulator, or w to run on web.

• Press e to send a link to your phone with email.

Expo Press ? to show a list of all available commands.

Logs for your project will appear below. Press Ctrl+C to exit.

So, I tried forcing it by pressing W, and then I get this:

Attempting to open the project in a web browser...

(node:15116) UnhandledPromiseRejectionWarning: Error: The certificate "D:\Projects\GroceryApp\GroceryApp.Web.expo\web\development\ssl\cert-localhost.pem" is invalid.

error:2007E073:BIO routines:BIO_new_mem_buf:null parameter at validateKeyAndCerts (C:\Users\Redacted\AppData\Roaming\npm\node_modules\expo-cli\node_modules@expo\webpack-config\src\addons\withDevServer.ts:26:11) at getHttpsConfig (C:\Users\Redacted\AppData\Roaming\npm\node_modules\expo-cli\node_modules@expo\webpack-config\src\addons\withDevServer.ts:62:5) at createDevServer (C:\Users\Redacted\AppData\Roaming\npm\node_modules\expo-cli\node_modules@expo\webpack-config\src\addons\withDevServer.ts:191:12) at Object.withDevServer (C:\Users\Redacted\AppData\Roaming\npm\node_modules\expo-cli\node_modules@expo\webpack-config\src\addons\withDevServer.ts:101:31) at Object. (C:\Users\Redacted\AppData\Roaming\npm\node_modules\expo-cli\node_modules@expo\webpack-config\src\webpack.config.ts:419:21) at Generator.next () at C:\Users\Redacted\AppData\Roaming\npm\node_modules\expo-cli\node_modules@expo\webpack-config\webpack\webpack.config.js:8:71
at new Promise () at __awaiter (C:\Users\Redacted\AppData\Roaming\npm\node_modules\expo-cli\node_modules@expo\webpack-config\webpack\webpack.config.js:4:12) at Object.default_1 [as default] (C:\Users\Redacted\AppData\Roaming\npm\node_modules\expo-cli\node_modules@expo\webpack-config\webpack\webpack.config.js:87:12) at C:\Users\Redacted\AppData\Roaming\npm\node_modules\expo-cli\node_modules@expo\webpack-config\src\index.ts:21:71 at Generator.next () at C:\Users\Redacted\AppData\Roaming\npm\node_modules\expo-cli\node_modules@expo\webpack-config\webpack\index.js:8:71 at new Promise () at __awaiter (C:\Users\Redacted\AppData\Roaming\npm\node_modules\expo-cli\node_modules@expo\webpack-config\webpack\index.js:4:12)
at createWebpackConfigAsync (C:\Users\Redacted\AppData\Roaming\npm\node_modules\expo-cli\node_modules@expo\webpack-config\webpack\index.js:26:12)

(node:15116) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 6)

(node:15116) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Which makes sense, because that file is completely empty.

Sorry for long post, I wanted to make sure all the logs were here.

Help please. Thanks in advance.

Answer 1

The first time you start an expo app with the option --https it will create a certificate which initially is not trusted, and on my Mac, that certificate lives here:

/Users/myname/Library/Application Support/devcert/certificate-authority/certificate.cert

This certificate is used to generate the .pem files used by the expo server for TLS (which live here: .expo/tls). Deleting the .pem files is useless because expo will just regenerate them from the dev cert it created the first time you tried to serve the app with TLS/https. Hence, the solution is to add the dev cert to the list of trusted roots, which can be done (on osx) with:

sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain -p ssl -p basic '/Users/myname/Library/Application Support/devcert/certificate-authority/certificate.cert'

Maybe someone can chime in with a similar solution for Windows and/or Linix.