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.
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.
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();
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>
);
}
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.
PasskeyMe's hosted authentication approach combines the best of all worlds:
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
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' });
// Authentication state management
const { user, isAuthenticated, loading, error } = usePasskeyme();
// Pre-built UI components
<PasskeymeButton>🔐 Login with Passkey</PasskeymeButton>
<PasskeymeOAuthButton provider="google">Login with Google</PasskeymeOAuthButton>
<PasskeymeUserProfile editable={true} />
<PasskeymeProtectedRoute><Dashboard /></PasskeymeProtectedRoute>
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}` }
});
// 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 />;
}
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' });
// 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!
Your hosted authentication pages are fully customizable through the PasskeyMe dashboard:
Here's a complete authentication flow in just a few lines:
import React from 'react';
import {
PasskeymeProvider,
usePasskeyme,
PasskeymeButton,
PasskeymeOAuthButton,
PasskeymeUserProfile
} 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.
# Core SDK (works with any framework)
npm install @passkeyme/auth
# React SDK (includes core SDK)
npm install @passkeyme/react-auth @passkeyme/auth
import { PasskeymeProvider } from '@passkeyme/react-auth';
<PasskeymeProvider config={{
appId: 'your-app-id', // From PasskeyMe dashboard
mode: 'hosted' // Uses hosted auth pages
}}>
<App />
</PasskeymeProvider>
const { user, redirectToLogin, isAuthenticated } = usePasskeyme();
<button onClick={() => redirectToLogin()}>Sign In</button>
We're just getting started! Coming soon:
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.
The passwordless future starts today. Let's build it together! 🚀
These new SDKs are just the beginning! Here's what's coming next:
We're building PasskeyMe to be the authentication solution that developers actually want to use. Your feedback is crucial:
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 now supports Discoverable Credentials! This new feature takes user authentication to the next level, providing a more seamless and secure experience for your users. 🚀
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.
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:
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
Activating discoverable credentials in Passkeyme is simple. Follow these steps:
Navigate to your application settings in the Passkeyme dashboard and click on "Edit Application".
In the application settings, set the "Allow discoverable credentials" flag to true.
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": "...."
}
Well, it would be rude not to - you can now register a passkey for Passkeyme.com!
I do have to take a bow - it was pretty straightforward to set up. The basic flow is as follows:
To implement, I went through the following steps:
npm install passkeyme-web-sdk
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
});
/auth/register-passkey
/auth/register-passkey/complete
These delegate to the passkeyme.com/webauthn/:appid/start_registration and complete_registration endpoints
/auth/authenticate-passkey
/auth/authenticate-passkey/complete
Which similarly delegate to the passkeyme.com/webauthn/:appid/start_authentication and complete_authentication endpoints
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
});
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.
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:
More on the Fallback flow in future - this will be where I focus next, as it is important to get it right.
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!
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!
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.
Passwords have long been the go-to method for securing online accounts, but they have several inherent flaws:
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:
Enhanced Security:
Phishing Resistance:
Elimination of Password Reuse:
Simplified User Experience:
Protection Against Credential Stuffing:
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.
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.
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.
To get started with Passkeyme, check out our documentation.
