Implementing WebAuthn, OTP & Email MFA in Keycloak (Custom Provider + Angular Example)

Implementing WebAuthn, OTP & Email MFA in Keycloak (Custom Provider + Angular Example)

In this video, I demonstrate how to implement WebAuthn, OTP, and Email MFA using a custom Keycloak provider with the Direct Grant flow, with an Angular frontend example. This approach goes beyond standard Keycloak configurations, enabling a fully customized multi-factor authentication (MFA) solution.

🔹 What you’ll learn:
✅ Setting up a custom Keycloak provider for MFA
✅ Integrating WebAuthn for passwordless authentication
✅ Implementing OTP authentication (TOTP/HOTP)
✅ Configuring email-based MFA for additional security
✅ Using the Direct Grant flow to authenticate users programmatically
✅ Implementing Angular UI for MFA authentication

🔹 Why this is unique:
Most Keycloak implementations rely on default authentication flows, but this video explores creating a custom provider to handle MFA, giving you complete control over authentication logic while integrating it seamlessly with an Angular frontend.

🔹 Resources & Code:
[🔗 GitHub Repo] (https://gitlab.com/code-with-bisky/spring-boot/fido/angular-app/-/tree/feature/keycloak-passkeys?ref_type=heads)
[📖 Documentation/Guide] (https://medium.com/@marshallchabanga/solving-keycloak-webauthn-challenges-introducing-the-multi-factor-authentication-rest-api-29f5a0405986)
[Discord](https://discord.gg/5QEp5xK8Hw)

🔥 Don’t forget to Like & Subscribe for more Keycloak, Angular & Security Tutorials! 🔥

#Keycloak #MFA #WebAuthn #OTP #EmailMFA #CustomProvider #DirectGrant #Authentication #Angular #WebSecurity