Create React App: HTTPS and self signed certificate

Question

I'm trying to run a react app created with create-react-app template in HTTPS mode:

set SSL_CRT_FILE=.cert/server.pfx&&set HTTPS=true&&npm start

I created this certificate using Power Shell. Although there are lot's of explanations how to run react app with certificate created using OpenSSL, it's not an option for me as I'm not allowed to install OpenSSL on my machine.

Cert creation:

$cert = New-SelfSignedCertificate -CertStoreLocation Cert:\LocalMachine\My -DnsName "localhost" -FriendlyName "MyCert" -NotAfter (Get-Date).AddYears(10)
$pwd = ConvertTo-SecureString -String `my_password' -Force -AsPlainText
Export-PfxCertificate -Cert $cert -FilePath C:\my_react_app\.cert\server.pfx -Password $pwd

Then I imported this certificate to Personal certificates and copied it to Trusted Root Certification Authorities. But when I open the project in browser I'm getting NET::ERR_CERT_AUTHORITY_INVALID

What I'm doing wrong?

p.s.

Exporting as a .cer file also doesn't work:

Export-Certificate -Cert $cert -FilePath C:\my_react_app\.cert\server.cer

Answer 1

The following commands in PowerShell (run as admin) will create a root certificate and its associated trusted certificate:

1. We create a new root trusted cert:

$rootCert = New-SelfSignedCertificate -Subject 'CN=TestRootCA,O=TestRootCA,OU=TestRootCA' -KeyExportPolicy Exportable -KeyUsage CertSign,CRLSign,DigitalSignature -KeyLength 2048 -KeyUsageProperty All -KeyAlgorithm 'RSA' -HashAlgorithm 'SHA256'  -Provider 'Microsoft Enhanced RSA and AES Cryptographic Provider'

2. We create the cert from the root trusted cert chain:

New-SelfSignedCertificate -DnsName "localhost" -FriendlyName "MyCert" -CertStoreLocation "cert:\LocalMachine\My" -Signer $rootCert -TextExtension @("2.5.29.37={text}1.3.6.1.5.5.7.3.1") -Provider "Microsoft Strong Cryptographic Provider" -HashAlgorithm "SHA256" -NotAfter (Get-Date).AddYears(10)

3. We copy the thumbprint returned by the last command

4. (If neccesary) We remove the last association ip/port/cert:

netsh http delete sslcert ipport=0.0.0.0:3002

5. We associate the new certificate with any ip and your port, 3002 for example (the appid value does not matter, is any valid guid):

netsh http add sslcert ipport=0.0.0.0:3002 appid='{214124cd-d05b-4309-9af9-9caa44b2b74a}' certhash=here_the_copied_thumbprint

6. Now, you must drag and drop the TestRootCA from the Personal/Certificates folder to Trusted Root Certification Authorities/Certificates.

These commands also resolve the error ERR_CERT_WEAK_SIGNATURE_ALGORITHM returned later by Google Chrome because the certificate is created with SHA256 instead of SHA1