Vue Allauth Library

A shared Vue.js library for authentication components and stores.

Development

Setup

npm install

Building

npm run build

Testing

# Run tests
npm test

# Run tests with UI
npm run test:ui

# Run tests once (CI mode)
npm run test:run

Test Structure

The test suite includes:

• Component Tests (src/components/__tests__/): Unit tests for Vue components
• Store Tests (src/stores/__tests__/): Unit tests for Pinia stores
• API Integration Examples: Tests demonstrating HAR file data usage

Using HAR Files for Testing

The tests demonstrate how to use HAR files from the main Vue project for API mocking:

// Example from auth-api-integration.test.ts
const mockLoginResponse = {
  status: 200,
  data: {
    user: {
      id: 4,
      display: "testuser",
      email: "[email protected]",
      username: "testuser",
    },
    methods: [
      { method: "password", at: 1758525119.3825762, username: "testuser" },
    ],
  },
  meta: { is_authenticated: true },
};

This approach ensures tests use real API response structures captured from actual requests.

Components

• LoginForm - A reusable login form component
• AuthStatus - Authentication status display component

ModalDialog

ModalDialog is a flexible modal dialog component for Vue 3, designed for authentication flows and general modal usage.

Usage Example

<ModalDialog
  :show="true"
  headerText="Sign In"
  openText="Open Login"
  cancelText="Cancel"
  submitText="Sign In"
  :enableSubmit="formIsValid"
  :loading="isLoading"
  @submit="handleSubmit"
>
  <form><!-- form fields here --></form>
</ModalDialog>

Props

| Prop | Type | Default | Description | | ------------ | ------- | -------- | ------------------------------------- | | show | Boolean | true | Whether to show the open button | | openText | String | 'Open' | Text for the open button | | headerText | String | 'Hello' | Header text in the modal | | cancelText | String | 'Cancel' | Text for the cancel button | | submitText | String | 'Submit' | Text for the submit button | | enableSubmit | Boolean | false | Enables/disables the submit button | | loading | Boolean | false | Shows loading state, disables buttons |

Events

| Event | Payload | Description | | ------ | --------------------------- | ------------------------------------- | | submit | Promise<{ close: boolean }> | Emitted when submit button is clicked |

Features

• Opens/closes modal with transitions and global CSS classes
• Closes when clicking outside the modal
• Exposes toggleModal method for programmatic control
• Slot for custom content (e.g., forms)

Accessibility

• Uses native <dialog> element
• Header aria-busy reflects loading state

Styling

Scoped CSS for buttons; modal styling can be customized as needed.

Stores

• useAuthStore - Pinia store for authentication state management

API

Auto-generated TypeScript client for Django Allauth API endpoints.

Workers

Auth Worker

auth-worker.ts is a Shared Worker for managing authentication state across multiple browser tabs/windows. It enables real-time sync of login/logout status and user data between all open tabs of your app.

Features

• Centralizes authentication state for all tabs/windows
• Broadcasts login/logout/status changes to all connected clients
• Handles API calls for session, login, and logout
• Detects network errors and offline state
• Type-safe message passing between main thread and worker

Usage

Import and connect to the worker in your app:

const worker = new SharedWorker(new URL("../workers/auth-worker", import.meta.url));
worker.port.start();
worker.port.postMessage({ type: "LOGIN", payload: { username, password, csrftoken } });
worker.port.onmessage = (event) => {
  // handle status updates, errors, etc.
};

Message Types

• LOGIN — triggers login via API
• LOGOUT — triggers logout via API
• STATUS — broadcasts current authentication state
• CLOSE — disconnects a tab/window from the worker

State

The worker maintains:

• isAuthenticated: boolean
• user: user object (if authenticated)
• errors: error response (if login fails)
• offline: boolean (if network error occurs)

Error Handling

• Uses custom error classes for API and network errors
• Sets offline state if network fetch fails

Example

See src/workers/auth-worker.ts for implementation details and message type definitions.