Passkeys for Everyone!

Justin Crosbie — Sun, 17 Aug 2025 08:45:57 +0000

Making Authentication Simple and Free 🔐

After building apps with various authentication solutions, I kept running into the same challenge: authentication setup takes way longer than it should.

That's why I built Passkeyme — a free authentication platform focused on simplicity and developer experience.

Why I Built This

While there are great authentication solutions out there like Firebase Auth, Auth0, and Supabase, I wanted something that:

Gets you started in minutes instead of hours
Includes passkeys out of the box without complex WebAuthn setup
Offers hosted auth pages so you don't have to build UI
Stays free for most use cases until your usage ramps up
Works with any framework but has great React integration

Passkeys are becoming increasingly important for security, but implementing WebAuthn correctly is still quite complex.

Introducing Passkeyme

Passkeyme is the authentication platform designed for developers who want to ship fast without sacrificing security. Here's what makes it different:

⚡ Drop-in Components

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

function App() {
  return (
    <PasskeymeAuthPanel
      appId="your-app-id"
      onSuccess={(user) => console.log('Logged in:', user)}
      providers={['google', 'github', 'apple']}
      enablePasskeys={true}
    />
  );
}

That's it. Seriously. Full authentication with passkeys, OAuth, and traditional login in 3 lines of code.

🎯 Hook-Based API

Prefer hooks? We've got you covered:

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

function LoginButton() {
  const { login, user, isLoading } = usePasskeyme({
    appId: 'your-app-id'
  });

  return (
    <button onClick={() => login('passkey')}>
      {isLoading ? 'Signing in...' : 'Sign in with Passkey'}
    </button>
  );
}

🌐 Hosted Auth Pages

Don't want to build UI? Use our hosted authentication pages:

// Redirect to hosted auth
window.location.href = 'https://auth.passkeyme.com/your-app-id';

// Or use the programmatic API
import { triggerPasskeymeAuth } from '@passkeyme/react-auth';

triggerPasskeymeAuth({
  appId: 'your-app-id',
  redirectUri: 'https://yourapp.com/callback'
});

What Makes Passkeyme Different

Passkeyme is designed around a few core principles: simplicity, speed, and cost-effectiveness.

🔑 Passkeys Made Simple

WebAuthn implementation can be tricky with browser compatibility and UX considerations. Passkeyme handles the complexity so you can focus on your app.

🔗 Multiple OAuth Providers

Support for Google, GitHub, Apple, Microsoft, Facebook — all with the same simple API. No need to manage different OAuth configurations.

🎨 Flexible Integration

Inline components for custom UIs
Hosted pages for rapid deployment
Programmatic API for advanced use cases
Full customization of branding and flow

🚀 Developer Experience

TypeScript-first with full type safety
Zero configuration to get started
Comprehensive docs with live examples
Free tier that covers most use cases

Real-World Example

Here's a complete authentication flow with multiple providers:

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

function AuthDemo() {
  const handleAuthSuccess = (user) => {
    console.log('Welcome!', user);
    // User is automatically signed in
    // JWT token available in user.token
  };

  return (
    <PasskeymeAuthPanel
      appId="demo-app-123"
      onSuccess={handleAuthSuccess}
      providers={['google', 'github', 'apple', 'microsoft']}
      enablePasskeys={true}
      enableUsernamePassword={true}
      style={{
        primaryColor: '#4F46E5',
        borderRadius: '8px'
      }}
    />
  );
}

This gives you a complete authentication experience with:

✅ Passkey registration and login
✅ OAuth with 5 major providers
✅ Traditional email/password
✅ Custom styling
✅ Automatic token management

How It Compares

Here's how Passkeyme stacks up for common use cases:

Feature	Traditional Setup	Passkeyme
Setup Time	Hours of configuration	Minutes
Passkey Support	Manual WebAuthn implementation	Built-in
OAuth Providers	Configure each separately	Unified API
Hosted Pages	Build your own	Included
Cost	Varies by usage	Free tier available
Maintenance	Ongoing security updates	Handled for you

Getting Started

Ready to try Passkeyme? Here's how to add authentication to your app in under 5 minutes:

Install the SDK

npm install @passkeyme/react-auth

Get your App ID

# Sign up at https://passkeyme.com
# Create an app and copy your App ID

Add authentication

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

<PasskeymeAuthPanel appId="your-app-id" />

That's it! Your app now has production-ready authentication with passkeys and OAuth.

What's Next?

I'm actively working on expanding Passkeyme with:

🔜 React Native SDK for mobile apps
🔜 Vue and Svelte SDKs for other frameworks
🔜 Enhanced user management features
🔜 Enterprise features for larger teams

The goal is to keep the core experience simple while adding more options for teams that need them.

Try It Yourself

🚀 Live Demo: demo.passkeyme.com
📚 Documentation: docs.passkeyme.com
💻 GitHub: github.com/justincrosbie/passkeyme

Have you tried different authentication solutions? I'd love to hear about your experiences and what features matter most to you. Feel free to share your thoughts in the comments!

If you're working on something interesting, I'd love to hear about it. Always happy to connect with fellow developers!

Thanks for reading! I share updates about Passkeyme and other development projects I'm working on.

DEV Community: Justin Crosbie