Skip to main content

Introducing PasskeyMe's New JavaScript and React SDKs - Firebase Auth for the Passkey Era

· 9 min read

We're excited to announce the launch of PasskeyMe's completely redesigned JavaScript and React SDKs! These new SDKs bring a Firebase Auth-like developer experience to passkey authentication using hosted authentication pages, making it easier than ever to integrate secure, passwordless authentication into your web applications.

🆕 What's New?​

@passkeyme/auth - Core JavaScript/TypeScript SDK​

Our new core SDK provides a complete authentication solution using PasskeyMe's hosted authentication pages:

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

const auth = new PasskeymeAuth({
  appId: 'your-app-id',
  baseUrl: 'https://auth.passkeyme.com',
  mode: 'hosted' // Uses your branded hosted auth pages
});

// Redirect to hosted auth page (all methods)
auth.redirectToLogin();

// Redirect to specific OAuth provider
auth.redirectToOAuth('google');

// Handle return from hosted auth
const user = await auth.handleAuthCallback();

@passkeyme/react-auth - React Integration SDK​

The React SDK brings hosted authentication directly into your React components with simple hooks:

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

function App() {
  return (
    <PasskeymeProvider config={{ appId: 'your-app-id' }}>
      <AuthenticatedApp />
    </PasskeymeProvider>
  );
}

function LoginPage() {
  const { redirectToLogin, redirectToOAuth } = usePasskeyme();
  
  return (
    <div>
      <button onClick={() => redirectToLogin()}>
        🔐 Sign In (All Methods)
      </button>
      <button onClick={() => redirectToOAuth('google')}>
        🌐 Continue with Google
      </button>
    </div>
  );
}

🎯 Why Hosted Authentication?​

The Firebase Auth Experience, But Better​

While Firebase Auth has set the gold standard for authentication SDKs, it requires complex setup for OAuth providers and lacks comprehensive passkey support. We created something that's even simpler while being more powerful.

Our Solution: Hosted Pages + Self-Hosted Control​

PasskeyMe's hosted authentication approach combines the best of all worlds:

  • ✅ Zero Configuration: No OAuth app setup, no complex SDK configuration
  • ✅ Centralized Branding: Your logo, colors, and styling across all apps
  • ✅ Passkey-First: Native WebAuthn/passkey support built from the ground up
  • ✅ Self-Hosted: Full control over your authentication infrastructure
  • ✅ TypeScript-First: Complete type safety and excellent developer experience
  • ✅ Framework Agnostic: Works with React, Vue, Angular, Next.js, or vanilla JavaScript

🚀 Key Features​

🎨 Hosted Authentication Pages​

Your users see beautifully designed, branded authentication pages:

// Your app redirects to hosted auth page
auth.redirectToLogin();

// Users see YOUR branded page with:
// - Your logo and colors
// - Configured OAuth providers (Google, GitHub, etc.)
// - Passkey authentication
// - Username/password forms
// - Custom styling and messaging

🔐 Comprehensive Authentication Methods​

All methods available on your hosted pages:

// Direct to general auth page (shows all enabled methods)
auth.redirectToLogin();

// Direct to specific OAuth provider
auth.redirectToOAuth('google');
auth.redirectToOAuth('github');

// Direct to specific auth method
auth.redirectToLogin({ authMethod: 'passkey' });
auth.redirectToLogin({ authMethod: 'password' });

Modern React Integration​

// Authentication state management
const { user, isAuthenticated, loading, error } = usePasskeyme();

// Pre-built UI components
<PasskeyLoginButton>🔐 Login with Passkey</PasskeyLoginButton>
<LoginButton provider="google">Login with Google</LoginButton>
<UserProfile editable={true} />
<ProtectedRoute><Dashboard /></ProtectedRoute>

Automatic Token Management​

  • Secure token storage in browser
  • Automatic token refresh
  • HTTP interceptors for API calls
  • CSRF protection and security best practices

Production-Ready Features​

  • Comprehensive error handling
  • Loading states and user feedback
  • Customizable UI components
  • Mobile-responsive design
  • Accessibility (WCAG) compliance

