@teamhanko/passkeys-next-auth-provider

Hanko Passkeys Auth.js Provider

View docs on docs.hanko.io

If you already have a Next.js set up with Auth.js, you can easily passkeys to your app using @teamhanko/passkeys-next-auth-provider.

npm install @teamhanko/passkeys-next-auth-provider

In your pages/api/auth/[...nextauth].ts:

import { tenant, PasskeyProvider } from "@teamhanko/passkeys-next-auth-provider";

export default NextAuth({
	providers: [
		PasskeyProvider({
			tenant: tenant({
				tenantId: "<your tenant id>",
				apiKey: "<your secret api key>",
			}),
			async authorize({ userId }) {
				const user = db.users.find(userId);

				// Do more stuff

				return {
					id: user.id,
					name: user.username,
				};
			},
		}),
	],
});

In one of your components:

import { signInWithPasskey } from "@teamhanko/passkeys-next-auth-provider/client";

export default LoginButton() {
	return (
		<button onClick={() => signInWithPasskey({ tenantId: "<your tenant id>" })} />
	);
}

1. make sure to pass the baseUrl to both
   tenant (in [...nextauth].ts) and
   signInWithPasskey() (in your component).

2. get your tenant ID via the admin API