Firebase Authentication in React - Notes
1. Imports
import { auth, googleProvider } from "../config/firebase";
import { createUserWithEmailAndPassword, signInWithPopup, signOut } from
"firebase/auth";
import { useState } from "react";
Notes: - auth : Firebase Authentication instance. - googleProvider : Google OAuth provider. -
createUserWithEmailAndPassword : Email/password login/signup. - signInWithPopup : OAuth login
popup. - signOut : Logout user. - useState : React hook for state management.
2. Component State
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
Notes: - Stores user email and password inputs. - React re-renders when state changes.
3. Sign In with Email/Password
async function signIn() {
try {
await createUserWithEmailAndPassword(auth, email, password);
} catch(err) {
[Link](err);
}
}
Notes: - Async function for signup/login. - try/catch handles errors (weak password, email in use). -
Returns userCredential object.
4. Sign In with Google
1
async function signInWithGoogle() {
try {
await signInWithPopup(auth, googleProvider);
} catch(err) {
[Link](err);
}
}
Notes: - Opens Google login popup. - Firebase handles OAuth flow. - Returns user info and token.
5. Sign Out
async function logOut() {
try {
await signOut(auth);
} catch(err) {
[Link](err);
}
}
Notes: - Logs out current user. - Clears [Link] .
6. Access Current User
[Link](auth?.currentUser?.email)
Notes: - Checks email of logged-in user. - [Link] is null if no user is logged in.
7. JSX / UI
<input type="email" ... />
<input type="password" ... />
<button onClick={signIn}>Sign In</button>
<button onClick={signInWithGoogle}>Sign In with Google</button>
<button onClick={logOut}>Logout </button>
Notes: - Controlled inputs update state on change. - Buttons trigger respective async functions. - Simple UI
for testing all authentication methods.
2
Summary
1. Firebase Auth with email/password.
2. Google OAuth login.
3. Logout functionality.
4. Try/catch with async/await for error handling.
5. Accessing current user via [Link] .
6. Controlled inputs with React hooks.