π 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β
Framework | SDK Package | Status | OAuth Support | Passkey Support | UI Components | Setup Time | Docs |
---|---|---|---|---|---|---|---|
React | @passkeyme/react-auth | β Available | β Full | β Full | β Rich | β‘ 5 min | Docs |
Angular | @passkeyme/angular | π§ Q2 2025 | β Full | β Full | β Rich | β‘ 5 min | Coming Soon |
Vue | @passkeyme/vue | π§ Q2 2025 | β Full | β Full | β Rich | β‘ 5 min | Coming Soon |
Svelte | @passkeyme/svelte | π§ Q3 2025 | β Full | β Full | β Rich | β‘ 5 min | Coming Soon |
React Native | @passkeyme/react-native | π§ Q1 2025 | β Full | β Full | β Rich | β‘ 10 min | Coming Soon |
Current Alternative: JavaScript SDKβ
For frameworks without dedicated SDKs, use the JavaScript SDK:
Framework | Integration Method | OAuth Support | Passkey Support | UI Control | Setup Time | Docs |
---|---|---|---|---|---|---|
Angular | JavaScript SDK | β Full | β Full | π¨ Medium | β‘ 10 min | Docs |
Vue | JavaScript SDK | β Full | β Full | π¨ Medium | β‘ 10 min | Docs |
Svelte | JavaScript SDK | β Full | β Full | π¨ Medium | β‘ 10 min | Docs |
Vanilla JS | JavaScript SDK | β Full | β Full | π¨ Medium | β‘ 10 min | Docs |
π§ Low-Level SDK Comparisonβ
Platform | SDK Package | Language | OAuth Support | Passkey Support | Integration | Setup Time | Docs |
---|---|---|---|---|---|---|---|
Web Browser | passkeyme-web-sdk | JavaScript/TypeScript | β Manual | β Full | π§ Custom | π οΈ 30 min | Docs |
iOS Native | PasskeymeSDK | Swift/Objective-C | β Manual | β Full | π§ Custom | π οΈ 45 min | Docs |
Android Native | passkeyme-android-sdk | Kotlin/Java | β Manual | β Full | π§ Custom | π οΈ 45 min | Docs |
Ionic/Capacitor | @passkeyme/ionic-cap-plugin | TypeScript | β Manual | β Full | π§ Medium | π οΈ 30 min | Docs |
π± Mobile Platform Comparisonβ
React Native vs Native Developmentβ
Approach | Development Speed | Performance | Platform Features | Maintenance |
---|---|---|---|---|
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β
Feature | iOS SDK | Android SDK | React Native | Ionic 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β
Framework | SDK Status | Implementation | Notes |
---|---|---|---|
React | β Available | <PasskeymeAuthPanel /> | Primary focus, full feature set |
Next.js | β Supported | React SDK + SSR patterns | Server-side rendering supported |
Gatsby | β Supported | React SDK + static patterns | Static site generation supported |
Remix | β Supported | React SDK + loader patterns | Full-stack React framework supported |
Angular Ecosystemβ
Framework | SDK Status | Current Alternative | Planned Release |
---|---|---|---|
Angular | π§ Q2 2025 | JavaScript SDK | Dedicated Angular SDK |
Angular Universal | π§ Q2 2025 | JavaScript SDK | SSR support planned |
Ionic Angular | β Available | Ionic Plugin | Cross-platform mobile |
Vue Ecosystemβ
Framework | SDK Status | Current Alternative | Planned Release |
---|---|---|---|
Vue 3 | π§ Q2 2025 | JavaScript SDK | Composition API support |
Nuxt.js | π§ Q2 2025 | JavaScript SDK | SSR/SSG support planned |
Quasar | π§ Q3 2025 | JavaScript SDK | Cross-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 Type | Theming | Custom CSS | Component Props | Layout 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β
Metric | React SDK | JavaScript SDK | Web SDK | Mobile 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 Feature | High-Level SDKs | Low-Level SDKs | Notes |
---|---|---|---|
OAuth Security | β Built-in | π§ Manual | PKCE, state validation |
Passkey Security | β Built-in | β Built-in | WebAuthn standard |
Token Management | β Automatic | π§ Manual | JWT refresh, storage |
CSRF Protection | β Built-in | π§ Manual | State parameter validation |
Secure Storage | β Built-in | π§ Manual | Platform-specific implementation |
π οΈ Development Experienceβ
Setup Complexityβ
Framework | Initial Setup | Configuration | First Auth | Production 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 Type | Debug Tools | Error Messages | Documentation | Community |
---|---|---|---|---|
High-Level | π Built-in | π Detailed | π Complete | π₯ Active |
Low-Level | π§ Manual | π Technical | π Comprehensive | π₯ Technical |
πΊοΈ Migration Roadmapβ
Current State β Future Stateβ
Recommended Migration Strategyβ
- Start with available SDKs (React or JavaScript)
- Build authentication flows with current options
- Plan migration to framework-specific SDKs when available
- Maintain backward compatibility during transitions
π Getting Started Recommendationsβ
For React Developersβ
π React Quick Start
For Other Web Frameworksβ
For Mobile Developersβ
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.