https://github.com/passlock-dev/passlock
Svelte / SvelteKit authentication library featuring passkeys, social sign in, user management and more.
https://github.com/passlock-dev/passlock
authentication passkeys svelte sveltekit
Last synced: 9 days ago
JSON representation
Svelte / SvelteKit authentication library featuring passkeys, social sign in, user management and more.
- Host: GitHub
- URL: https://github.com/passlock-dev/passlock
- Owner: passlock-dev
- License: mit
- Created: 2024-04-22T14:48:47.000Z (12 months ago)
- Default Branch: master
- Last Pushed: 2024-11-27T14:19:02.000Z (5 months ago)
- Last Synced: 2025-04-11T21:20:01.816Z (9 days ago)
- Topics: authentication, passkeys, svelte, sveltekit
- Language: Svelte
- Homepage: https://passlock.dev
- Size: 16.8 MB
- Stars: 172
- Watchers: 3
- Forks: 11
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
๏ปฟ
Passkeys, Social Login & More
Typescript library for next generation authentication. Passkeys, Apple login, Google one-tap and more..
Project website ยป
Demo
ยท
Documentation
ยท
Tutorial
> [!IMPORTANT]
> **Building a SvelteKit app?** Run `pnpm create @passlock/sveltekit` and follow the prompts. The CLI wizard will create a skeleton app with support for passkeys, social login, CRUD operations and much more. Choose from Daisy UI, Preline or Shadcn templates. For more details please see the starter app's [README](./packages/create-sveltekit/docs)
## Features
Passkeys and the WebAuthn API are quite complex. I've taken an opinionated approach to simplify things for you. Following the 80/20 principle, I've tried to focus on the features most valuable to developers and users.
1. **๐ Primary or secondary authentication** - 2FA or a complete replacement for passwords
2. **๐ Social login** - Supporting Apple & Google. GitHub coming soon..
3. **โ๐ป Biometrics** - Frictionless facial or fingerprint recognition for your webapps
4. **๐ฅ๏ธ Management console** - Suspend users, disable or revoke passkeys and more..
5. **๐ต๏ธ Audit trail** - View a full audit trail for each user
6. **๐ฅ๏ธ Dev console** - Something not working? check the web console for details
7. **๐ Headless components** - You have 100% control over the UI
## Screen recording
https://github.com/user-attachments/assets/f1c21242-74cb-4739-8eff-fddb19cb3256
## Screenshots
Demo app using this library for passkey and social login
Viewing a user's authentication activity on their profile page
## Usage
> [!TIP]
> **SvelteKit users** - Whilst this library is framework agnostic, SvelteKit users may want to check out the [@passlock/sveltekit](./packages/sveltekit/) wrapper This offers several enhancements, including UI components, form action helpers and Superforms support.
Use this library to generate a secure token, representing passkey registration or authentication. Send the token to your backend for verification (see below)
### Register a passkey
```typescript
import { Passlock, PasslockError } from '@passlock/client'
// you can find these details in the settings area of your Passlock console
const tenancyId = '...'
const clientId = '...'
const passlock = new Passlock({ tenancyId, clientId })
// to register a new passkey, call registerPasskey(). We're using placeholders for
// the user data. You should grab this from an HTML form, React store, Redux etc.
const [email, givenName, familyName] = ["[email protected]", "John", "Doe"]
// Passlock doesn't throw but instead returns a union: result | error
const result = await passlock.registerPasskey({ email, givenName, familyName })
// ensure we're error free
if (!PasslockError.isError(result)) {
// send the token to your backend (json/fetch or hidden form field etc)
console.log('Token: %s', result.token)
}
```
### Authenticate using a passkey
```typescript
import { Passlock, PasslockError } from '@passlock/client'
const tenancyId = '...'
const clientId = '...'
const passlock = new Passlock({ tenancyId, clientId })
const result = await passlock.authenticatePasskey()
if (!PasslockError.isError(result)) {
// send the token to your backend for verification
console.log('Token: %s', result.token)
}
```
### Backend verification
Verify the token and obtain the passkey registration or authentication details. You can make a simple GET request to `https://api.passlock.dev/{tenancyId}/token/{token}` or use the [@passlock/node][node] library:
```typescript
import { Passlock } from '@passlock/node'
// API Keys can be found in your passlock console
const passlock = new Passlock({ tenancyId, apiKey })
// token comes from your frontend
const principal = await passlock.fetchPrincipal({ token })
// get the user id
console.log(principal.user.id)
```
## More information
Please see the [tutorial][tutorial] and [documentation][docs]
[contact]: https://passlock.dev/contact
[tutorial]: https://docs.passlock.dev/docs/tutorial/introduction
[docs]: https://docs.passlock.dev
[node]: https://www.npmjs.com/package/@passlock/node
[melt]: https://melt-ui.com
[shadcn]: https://www.shadcn-svelte.com