Firebase Authentication Implementation
Overview
This skill provides a complete guide for implementing Firebase Authentication in a React + TypeScript application.
Prerequisites
- •Firebase project created
- •React + TypeScript app
- •React Router installed
Step 1: Install Dependencies
bash
npm install firebase
Step 2: Firebase Configuration
Create src/config/firebase.ts:
typescript
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
const firebaseConfig = {
apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
appId: import.meta.env.VITE_FIREBASE_APP_ID
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
Environment Variables (.env):
code
VITE_FIREBASE_API_KEY=your-api-key VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com VITE_FIREBASE_PROJECT_ID=your-project-id VITE_FIREBASE_STORAGE_BUCKET=your-project.appspot.com VITE_FIREBASE_MESSAGING_SENDER_ID=your-sender-id VITE_FIREBASE_APP_ID=your-app-id
Step 3: Auth Context
Create src/context/AuthContext.tsx:
typescript
import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
import {
User,
createUserWithEmailAndPassword,
signInWithEmailAndPassword,
signOut,
onAuthStateChanged,
sendPasswordResetEmail,
sendEmailVerification,
updateProfile
} from 'firebase/auth';
import { auth } from '../config/firebase';
interface AuthContextType {
user: User | null;
loading: boolean;
signup: (email: string, password: string, displayName: string) => Promise<void>;
login: (email: string, password: string) => Promise<void>;
logout: () => Promise<void>;
resetPassword: (email: string) => Promise<void>;
}
const AuthContext = createContext<AuthContextType | undefined>(undefined);
export const useAuth = () => {
const context = useContext(AuthContext);
if (!context) {
throw new Error('useAuth must be used within AuthProvider');
}
return context;
};
export const AuthProvider = ({ children }: { children: ReactNode }) => {
const [user, setUser] = useState<User | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (user) => {
setUser(user);
setLoading(false);
});
return unsubscribe;
}, []);
const signup = async (email: string, password: string, displayName: string) => {
const userCredential = await createUserWithEmailAndPassword(auth, email, password);
// Update profile with display name
await updateProfile(userCredential.user, { displayName });
// Send verification email
await sendEmailVerification(userCredential.user);
};
const login = async (email: string, password: string) => {
await signInWithEmailAndPassword(auth, email, password);
};
const logout = async () => {
await signOut(auth);
};
const resetPassword = async (email: string) => {
await sendPasswordResetEmail(auth, email);
};
const value = {
user,
loading,
signup,
login,
logout,
resetPassword
};
return (
<AuthContext.Provider value={value}>
{!loading && children}
</AuthContext.Provider>
);
};
Step 4: Login Component
Create src/pages/Login.tsx:
typescript
import { useState, FormEvent } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
export const Login = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const { login } = useAuth();
const navigate = useNavigate();
const handleSubmit = async (e: FormEvent) => {
e.preventDefault();
try {
setError('');
setLoading(true);
await login(email, password);
navigate('/');
} catch (err: any) {
setError(err.message);
} finally {
setLoading(false);
}
};
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="max-w-md w-full space-y-8 p-8 bg-white rounded-lg shadow">
<h2 className="text-3xl font-bold text-center">Sign In</h2>
{error && (
<div className="bg-red-50 text-red-600 p-3 rounded">
{error}
</div>
)}
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<label className="block text-sm font-medium text-gray-700">
Email
</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700">
Password
</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md"
/>
</div>
<button
type="submit"
disabled={loading}
className="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-md disabled:opacity-50"
>
{loading ? 'Signing in...' : 'Sign In'}
</button>
</form>
<div className="text-center space-y-2">
<Link to="/forgot-password" className="text-sm text-blue-600 hover:underline">
Forgot password?
</Link>
<div>
<span className="text-sm text-gray-600">Don't have an account? </span>
<Link to="/signup" className="text-sm text-blue-600 hover:underline">
Sign up
</Link>
</div>
</div>
</div>
</div>
);
};
Step 5: Signup Component
Create src/pages/Signup.tsx:
typescript
import { useState, FormEvent } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
export const Signup = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [displayName, setDisplayName] = useState('');
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const { signup } = useAuth();
const navigate = useNavigate();
const handleSubmit = async (e: FormEvent) => {
e.preventDefault();
if (password !== confirmPassword) {
return setError('Passwords do not match');
}
if (password.length < 8) {
return setError('Password must be at least 8 characters');
}
try {
setError('');
setLoading(true);
await signup(email, password, displayName);
navigate('/verify-email');
} catch (err: any) {
setError(err.message);
} finally {
setLoading(false);
}
};
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="max-w-md w-full space-y-8 p-8 bg-white rounded-lg shadow">
<h2 className="text-3xl font-bold text-center">Create Account</h2>
{error && (
<div className="bg-red-50 text-red-600 p-3 rounded">
{error}
</div>
)}
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<label className="block text-sm font-medium text-gray-700">
Display Name
</label>
<input
type="text"
value={displayName}
onChange={(e) => setDisplayName(e.target.value)}
required
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700">
Email
</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700">
Password
</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
minLength={8}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700">
Confirm Password
</label>
<input
type="password"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
required
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md"
/>
</div>
<button
type="submit"
disabled={loading}
className="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-md disabled:opacity-50"
>
{loading ? 'Creating account...' : 'Sign Up'}
</button>
</form>
<div className="text-center">
<span className="text-sm text-gray-600">Already have an account? </span>
<Link to="/login" className="text-sm text-blue-600 hover:underline">
Sign in
</Link>
</div>
</div>
</div>
);
};
Step 6: Password Reset Component
Create src/pages/ForgotPassword.tsx:
typescript
import { useState, FormEvent } from 'react';
import { Link } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
export const ForgotPassword = () => {
const [email, setEmail] = useState('');
const [error, setError] = useState('');
const [message, setMessage] = useState('');
const [loading, setLoading] = useState(false);
const { resetPassword } = useAuth();
const handleSubmit = async (e: FormEvent) => {
e.preventDefault();
try {
setError('');
setMessage('');
setLoading(true);
await resetPassword(email);
setMessage('Check your email for password reset instructions');
} catch (err: any) {
setError(err.message);
} finally {
setLoading(false);
}
};
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="max-w-md w-full space-y-8 p-8 bg-white rounded-lg shadow">
<h2 className="text-3xl font-bold text-center">Reset Password</h2>
{error && (
<div className="bg-red-50 text-red-600 p-3 rounded">
{error}
</div>
)}
{message && (
<div className="bg-green-50 text-green-600 p-3 rounded">
{message}
</div>
)}
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<label className="block text-sm font-medium text-gray-700">
Email
</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md"
/>
</div>
<button
type="submit"
disabled={loading}
className="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-md disabled:opacity-50"
>
{loading ? 'Sending...' : 'Send Reset Link'}
</button>
</form>
<div className="text-center">
<Link to="/login" className="text-sm text-blue-600 hover:underline">
Back to login
</Link>
</div>
</div>
</div>
);
};
Step 7: Protected Route Component
Create src/components/ProtectedRoute.tsx:
typescript
import { Navigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
interface ProtectedRouteProps {
children: React.ReactNode;
}
export const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
const { user } = useAuth();
if (!user) {
return <Navigate to="/login" replace />;
}
return <>{children}</>;
};
Step 8: Update App.tsx
typescript
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { AuthProvider } from './context/AuthContext';
import { ProtectedRoute } from './components/ProtectedRoute';
import { Login } from './pages/Login';
import { Signup } from './pages/Signup';
import { ForgotPassword } from './pages/ForgotPassword';
import { Dashboard } from './pages/Dashboard';
function App() {
return (
<BrowserRouter>
<AuthProvider>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/signup" element={<Signup />} />
<Route path="/forgot-password" element={<ForgotPassword />} />
<Route path="/" element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
} />
{/* Add other protected routes */}
</Routes>
</AuthProvider>
</BrowserRouter>
);
}
export default App;
Step 9: Firestore Data Migration
Migrate from localStorage to Firestore:
typescript
// src/hooks/useUserData.ts
import { useEffect, useState } from 'react';
import { collection, query, where, onSnapshot, addDoc, updateDoc, deleteDoc, doc } from 'firebase/firestore';
import { db } from '../config/firebase';
import { useAuth } from '../context/AuthContext';
export const useUserData = () => {
const { user } = useAuth();
const [entries, setEntries] = useState<Entry[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
if (!user) return;
const q = query(
collection(db, 'entries'),
where('userId', '==', user.uid)
);
const unsubscribe = onSnapshot(q, (snapshot) => {
const data = snapshot.docs.map(doc => ({
id: doc.id,
...doc.data()
})) as Entry[];
setEntries(data);
setLoading(false);
});
return unsubscribe;
}, [user]);
const addEntry = async (entry: Omit<Entry, 'id'>) => {
if (!user) return;
await addDoc(collection(db, 'entries'), {
...entry,
userId: user.uid
});
};
const updateEntry = async (id: string, data: Partial<Entry>) => {
await updateDoc(doc(db, 'entries', id), data);
};
const deleteEntry = async (id: string) => {
await deleteDoc(doc(db, 'entries', id));
};
return { entries, loading, addEntry, updateEntry, deleteEntry };
};
Firestore Security Rules
javascript
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /entries/{entryId} {
allow read, write: if request.auth != null &&
request.auth.uid == resource.data.userId;
allow create: if request.auth != null &&
request.auth.uid == request.resource.data.userId;
}
match /templates/{templateId} {
allow read, write: if request.auth != null &&
request.auth.uid == resource.data.userId;
allow create: if request.auth != null &&
request.auth.uid == request.resource.data.userId;
}
}
}
Testing
typescript
// src/__tests__/auth.test.ts
import { describe, it, expect, vi } from 'vitest';
import { renderHook, waitFor } from '@testing-library/react';
import { useAuth } from '../context/AuthContext';
describe('Authentication', () => {
it('should login user', async () => {
const { result } = renderHook(() => useAuth());
await waitFor(() => {
result.current.login('test@example.com', 'password123');
});
expect(result.current.user).toBeTruthy();
});
});
Checklist
- • Firebase project created
- • Dependencies installed
- • Firebase config added
- • Environment variables set
- • Auth context implemented
- • Login page created
- • Signup page created
- • Password reset page created
- • Protected routes implemented
- • Firestore rules configured
- • Data migration completed
- • Testing implemented
- • Email verification enabled
- • Error handling added
- • Loading states implemented