lukas.angerer
/
PasswordlessWebLogin


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Passwordless Demo</title>
</head>
<body>
    <h1>Passwordless Demo</h1>
    <p>
        This demo uses the FIDO2 browser APIs <code>navigator.credentials.create</code> and
        <code>navigator.credentials.get</code> to implement a <em>passwordless</em> login with non-resident keys.
    </p>
    <p>
        <strong>Step 1:</strong> Choose a username and click the "Register" button. If the username is still available,
        your browser will prompt you to select a device to use as a <em>passkey</em>. After authorizing your passkey
        device your account is created.
    </p>
    <p>
        <strong>Step 2:</strong> With the same username that you used for the registration, click the "Login" button.
        The same browser prompt will show up to perform the login with your passkey device. If the login was successful,
        you will receive a JWT from the server that will be shown below.
    </p>
    <div>
        <label for="username">Login:</label>
        <input id="username" type="text" placeholder="Choose Username" minlength="3" />
    </div>
    <div>
        <button id="register">Register</button>
        <button id="login">Login</button>
    </div>
    <hr />
    <div>
        <p>
            <strong>Step 3:</strong> Once you are authenticated with the server, you can click the
            "Access Protected API" button to test the effectiveness of your JWT. You have just used 
        </p>
        <pre><code id="userState">[not authenticated]</code></pre>
        <div>
            <button id="protected">Access Protected API</button>
        </div>
        <pre><code id="response">[empty]</code></pre>
    </div>
    <script src="main.js"></script>
</body>
</html>