🔄 Easy Migration​

From Firebase Auth​

⚡ Automatic Token Management​

No more manually handling JWTs:

// Tokens stored securely and refreshed automatically
const token = await auth.getAccessToken();

// Use with any HTTP client
fetch('/api/protected', {
  headers: { 'Authorization': `Bearer ${token}` }
});

🛡️ Protected Routes Made Simple​

// React Router protection
<Route path="/dashboard" element={
  <ProtectedRoute>
    <Dashboard />
  </ProtectedRoute>
} />

// Next.js protection
function ProtectedPage() {
  const { isAuthenticated, loading } = usePasskeyme();
  
  if (loading) return <Spinner />;
  if (!isAuthenticated) return <Navigate to="/login" />;
  
  return <Dashboard />;
}

🔄 Seamless Migration​

From Firebase Auth​

The API is intentionally similar for easy migration:

// Firebase Auth (old)
import { signInWithEmailAndPassword } from 'firebase/auth';
await signInWithEmailAndPassword(auth, email, password);

// PasskeyMe (new)
import { PasskeymeAuth } from '@passkeyme/auth';
const auth = new PasskeymeAuth(config);
auth.redirectToLogin({ authMethod: 'password' });

From Auth0​

// Auth0 (old)
const { user, isAuthenticated, loginWithRedirect } = useAuth0();

// PasskeyMe (new)  
const { user, isAuthenticated, redirectToLogin } = usePasskeyme();

The transition is seamless, but you gain hosted auth pages, native passkey support, and eliminate vendor lock-in!

🎨 Hosted Auth Page Customization​

Your hosted authentication pages are fully customizable through the PasskeyMe dashboard:

🎯 Brand Your Experience​

  • Upload your logo and set brand colors
  • Customize fonts and styling
  • Add custom messaging and copy
  • Set your own custom domain

⚙️ Configure Auth Methods​

  • Enable/disable passkeys, OAuth providers, username/password
  • Set up OAuth apps (Google, GitHub, Facebook, etc.)
  • Configure passkey settings and policies
  • Set password requirements

📱 Mobile-Optimized Design​

  • Responsive design works perfectly on all devices
  • Native mobile app integration via deep links
  • Progressive Web App (PWA) support

🛡️ Security & Performance​

🔒 Enterprise-Grade Security​

  • OAuth secrets managed server-side (never exposed to client)
  • Automatic security headers and CSRF protection
  • SOC 2 Type II compliant infrastructure
  • Regular security audits and penetration testing

⚡ Lightning-Fast Performance​

  • CDN-hosted assets for global speed
  • Minimal bundle size (< 50KB gzipped)
  • Optimized for Core Web Vitals
  • Automatic code splitting and lazy loading

Built-in Security​

  • Automatic CSRF protection
  • Secure token storage with encryption
  • XSS protection for token handling
  • Secure HTTP-only cookie support
  • Token expiration and refresh management

Performance Optimized​

  • Tree-shakable modules for minimal bundle size
  • Lazy loading of authentication components
  • Optimized re-rendering with React hooks
  • Efficient token caching and management

📱 Real-World Example​

Here's a complete authentication flow in just a few lines:

import React from 'react';
import { 
  PasskeymeProvider, 
  usePasskeyme, 
  PasskeyLoginButton,
  LoginButton,
  UserProfile 
} from '@passkeyme/react-auth';

const authConfig = {
  apiUrl: process.env.REACT_APP_PASSKEYME_API_URL,
  clientId: process.env.REACT_APP_PASSKEYME_CLIENT_ID,
};

function App() {
  return (
    <PasskeymeProvider config={authConfig}>
      <AuthFlow />
    </PasskeymeProvider>
  );
}

