@capgo/capacitor-autofill-save-password

Overview

The Capacitor Autofill Save Password plugin provides password saving and autofill functionality for Capacitor applications. This plugin integrates with system-level credential management to offer seamless authentication experiences with secure password storage and retrieval.

Password saving

Save credentials to system keychain securely 🔐

Autofill integration

System-level password autofill support 🗝️

Cross-platform

iOS support with Android development in progress 📱

Domain association

Associated domains for seamless authentication ❤️

Installation

npm install @capgo/capacitor-autofill-save-password
npx cap sync

Platform Support

• iOS: Full support (works with iOS 18.3 and older versions)
• Android: Work in progress

iOS Configuration

1. Associated Domains Setup

Configure associated domains in your Apple Developer account and add them to your App.entitlements file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>com.apple.developer.associated-domains</key>
    <array>
        <string>webcredentials:yourdomain.com</string>
        <string>webcredentials:www.yourdomain.com</string>
    </array>
</dict>
</plist>

2. Web Credential Configuration

Add a .well-known/apple-app-site-association file to your website:

{
  "webcredentials": {
    "apps": [
      "TEAMID.com.yourcompany.yourapp"
    ]
  }
}

Core API Methods

Password Management

• promptDialog(options) - Save password to system keychain
• readPassword() - Read saved password from keychain

Usage Example

import { SavePassword } from '@capgo/capacitor-autofill-save-password';

// Save password after successful login
async function login(username: string, password: string) {
  try {
    // Perform your login logic here
    const loginSuccess = await performLogin(username, password);

    if (loginSuccess) {
      // Prompt user to save password
      await SavePassword.promptDialog({
        username: username,
        password: password,
        url: 'https://yourdomain.com' // iOS only
      });

      console.log('Password saved successfully');
    }
  } catch (error) {
    console.error('Failed to save password:', error);
  }
}

// Read saved password for autofill
async function loadSavedCredentials() {
  try {
    const credentials = await SavePassword.readPassword();

    if (credentials.username && credentials.password) {
      console.log('Found saved credentials');
      // Pre-fill login form
      return {
        username: credentials.username,
        password: credentials.password
      };
    }
  } catch (error) {
    console.error('Failed to read saved password:', error);
  }

  return null;
}

Android Configuration (Work in Progress)

For future Android support, the following configuration will be required:

1. Google Services Plugin

Add to android/app/build.gradle:

apply plugin: 'com.google.gms.google-services'

2. Domain Configuration

Add to android/app/src/main/res/values/strings.xml:

<resources>
    <string name="asset_statements">
        [{
            "relation": ["delegate_permission/common.handle_all_urls"],
            "target": {
                "namespace": "web",
                "site": "https://yourdomain.com"
            }
        }]
    </string>
</resources>

3. Google Services JSON

Add google-services.json to your Android project.

API Reference

promptDialog(options)

Saves user credentials to the system keychain.

interface SavePasswordOptions {
  username: string;
  password: string;
  url?: string; // iOS only - associated domain URL
}

readPassword()

Retrieves saved credentials from the system keychain.

interface SavedCredentials {
  username: string;
  password: string;
}

Integration with Login Flow

import { SavePassword } from '@capgo/capacitor-autofill-save-password';

class AuthService {
  async login(username: string, password: string) {
    try {
      // Authenticate with your backend
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
      });

      if (response.ok) {
        // Offer to save credentials
        await this.offerToSavePassword(username, password);
        return true;
      }
    } catch (error) {
      console.error('Login failed:', error);
    }
    return false;
  }

  private async offerToSavePassword(username: string, password: string) {
    try {
      await SavePassword.promptDialog({
        username,
        password,
        url: 'https://yourdomain.com'
      });
    } catch (error) {
      // User declined to save or error occurred
      console.log('Password not saved:', error);
    }
  }

  async loadSavedCredentials() {
    try {
      return await SavePassword.readPassword();
    } catch (error) {
      console.log('No saved credentials found');
      return null;
    }
  }
}

Best Practices

• Only prompt to save passwords after successful authentication
• Handle cases where users decline to save passwords gracefully
• Implement proper error handling for keychain access failures
• Use associated domains for seamless web-app credential sharing
• Test autofill functionality across different iOS versions

Security Considerations

• Credentials are stored in the system keychain with appropriate security flags
• Associated domains ensure credentials are only accessible to authorized apps
• Follow platform security guidelines for credential management
• Consider implementing additional security measures for sensitive applications

Limitations

• Android support is currently under development
• iOS requires proper associated domains configuration
• Autofill behavior may vary across different iOS versions
• Requires user consent for saving and accessing credentials

Documentation

Check the complete documentation for detailed implementation guides and advanced integration patterns.