Baseline Widely available *
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The create()
method of the CredentialsContainer
interface creates a new credential, which can then be stored and later retrieved using the navigator.credentials.get()
method. The retrieved credential can then be used by a website to authenticate a user.
This method supports three different types of credential:
Note that the Federated Credential Management API (FedCM) supersedes the federated credential type.
Syntax Parametersoptions
Optional
An object that contains options for the requested new Credentials
object. It can contain the following properties:
signal
Optional
An AbortSignal
object instance that allows an ongoing create()
operation to be aborted. An aborted operation may complete normally (generally if the abort was received after the operation finished) or reject with an AbortError
DOMException
.
Each of the following properties represents a credential type being created. One and only one of them must be specified:
federated
Optional
A FederatedCredentialInit
object containing requirements for creating a federated identify provider credential.
password
Optional
A PasswordCredentialInit
object containing requirements for creating a password credential.
publicKey
Optional
A PublicKeyCredentialCreationOptions
object containing requirements for creating a public key credential. Causes the create()
call to request that the user agent creates new credentials via an authenticator â either for registering a new account or for associating a new asymmetric key pair with an existing account.
Note: Usage of create()
with the publicKey
parameter may be blocked by a publickey-credentials-create
Permissions Policy set on your server.
A Promise
that resolves with one of the following:
FederatedCredential
, if the credential type was federated
.PasswordCredential
, if the credential type was password
.PublicKeyCredential
, if the credential type was publicKey
.If no credential object can be created, the promise resolves with null
.
TypeError
In the case of a PasswordCredential
creation request, id
, origin
, or password
were not provided (empty).
NotAllowedError
DOMException
Possible causes include:
publickey-credentials-create
Permissions Policy.allow
attribute does not set an appropriate publickey-credentials-create
policy.<iframe>
does not have transient activation.residentKey
is set to required
in the create()
call's PublicKeyCredentialCreationOptions
option), but the user does not have a security key that supports discoverable credentials, and cancels the operation.AbortError
DOMException
The operation was aborted.
This example creates a password credential from a PasswordCredentialInit
object.
const credInit = {
id: "1234",
name: "Serpentina",
origin: "https://example.org",
password: "the last visible dog",
};
const makeCredential = document.querySelector("#make-credential");
makeCredential.addEventListener("click", async () => {
const cred = await navigator.credentials.create({
password: credInit,
});
console.log(cred.name);
// Serpentina
console.log(cred.password);
// the last visible dog
});
Creating a federated credential
This example creates a federated credential from a FederatedCredentialInit
object.
const credInit = {
id: "1234",
name: "Serpentina",
origin: "https://example.org",
protocol: "openidconnect",
provider: "https://provider.example.org",
};
const makeCredential = document.querySelector("#make-credential");
makeCredential.addEventListener("click", async () => {
const cred = await navigator.credentials.create({
federated: credInit,
});
console.log(cred.name);
console.log(cred.provider);
});
Creating a public key credential
This example creates a public key credential from a PublicKeyCredentialCreationOptions
object.
const publicKey = {
challenge: challengeFromServer,
rp: { id: "acme.com", name: "ACME Corporation" },
user: {
id: new Uint8Array([79, 252, 83, 72, 214, 7, 89, 26]),
name: "jamiedoe",
displayName: "Jamie Doe",
},
pubKeyCredParams: [{ type: "public-key", alg: -7 }],
};
const publicKeyCredential = await navigator.credentials.create({ publicKey });
The create()
call, if successful, returns a promise that resolves with a PublicKeyCredential
object instance, representing a public key credential that can later be used to authenticate a user via a WebAuthn get()
call. Its PublicKeyCredential.response
property contains an AuthenticatorAttestationResponse
object providing access to several useful pieces of information including the authenticator data, public key, transport mechanisms, and more.
navigator.credentials.create({ publicKey }).then((publicKeyCredential) => {
const response = publicKeyCredential.response;
// Access attestationObject ArrayBuffer
const attestationObj = response.attestationObject;
// Access client JSON
const clientJSON = response.clientDataJSON;
// Return authenticator data ArrayBuffer
const authenticatorData = response.getAuthenticatorData();
// Return public key ArrayBuffer
const pk = response.getPublicKey();
// Return public key algorithm identifier
const pkAlgo = response.getPublicKeyAlgorithm();
// Return permissible transports array
const transports = response.getTransports();
});
Some of this data will need to be stored on the server for future authentication operations against this credential â for example the public key, the algorithm used, and the permissible transports.
Note: See Creating a key pair and registering a user for more information about how the overall flow works.
Specifications Browser compatibilityRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4