Passkeys вместо паролей: безопасный и быстрый вход

// ./app/composables/usePasskey.ts

import {
    startRegistration,
    startAuthentication,
    type PublicKeyCredentialCreationOptionsJSON,
    type PublicKeyCredentialRequestOptionsJSON,
    type RegistrationResponseJSON,
    type AuthenticationResponseJSON
} from '@simplewebauthn/browser';
import type {PasskeyVerifyResponse} from "~~/types/passkey";

export const usePasskey = () => {

    const registerPasskey = async (payload: { username: string }) => {
        // 1. Получаем опции от сервера
        const options = await $fetch<PublicKeyCredentialCreationOptionsJSON>(
            '/api/passkey/register/options',
            {
                method: 'POST',
                body: payload,
            },
        );

        // 2. Запускаем WebAuthn регистрацию в браузере
        const attestationResponse: RegistrationResponseJSON =
            await startRegistration({ optionsJSON: options });

        // 3. Отправляем результат обратно на сервер
        const verify = await $fetch<PasskeyVerifyResponse>(
            '/api/passkey/register/verify',
            {
                method: 'POST',
                body: { username: payload.username, response: attestationResponse },
            },
        );

        if (!verify.ok) {
            throw new Error(verify.error ?? 'Verification failed');
        }

        return verify;
    };

    const loginPasskey = async () => {
        // 1. Запросить у сервера challenge и опции
        const options = await $fetch<PublicKeyCredentialRequestOptionsJSON>(
            '/api/passkey/auth/options',
            { method: 'POST' },
        );

        // 2. Вызвать WebAuthn API
        const assertionResponse: AuthenticationResponseJSON =
            await startAuthentication({ optionsJSON: options });

        // 3. Отправить результат на сервер для проверки
        const verify = await $fetch<PasskeyVerifyResponse>(
            '/api/passkey/auth/verify',
            {
                method: 'POST',
                body: { response: assertionResponse },
            },
        );

        if (!verify.ok) {
            throw new Error(verify.error ?? 'Authentication failed');
        }

        return verify;
    };

    return {registerPasskey, loginPasskey};
};

// ./app/components/Passkey/PasskeyAuth.vue

<script setup lang="ts">
import { ref } from 'vue';
import { usePasskey } from "~/composables/usePasskey";
import type { PasskeyVerifyResponse } from '~~/types/passkey';

const username = ref('');
const result = ref<string | null>(null);
const raw = ref<PasskeyVerifyResponse | null>(null);
const loading = ref(false);

const { registerPasskey, loginPasskey } = usePasskey();

const handleRegister = async () => {
  try {
    loading.value = true;
    const res = await registerPasskey({ username: username.value });
    result.value = `✅ Зарегистрирован passkey для ${username.value}`;
    raw.value = res;
  } catch (err: unknown) {
    result.value = `❌ Ошибка регистрации: ${(err as Error).message}`;
    raw.value = null;
  } finally {
    loading.value = false;
  }
};

const handleLogin = async () => {
  try {
    loading.value = true;
    const res = await loginPasskey();
    result.value = `✅ Вход выполнен как ${res.username}`;
    raw.value = res;
  } catch (err: unknown) {
    result.value = `❌ Ошибка входа: ${(err as Error).message}`;
    raw.value = null;
  } finally {
    loading.value = false;
  }
};
</script>

