feat: add passkey option to login method chooser (#2100)

Author: FreddyDevelop

backend/flow_api/flow/credential_usage/action_continue_with_login_identifier.go

@@ -5,6 +5,7 @@ import (
 	"fmt"
 	auditlog "github.com/teamhanko/hanko/backend/audit_log"
 	"github.com/teamhanko/hanko/backend/flow_api/flow/shared"
+	"github.com/teamhanko/hanko/backend/flow_api/services"
 	"github.com/teamhanko/hanko/backend/flowpilot"
 	"github.com/teamhanko/hanko/backend/persistence/models"
 	"regexp"
@@ -197,13 +198,48 @@ func (a ContinueWithLoginIdentifier) Execute(c flowpilot.ExecutionContext) error
 	}
 
 	if deps.Cfg.Privacy.OnlyShowActualLoginMethods {
+		emailAvailable := deps.Cfg.Email.UseForAuthentication && userModel != nil && userModel.Emails.GetPrimary() != nil
+		passwordAvailable := deps.Cfg.Password.Enabled && userModel != nil && userModel.PasswordCredential != nil
+		passkeysAvailable := deps.Cfg.Passkey.Enabled && userModel != nil && len(userModel.GetPasskeys()) > 0
+		availableMethods := 0
+		if emailAvailable {
+			availableMethods += 1
+		}
+		if passwordAvailable {
+			availableMethods += 1
+		}
+		if passkeysAvailable {
+			availableMethods += 1
+		}
+
 		switch {
-		case deps.Cfg.Email.UseForAuthentication && userModel != nil && userModel.Emails.GetPrimary() != nil && deps.Cfg.Password.Enabled && userModel.PasswordCredential != nil:
+		case availableMethods > 1:
 			return c.Continue(shared.StateLoginMethodChooser)
-		case deps.Cfg.Email.UseForAuthentication && userModel != nil && userModel.Emails.GetPrimary() != nil:
+		case emailAvailable:
 			return a.continueToPasscodeConfirmation(c)
-		case deps.Cfg.Password.Enabled && userModel != nil && userModel.PasswordCredential != nil:
+		case passwordAvailable:
 			return c.Continue(shared.StateLoginPassword)
+		case passkeysAvailable:
+			//goland:noinspection GoDfaNilDereference
+			userModel.WebauthnCredentials = userModel.GetPasskeys()
+			params := services.GenerateRequestOptionsPasskeyParams{Tx: deps.Tx, User: userModel}
+
+			sessionDataModel, requestOptions, err := deps.WebauthnService.GenerateRequestOptionsPasskey(params)
+			if err != nil {
+				return fmt.Errorf("failed to generate webauthn request options: %w", err)
+			}
+
+			err = c.Stash().Set(shared.StashPathWebauthnSessionDataID, sessionDataModel.ID.String())
+			if err != nil {
+				return fmt.Errorf("failed to stash webauthn_session_data_id: %w", err)
+			}
+
+			err = c.Payload().Set("request_options", requestOptions)
+			if err != nil {
+				return fmt.Errorf("failed to set request_options payload: %w", err)
+			}
+
+			return c.Continue(shared.StateLoginPasskey)
 		}
 	} else {
 		if deps.Cfg.Email.UseForAuthentication && deps.Cfg.Password.Enabled {

backend/flow_api/flow/credential_usage/action_webauthn_generate_request_options.go

@@ -2,6 +2,7 @@ package credential_usage
 
 import (
 	"fmt"
+	"github.com/gofrs/uuid"
 	"github.com/teamhanko/hanko/backend/flow_api/flow/shared"
 	"github.com/teamhanko/hanko/backend/flow_api/services"
 	"github.com/teamhanko/hanko/backend/flowpilot"
@@ -22,15 +23,30 @@ func (a WebauthnGenerateRequestOptions) GetDescription() string {
 func (a WebauthnGenerateRequestOptions) Initialize(c flowpilot.InitializationContext) {
 	deps := a.GetDeps(c)
 
-	if !c.Stash().Get(shared.StashPathWebauthnAvailable).Bool() || !deps.Cfg.Passkey.Enabled {
+	if !c.Stash().Get(shared.StashPathWebauthnAvailable).Bool() || !deps.Cfg.Passkey.Enabled ||
+		(c.Stash().Get(shared.StashPathUserID).Exists() && !c.Stash().Get(shared.StashPathUserHasPasskey).Bool() && c.GetCurrentState() == shared.StateLoginMethodChooser && deps.Cfg.Privacy.OnlyShowActualLoginMethods) {
 		c.SuspendAction()
 	}
 }
 
 func (a WebauthnGenerateRequestOptions) Execute(c flowpilot.ExecutionContext) error {
 	deps := a.GetDeps(c)
 
-	params := services.GenerateRequestOptionsPasskeyParams{Tx: deps.Tx}
+	params := services.GenerateRequestOptionsPasskeyParams{Tx: deps.Tx, User: nil}
+
+	userIdStash := c.Stash().Get(shared.StashPathUserID)
+	if userIdStash.Exists() && deps.Cfg.Privacy.OnlyShowActualLoginMethods {
+		userId := uuid.FromStringOrNil(userIdStash.String())
+		userModel, err := deps.Persister.GetUserPersisterWithConnection(deps.Tx).Get(userId)
+		if err != nil {
+			return err
+		}
+		if userModel != nil {
+			// Filter webauthn credentials and only use passkeys and not security keys, as only passkeys are allowed
+			userModel.WebauthnCredentials = userModel.GetPasskeys()
+			params.User = userModel
+		}
+	}
 
 	sessionDataModel, requestOptions, err := deps.WebauthnService.GenerateRequestOptionsPasskey(params)
 	if err != nil {

backend/flow_api/flow/flows.go

@@ -35,6 +35,7 @@ var CredentialUsageSubFlow = flowpilot.NewSubFlow(shared.FlowCredentialUsage).
 	State(shared.StateLoginMethodChooser,
 		credential_usage.ContinueToPasswordLogin{},
 		credential_usage.ContinueToPasscodeConfirmation{},
+		credential_usage.WebauthnGenerateRequestOptions{},
 		shared.Back{},
 	).
 	State(shared.StateLoginPassword,

backend/flow_api/services/webauthn.go

@@ -10,12 +10,14 @@ import (
 	"github.com/teamhanko/hanko/backend/config"
 	"github.com/teamhanko/hanko/backend/persistence"
 	"github.com/teamhanko/hanko/backend/persistence/models"
+	"reflect"
 	"strings"
 	"time"
 )
 
 type GenerateRequestOptionsPasskeyParams struct {
-	Tx *pop.Connection
+	Tx   *pop.Connection
+	User *models.User
 }
 
 type GenerateRequestOptionsSecurityKeyParams struct {
@@ -115,7 +117,7 @@ func (s *webauthnService) generateRequestOptions(tx *pop.Connection, user webaut
 	var options *protocol.CredentialAssertion
 	var sessionData *webauthn.SessionData
 	var err error
-	if user != nil {
+	if !reflect.ValueOf(user).IsNil() {
 		options, sessionData, err = s.cfg.Webauthn.Handler.BeginLogin(user, opts...)
 	} else {
 		options, sessionData, err = s.cfg.Webauthn.Handler.BeginDiscoverableLogin(opts...)
@@ -141,7 +143,7 @@ func (s *webauthnService) GenerateRequestOptionsPasskey(p GenerateRequestOptions
 	userVerificationRequirement := protocol.UserVerificationRequirement(s.cfg.Passkey.UserVerification)
 
 	return s.generateRequestOptions(p.Tx,
-		nil,
+		p.User,
 		webauthn.WithUserVerification(userVerificationRequirement),
 	)
 }
@@ -205,7 +207,7 @@ func (s *webauthnService) VerifyAssertionResponse(p VerifyAssertionResponseParam
 	}
 
 	sessionData := sessionDataModel.ToSessionData()
-	if p.IsMFA {
+	if p.IsMFA || len(sessionData.AllowedCredentialIDs) > 0 {
 		_, err = s.cfg.Webauthn.Handler.ValidateLogin(webAuthnUser, *sessionData, credentialAssertionData)
 	} else {
 		_, err = s.cfg.Webauthn.Handler.ValidateDiscoverableLogin(

frontend/elements/src/pages/LoginMethodChooser.tsx

@@ -46,6 +46,16 @@ const LoginMethodChooserPage = (props: Props) => {
     await hanko.flow.run(nextState, stateHandler);
   };
 
+  const onPasskeySelectSubmit = async (event: Event) => {
+    event.preventDefault();
+    setLoadingAction("passkey-submit");
+    const nextState = await flowState.actions
+      .webauthn_generate_request_options(null)
+      .run();
+    setLoadingAction(null);
+    await hanko.flow.run(nextState, stateHandler);
+  };
+
   const onBackClick = async (event: Event) => {
     event.preventDefault();
     setLoadingAction("back");
@@ -84,6 +94,18 @@ const LoginMethodChooserPage = (props: Props) => {
             {t("labels.password")}
           </Button>
         </Form>
+        <Form
+          hidden={!flowState.actions.webauthn_generate_request_options?.(null)}
+          onSubmit={onPasskeySelectSubmit}
+        >
+          <Button
+            secondary={true}
+            uiAction={"passkey-submit"}
+            icon={"passkey"}
+          >
+            {t("labels.passkey")}
+          </Button>
+        </Form>
       </Content>
       <Footer>
         <Link

frontend/frontend-sdk/src/lib/flow-api/types/action.ts

@@ -68,6 +68,7 @@ export interface ProfileInitActions {
 export interface LoginMethodChooserActions {
   readonly continue_to_password_login?: Action<null>;
   readonly continue_to_passcode_confirmation?: Action<null>;
+  readonly webauthn_generate_request_options?: Action<null>;
   readonly back: Action<null>;
 }