forked from vercel/next.js
/
firebaseContext.js
57 lines (52 loc) · 2.01 KB
/
firebaseContext.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import { useState, useEffect, createContext, useContext } from 'react'
import firebase from 'firebase/app'
import 'firebase/auth' // If you need it
import 'firebase/firestore' // If you need it
import 'firebase/storage' // If you need it
import 'firebase/analytics' // If you need it
import clientCredentials from '../credentials/client' // Your credentials
export const FirebaseContext = createContext()
export default ({ children }) => {
const [isInitialized, setIsInitialized] = useState(false)
const [user, setUser] = useState(null)
const [loadingUser, setLoadingUser] = useState(true) // Helpful, to update the UI accordingly.
useEffect(() => {
// Initialize Firebase
if (!firebase.apps.length) {
try {
firebase.initializeApp(clientCredentials)
// Analytics
if ('measurementId' in clientCredentials) firebase.analytics()
// Listen authenticated user
firebase.auth().onAuthStateChanged(async user => {
try {
if (user) {
// User is signed in.
const { uid, displayName, email, photoURL } = user
// You could also look for the user doc in your Firestore (if you have one):
// const userDoc = await firebase.firestore().doc(`users/${uid}`).get()
setUser({ uid, displayName, email, photoURL })
} else setUser(null)
} catch (error) {
// Most probably a connection error. Handle appropiately.
} finally {
setLoadingUser(false)
}
})
setIsInitialized(true)
} catch (error) {
// This error will be: Invalid API Key of something of that sort. Because you need to fill in your credentials!
console.error(error)
}
}
}, [])
return (
<FirebaseContext.Provider
value={{ isInitialized, user, setUser, loadingUser }}
>
{children}
</FirebaseContext.Provider>
)
}
// Custom hook that shorhands the context!
export const useFirebase = () => useContext(FirebaseContext)