<template>
  <div class="max-w-xl mx-auto mt-10 p-6 bg-white shadow-md rounded-lg">
    <h1 class="text-xl font-bold text-center mb-6">🔑 Passkeys Demo (<a href="https://yupopov.ru" target="_blank" class="underline">yupopov.ru</a>)</h1>

    <div class="mb-4">
      <label for="username" class="block text-sm font-medium mb-1">Имя пользователя (для регистрации)</label>
      <input
          v-model="username"
          id="username"
          type="text"
          placeholder="Введите имя"
          class="w-full border border-gray-300 p-2 rounded focus:outline-none focus:ring focus:ring-blue-500"
      />
    </div>
    <div class="grid grid-cols-2 gap-6 mb-6">
      <button
          @click="handleRegister"
          :disabled="!username || loading"
          class="px-6 bg-blue-600 text-white py-2 rounded hover:bg-blue-700 disabled:opacity-50"
      >
        Зарегистрировать Passkey
      </button>
      <button
          @click="handleLogin"
          :disabled="loading"
          class="px-6 bg-green-600 text-white py-2 rounded hover:bg-green-700 disabled:opacity-50"
      >
        Войти с Passkey
      </button>
    </div>

    <div v-if="result" class="text-center mb-4">
      {{ result }}
    </div>

    <div v-if="raw" class="mt-4">
      <h2 class="text-sm font-semibold mb-1">Ответ сервера:</h2>
      <pre class="bg-gray-100 text-xs p-3 rounded overflow-x-auto">{{ raw }}</pre>
    </div>
  </div>
</template>

// ./server/api/passkey/register/options.post.ts

import { defineEventHandler, readBody, setCookie } from 'h3';
import { generateRegistrationOptions } from '@simplewebauthn/server';
import type { GenerateRegistrationOptionsOpts, PublicKeyCredentialCreationOptionsJSON } from '@simplewebauthn/server';
import { useRuntimeConfig } from '#imports';

export default defineEventHandler(async (event): Promise<PublicKeyCredentialCreationOptionsJSON> => {
    const { username } = await readBody<{ username?: string }>(event);
    if (!username) {
        throw createError({ statusCode: 400, statusMessage: 'username is required' });
   }

    const config = useRuntimeConfig(event);
    const rpID = config.rpId;
    const rpName = config.rpName;

    const opts: GenerateRegistrationOptionsOpts = {
        rpName,
        rpID,
        userName: username
    };

    const options = await generateRegistrationOptions(opts);

    setCookie(event, 'webauthn_reg_challenge', options.challenge, {
        httpOnly: true,
        sameSite: 'lax',
        secure: true,
        path: '/',
        maxAge: 5 * 60, 
    });

    return options;
});

// ./server/api/passkey/register/verify.post.ts

import { defineEventHandler, readBody, getCookie, setCookie } from 'h3';
import { verifyRegistrationResponse } from '@simplewebauthn/server';
import type { VerifiedRegistrationResponse } from '@simplewebauthn/server';
import { useRuntimeConfig } from '#imports';
import type {RegistrationResponseJSON} from "@simplewebauthn/server";
import {fakeDb} from "~~/server/utils/db";

export default defineEventHandler(async (event) => {
    const body = await readBody<{ username?: string; response?: RegistrationResponseJSON }>(event);
    const { username, response } = body ?? {};
    if (!username || !response) {
        throw createError({ statusCode: 400, statusMessage: 'username и response обязательны' });
    }

    const expectedChallenge = getCookie(event, 'webauthn_reg_challenge');
    if (!expectedChallenge) {
        throw createError({ statusCode: 400, statusMessage: 'Отсутствует challenge (cookie)' });
    }

    const config = useRuntimeConfig(event);
    const origin = config.origin;

    const verification: VerifiedRegistrationResponse = await verifyRegistrationResponse({
        response,
        expectedChallenge,
        expectedOrigin: origin,
    });

    setCookie(event, 'webauthn_reg_challenge', '', { path: '/', httpOnly: true, secure: true, maxAge: 0 });

    if (!verification.verified || !verification.registrationInfo) {
        throw createError({ statusCode: 400, statusMessage: 'Верификация регистрации не пройдена' });
    }

    const {
        credential,
    } = verification.registrationInfo;

    fakeDb.add({
        username,
        credentialId: credential.id,
        publicKey: credential.publicKey,
        counter:credential.counter,
    });

    return {
        ok: true,
        ...credential
    };
});

