Step-by-Step Guide
7 steps

How to Add Authentication to Firebase Studio Apps

Firebase provides a powerful authentication system that integrates with Firebase Studio apps. This guide covers setting up email/password auth, adding Google sign-in, configuring authentication security settings, and protecting your app routes.

Scan Your App Now

Find security issues automatically before attackers do.

Follow These Steps

1

Enable authentication providers in Firebase Console

Go to Firebase Console > Authentication > Sign-in method and enable the providers you need.

Code Example
// Enable in Firebase Console:
// 1. Email/Password (with email verification ON)
// 2. Google (recommended for easy onboarding)
// 3. Any other OAuth providers you need
2

Initialize Firebase Auth in your app

Set up the Firebase Auth SDK.

Code Example
import { getAuth, onAuthStateChanged } from 'firebase/auth'
import { app } from './firebase-config'

const auth = getAuth(app)

onAuthStateChanged(auth, (user) => {
  if (user) {
    console.log('User signed in:', user.uid)
  } else {
    console.log('User signed out')
  }
})
3

Implement email/password authentication

Create signup and login functions with proper error handling.

Code Example
import { createUserWithEmailAndPassword, signInWithEmailAndPassword, sendEmailVerification } from 'firebase/auth'

async function signUp(email: string, password: string) {
  const { user } = await createUserWithEmailAndPassword(auth, email, password)
  await sendEmailVerification(user)
  return user
}

async function signIn(email: string, password: string) {
  const { user } = await signInWithEmailAndPassword(auth, email, password)
  if (!user.emailVerified) {
    throw new Error('Please verify your email before signing in')
  }
  return user
}
4

Add Google sign-in

Implement Google OAuth for easy onboarding.

Code Example
import { signInWithPopup, GoogleAuthProvider } from 'firebase/auth'

const googleProvider = new GoogleAuthProvider()

async function signInWithGoogle() {
  const result = await signInWithPopup(auth, googleProvider)
  return result.user
}
5

Protect routes in your app

Create an auth guard that redirects unauthenticated users.

Code Example
// React example
function ProtectedRoute({ children }: { children: React.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
  }, [])
  
  if (loading) return <div>Loading...</div>
  if (!user) return <Navigate to="/login" />
  return <>{children}</>
}
6

Configure security settings

Harden authentication in the Firebase Console.

Code Example
// Firebase Console > Authentication > Settings
// Enable: Email enumeration protection
// Configure: Password policy (min length, require uppercase, etc.)
// Set: Authorized domains (only your production domain)
7

Pass auth context to Security Rules

Your Security Rules use request.auth to verify the user. Ensure your auth is properly linked to Firestore access.

Code Example
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      // request.auth is automatically populated by Firebase Auth
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
  }
}

What You'll Achieve

Your Firebase Studio app has email/password and Google authentication, email verification, protected routes, security settings configured, and Security Rules linked to auth context.

Common Mistakes to Avoid

Mistake

Not requiring email verification

Fix

Without email verification, anyone can sign up with any email. Call sendEmailVerification() after signup and check emailVerified before allowing access.

Mistake

Using signInWithRedirect on Vercel/Netlify

Fix

Redirect flows may not work on all hosting platforms. Use signInWithPopup for broader compatibility.

Frequently Asked Questions

Can I use Firebase Auth without Firestore?

Yes. Firebase Auth is independent of Firestore. You can use it to authenticate users for any backend, though it integrates most seamlessly with Firebase services.

How do I handle auth state persistence?

Firebase Auth persists sessions by default using IndexedDB in the browser. Users stay signed in across page refreshes and browser restarts until they explicitly sign out.

Related Guides

Secure Your Firebase Studio AppAdd Security Rules to FirebaseAdd Two-Factor AuthenticationSecure OAuth Implementation

Ready to Secure Your App?

VAS automatically scans your deployed app for the security issues covered in this guide. Get actionable results in minutes.

Start Security Scan