Skip to main content

πŸ“Š Framework Comparison Matrix

This comprehensive comparison helps you understand the capabilities, integration complexity, and current availability of PasskeyMe SDKs across different frameworks and platforms.

🎯 High-Level SDK Comparison​

FrameworkSDK PackageStatusOAuth SupportPasskey SupportUI ComponentsSetup TimeDocs
React@passkeyme/react-authβœ… Availableβœ… Fullβœ… Fullβœ… Rich⚑ 5 minDocs
Angular@passkeyme/angular🚧 Q2 2025βœ… Fullβœ… Fullβœ… Rich⚑ 5 minComing Soon
Vue@passkeyme/vue🚧 Q2 2025βœ… Fullβœ… Fullβœ… Rich⚑ 5 minComing Soon
Svelte@passkeyme/svelte🚧 Q3 2025βœ… Fullβœ… Fullβœ… Rich⚑ 5 minComing Soon
React Native@passkeyme/react-native🚧 Q1 2025βœ… Fullβœ… Fullβœ… Rich⚑ 10 minComing Soon

Current Alternative: JavaScript SDK​

For frameworks without dedicated SDKs, use the JavaScript SDK:

FrameworkIntegration MethodOAuth SupportPasskey SupportUI ControlSetup TimeDocs
AngularJavaScript SDKβœ… Fullβœ… Full🎨 Medium⚑ 10 minDocs
VueJavaScript SDKβœ… Fullβœ… Full🎨 Medium⚑ 10 minDocs
SvelteJavaScript SDKβœ… Fullβœ… Full🎨 Medium⚑ 10 minDocs
Vanilla JSJavaScript SDKβœ… Fullβœ… Full🎨 Medium⚑ 10 minDocs

πŸ”§ Low-Level SDK Comparison​

PlatformSDK PackageLanguageOAuth SupportPasskey SupportIntegrationSetup TimeDocs
Web Browserpasskeyme-web-sdkJavaScript/TypeScript❌ Manualβœ… FullπŸ”§ CustomπŸ› οΈ 30 minDocs
iOS NativePasskeymeSDKSwift/Objective-C❌ Manualβœ… FullπŸ”§ CustomπŸ› οΈ 45 minDocs
Android Nativepasskeyme-android-sdkKotlin/Java❌ Manualβœ… FullπŸ”§ CustomπŸ› οΈ 45 minDocs
Ionic/Capacitor@passkeyme/ionic-cap-pluginTypeScript❌ Manualβœ… FullπŸ”§ MediumπŸ› οΈ 30 minDocs

πŸ“± Mobile Platform Comparison​

React Native vs Native Development​

ApproachDevelopment SpeedPerformancePlatform FeaturesMaintenance
React Native SDK 🚧⚑ FastπŸ”₯ GoodπŸ“± MostπŸ”„ Single Codebase
iOS SDK βœ…πŸ› οΈ MediumπŸš€ ExcellentπŸ“± AllπŸ”„ Per Platform
Android SDK βœ…πŸ› οΈ MediumπŸš€ ExcellentπŸ“± AllπŸ”„ Per Platform
Ionic Plugin βœ…βš‘ FastπŸ”₯ GoodπŸ“± MostπŸ”„ Single Codebase

Platform-Specific Features​

FeatureiOS SDKAndroid SDKReact NativeIonic Plugin
Face ID/Touch IDβœ… Nativeβœ… Biometric🚧 Plannedβœ… Supported
Keychain Integrationβœ… Fullβœ… Full🚧 Plannedβœ… Supported
Background Authβœ… Supportedβœ… Supported🚧 Plannedβœ… Supported
Deep Linkingβœ… Supportedβœ… Supported🚧 Plannedβœ… Supported
Push Notificationsβœ… Supportedβœ… Supported🚧 Plannedβœ… Supported

🌐 Web Framework Deep Dive​

React Ecosystem​

FrameworkSDK StatusImplementationNotes
Reactβœ… Available<PasskeymeAuthPanel />Primary focus, full feature set
Next.jsβœ… SupportedReact SDK + SSR patternsServer-side rendering supported
Gatsbyβœ… SupportedReact SDK + static patternsStatic site generation supported
Remixβœ… SupportedReact SDK + loader patternsFull-stack React framework supported

Angular Ecosystem​

FrameworkSDK StatusCurrent AlternativePlanned Release
Angular🚧 Q2 2025JavaScript SDKDedicated Angular SDK
Angular Universal🚧 Q2 2025JavaScript SDKSSR support planned
Ionic Angularβœ… AvailableIonic PluginCross-platform mobile

Vue Ecosystem​

FrameworkSDK StatusCurrent AlternativePlanned Release
Vue 3🚧 Q2 2025JavaScript SDKComposition API support
Nuxt.js🚧 Q2 2025JavaScript SDKSSR/SSG support planned
Quasar🚧 Q3 2025JavaScript SDKCross-platform framework

πŸ”„ Integration Patterns by Framework​

Component-Based Frameworks​

React (Available Now)​

import { PasskeymeAuthPanel } from '@passkeyme/react-auth';

function LoginPage() {
return (
<PasskeymeAuthPanel
providers={['google', 'github', 'passkey']}
onSuccess={(user) => setUser(user)}
theme="light"
/>
);
}

Angular (Coming Q2 2025)​

// Future Angular SDK
import { PasskeymeModule } from '@passkeyme/angular';

@Component({
template: `
<passkeyme-auth-panel
[providers]="['google', 'github', 'passkey']"
(success)="onSuccess($event)"
theme="light">
</passkeyme-auth-panel>
`
})
export class LoginComponent { }

Vue (Coming Q2 2025)​

