feat: adding support for Passkeys #99
Conversation
WalkthroughThe changes introduce new functionality for passkey registration and authentication within the Changes
Sequence Diagram(s)Passkey Registration FlowsequenceDiagram
participant User
participant App
participant AuthProvider
participant SimpleWebAuthn
participant GraphQL API
User ->> App: Click "Register with Passkey"
App ->> AuthProvider: handleValidRegistration()
AuthProvider ->> SimpleWebAuthn: startRegistration()
SimpleWebAuthn ->> User: Display registration prompt
User ->> SimpleWebAuthn: Complete registration
SimpleWebAuthn ->> AuthProvider: Registration data
AuthProvider ->> GraphQL API: Send registration data
GraphQL API ->> AuthProvider: Confirmation
AuthProvider ->> App: Update registration status
App ->> User: Display success message
Passkey Login FlowsequenceDiagram
participant User
participant App
participant AuthProvider
participant SimpleWebAuthn
participant GraphQL API
User ->> App: Click "Login with Passkey"
App ->> AuthProvider: handleValidLoginWithPasskey()
AuthProvider ->> SimpleWebAuthn: startAuthentication()
SimpleWebAuthn ->> User: Display login prompt
User ->> SimpleWebAuthn: Complete login
SimpleWebAuthn ->> AuthProvider: Authentication data
AuthProvider ->> GraphQL API: Send authentication data
GraphQL API ->> AuthProvider: Confirmation
AuthProvider ->> App: Update login status
App ->> User: Display success message
TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
qodo-merge-pro
bot
added
enhancement
PR Reviewer Guide 🔍
|
Bundle Size
Overall bundle size: 13.65 KB (+3.18 KB +30.32%) |
PR Code Suggestions ✨
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
Files selected for processing (7)
- examples/code-flow/src/main.tsx (3 hunks)
- examples/fastify-server/src/common/fastify.ts (1 hunks)
- packages/auth-provider/package.json (1 hunks)
- packages/auth-provider/src/common/types.d.ts (2 hunks)
- packages/auth-provider/src/common/utilities.ts (1 hunks)
- packages/auth-provider/src/components/AuthProvider/AuthContext.ts (1 hunks)
- packages/auth-provider/src/components/AuthProvider/AuthProvider.tsx (3 hunks)
Files skipped from review due to trivial changes (1)
- examples/fastify-server/src/common/fastify.ts
Additional context used
Learnings (1)
packages/auth-provider/src/components/AuthProvider/AuthProvider.tsx (1)
Learnt from: aversini PR: aversini/auth-client#21 File: packages/auth-provider/src/components/AuthProvider/AuthProvider.tsx:1-89 Timestamp: 2024-06-24T18:39:55.099Z Learning: Avoid detailed error logging in security-sensitive components like authentication to prevent giving potential attackers insights into the system.
Additional comments not posted (16)
packages/auth-provider/src/components/AuthProvider/AuthContext.ts (2)
16-16: LGTM!The addition of
registeringForPasskeytoAuthContextwith a default value ofstubis appropriate.
17-17: LGTM!The addition of
loginWithPasskeytoAuthContextwith a default value ofstubis appropriate.packages/auth-provider/src/common/types.d.ts (3)
1-1: LGTM!The import of
AUTH_TYPESfrom@versini/auth-commonis necessary for the new types being added.
35-35: LGTM!The update to
LoginTypeto acceptAUTH_TYPES.CODEorAUTH_TYPES.PASSKEYis appropriate and necessary for supporting passkey authentication.
43-44: LGTM!The addition of
registeringForPasskeyandloginWithPasskeytoAuthContextPropsis appropriate and necessary for supporting passkey authentication.packages/auth-provider/package.json (1)
45-45: LGTM!The addition of
@simplewebauthn/browserversion10.0.0to the dependencies is appropriate and necessary for supporting passkey authentication.examples/code-flow/src/main.tsx (5)
8-16: LGTM!The update to the
useAuthhook to includeregisteringForPasskeyandloginWithPasskeyis appropriate and necessary for supporting passkey-based registration and login.
78-84: LGTM!The addition of the
handleValidRegistrationfunction to handle passkey registration is appropriate and necessary.
85-91: LGTM!The addition of the
handleValidLoginWithPasskeyfunction to handle passkey login is appropriate and necessary.
110-117: LGTM!The addition of the button for passkey registration is appropriate and necessary.
118-131: LGTM!The addition of the button for passkey login is appropriate and necessary.
packages/auth-provider/src/common/utilities.ts (3)
234-307: GraphQL Queries Addition ApprovedThe GraphQL queries for passkey registration and authentication are well-defined and follow best practices.
308-325: Service Types Addition ApprovedThe service types mapping for the GraphQL queries is correctly defined and follows best practices.
327-370: GraphQL Call Function Addition ApprovedThe
graphQLCallfunction is well-implemented, handling errors correctly and following best practices.packages/auth-provider/src/components/AuthProvider/AuthProvider.tsx (2)
277-318: Passkey Registration Function Addition ApprovedThe
registeringForPasskeyfunction is well-implemented, handling errors correctly and following best practices.
320-388: Passkey Login Function Addition ApprovedThe
loginWithPasskeyfunction is well-implemented, handling errors correctly and following best practices.
PR Type
Enhancement, Dependencies
Description
AuthProvidercomponent.AuthContextandAuthContextPropsto include new Passkey methods.Appcomponent for Passkey registration and login.isAlloweddecorator in Fastify server.@simplewebauthn/browser.Changes walkthrough 📝
main.tsx
Add Passkey registration and login functionalityexamples/code-flow/src/main.tsx
registeringForPasskeyandloginWithPasskeymethods touseAuthdestructuring.
handleValidRegistrationandhandleValidLoginWithPasskeyfunctions.
types.d.ts
Extend AuthContextProps with Passkey methodspackages/auth-provider/src/common/types.d.ts
AUTH_TYPESimport.LoginTypeto includeAUTH_TYPES.CODEandAUTH_TYPES.PASSKEY.registeringForPasskeyandloginWithPasskeymethods toAuthContextProps.utilities.ts
Add GraphQL queries and utility for Passkey supportpackages/auth-provider/src/common/utilities.ts
graphQLCallfunction for making GraphQL requests.AuthContext.ts
Add Passkey methods stubs to AuthContextpackages/auth-provider/src/components/AuthProvider/AuthContext.ts
registeringForPasskeyandloginWithPasskeystubs toAuthContext.AuthProvider.tsx
Implement Passkey registration and login in AuthProviderpackages/auth-provider/src/components/AuthProvider/AuthProvider.tsx
startAuthenticationandstartRegistrationfrom@simplewebauthn/browser.registeringForPasskeyandloginWithPasskeymethods.AuthContext.Providerto include new methods.fastify.ts
Remove console log from isAllowed decoratorexamples/fastify-server/src/common/fastify.ts
isAlloweddecorator.package.json
Add @simplewebauthn/browser dependencypackages/auth-provider/package.json
@simplewebauthn/browseras a dependency.pnpm-lock.yaml
Update lockfile for new dependenciespnpm-lock.yaml
@simplewebauthn/browserand relateddependencies.
Summary by CodeRabbit
New Features
Dependencies
@simplewebauthn/browserdependency for enhanced web authentication capabilities.Enhancements
AuthProvidercomponent.