How to use Firebase authentication in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Firebase authentication provides a complete user management solution for React applications with built-in support for multiple login providers and security features. As the creator of CoreUI with extensive React development experience since 2014, I’ve integrated Firebase auth in numerous production applications for rapid authentication setup. The most efficient approach uses Firebase SDK with React Context to manage authentication state across your application. This solution eliminates the need for custom backend authentication while providing enterprise-grade security and user management.
Set up Firebase authentication with React Context for complete user management functionality.
import { createContext, useContext, useState, useEffect } from 'react'
import {
auth,
signInWithEmailAndPassword,
createUserWithEmailAndPassword,
signOut,
onAuthStateChanged
} from './firebase'
const AuthContext = createContext()
export function AuthProvider({ children }) {
const [user, setUser] = useState(null)
const [loading, setLoading] = useState(true)
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (user) => {
setUser(user)
setLoading(false)
})
return unsubscribe
}, [])
const login = (email, password) => {
return signInWithEmailAndPassword(auth, email, password)
}
const signup = (email, password) => {
return createUserWithEmailAndPassword(auth, email, password)
}
const logout = () => {
return signOut(auth)
}
return (
<AuthContext.Provider value={{ user, login, signup, logout }}>
{!loading && children}
</AuthContext.Provider>
)
}
export const useAuth = () => useContext(AuthContext)
This code creates an authentication context that integrates with Firebase Auth services. The onAuthStateChanged listener automatically updates the user state when authentication status changes, providing real-time auth state management. The context provides login, signup, and logout methods that directly interface with Firebase authentication APIs.
Best Practice Note:
This is the Firebase authentication setup we recommend in CoreUI projects for rapid deployment with enterprise-grade security. Firebase handles password hashing, email verification, and security best practices automatically, making it ideal for MVP and production applications.