<!-- Future Vue SDK -->
<template>
<PasskeymeAuthPanel
:providers="['google', 'github', 'passkey']"
@success="onSuccess"
theme="light"
/>
</template>

<script setup>
import { PasskeymeAuthPanel } from '@passkeyme/vue';
</script>

Current Alternative: JavaScript SDK​

Angular Integration​

import { smartLogin } from '@passkeyme/auth';

@Component({
template: `
<button (click)="handleLogin()" class="login-btn">
Sign In with Passkey
</button>
`
})
export class LoginComponent {
async handleLogin() {
const user = await smartLogin({
providers: ['google', 'github', 'passkey']
});
this.authService.setUser(user);
}
}

Vue Integration​

<template>
<button @click="handleLogin" class="login-btn">
Sign In with Passkey
</button>
</template>

<script setup>
import { smartLogin } from '@passkeyme/auth';

async function handleLogin() {
const user = await smartLogin({
providers: ['google', 'github', 'passkey']
});
// Handle successful authentication
}
</script>

Svelte Integration​

<script>
import { smartLogin } from '@passkeyme/auth';

async function handleLogin() {
const user = await smartLogin({
providers: ['google', 'github', 'passkey']
});
// Handle successful authentication
}
</script>

<button on:click={handleLogin} class="login-btn">
Sign In with Passkey
</button>

🎨 UI Customization Comparison​

SDK TypeThemingCustom CSSComponent PropsLayout Control
React SDKβœ… Built-inβœ… Fullβœ… Extensiveβœ… Flexible
JavaScript SDKβœ… Hosted Pages🎨 Limited❌ None🎨 Limited
Web SDKπŸ”§ Manualβœ… FullπŸ”§ Manualβœ… Complete
Mobile SDKsπŸ”§ Platformβœ… FullπŸ”§ Platformβœ… Complete

Theming Examples​

React SDK Theming​

const customTheme = {
colors: {
primary: '#007bff',
background: '#ffffff',
text: '#333333'
},
borderRadius: '8px',
fontFamily: 'Inter, sans-serif'
};

<PasskeymeAuthPanel theme={customTheme} />

JavaScript SDK Theming​

await smartLogin({
providers: ['passkey'],
branding: {
primaryColor: '#007bff',
logo: 'https://yoursite.com/logo.png',
backgroundImage: 'https://yoursite.com/bg.jpg'
}
});

πŸ“ˆ Performance Comparison​

MetricReact SDKJavaScript SDKWeb SDKMobile SDKs
Bundle SizeπŸ“¦ 45KB gzippedπŸ“¦ 12KB gzippedπŸ“¦ 8KB gzippedπŸ“± Native
Load Time⚑ Instant⚑ Instant⚑ InstantπŸ“± Native
Auth SpeedπŸš€ < 2sπŸš€ < 3sπŸš€ < 2sπŸš€ < 1s
Memory UsageπŸ’Ύ LowπŸ’Ύ Very LowπŸ’Ύ MinimalπŸ’Ύ Native

Performance Considerations​

Web Frameworks​

  • React SDK: Optimized for React rendering, tree-shaking support
  • JavaScript SDK: Minimal footprint, external hosted pages
  • Web SDK: Smallest bundle, manual optimization required

Mobile Platforms​

  • Native SDKs: Optimal performance, platform-specific optimizations
  • React Native: Near-native performance, single codebase
  • Ionic Plugin: Good performance, web technology stack

πŸ”’ Security Feature Comparison​

Security FeatureHigh-Level SDKsLow-Level SDKsNotes
OAuth Securityβœ… Built-inπŸ”§ ManualPKCE, state validation
Passkey Securityβœ… Built-inβœ… Built-inWebAuthn standard
Token Managementβœ… AutomaticπŸ”§ ManualJWT refresh, storage
CSRF Protectionβœ… Built-inπŸ”§ ManualState parameter validation
Secure Storageβœ… Built-inπŸ”§ ManualPlatform-specific implementation

πŸ› οΈ Development Experience​

Setup Complexity​

FrameworkInitial SetupConfigurationFirst AuthProduction Ready
React SDK⚑ 5 min⚑ Minimal⚑ 2 minβœ… Immediately
JavaScript SDK⚑ 10 min⚑ Simple⚑ 5 minβœ… Immediately
Web SDKπŸ› οΈ 30 minπŸ”§ ModerateπŸ› οΈ 15 minπŸ”§ Additional Work
Mobile SDKsπŸ› οΈ 45 minπŸ”§ PlatformπŸ› οΈ 20 minπŸ”§ Additional Work

Debugging and Support​

SDK TypeDebug ToolsError MessagesDocumentationCommunity
High-LevelπŸ” Built-inπŸ“ DetailedπŸ“š CompleteπŸ‘₯ Active
Low-LevelπŸ”§ ManualπŸ“ TechnicalπŸ“š ComprehensiveπŸ‘₯ Technical

πŸ—ΊοΈ Migration Roadmap​

Current State β†’ Future State​

  1. Start with available SDKs (React or JavaScript)
  2. Build authentication flows with current options
  3. Plan migration to framework-specific SDKs when available
  4. Maintain backward compatibility during transitions

πŸ“š Getting Started Recommendations​

For React Developers​

πŸ‘‰ React Quick Start

For Other Web Frameworks​

πŸ‘‰ JavaScript Quick Start

For Mobile Developers​

πŸ‘‰ Low-Level SDKs Overview

For Custom Implementations​

πŸ‘‰ API Documentation


Framework Not Listed?

We're actively expanding our SDK support. Join our Discord community to request support for your framework or get early access to beta SDKs.

Migration Support

Need help migrating between SDKs or integrating with your specific setup? Check our Migration Guidance or reach out to our Support Team.