React components and hooks for Firebase Authentication and Firestore with Mantine UI
npm install naim-firebase-auth-wrapperA lightweight React component library for Firebase Authentication and Firestore that simplifies user management, authentication, and organization handling.


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.
``bash`
npm install naim-firebase-auth-wrapperor
yarn add naim-firebase-auth-wrapper
`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;
`
`jsx
import { Login, Register, Logout } from 'naim-firebase-auth-wrapper';
// Login component
function LoginPage() {
return (
onError={(error) => console.error('Login failed:', error)}
onRegisterClick={() => navigate('/register')}
/>
);
}
// Register component
function RegisterPage() {
return (
onError={(error) => console.error('Registration failed:', error)}
onLoginClick={() => navigate('/login')}
/>
);
}
// Logout button
function LogoutButton() {
return (
onError={(error) => console.error('Logout failed:', error)}
/>
);
}
`
`jsx
import { useAuth } from 'naim-firebase-auth-wrapper';
function ProfilePage() {
const { user, loading, error } = useAuth();
if (loading) return
return (
Email: {user.email}
$3
`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 (
Your Organizations
onError={(error) => console.error('Organization error:', error)}
/>
Create New Organization
onSuccess={(orgId) => console.log('Organization created:', orgId)}
onError={(error) => console.error('Organization creation failed:', error)}
/>
);
}
`Next.js Integration
When using with Next.js, make sure to:
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 invitationsAPI 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
git clone https://github.com/NaimSakaamini/user-management.gitInstall dependencies
cd user-management
npm installRun the example app
npm run example:setup
``MIT © Naim Sakaamini