Vue Auth Lib

A flexible Vue 3 authentication library with adapter pattern for easy integration with any authentication provider.

Features

• 🔐 Adapter Pattern: Support for multiple authentication providers (Firebase, Auth0, custom, etc.)
• 🎯 Vue 3 Composition API: Built with Vue 3's Composition API for optimal developer experience
• 🧩 Plugin System: Easy integration with Vue applications
• 📦 Tree-shakable: Only import what you need
• 🎨 Pre-built Components: Ready-to-use login, register, and logout components
• 🔄 Reactive State: Automatic user state management
• 🛡️ TypeScript Ready: Full TypeScript support
• ⚡ Simple Setup: Just pass your config and the library handles the rest

Installation

npm install vue-auth-lib

Quick Start

1. Install the Plugin (Simple Method)

import { createApp } from 'vue'
import { AuthPlugin } from 'vue-auth-lib'
import App from './App.vue'

// Firebase configuration
const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id"
}

// Create and configure the Vue app
const app = createApp(App)

// Install plugin - the library handles Firebase initialization
app.use(AuthPlugin, {
  adapter: 'firebase',
  config: firebaseConfig
})

app.mount('#app')

2. Use in Components

<template>
  <div>
    <div v-if="!user">
      <LoginForm />
      <RegisterForm />
    </div>
    <div v-else>
      <p>Welcome, {{ user.email }}!</p>
      <LogoutButton />
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useAuth, LoginForm, RegisterForm, LogoutButton } from 'vue-auth-lib'

const { user, initUser } = useAuth()

onMounted(async () => {
  await initUser()
})
</script>

Advanced Setup

Manual Adapter Configuration

If you prefer to handle Firebase initialization manually:

import { createApp } from 'vue'
import { AuthPlugin, FirebaseAdapter } from 'vue-auth-lib'
import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'

// Initialize Firebase manually
const firebaseApp = initializeApp(firebaseConfig)
const auth = getAuth(firebaseApp)

// Create adapter
const authAdapter = new FirebaseAdapter(auth)

// Install plugin
const app = createApp(App)
app.use(AuthPlugin, {
  adapter: authAdapter
})

API Reference

Plugin

AuthPlugin

Vue plugin that provides authentication functionality throughout your app.

Simple Configuration:

app.use(AuthPlugin, {
  adapter: 'firebase',
  config: firebaseConfig
})

Manual Configuration:

app.use(AuthPlugin, {
  adapter: authAdapter // Your adapter instance
})

Composables

useAuth()

Returns authentication methods and reactive user state.

const {
  user,           // Reactive user object
  login,          // Login function
  register,       // Register function
  logout,         // Logout function
  recoverPassword, // Password recovery function
  getCurrentUser,  // Get current user function
  initUser        // Initialize user state function
} = useAuth()

Components

LoginForm

Pre-built login form component.

<LoginForm />

RegisterForm

Pre-built registration form component.

<RegisterForm />

LogoutButton

Pre-built logout button component.

<LogoutButton />

RecoverPasswordForm

Pre-built password recovery form component.

<RecoverPasswordForm />

Adapters

FirebaseAdapter

Firebase authentication adapter.

import { FirebaseAdapter } from 'vue-auth-lib'
import { getAuth } from 'firebase/auth'

const auth = getAuth(firebaseApp)
const adapter = new FirebaseAdapter(auth)

Custom Adapter

Create your own adapter by implementing the AuthAdapter interface:

import AuthAdapter from 'vue-auth-lib/dist/authAdapter'

class CustomAuthAdapter extends AuthAdapter {
  async login(email, password) {
    // Your login logic
  }
  
  async register(email, password) {
    // Your registration logic
  }
  
  async logout() {
    // Your logout logic
  }
  
  async recoverPassword(email) {
    // Your password recovery logic
  }
  
  async getCurrentUser() {
    // Return current user
  }
}

Development

Building the Library

# Install dependencies
npm install

# Build the library
npm run build:lib

Local Development

# Start development server
npm run dev

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.