We've updated our Terms of Service. By continuing to use our services, you agree to the updated Terms.

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

note

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:

NPM
Yarn
01npm install magic-sdk @magic-ext/webauthn

#Initialization

Create your Magic SDK instance with the WebAuthn extension:

Javascript
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.

Javascript
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.

Javascript
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.

Javascript
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}

#Resources