Better example using the auth listener for the state with a signet button

Author: Nicolas Garnier

example/package-lock.json

@@ -6,10 +6,10 @@
   },
   "dependencies": {
     "firebase": "^4.8.0",
-    "firebaseui": "^2.3.0",
+    "firebaseui": "^2.6.0",
     "react": "15.6.1",
     "react-dom": "15.6.1",
-    "react-firebaseui": "^1.0.10"
+    "react-firebaseui": "^1.1.0"
   },
   "devDependencies": {
     "babel-cli": "6.24.1",

example/package.json

@@ -42,20 +42,23 @@ export default class App extends React.Component {
     signInFlow: 'popup',
     signInOptions: [
       firebase.auth.GoogleAuthProvider.PROVIDER_ID,
-      firebase.auth.FacebookAuthProvider.PROVIDER_ID
+      firebase.auth.FacebookAuthProvider.PROVIDER_ID,
     ],
     callbacks: {
-      signInSuccess: () => {
-        this.setState({signedIn: true});
-        return false;
-      }
-    }
+      signInSuccess: () => false,
+    },
   };
 
   state = {
-    signedIn: false
+    signedIn: false,
   };
 
+  componentWillMount() {
+    firebaseApp.auth().onAuthStateChanged((user) => {
+      this.setState({signedIn: !!user});
+    });
+  }
+
   /**
    * @inheritDoc
    */
@@ -68,13 +71,15 @@ export default class App extends React.Component {
         <div className={styles.caption}>This is a cool demo app</div>
         {!this.state.signedIn &&
           <div>
-            <FirebaseAuth className={styles.firebaseUi} uiConfig={this.uiConfig} firebaseAuth={firebaseApp.auth()}/>
+            <FirebaseAuth className={styles.firebaseUi} uiConfig={this.uiConfig}
+                          firebaseAuth={firebaseApp.auth()}/>
           </div>
         }
         {this.state.signedIn &&
-        <div>
-          Hello {firebaseApp.auth().currentUser.displayName}. You are now signed In!
-        </div>
+          <div className={styles.signedIn}>
+            Hello {firebaseApp.auth().currentUser.displayName}. You are now signed In!
+            <a className={styles.button} onClick={() => firebaseApp.auth().signOut()}>Sign-out</a>
+          </div>
         }
       </div>
     );

example/src/App.jsx

@@ -30,6 +30,12 @@
   flex-direction: column;
   font-family: sans-serif;
 }
+.signedIn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
 .logo {
   font-family: 'Amaranth', sans-serif;
   font-size: 200%;
@@ -62,3 +68,9 @@
 .firebaseUi {
   min-width: 250px;
 }
+.button {
+  cursor: pointer;
+  color: blue;
+  text-decoration: underline;
+  margin-top: 10px;
+}