Customization
Overview
Like the other SuperTokens authentication recipes, you can customize the WebAuthn flow through different configuration options and overrides.
The following page describes the options that you can change and the different scenarios enabled through customization.
Backend recipe configuration
The backend recipe accepts the following properties during initialization:
All the properties are optional.
import supertokens from "supertokens-node";
import Session from "supertokens-node/recipe/session";
import WebAuthn from "supertokens-node/recipe/webauthn";
supertokens.init({
framework: "express",
supertokens: {
// https://try.supertokens.com is for demo purposes. Replace this with the address of your core instance (sign up on supertokens.com), or self host a core.
connectionURI: "https://try.supertokens.com",
// apiKey: <API_KEY(if configured)>,
},
appInfo: {
// learn more about this on https://supertokens.com/docs/session/appinfo
appName: "<YOUR_APP_NAME>",
apiDomain: "<YOUR_API_DOMAIN>",
websiteDomain: "<YOUR_WEBSITE_DOMAIN>",
apiBasePath: "/auth",
websiteBasePath: "/auth"
},
recipeList: [
WebAuthn.init({
getOrigin: () => {
return "https://example.com";
},
getRelyingPartyId: () => {
return "example.com";
},
getRelyingPartyName: () => {
return "example";
},
}),
Session.init() // initializes session features
]
});
Credential generation
The client generates the credentials based on the options provided by the backend SDK.
The frontend SDK uses the navigator.credentials.created function to resolve this.
To change the options used to generate credentials, you need to override the registerOptions function.
import supertokens from "supertokens-node";
import Session from "supertokens-node/recipe/session";
import WebAuthn from "supertokens-node/recipe/webauthn";
supertokens.init({
framework: "express",
supertokens: {
// https://try.supertokens.com is for demo purposes. Replace this with the address of your core instance (sign up on supertokens.com), or self host a core.
connectionURI: "https://try.supertokens.com",
// apiKey: <API_KEY(if configured)>,
},
appInfo: {
// learn more about this on https://supertokens.com/docs/session/appinfo
appName: "<YOUR_APP_NAME>",
apiDomain: "<YOUR_API_DOMAIN>",
websiteDomain: "<YOUR_WEBSITE_DOMAIN>",
apiBasePath: "/auth",
websiteBasePath: "/auth"
},
recipeList: [
WebAuthn.init({
override: {
functions: (originalImplementation) => {
return {
...originalImplementation,
registerOptions: (input) => {
return originalImplementation.registerOptions({
...input,
attestation: "direct",
residentKey: "required",
timeout: 10 * 1000,
userVerification: "required",
displayName: "John Doe",
supportedAlgorithms: [-257],
relyingPartyId: 'example.com',
relyingPartyName: 'example',
origin: 'https://example.com',
});
},
};
},
},
}),
Session.init() // initializes session features
]
});
Input properties
Credential validation
When a user attempts to login, the authenticator uses their credential to sign a challenge on the client.
The frontend SDK uses the navigator.credentials.get function to resolve this.
The server generates the options for signing the challenge through the backend SDK, and then sends them to the client.
To change those, you need to override the signInOptions function.
import supertokens from "supertokens-node";
import Session from "supertokens-node/recipe/session";
import WebAuthn from "supertokens-node/recipe/webauthn";
supertokens.init({
framework: "express",
supertokens: {
// https://try.supertokens.com is for demo purposes. Replace this with the address of your core instance (sign up on supertokens.com), or self host a core.
connectionURI: "https://try.supertokens.com",
// apiKey: <API_KEY(if configured)>,
},
appInfo: {
// learn more about this on https://supertokens.com/docs/session/appinfo
appName: "<YOUR_APP_NAME>",
apiDomain: "<YOUR_API_DOMAIN>",
websiteDomain: "<YOUR_WEBSITE_DOMAIN>",
apiBasePath: "/auth",
websiteBasePath: "/auth"
},
recipeList: [
WebAuthn.init({
override: {
functions: (originalImplementation) => {
return {
...originalImplementation,
signInOptions: (input) => {
return originalImplementation.signInOptions({
...input,
timeout: 10 * 1000,
userVerification: "required",
relyingPartyId: 'example.com',
origin: 'https://example.com',
});
},
};
},
},
}),
Session.init() // initializes session features
]
});