@Bean
open fun filterChain(http: HttpSecurity): SecurityFilterChain {
	http {
		webAuthn {
			rpName = "Spring Security Relying Party"
			rpId = "example.com"
			allowedOrigins = setOf("https://example.com")
		}
	}
}

@Bean
open fun userDetailsService(): UserDetailsService {
	val userDetails = User.withDefaultPasswordEncoder()
		.username("user")
		.password("password")
		.roles("USER")
		.build()
	return InMemoryUserDetailsManager(userDetails)
}

dependencies {
    implementation("org.springframework.boot:spring-boot-starter-web")
    implementation("org.springframework.boot:spring-boot-starter-security")
    implementation("com.fasterxml.jackson.module:jackson-module-kotlin")
    implementation("com.webauthn4j:webauthn4j-core:0.28.6.RELEASE") 
}

src/
├── controller/
│   └── WebAuthnController.kt
├── dto/
│   ├── RegistrationFinishRequest.kt
│   └── AssertionFinishRequest.kt
├── store/
│   ├── ChallengeService.kt
│   └── UserStorage.kt

@Configuration
@EnableWebSecurity
class SecurityConfig {

    @Bean
    fun filterChain(http: HttpSecurity): SecurityFilterChain {
        http.csrf().disable()
            .authorizeRequests()
            .antMatchers("/api/webauthn/**").permitAll()
            .anyRequest().authenticated()
    }
}

package com.example.dto

data class RegistrationFinishRequest(
    val username: String,
    val id: ByteArray,
    val rawId: ByteArray,
    val type: String,
    val response: AttestationResponse
)

data class AttestationResponse(
    val clientDataJSON: ByteArray,
    val attestationObject: ByteArray
)

package com.example.dto

data class AssertionFinishRequest(
    val username: String,
    val id: ByteArray,
    val rawId: ByteArray,
    val response: AssertionResponse,
    val type: String,
    val clientExtensionResults: Map<String, Any>? = null
)

data class AssertionResponse(
    val clientDataJSON: ByteArray,
    val authenticatorData: ByteArray,
    val signature: ByteArray,
    val userHandle: ByteArray? = null
)

package com.example.store

import com.webauthn4j.data.attestation.authenticator.Authenticator
import org.springframework.stereotype.Component
import java.util.concurrent.ConcurrentHashMap

@Component
class UserStorage {
    private val map = ConcurrentHashMap<String, Authenticator>()

    fun save(username: String, authenticator: Authenticator) {
        map[username] = authenticator
    }

    fun get(username: String): Authenticator? {
        return map[username]
    }
}

package com.example.store

import com.webauthn4j.data.client.challenge.Challenge
import com.webauthn4j.data.client.challenge.DefaultChallenge
import org.springframework.stereotype.Service
import java.util.concurrent.ConcurrentHashMap

@Service
class ChallengeService {
    private val challengeMap = ConcurrentHashMap<String, Challenge>()

    fun generate(username: String): Challenge {
        val challenge = DefaultChallenge()
        challengeMap[username] = challenge
        return challenge
    }

    fun get(username: String): Challenge? = challengeMap[username]

    fun clear(username: String) {
        challengeMap.remove(username)
    }
}

package com.example.controller

import com.example.dto.AssertionFinishRequest
import com.example.dto.RegistrationFinishRequest
import com.example.store.ChallengeService
import com.example.store.UserStorage
import com.webauthn4j.WebAuthnManager
import com.webauthn4j.data.*
import com.webauthn4j.data.attestation.authenticator.Authenticator
import com.webauthn4j.data.client.Origin
import com.webauthn4j.data.client.challenge.Challenge
import com.webauthn4j.data.client.challenge.DefaultChallenge
import com.webauthn4j.data.extension.client.AuthenticationExtensionsClientInputs
import org.springframework.web.bind.annotation.*
import java.util.*