function AuthFlow() {
  const { user, isAuthenticated, loading } = usePasskeyme();

  if (loading) return <div>Loading...</div>;

  if (isAuthenticated) {
    return (
      <div>
        <h1>Welcome back!</h1>
        <UserProfile />
      </div>
    );
## 📝 Complete React Example

Here's how simple it is to add authentication to your React app:

```tsx
import { PasskeymeProvider, usePasskeyme } from '@passkeyme/react-auth';

const authConfig = {
  appId: 'your-app-id',
  baseUrl: 'https://auth.passkeyme.com',
  mode: 'hosted'
};

function App() {
  return (
    <PasskeymeProvider config={authConfig}>
      <AuthenticatedApp />
    </PasskeymeProvider>
  );
}

function AuthenticatedApp() {
  const { isAuthenticated, redirectToLogin } = usePasskeyme();

  if (!isAuthenticated) {
    return (
      <div>
        <h1>Welcome to My App</h1>
        <button onClick={() => redirectToLogin()}>
          🔐 Sign In
        </button>
      </div>
    );
  }

  return (
    <div>
      <h1>You're logged in!</h1>
      <Dashboard />
    </div>
  );
}

That's it! Your users will see your beautifully branded hosted authentication page with all configured auth methods.

🚀 Getting Started​

Installation​

# Core SDK (works with any framework)
npm install @passkeyme/auth

# React SDK (includes core SDK)
npm install @passkeyme/react-auth @passkeyme/auth

Quick Setup​

  1. Configure your provider:
import { PasskeymeProvider } from '@passkeyme/react-auth';

<PasskeymeProvider config={{
  appId: 'your-app-id', // From PasskeyMe dashboard
  mode: 'hosted' // Uses hosted auth pages
}}>
  <App />
</PasskeymeProvider>
  1. Use the hook:
const { user, redirectToLogin, isAuthenticated } = usePasskeyme();
  1. Add login buttons:
<button onClick={() => redirectToLogin()}>Sign In</button>

5-Minute Setup Guide​

  1. Create a PasskeyMe account at passkeyme.com
  2. Set up your app in the dashboard (configure branding, OAuth providers)
  3. Install the SDK and add the provider to your React app
  4. Add login buttons that redirect to hosted auth pages
  5. Handle the callback when users return from authentication

🎯 Why Choose PasskeyMe?​

vs. Firebase Auth​

  • ✅ Native passkey support (Firebase requires custom implementation)
  • ✅ Self-hosted (no vendor lock-in)
  • ✅ Hosted auth pages (easier setup, better UX)
  • ✅ More OAuth providers with simpler configuration

vs. Auth0​

  • ✅ More affordable (especially for growing teams)
  • ✅ Passkey-first design (Auth0 added passkeys as an afterthought)
  • ✅ Self-hosted option (complete data control)
  • ✅ Better developer experience (simpler APIs)

vs. Clerk​

  • ✅ Self-hosted infrastructure (vs. SaaS-only)
  • ✅ More comprehensive passkey support
  • ✅ Framework agnostic (works with any JavaScript framework)
  • ✅ Enterprise-ready (SOC 2, GDPR compliant)

🔮 What's Next?​

We're just getting started! Coming soon:

  • 🔄 Direct Authentication Mode: For developers who want custom UI components without hosted pages
  • 📱 React Native SDK: Native mobile authentication with passkeys and biometrics
  • 🌐 Vue.js & Angular SDKs: First-class support for all major frameworks
  • 🔌 Webhook System: Real-time auth events for your backend systems
  • 📊 Advanced Analytics: User authentication insights and security monitoring

🎉 Join the Passkey Revolution​

The future of web authentication is here, and it's passwordless.

With PasskeyMe's new SDKs, you can give your users the security and convenience of passkeys while maintaining the familiar, reliable developer experience you expect from modern authentication libraries.

Ready to get started?​

The passwordless future starts today. Let's build it together! 🚀

🔮 What's Next?​

These new SDKs are just the beginning! Here's what's coming next:

  • @passkeyme/vue-auth - Vue.js integration
  • @passkeyme/react-native-auth - React Native mobile apps
  • @passkeyme/node-auth - Server-side Node.js integration
  • @passkeyme/flutter-auth - Flutter mobile apps
  • Advanced UI components - Forms, modals, onboarding flows
  • Theme system - Pre-built design systems and themes

📚 Resources​

🤝 Community & Support​

We're building PasskeyMe to be the authentication solution that developers actually want to use. Your feedback is crucial:

🎉 Try It Today!​

The new PasskeyMe JavaScript and React SDKs are available now. Whether you're building a new application or looking to upgrade your existing authentication system, we've made it easier than ever to add secure, modern authentication to your web applications.

Get started today and give your users the passwordless authentication experience they deserve!

npm install @passkeyme/react-auth @passkeyme/auth

Happy coding! 🚀

PasskeyMe - Secure authentication for the modern web

Passkeyme supports Discoverable Credentials!!

· 3 min read

Passkeyme now supports Discoverable Credentials! This new feature takes user authentication to the next level, providing a more seamless and secure experience for your users. 🚀

What are Discoverable Credentials?​

Discoverable Credentials, also known as Resident Keys, allow users to authenticate without needing to remember and enter their username. This is a significant improvement over non-discoverable credentials, where users must input their username every time they log in. With discoverable credentials, the authentication dialog will automatically display all available credentials for the user to choose from.

Non-Discoverable Credentials​

Non-Discoverable Credentials

Discoverable Credentials​

Discoverable Credentials

Pros and Cons of Discoverable Credentials​

Pros​

  • User Convenience: Users don’t need to remember and type their usernames. They can simply select their credential from a list.
  • Enhanced Security: Reduces the risk of phishing attacks as users do not type their usernames, which could be intercepted by malicious actors.
  • Improved User Experience: Faster and easier authentication process.

Cons​

There are normally some downsides to using discoverable credentials, however Passkeyme takes care of these for you!

This includes:

  • Storage Requirements: Discoverable credentials need to be stored securely on the device - but Passkeyme takes care of storage of the credential, securely, and anonymously!

  • Complexity: Implementing and managing discoverable credentials can add complexity to the authentication process - except if you use Passkeyme, and then its a breeze!

  • Device Dependency: If a user loses their device, they could lose access to their credentials unless they have a backup method - this is still true, however with Passkeyme:

    • The user can still enter their username, and use non-discoverale mode and get access to their Passkey
    • Fallback-flow is being built as we speak - watch this space!

  • Comparatively worse UX: Compared to non-discoverable, discoverable credentials require the user to select the correct passkey, which is an extra step. If it is possible to use non-discoverable credentials, this is recommended - i.e. if the username is cached on the device, or can be input buy the user

How to Enable Discoverable Credentials in Passkeyme​

Activating discoverable credentials in Passkeyme is simple. Follow these steps:

Step 1: Edit the Application​

Navigate to your application settings in the Passkeyme dashboard and click on "Edit Application".

Step 2: Set the "Allow discoverable credentials" Flag​

In the application settings, set the "Allow discoverable credentials" flag to true.

Enable Discoverable Credentials

Step 3: Modify Your Authentication Requests​

When sending authentication requests, ensure that you do not include a username in your POST requests to /start_authentication and /end_authentication.

Note, even with Discoverable enabled, you can still trigger a non-discoverable (which is less prone to device-specific operability issues) by specifying the username. If the username is known - i.e. if its a device that has previously logged in with the passkey and you have stored the username locally, we reccommend to use non-discoverable credentials so the user does not have to select their username from the Passkey dialog, which is cleaner.

POST /start_authentication
{
}
POST /complete_authentication
{
    "credential": "...."
}

Mmmmmmm, Dogfood!!

· 4 min read

Passkeyme.com supports Passkeys!​

Well, it would be rude not to - you can now register a passkey for Passkeyme.com!

Passkeyme

I do have to take a bow - it was pretty straightforward to set up. The basic flow is as follows:

  1. User logs in as Normal
  2. Go to the Upper RHS Passkey menu item
  3. Follows the prompts to register their passkey
  4. Log out
  5. Select their username from the dropdown on the login screen
  6. Click Sign in with Passkey
  7. Done!

Implementation​

To implement, I went through the following steps:

  1. Install the passkeyme-web-sdk via
npm install passkeyme-web-sdk
  1. Then added a RegisterPasskey component to my React frontend:
import PasskeymeSDK from 'passkeyme-web-sdk';
const passkeymeSDK = new PasskeymeSDK();

...

      let challengeResponse = await axiosClient.post(`/api/auth/register-passkey`, {
        username: thisuser.username,
        displayname: thisuser.name
      });

      const passkeyResponse = await passkeymeSDK.passkeyRegister(challengeResponse.data.challenge);

      let completeResponse = await axiosClient.post(`/api/auth/register-passkey/complete`, {
        username: thisuser.username,
        credential: passkeyResponse.credential
      });
  1. In the above, I added two new endpoints to my backend:
/auth/register-passkey
/auth/register-passkey/complete

These delegate to the passkeyme.com/webauthn/:appid/start_registration and complete_registration endpoints

  1. For Authentication, I added the following two endpoints to my backend:
/auth/authenticate-passkey
/auth/authenticate-passkey/complete

Which similarly delegate to the passkeyme.com/webauthn/:appid/start_authentication and complete_authentication endpoints

  1. Add the corresponding calls to my frontend login component:
      let challengeResponse = await axiosClient.post(`/api/auth/authenticate-passkey`, {
        username
      });

      const passkeyResponse = await passkeymeSDK.passkeyAuthenticate(challengeResponse.data.challenge);

      let completeResponse = await axiosClient.post(`/api/auth/authenticate-passkey/complete`, {
        username,
        credential: passkeyResponse.credential
      });
  1. Persist the array of usernames, and last used username in localStorage for convenience - you could also require the user to enter the username if that is more appropriate.

The Passkey form looks like (Its a React component using Chakra-UI):

      {passkeyUser && (
        <>
        <Box mb="6">
          <Select value={passkeyUser} onChange={(e) => setPasskeyUser(e.target.value)}>
            {passkeymeUsers.map((user: string) => (
              <option value={user} key={user}>{user}</option>
            ))}
            </Select>
          <Button mt="6" type="submit" width="full" colorScheme="brand" onClick={() => doPasskeyAuthenticate(passkeyUser)}>
            {translate("pages.login.passkey.button", "Sign in with Passkey")}
          </Button>
        </Box>
        <Divider></Divider>
        </>
      )}

Note it will only show the Passkey Box if there is a passkeyme username in localStorage, so if the user has not registered a Passkey, it won't be confusing.

Key Points​

  • Note it supports multiple passkeys, you select the one you want to log in with from the dropdown. These are just maintained in the browser localStorage - its just the usernames, so its safe.

  • This actually does serve to showcase how you can implement passkeys with a simple workflow that yields an awesome user-experience! It demonstrates a best practice for implementing passkeys, i.e:

  1. Register the passkey from an Authenticated user inside your app - your backend proxy to start/finish_registration should require an authenticated session
  2. User then just needs to specify their username to log in subsequently
  3. You can persist the username(s) on the device for convenience for the user.
  • Note also, the standard login serves as a Fallback. It is vital to always have a Fallback mechanism in case the user cannot access their Passkey - e.g. they have lost access to their iCloud, or lost the only device they use, etc.

More on the Fallback flow in future - this will be where I focus next, as it is important to get it right.

Conclusions​

This was a simple, yet straightforward implementation using the Passkeyme passkeyme-web-sdk and API endpoints. It took a couple of hours to put together, yet it resulted in a quite elegant UX.

It does highlight that while Passkeys don't have to be complex to implement - your User eXperience is extremely important and needs careful attention - don't just shoehorn it in, spend time on the User Journey. Or if you can't - then follow the above blueprint!

So, what are you waiting for? You can add Passkeys to your app today!

Usage Charts

· One min read

Usage Charts added!​

Passkeyme now includes usage reports - check out the Usage button from the Applications list/show pages!

Charts are interactive, so you can select date ranges, and view usage at monthly points.

Once you have built up a few months of usage, these will prove to be useful - but don't worry if there's nothig in there when you're just getting set up!

Passkeyme

Why Passkeys Are Important and the Problems They Solve

· 3 min read

Why Passkeys Are Important and the Problems They Solve​

Introduction​

In today's digital age, security is a top priority for both users and developers. Traditional authentication methods, such as passwords, have been the cornerstone of online security for decades. However, they come with significant drawbacks. Passkeys, a modern alternative to passwords, offer a solution to many of these issues. In this blog post, we'll explore why passkeys are important and the problems they solve.

The Problem with Passwords​

Passwords have long been the go-to method for securing online accounts, but they have several inherent flaws:

  1. Weak Passwords: Many users choose simple, easily guessable passwords, making their accounts vulnerable to attacks.
  2. Password Reuse: Users often reuse passwords across multiple sites. If one site is compromised, all accounts using that password are at risk.
  3. Phishing Attacks: Phishing attacks trick users into revealing their passwords to malicious actors, leading to account breaches.
  4. Credential Stuffing: Automated attacks use stolen username-password pairs to gain unauthorized access to accounts.
  5. Management Overhead: Users need to remember numerous passwords, leading to poor password practices and a reliance on insecure storage methods.

Enter Passkeys​

Passkeys leverage public-key cryptography to provide a more secure and user-friendly authentication method. Here's how they work and the problems they solve:

  1. Enhanced Security:

    • Passkeys use asymmetric cryptography, generating a unique public-private key pair for each service. The private key never leaves the user's device, while the public key is stored on the server.
    • This method ensures that even if a server is compromised, the user's private key remains secure.

  2. Phishing Resistance:

    • Passkeys are inherently resistant to phishing attacks. Since the private key never leaves the user's device, attackers cannot steal it through phishing attempts.

  3. Elimination of Password Reuse:

    • Each service generates a unique key pair, eliminating the risk associated with password reuse. Compromising one service does not jeopardize others.

  4. Simplified User Experience:

    • Passkeys simplify the login process. Users no longer need to remember complex passwords or use password managers. Authentication can be as simple as using a biometric scanner or entering a PIN.

  5. Protection Against Credential Stuffing:

    • Passkeys render credential stuffing attacks ineffective. Since there are no shared passwords to exploit, attackers cannot use stolen credentials across multiple sites.

Implementing Passkeys with Passkeyme​

Passkeyme makes it easy for developers to integrate passkeys into their web and mobile applications. Our platform provides a robust REST API and cross-platform SDKs, allowing for seamless integration and enhanced security for your users.

Getting Started with Passkeyme​

  1. Integrate the API: Use our REST API to handle the passkey registration and authentication processes securely.
  2. Leverage SDKs: Our SDKs for Web, iOS, and Android make it easy to implement passkey functionality across different platforms.
  3. Enhance User Experience: Provide your users with a streamlined, secure authentication method that improves their overall experience and reduces the risk of account breaches.

Conclusion​

Passkeys represent the future of online authentication, addressing many of the critical issues associated with traditional passwords. By leveraging public-key cryptography, passkeys offer enhanced security, resistance to phishing, and a simplified user experience. With Passkeyme, integrating passkeys into your applications has never been easier. Embrace the future of authentication and protect your users with Passkeyme.

Introduction to Passkeyme

· One min read

What is Passkeyme?​

Passkeyme is a SaaS platform that allows developers to easily integrate passkeys into their web or mobile applications. It provides a secure and user-friendly authentication alternative to traditional passwords.

Why Use Passkeyme?​

  • Enhanced Security: Passkeys leverage public-key cryptography, reducing the risk of phishing, credential stuffing, and other common attacks.
  • User-Friendly: Users no longer need to remember passwords, offering a better user experience.
  • Easy Integration: Passkeyme can be integrated into existing authentication frameworks, complementing traditional authentication methods.

Getting Started​

To get started with Passkeyme, check out our documentation.

Passkeyme