Skip to content

Implement User Authentication Mutations #36

Description

@0xdevcollins

Description

Create mutation hooks for user authentication operations including password management, session handling, and sign-out functionality using Better Auth.

Context

This issue covers the core authentication mutations that allow users to manage their authentication state and credentials.

Reference:

Files to create

  • change-password-mutation.ts
  • sign-out-mutation.ts
  • revoke-session-mutation.ts

Mutations to Implement

1. Change Password Mutation

File: user/change-password-mutation.ts

  • Create useChangePassword mutation hook

      const { mutate: changePassword, isPending, isError } = useChangePassword();
    
      changePassword({
        currentPassword: string;
        newPassword: string;
        confirmPassword: string;
        revokeOtherSessions?: boolean;
      });
  • Validate current password before change

  • Enforce password strength requirements

  • Handle Better Auth password change API

  • Show success/error notifications

  • Invalidate user session if needed

Acceptance Criteria:

  • Validates current password is correct
  • New password meets security requirements (min 8 chars, uppercase, lowercase, number, special char)
  • Passwords match validation
  • Error handling for weak passwords
  • Success toast notification
  • Auto sign-out after password change (optional)

2. Sign Out Mutation

File: user/sign-out-mutation.ts

  • Create useSignOut mutation hook
const { mutate: signOut, isPending } = useSignOut();

signOut(); // Signs out current user
  • Clear Better Auth session
  • Clear local storage/cookies
  • Redirect to login page
  • Clear React Query cache
  • Handle sign-out errors gracefully

Acceptance Criteria:

  • Clears all authentication tokens
  • Removes user data from state
  • Redirects to /login or home page
  • Clears cached queries
  • Shows confirmation toast
  • Handles network errors

3. Revoke Session Mutation

File: user/revoke-session-mutation.ts

  • Create useRevokeSession mutation hook
const { mutate: revokeSession } = useRevokeSession();

revokeSession({ sessionId: string });
  • Revoke specific user session by ID
  • Support revoking all sessions except current
  • Integrate with Better Auth session management
  • Update active sessions list
  • Show revocation confirmation

Acceptance Criteria:

  • Can revoke individual sessions
  • Option to revoke all other sessions
  • Updates session list immediately
  • Shows success confirmation
  • Handles already-revoked sessions gracefully

Technical Requirements

React Query Setup

  • Use useMutation from @tanstack/react-query
  • Proper error handling with Better Auth error types
  • Optimistic updates where applicable
  • Query invalidation after successful mutations
    Type Safety
interface ChangePasswordInput {
  currentPassword: string;
  newPassword: string;
  confirmPassword: string;
}

interface RevokeSessionInput {
  sessionId: string;
  revokeAll?: boolean;
}

Error Handling

  • Handle Better Auth specific errors
  • Network error handling
  • Form validation errors
  • User-friendly error messages

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions