Firebase Auth Wrapper

A lightweight React component library for Firebase Authentication and Firestore that simplifies user management, authentication, and organization handling.


What This Package Does

This package provides ready-to-use React components and hooks that handle:

- Authentication: Login, registration, password reset, and Google sign-in
- User Management: Profile creation, updates, and session management
- Organization Management: Create and manage multi-tenant organizations
- Role-Based Access: Control user permissions within organizations
- Invitations: Invite users to organizations with customizable roles

All components are built with Mantine UI for a modern, responsive design.

Installation

``bash
npm install naim-firebase-auth-wrapper


or

`jsx
// _app.jsx or App.jsx
import { AuthProvider } from 'naim-firebase-auth-wrapper';
import 'naim-firebase-auth-wrapper/style.css';

const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
// ... other Firebase config
};

function MyApp({ Component, pageProps }) {
return (



);
}

export default MyApp;
`

$3

`jsx
import { Login, Register, Logout } from 'naim-firebase-auth-wrapper';

// Login component
function LoginPage() {
return (
onSuccess={() => console.log('Login successful')}
onError={(error) => console.error('Login failed:', error)}
onRegisterClick={() => navigate('/register')}
/>
);
}

// Register component
function RegisterPage() {
return (
onSuccess={() => console.log('Registration successful')}
onError={(error) => console.error('Registration failed:', error)}
onLoginClick={() => navigate('/login')}
/>
);
}

// Logout button
function LogoutButton() {
return (
onSuccess={() => console.log('Logout successful')}
onError={(error) => console.error('Logout failed:', error)}
/>
);
}
`

$3

`jsx
import { useAuth } from 'naim-firebase-auth-wrapper';

function ProfilePage() {
const { user, loading, error } = useAuth();

if (loading) return

`jsx
import { UserProfile } from 'naim-firebase-auth-wrapper';

function ProfilePage() {
return (
onSuccess={() => console.log('Profile updated')}
onError={(error) => console.error('Profile update failed:', error)}
/>
);
}
`

$3

`jsx
import {
OrganizationManagement,
CreateOrganization
} from 'naim-firebase-auth-wrapper';

function OrganizationsPage() {
return (


1. Add the 'use client' directive to components using this library
2. Add the package to transpilePackages in your next.config.js:

`js
// next.config.js
module.exports = {
transpilePackages: ['naim-firebase-auth-wrapper']
}
`

Available Components

- AuthProvider - Context provider for authentication state
- Login - Email/password and Google sign-in form
- Register - User registration form
- Logout - Logout button
- UserProfile - User profile management form
- PasswordChange - Password change form
- OrganizationManagement - Organization management dashboard
- CreateOrganization - Organization creation form
- OrganizationSelector - Dropdown to select current organization
- SessionManager - User session management
- InviteUserForm - Form to invite users to an organization
- InvitationList - List of pending invitations
- AcceptInvitation - Component to accept/decline invitations

API Reference

For detailed API documentation, see the API Reference.

Example Application

Check out the included Next.js example application that demonstrates all features:

`bash


Clone the repository

License

MIT © Naim Sakaamini