Using the new StyledFirebaseAuth in the example.

Author: Nicolas Garnier

example/package-lock.json

@@ -5,11 +5,12 @@
     "serve": "firebase serve"
   },
   "dependencies": {
+    "ajv": "^6.0.0",
     "firebase": "^4.8.0",
     "firebaseui": "^2.6.0",
     "react": "15.6.1",
     "react-dom": "15.6.1",
-    "react-firebaseui": "^1.1.0"
+    "react-firebaseui": "^1.1.5"
   },
   "devDependencies": {
     "babel-cli": "6.24.1",

example/package.json

@@ -21,7 +21,7 @@ import ReactDOM from 'react-dom';
 // Firebase.
 import firebase from 'firebase/app';
 import 'firebase/auth';
-import FirebaseAuth from 'react-firebaseui/FirebaseAuth';
+import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
 
 // Styles
 import styles from './app.css'; // This uses CSS modules.
@@ -36,8 +36,7 @@ const firebaseApp = firebase.initializeApp(firebaseConfig);
 /**
  * The Splash Page containing the login UI.
  */
-export default class App extends React.Component {
-
+class App extends React.Component {
   uiConfig = {
     signInFlow: 'popup',
     signInOptions: [
@@ -53,6 +52,9 @@ export default class App extends React.Component {
     signedIn: false,
   };
 
+  /**
+   * @inheritDoc
+   */
   componentWillMount() {
     firebaseApp.auth().onAuthStateChanged((user) => {
       this.setState({signedIn: !!user});
@@ -71,8 +73,8 @@ 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()}/>
+            <StyledFirebaseAuth className={styles.firebaseUi} uiConfig={this.uiConfig}
+                                firebaseAuth={firebaseApp.auth()}/>
           </div>
         }
         {this.state.signedIn &&

example/src/App.jsx

@@ -24,16 +24,16 @@ const config = {
   entry: './src/App.jsx',
   output: {
     filename: 'bundle.js',
-    path: path.resolve(__dirname, './public')
+    path: path.resolve(__dirname, './public'),
   },
   devtool: 'cheap-module-source-map',
   resolve: {
-    extensions: ['.js', '.jsx', '.json']
+    extensions: ['.js', '.jsx', '.json'],
   },
   stats: {
     colors: true,
     reasons: true,
-    chunks: true
+    chunks: true,
   },
   plugins: [new ExtractTextPlugin('./bundle.css')],
   module: {
@@ -42,23 +42,23 @@ const config = {
         test: /\.jsx?$/,
         loader: 'babel-loader',
         exclude: /node_modules/,
-        include: [path.resolve('src')]
+        include: path.resolve(__dirname, './src'),
       },
       {
         test: /\.css$/,
         exclude: [/\.global\./, /node_modules/],
         loader: ExtractTextPlugin.extract(
           {
             fallback: 'style-loader',
-            use:[
+            use: [
               {
                 loader: 'css-loader',
                 options: {
                   importLoaders: 1,
                   modules: true,
                   autoprefixer: true,
                   minimize: true,
-                  localIdentName: '[name]__[local]___[hash:base64:5]'
+                  localIdentName: '[name]__[local]___[hash:base64:5]',
                 }
               }
             ]
@@ -70,13 +70,13 @@ const config = {
         loader: ExtractTextPlugin.extract(
           {
             fallback: 'style-loader',
-            use:[
+            use: [
               {
                 loader: 'css-loader',
                 options: {
                   importLoaders: 1,
                   modules: false,
-                  minimize: true
+                  minimize: true,
                 }
               }
             ]