How to Restrict Access to Logged-in Users in Firebase

1rules_version = '2';
2service cloud.firestore {
3  match /databases/{database}/documents {
4
5    // Global: require auth for all collections
6    match /{document=**} {
7      allow read, write: if request.auth != null;
8    }
9
10    // Better: per-collection rules with ownership
11    match /profiles/{userId} {
12      allow read: if request.auth != null;
13      allow write: if request.auth != null
14                   && request.auth.uid == userId;
15    }
16
17    match /posts/{postId} {
18      allow read: if request.auth != null;
19      allow create: if request.auth != null
20                    && request.resource.data.authorId == request.auth.uid;
21      allow update, delete: if request.auth != null
22                            && resource.data.authorId == request.auth.uid;
23    }
24  }
25}

1rules_version = '2';
2service firebase.storage {
3  match /b/{bucket}/o {
4    // User files: only the owner can access
5    match /users/{userId}/{allPaths=**} {
6      allow read, write: if request.auth != null
7                         && request.auth.uid == userId;
8    }
9
10    // Shared files: any authenticated user can read
11    match /shared/{allPaths=**} {
12      allow read: if request.auth != null;
13      allow write: if request.auth != null
14                   && request.resource.size < 10 * 1024 * 1024;
15    }
16  }
17}

1import { getAuth, onAuthStateChanged, User } from 'firebase/auth'
2
3const auth = getAuth()
4
5onAuthStateChanged(auth, (user: User | null) => {
6  if (user) {
7    console.log('Signed in as:', user.email)
8    // Show authenticated UI
9  } else {
10    console.log('Not signed in.')
11    // Redirect to login page
12    window.location.href = '/login'
13  }
14})

1import { useState, useEffect, ReactNode } from 'react'
2import { getAuth, onAuthStateChanged, User } from 'firebase/auth'
3
4interface AuthGuardProps {
5  children: ReactNode
6  fallback?: ReactNode
7}
8
9export function AuthGuard({ children, fallback }: AuthGuardProps) {
10  const [user, setUser] = useState<User | null>(null)
11  const [loading, setLoading] = useState(true)
12
13  useEffect(() => {
14    const unsubscribe = onAuthStateChanged(getAuth(), (user) => {
15      setUser(user)
16      setLoading(false)
17    })
18    return () => unsubscribe()
19  }, [])
20
21  if (loading) {
22    return <div>Loading...</div>
23  }
24
25  if (!user) {
26    return fallback ?? <div>Please <a href="/login">sign in</a> to continue.</div>
27  }
28
29  return <>{children}</>
30}
31
32// Usage:
33// <AuthGuard>
34//   <Dashboard />
35// </AuthGuard>

1import { getAuth, onAuthStateChanged, User } from 'firebase/auth'
2
3function waitForAuth(): Promise<User | null> {
4  return new Promise((resolve) => {
5    const unsubscribe = onAuthStateChanged(getAuth(), (user) => {
6      unsubscribe()
7      resolve(user)
8    })
9  })
10}
11
12// Use before any Firestore query
13async function loadDashboardData() {
14  const user = await waitForAuth()
15
16  if (!user) {
17    console.log('Not authenticated. Redirect to login.')
18    return
19  }
20
21  // Now safe to query — auth token is attached
22  const snapshot = await getDocs(
23    query(collection(db, 'posts'), where('authorId', '==', user.uid))
24  )
25  return snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }))
26}