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/sp...)
[📖 Documentation/Guide] ( / solving-keycloak-webauthn-challenges-intro... )
[Discord]( / discord )
🔥 Don’t forget to Like & Subscribe for more Keycloak, Angular & Security Tutorials! 🔥
#Keycloak #MFA #WebAuthn #OTP #EmailMFA #CustomProvider #DirectGrant #Authentication #Angular #WebSecurity