@RestController
@RequestMapping
class WebAuthnController(
    private val challengeService: ChallengeService,
    private val userStorage: UserStorage
) {
    private val manager = WebAuthnManager.createNonStrictWebAuthnManager()

    @PostMapping("/api/webauthn/register/options")
    fun registerOptions(@RequestBody username: String): PublicKeyCredentialCreationOptions {
        //Do Something
    }

    @PostMapping("/api/webauthn/register/finish")
    fun registerFinish(@RequestBody req: RegistrationFinishRequest): String {
        //Do Something
    }

    @PostMapping("/api/webauthn/login/options")
    fun loginOptions(@RequestBody username: String): PublicKeyCredentialRequestOptions {
        //Do Something
    }

    @PostMapping("/api/webauthn/login/finish")
    fun loginFinish(@RequestBody req: AssertionFinishRequest): String {
        //Do Something
    }
}

private val manager = WebAuthnManager.createNonStrictWebAuthnManager()

@PostMapping("/api/webauthn/register/options")
fun startRegistration(@RequestBody username: String): PublicKeyCredentialCreationOptions {
    val challenge = challengeService.generate(username)
    val user = UserIdentity(
        id = UUID.nameUUIDFromBytes(username.toByteArray()).toString().toByteArray(),
        name = username,
        displayName = username
    )

    return PublicKeyCredentialCreationOptions(
        rp = RelyingPartyIdentity("localhost", "My WebAuthn App"),
        user = user,
        challenge = challenge,
        pubKeyCredParams = listOf(PublicKeyCredentialParameters("public-key", COSEAlgorithmIdentifier.ES256)),
        timeout = 60000L,
        excludeCredentials = emptyList(),
        authenticatorSelection = AuthenticatorSelectionCriteria(null, false, UserVerificationRequirement.PREFERRED),
        attestation = AttestationConveyancePreference.NONE,
        extensions = RegistrationExtensionsClientInputs()
    )
}

@PostMapping("/api/webauthn/register/finish")
fun finishRegistration(@RequestBody request: RegistrationFinishRequest): String {
    val challenge = challengeService.get(req.username) ?: error("Challenge not found")

    val credential = RegistrationRequest(
        credentialId = req.id,
        clientDataJSON = req.response.clientDataJSON,
        attestationObject = req.response.attestationObject,
        clientExtensionsJSON = null
    )

    val parameters = RegistrationParameters(
        challenge = challenge,
        origin = Origin("http://localhost:3000"),
        rpId = "localhost",
        userVerificationRequired = false
    )

    val result = manager.validate(credential, parameters)
    val authenticator = result.attestationObject.authenticatorData.attestedCredentialData
        ?: error("Attested credential missing")
    val stored = Authenticator(
        credentialId = req.id,
        attestedCredentialData = authenticator,
        counter = result.attestationObject.authenticatorData.signCount
    )

    userStorage.save(req.username, stored)
    challengeService.clear(req.username)
    return "Registration success"
}

@PostMapping("/api/webauthn/login/options")
fun loginOptions(@RequestBody username: String): PublicKeyCredentialRequestOptions {
    val challenge = challengeService.generate(username)
    val authenticator = userStorage.get(username) ?: error("User not found")

    val allow = listOf(
        PublicKeyCredentialDescriptor(
            type = PublicKeyCredentialType.PUBLIC_KEY,
            id = authenticator.credentialId,
            transports = null
        )
    )

    return PublicKeyCredentialRequestOptions(
        challenge = challenge,
        timeout = 60000L,
        rpId = "localhost",
        allowCredentials = allow,
        userVerification = UserVerificationRequirement.PREFERRED,
        extensions = AuthenticationExtensionsClientInputs()
    )
}

@PostMapping("/api/webauthn/login/finish")
fun loginFinish(@RequestBody req: AssertionFinishRequest): String {
val challenge = challengeService.get(req.username) ?: error("Challenge not found")
    val authenticator = userStorage.get(req.username) ?: error("Authenticator not found")

    val credential = AuthenticationRequest(
        credentialId = req.id,
        clientDataJSON = req.response.clientDataJSON,
        authenticatorData = req.response.authenticatorData,
        signature = req.response.signature,
        clientExtensionsJSON = null
    )

    val parameters = AuthenticationParameters(
        challenge = challenge,
        origin = Origin("http://localhost:3000"),
        rpId = "localhost",
        authenticator = authenticator,
        userVerificationRequired = false
    )

    manager.validate(credential, parameters)
    challengeService.clear(req.username)
    return "Login success"
}

