Created
September 25, 2021 17:27
-
-
Save Gladkov-Art/74e3e2073f0fc0db5e772c9ef02c22e2 to your computer and use it in GitHub Desktop.
Firestore persistence enabling error
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
////////// Index.tsx | |
import { FirebaseAppProvider } from 'reactfire'; | |
import FIREBASE_CONFIG from './firebase-config'; | |
ReactDOM.render( | |
<FirebaseAppProvider firebaseConfig={FIREBASE_CONFIG}> | |
<React.StrictMode> | |
<AppWithFirebase /> | |
</React.StrictMode> | |
</FirebaseAppProvider>, | |
document.getElementById('root') | |
); | |
////////// App.tsx | |
import { initializeAppCheck, ReCaptchaV3Provider } from 'firebase/app-check'; | |
import { enableIndexedDbPersistence, initializeFirestore } from "@firebase/firestore"; | |
import { useFirebaseApp, useInitFirestore, AppCheckProvider, AuthProvider, useUser, FirestoreProvider } from 'reactfire'; | |
import { getAuth } from "firebase/auth"; | |
const AppWithFirebase = () => { | |
const app = useFirebaseApp(); | |
const appCheck = initializeAppCheck(app, { | |
provider: new ReCaptchaV3Provider('some-recaptcha-key'), | |
isTokenAutoRefreshEnabled: true | |
}); | |
const auth = getAuth(app); | |
return ( | |
<AppCheckProvider sdk={appCheck}> | |
<AuthProvider sdk={auth}> | |
<App /> | |
</AuthProvider> | |
</AppCheckProvider> | |
); | |
} | |
const App = () => { | |
const { status , data: firebaseUser } = useUser(); | |
console.log(`Firebase auth status: ${status}`) | |
console.log(`Firebase user: ${firebaseUser}`) | |
if (status === 'loading' || firebaseUser === undefined) { | |
return ( | |
<div> | |
<p>Initialising User...</p> | |
</div> | |
) | |
} else if (firebaseUser != null) { | |
return <AuthorizedApp user={firebaseUser.email!}/>; | |
} else { | |
return ( | |
<Authentication/> | |
); | |
} | |
} | |
type AuthorizedAppProps = { | |
user: string | |
} | |
const AuthorizedApp = (props: AuthorizedAppProps) => { | |
const { status, data: firestoreIntance } = useInitFirestore(async (firebaseApp) => { | |
const db = initializeFirestore(firebaseApp, {}); | |
await enableIndexedDbPersistence(db); | |
return db; | |
}); | |
if (status === 'loading') { | |
return ( | |
<div> | |
<p>Initialising User...</p> | |
</div> | |
) | |
} | |
return ( | |
<FirestoreProvider sdk={firestoreIntance}> | |
<Router> | |
<Switch> | |
<Route exact path='/'> | |
<CategoryList /> | |
</Route> | |
<Route exact path='/add-expense'> | |
<AddExpense user={props.user}/> | |
</Route> | |
</Switch> | |
</Router> | |
</FirestoreProvider> | |
); | |
} | |
export default AppWithFirebase; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment