React Firebase Auth
Easily integrate Firebase Authentication in your react(-native) app.
React Firebase Auth exports the following components :
- FirebaseAuthProvider
- FirebaseAuthConsumer
- IfFirebaseAuthed
- IfFirebaseAuthedAnd
- IfFirebaseUnAuthed
Usage
Change PROJECT_NAME to your project name and grab your firebase config here : https://console.firebase.google.com/project/PROJECT_NAME/settings/general/
// Firebase Configconst config = apiKey: "API_KEY" authDomain: "AUTH_DOMAIN" projectId: "PROJECT_ID" // OPTIONAL databaseURL: "DATABASE_URL" storageBucket: "STORAGE_BUCKET" messagingSenderId: "MESSAGING_SENDER_ID";
Place an AuthProvider Component anywhere in your component tree as an ancestor to any of the other react-firebase-auth-provider components and pass to it your firebase config.
;;; const config = apiKey: "API_KEY" authDomain: "AUTH_DOMAIN" projectId: "PROJECT_ID" // OPTIONAL databaseURL: "DATABASE_URL" storageBucket: "STORAGE_BUCKET" messagingSenderId: "MESSAGING_SENDER_ID"; const MyApp = { return <FirebaseAuthProvider ...config firebase=firebase> <div> <button onClick= { const googleAuthProvider = ; firebase; } > Sign In with Google </button> <button onClick= { firebase; } > Sign In Anonymously </button> <button onClick= { firebase; } > Sign Out </button> <FirebaseAuthConsumer> { return <pre style= height: 300 overflow: "auto" > JSON </pre> ; } </FirebaseAuthConsumer> <div> <IfFirebaseAuthed> { return <div>You are authenticated</div>; } </IfFirebaseAuthed> <IfFirebaseAuthedAnd filter= providerId !== "anonymous" > { return <div>You are authenticated with providerId</div>; } </IfFirebaseAuthedAnd> </div> </div> </FirebaseAuthProvider> ;};