npm install axios @simplewebauthn/browser react-router-dom
npm install --save-dev @types/react-router-dom

export interface PublicKeyCredentialCreationOptionsJSON {
  challenge: string;
  rp: { name: string; id: string };
  user: { id: string; name: string; displayName: string };
  pubKeyCredParams: { type: string; alg: number }[];
  timeout?: number;
  attestation?: string;
  authenticatorSelection?: {
    authenticatorAttachment?: string;
    requireResidentKey?: boolean;
    userVerification?: string;
  };
}

export interface PublicKeyCredentialRequestOptionsJSON {
  challenge: string;
  rpId: string;
  allowCredentials?: Array<{
    id: string;
    type: string;
    transports?: string[];
  }>;
  timeout?: number;
  userVerification?: 'required' | 'preferred' | 'discouraged';
}

import React, { useState } from 'react';
import axios from 'axios';
import { startRegistration, RegistrationResponseJSON } from '@simplewebauthn/browser';
import { PublicKeyCredentialCreationOptionsJSON } from '../types/webauthn';

const RegisterPage: React.FC = () => {
  const [username, setUsername] = useState('');

  const handleRegister = async () => {
    try {
      const optionsRes = await axios.post<PublicKeyCredentialCreationOptionsJSON>(
        '/api/webauthn/register/options',
        username,
        { headers: { 'Content-Type': 'application/json' } }
      );

      const attestationResponse: RegistrationResponseJSON = await startRegistration(optionsRes.data);

      const payload = {
        username,
        id: attestationResponse.id,
        rawId: attestationResponse.rawId,
        type: attestationResponse.type,
        response: {
          clientDataJSON: attestationResponse.response.clientDataJSON,
          attestationObject: attestationResponse.response.attestationObject,
        },
      };

      await axios.post('/api/webauthn/register/finish', payload);
      alert('Registration complete');
    } catch (e) {
      console.error(e);
      alert('Registration failed');
    }
  };

  return (
    <div>
      <h2>Register</h2>
      <input
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button disabled={!username} onClick={handleRegister}>
        Register with Passkey
      </button>
    </div>
  );
};

export default RegisterPage;

import React, { useState } from 'react';
import axios from 'axios';
import { startAuthentication, AuthenticationResponseJSON } from '@simplewebauthn/browser';
import { PublicKeyCredentialRequestOptionsJSON } from '../types/webauthn';
import { useNavigate } from 'react-router-dom';

const LoginPage: React.FC = () => {
  const [username, setUsername] = useState('');
  const navigate = useNavigate();

  const handleLogin = async () => {
    try {
      const optionsRes = await axios.post<PublicKeyCredentialRequestOptionsJSON>(
        '/api/webauthn/login/options',
        username,
        { headers: { 'Content-Type': 'application/json' } }
      );

      const assertionResponse: AuthenticationResponseJSON = await startAuthentication(optionsRes.data);

      const payload = {
        username,
        id: assertionResponse.id,
        rawId: assertionResponse.rawId,
        response: {
          clientDataJSON: assertionResponse.response.clientDataJSON,
          authenticatorData: assertionResponse.response.authenticatorData,
          signature: assertionResponse.response.signature,
          userHandle: assertionResponse.response.userHandle,
        },
        type: assertionResponse.type,
        clientExtensionResults: assertionResponse.clientExtensionResults,
      };

      await axios.post('/api/webauthn/login/finish', payload);
      alert('Login successful');
      navigate('/main');
    } catch (e) {
      console.error(e);
      alert('Login failed');
    }
  };

  return (
    <div>
      <h2>Login</h2>
      <input
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button disabled={!username} onClick={handleLogin}>
        Login with Passkey
      </button>
    </div>
  );
};

export default LoginPage;

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import RegisterPage from './pages/RegisterPage';
import LoginPage from './pages/LoginPage';

const MainPage: React.FC = () => (
  <div>
    <h1>Welcome 🎉</h1>
  </div>
);

const App: React.FC = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<RegisterPage />} />
        <Route path="/login" element={<LoginPage />} />
        <Route path="/main" element={<MainPage />} />
        <Route path="*" element={<Navigate to="/" />} />
      </Routes>
    </Router>
  );
};

export default App;