WebAuthn
WebAuthn
#Overview
WebAuthn allows your users to sign up and log in to your web app with a FIDO2 device (YubiKey) or with biometrics (Touch ID). This API enables strong authentication with public key cryptography, enabling passwordless authentication and secure multi-factor authentication. For example, Passkeys utilize WebAuthn to enable passwordless authentication using device biometrics.
Use a YubiKey or your finger to log in
#Compatibility
WebAuthn is currently only supported on desktop, and will be supported on mobile devices soon.
WebAuthn SDK methods are available via the WebAuthn module of the Web client-side SDK.
#Use Cases
- Passwordless, biometric authentication using public key cryptography
#Usage
#Installation
WebAuthn works as an extension to Magic SDK. To add WebAuthn to your Magic integration, follow these steps to install the WebAuthn Extension.
Install the Magic WebAuthn extension:
01npm install magic-sdk @magic-ext/webauthn
#Initialization
Create your Magic SDK instance with the WebAuthn extension:
01import { Magic } from 'magic-sdk';
02import { WebAuthnExtension } from '@magic-ext/webauthn';
03
04const magic = new Magic('YOUR_API_KEY', {
05 extensions: [new WebAuthnExtension()],
06});
#Register new users
Register new users with the registerNewUser function in the webauthn module. You must provide the user's selected username and can optionally provide a nickname for the device.
01// register a user by their username
02try {
03 const token = await magic.webauthn.registerNewUser({ username: 'username' });
04} catch (e) {
05 // Handle errors if required!
06}
#Authenticate users
Authenticate users with the login method in the webauthn module. You must provide the user's username.
01// login a user by their username
02try {
03 const token = await magic.webauthn.login({ username: 'username' });
04} catch (e) {
05 // Handle errors if required!
06}
#Get User Metadata
Get WebAuthn-specific metadata with the getMetadata method in the webauthn module. The response includes the user's username as well as device info like the device ID, device nickname, etc.
01// Initiates the flow to get webauthn metadata for current account.
02try {
03 const metadata = await magic.webauthn.getMetadata();
04
05 /* webauthn metadata shape
06 {
07 "devicesInfo": [
08 {
09 "id": "EjI_EFJhB6cdCj6rHPRHUcFCn6NnywALuWjQyPe0_dI=",
10 "nickname": "",
11 "transport": "internal",
12 "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36"
13 }
14 ],
15 "username": "username"
16 }
17 */
18} catch (e) {
19 // Handle errors if required!
20}