// ./server/api/passkey/auth/options.post.ts

import { defineEventHandler, setCookie } from 'h3';
import { generateAuthenticationOptions } from '@simplewebauthn/server';
import type { GenerateAuthenticationOptionsOpts, PublicKeyCredentialRequestOptionsJSON } from '@simplewebauthn/server';

export default defineEventHandler(async (event): Promise<PublicKeyCredentialRequestOptionsJSON> => {
    const config = useRuntimeConfig(event);
    const rpID = config.rpId;

    const opts: GenerateAuthenticationOptionsOpts = {
        rpID
    };

    const options = await generateAuthenticationOptions(opts);

    setCookie(event, 'webauthn_auth_challenge', options.challenge, {
        httpOnly: true,
        sameSite: 'lax',
        secure: true,
        path: '/',
        maxAge: 5 * 60,
    });
    return options;
});

// ./server/api/passkey/auth/verify.post.ts

import { defineEventHandler, readBody, getCookie, setCookie } from 'h3';
import {verifyAuthenticationResponse, type WebAuthnCredential} from '@simplewebauthn/server';
import type { AuthenticationResponseJSON } from '@simplewebauthn/browser';
import {fakeDb} from "~~/server/utils/db";

export default defineEventHandler(async (event) => {
    const body = await readBody<{ response?: AuthenticationResponseJSON }>(event);
    const { response } = body ?? {};
    if (!response) {
        throw createError({ statusCode: 400, statusMessage: 'response is required' });
    }

    const expectedChallenge = getCookie(event, 'webauthn_auth_challenge');
    if (!expectedChallenge) {
        throw createError({ statusCode: 400, statusMessage: 'Missing challenge (cookie)' });
    }

    const config = useRuntimeConfig(event);
    const rpID = config.rpId;
    const origin = config.origin;

    const stored = fakeDb.getByCredentialId(response.id);
    if (!stored) {
        throw createError({ statusCode: 400, statusMessage: 'Unknown credentialId' });
    }

    const credential:WebAuthnCredential = {
        id: stored.credentialId,
        publicKey: stored.publicKey,
        counter: stored.counter,
    };

    const verification = await verifyAuthenticationResponse({
        response,
        expectedChallenge,
        expectedOrigin: origin,
        expectedRPID: rpID,
        credential,
    });

    setCookie(event, 'webauthn_auth_challenge', '', { path: '/', httpOnly: true, secure: true, maxAge: 0 });

    if (!verification.verified) {
        throw createError({ statusCode: 400, statusMessage: 'Authentication failed' });
    }

    fakeDb.updateCounter(stored.credentialId, verification.authenticationInfo.newCounter);

    return {
        ok: true,
        username: stored.username,
    };
});

# .env

RP_NAME="My New Shop"
RP_ID="localhost"
ORIGIN="http://localhost:3000"

// ./types/passkey.ts

import type {Base64URLString} from "@simplewebauthn/server";

export type PasskeyVerifyResponse = {
    ok: boolean;
    username: string;
    credentialId: Base64URLString;
    publicKey: Uint8Array;
    counter: number;
    error?: string;
};

// ./server/utils/db.ts
import type {Base64URLString} from "@simplewebauthn/server";

type StoredCredential = {
    username: string;
    credentialId: Base64URLString;
    publicKey: Uint8Array;
    counter: number;
};

class FakeDb {
    private credentials = new Map<string, StoredCredential>();

    add(cred: { username: any; credentialId: string; publicKey: Uint8Array; counter: number }) {
        this.credentials.set(cred.credentialId, cred);
    }

    getByCredentialId(id: string): StoredCredential | undefined {
        return this.credentials.get(id);
    }

    updateCounter(credentialId: string, newCounter: number) {
        const cred = this.credentials.get(credentialId);
        if (cred) {
            cred.counter = newCounter;
            this.credentials.set(credentialId, cred);
        }
    }
}

export const fakeDb = new FakeDb();