Home›Firebase in 5 Days›Day 1
Day 1 of 5
⏱ ~60 minutes
Firebase in 5 Days — Day 1

Firebase Setup and Authentication

Create a Firebase project, add auth providers, and build sign-up/login/logout flows.

Firebase Project Setup

Install
npm install firebase
src/firebase.js
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: 'your-app.firebaseapp.com',
  projectId: 'your-app-id',
  storageBucket: 'your-app.appspot.com',
  messagingSenderId: '123456789',
  appId: '1:123456789:web:abcdef'
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
Auth operations
import { auth } from './firebase';
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signInWithPopup,
  GoogleAuthProvider,
  signOut,
  onAuthStateChanged
} from 'firebase/auth';

// Sign up
await createUserWithEmailAndPassword(auth, email, password);

// Login
await signInWithEmailAndPassword(auth, email, password);

// Google OAuth
const provider = new GoogleAuthProvider();
await signInWithPopup(auth, provider);

// Logout
await signOut(auth);

// Listen to auth state
onAuthStateChanged(auth, (user) => {
  if (user) console.log('Logged in:', user.uid);
  else console.log('Logged out');
});
📝 Day 1 Exercise
Build Firebase Auth
  1. C
  2. r
  3. e
  4. a
  5. t
  6. e
  8. a
  10. F
  11. i
  12. r
  13. e
  14. b
  15. a
  16. s
  17. e
  19. p
  20. r
  21. o
  22. j
  23. e
  24. c
  25. t
  26. .
  28. E
  29. n
  30. a
  31. b
  32. l
  33. e
  35. e
  36. m
  37. a
  38. i
  39. l
  40. /
  41. p
  42. a
  43. s
  44. s
  45. w
  46. o
  47. r
  48. d
  50. a
  51. n
  52. d
  54. G
  55. o
  56. o
  57. g
  58. l
  59. e
  61. a
  62. u
  63. t
  64. h
  66. i
  67. n
  69. t
  70. h
  71. e
  73. c
  74. o
  75. n
  76. s
  77. o
  78. l
  79. e
  80. .
  82. B
  83. u
  84. i
  85. l
  86. d
  88. l
  89. o
  90. g
  91. i
  92. n
  93. ,
  95. s
  96. i
  97. g
  98. n
  99. -
  100. u
  101. p
  102. ,
  104. a
  105. n
  106. d
  108. l
  109. o
  110. g
  111. o
  112. u
  113. t
  115. f
  116. l
  117. o
  118. w
  119. s
  120. .
  122. D
  123. i
  124. s
  125. p
  126. l
  127. a
  128. y
  130. t
  131. h
  132. e
  134. u
  135. s
  136. e
  137. r
  138. '
  139. s
  141. d
  142. i
  143. s
  144. p
  145. l
  146. a
  147. y
  149. n
  150. a
  151. m
  152. e
  154. a
  155. n
  156. d
  158. p
  159. h
  160. o
  161. t
  162. o
  164. w
  165. h
  166. e
  167. n
  169. l
  170. o
  171. g
  172. g
  173. e
  174. d
  176. i
  177. n
  178. .

Day 1 Summary

  • Firebase console: Authentication → Sign-in methods to enable providers.
  • createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut — the core auth methods.
  • onAuthStateChanged is the auth state listener. Use it to update your app's UI.
  • Store the Firebase config in environment variables. The API key is public-safe but should still not be hardcoded.
Next →
Day 2: Firestore: NoSQL Database
→
Finished this lesson?