navigator.credentials is null on local server

Question

here is my problem : I try to use the Credential Management API to access to authenticators on my webapp : navigator.credentials.create() and navigator.credentials.get().

I have no problem when I execute my code on localhost, and the webapp is asking for my security key. But when I am on my local server, with the exact same code, navigator.credentials is undefined although I am using the same browser.

Uncaught TypeError: Cannot read property 'create' of undefined

(window.PasswordCredential || window.FederatedCredential) returns false, only on my server 192.168.x.x but I don't know why. I am on Chrome 74.

How could I resolve this problem ?
Thank you for your help.

Current

Answer 1

WebAuthn javascript will work only when used with HTTPS or on the localhost hostname (in this case HTTPS is not required).

It seems that you are using an IP address.

Publisher

Thank you. This works. The issue with my code was that I was using "localhost.com" instead of "localhost" and it was throwing "navigator.credentials is undefined" error. – Razid

Answer 2

For chrome it's possible to enable navigator.credentials on HTTP (http://example.com) by following steps:

1. Enter chrome://flags/#unsafely-treat-insecure-origin-as-secure in the address bar.
2. Add http://example.com in the list. Separate multiple locations with comma.
3. Select Enable.
4. Restart chrome.

Predict

Answer 3

in addition to what @Tangui said, if you want to run secure context on your localhost, you can use openssl with these steps:

openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes

and config your build tool (for me vite) to use this ssl certificate while serving the app on dev mode:

in vite defineConfig:

server: {
        https: {
            key: fs.readFileSync(path.resolve(__dirname, 'key.pem')),
            cert: fs.readFileSync(path.resolve(__dirname, 'cert.pem')),
        },
        host: '0.0.0.0',  // This allows your local network devices to connect
        port: 3000        // Change port if necessary
    },

after that, you will be able to run your dev server with https, so that something like navigator.credentials is not undefined and you're good to go

Livi