Making Passwords Optional: A Guide to Modern Authentication with Hanko

In this evolving landscape of web security we are witnessing a significant shift away from traditional password based authentication. But why you ask? while passwords have been the main security of any digital product for many years but they come with inherent vulnerability and user experience challenges as well. So in this article I will show you folks how to implement a password optional authentication using Hanko and why this approach is useful in the future.

Why Make Passwords Optional?

Before diving into the implementation details, let's understand the advantages of using password optional authentication.

1. Improved User Experience: Users can choose their preferred authentication method, reducing friction during signup and login.

2. Enhanced Security: Reducing reliance on passwords mitigates risks associated with weak passwords and credential stuffing attacks.

3. Future-Proof: Gradually transitioning away from passwords aligns with industry trends toward passwordless authentication.

Understanding Password-Optional Authentication with Hanko

Hanko is an open-source authentication solution that smoothly manages both traditional password-based authentication and modern passwordless methods. In a previous blog, I even created an app using Hanko authentication. Let's see how it works:

Core Components of Hanko

1. Hanko API: Handles authentication requests and manages user sessions

2. Hanko Elements: Pre-built web components for easy integration

3. PassKeys Support: Built-in support for WebAuthn/FIDO2 standards

Implementation Steps

1. Setting Up Hanko

First, install the Hanko elements in your project:

bun install @teamhanko/hanko-elements

2. Configure the Hanko Client

import { register } from '@teamhanko/hanko-elements';

const hankoApi = "https://your-hanko-api.url";


register(hankoApi).catch((error) => {
  console.error("Error initializing Hanko:", error);
});

3. Implement the Authentication Component

import { useEffect, useState } from 'react';

export function AuthComponent() {
  useEffect(() => {

    const hankoAuth = document.querySelector('hanko-auth');

    if (hankoAuth) {

      hankoAuth.addEventListener('success', () => {

      });


      hankoAuth.addEventListener('error', (event) => {
        console.error('Authentication error:', event.detail);
      });
    }
  }, []);

  return (
    <div className="auth-container">
      <hanko-auth />
    </div>
  );
}

4. Enable Password Optional Flow

Configure Hanko to support password-optional authentication:

const config = {
  auth: {
    passwordOptional: true,
    allowedAuthMethods: ['password', 'passkey', 'email'],
    defaultAuthMethod: 'passkey'
  }
};

Best Practices for Password-Optional Implementation

1. Clear User Communication (Important)

function AuthenticationOptions() {
  return (
    <div className="auth-options">
      <h2>Choose Your Sign-in Method</h2>
      <div className="options-container">
        <button onClick={() => setAuthMethod('passkey')}>
          Use PassKey (Recommended)
        </button>
        <button onClick={() => setAuthMethod('password')}>
          Use Password
        </button>
        <button onClick={() => setAuthMethod('email')}>
          Email Magic Link
        </button>
      </div>
      <p className="info-text">
        💡 You can always add or remove authentication methods later
      </p>
    </div>
  );
}

2. Account Recovery Strategy

Implement a robust account recovery system:

async function initiateAccountRecovery(email: string) {
  try {
    const response = await hankoClient.auth.initiateRecovery({
      email,
      recoveryMethods: ['email', 'security-questions']
    });

    return response;
  } catch (error) {
    console.error('Recovery initiation failed:', error);
    throw error;
  }
}

3. Security Considerations

• Always maintain at least two authentication methods per user

• Implement rate limiting for authentication attempts

• Log and monitor authentication method changes

Error Handling and Edge Cases

function handleAuthenticationError(error) {
  switch (error.code) {
    case 'method_not_available':
      return 'This authentication method is not available for your account';
    case 'passkey_not_supported':
      return 'Your device doesn't support PassKeys. Please use an alternative method';
    case 'email_not_verified':
      return 'Please verify your email before proceeding';
    default:
      return 'An error occurred during authentication';
  }
}

Migration Strategy

When implementing password-optional authentication, consider these migration steps:

1. Gradual Rollout:

   • Start with new users

   • Allow existing users to opt-in

   • Set deadline for mandatory migration

2. User Education:

   • Provide clear documentation

   • Offer in-app tutorials

   • Send proactive notifications

Monitoring and Analytics

Track key metrics to measure the success of your password-optional implementation:

interface AuthMetrics {
  methodUsage: {
    passkey: number;
    password: number;
    email: number;
  };
  conversionRate: number;
  failureRate: number;
  recoveryRate: number;
}

function trackAuthenticationMetrics(event: AuthEvent): void {
  analytics.track('authentication_attempt', {
    method: event.method,
    success: event.success,
    timeToComplete: event.duration,
    userAgent: navigator.userAgent
  });
}

We have successfully completed this tutorial and seen how easy it is to implement password-less authentication using Hanko.

Conclusion

Using password-optional authentication is more secure, helpful, and user-friendly, especially for older people and those with weak memory. It's a step toward a more secure and user-friendly authentication future. With Hanko's robust authentication system, we can offer our users the flexibility to choose their preferred authentication method while maintaining high security standards.

By following these guidelines and leveraging Hanko's capabilities, you can successfully implement a password-optional authentication system that serves both your security needs and user preferences last but no the least please don’t forget to follow me for more content and hit the like button thank you.