Added FirebaseUI React Components

Author: TOPOFGR

README.md

@@ -675,7 +675,7 @@ service firebase.storage {
 In this boilerplate users have the option to login via e-mail and password but also they can sign-up/sign-in with their Facebook, Google and Microsoft accounts.
 
 <p align="center">
-  <img src="https://i.imgur.com/xQz5pSR.png">
+  <img src="https://i.imgur.com/AxRBSXT.png">
 </p>
 
 ### How it works?
@@ -684,7 +684,23 @@ We implemented social media authentication using Firebase!. You can take a look
 
 ### Can I add more login methods?
 
-Yes you can!. We already have the setup in place for more login methods like Twitter, GitHub, etc. You can add them without changing much code at all. You can see other login methods provided by Firebase [here](https://firebase.google.com/docs/auth/web/start).
+Yes you can!. We already have the setup in place for more login methods like Twitter, GitHub, etc. You can add them without changing much code at all.
+
+#### Adding more login methods
+
+Each login method needs a especific configuration to enable login for users, you can see other login methods provided by Firebase and how to configure them [here](https://firebase.google.com/docs/auth/web/start).
+
+Once you configured your new login method and enabled it on your Firebase console, you can add it to the Login page by adding the provider's value on `signInOptions` from `uiConfig` located in the `index.js` file, from the utils folder. You can check your provider value [here](https://github.com/firebase/firebaseui-web/#available-providers).
+
+The new value value on `signInOptions` should look like this:
+
+```javascript
+{
+ provider: ProviderValue,
+ fullLabel: 'Continue with $ProviderName',
+ scopes: ['providerScope']
+}
+```
 
 ### Facebook
 

package-lock.json

@@ -4,14 +4,14 @@
   "private": true,
   "dependencies": {
     "bulma": "^0.9.0",
-    "bulma-social": "^1.1.1",
     "classnames": "^2.2.6",
     "date-fns": "^2.15.0",
     "firebase": "^7.17.1",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-datepicker": "^3.0.0",
     "react-dom": "^16.13.1",
+    "react-firebaseui": "^4.1.0",
     "react-intl": "^5.4.5",
     "react-redux": "^7.2.1",
     "react-redux-toastr": "^7.6.4",

package.json

@@ -4,12 +4,6 @@
 .socialButtons {
   flex-direction: column;
 }
-.socialButton {
-  border-radius: 4px;
-  padding: calc(0.375em - 1px) .75em calc(0.375em - 1px) .75em;
-  margin: 5px;
-  text-align: center;
-}
 .icon {
   margin-right: 5px;
 }

src/pages/Login/Login.module.scss

@@ -1,17 +1,15 @@
 import React from 'react';
 import { Redirect } from 'react-router-dom';
-import * as reactRedux from 'react-redux';
 
-import * as authActions from 'state/actions/auth';
 import paths from '../Router/paths';
 import Login from '.';
 
 describe('<Login /> rendering', () => {
   it('should render without crashing', () => {
     const { component } = mountWithProviders(<Login />)({
       auth: {
-        userData: {}
-      }
+        userData: {},
+      },
     });
 
     expect(component).toMatchSnapshot();
@@ -21,8 +19,8 @@ describe('<Login /> rendering', () => {
     const { component } = mountWithProviders(<Login />)({
       auth: {
         userData: {},
-        error: 'sample error'
-      }
+        error: 'sample error',
+      },
     });
 
     expect(component.find('.has-text-danger').length).toBe(1);
@@ -32,56 +30,11 @@ describe('<Login /> rendering', () => {
     const { component } = mountWithProviders(<Login />)({
       auth: {
         userData: {
-          id: 'some userId'
-        }
-      }
+          id: 'some userId',
+        },
+      },
     });
 
     expect(component.contains(<Redirect to={paths.ROOT} />)).toEqual(true);
   });
 });
-
-const dispatchMock = jest.fn();
-
-beforeEach(() => {
-  jest.spyOn(reactRedux, 'useDispatch').mockImplementation(() => dispatchMock);
-  jest.spyOn(authActions, 'authFacebook').mockImplementation(jest.fn);
-  jest.spyOn(authActions, 'authGoogle').mockImplementation(jest.fn);
-  jest.spyOn(authActions, 'authMicrosoft').mockImplementation(jest.fn);
-});
-
-it('should dispatch authFacebook action when the user tries to log in with Facebook', () => {
-  const { component } = mountWithProviders(<Login />)({
-    auth: {
-      userData: {}
-    }
-  });
-
-  component.find('.is-facebook').simulate('click');
-
-  expect(authActions.authFacebook).toHaveBeenCalled();
-});
-
-it('should dispatch authGoogle action when the user tries to log in with Google', () => {
-  const { component } = mountWithProviders(<Login />)({
-    auth: {
-      userData: {}
-    }
-  });
-
-  component.find('.is-google').simulate('click');
-
-  expect(authActions.authGoogle).toHaveBeenCalled();
-});
-
-it('should dispatch authMicrosoft action when the user tries to log in with Microsoft', () => {
-  const { component } = mountWithProviders(<Login />)({
-    auth: {
-      userData: {}
-    }
-  });
-
-  component.find('.is-microsoft').simulate('click');
-
-  expect(authActions.authMicrosoft).toHaveBeenCalled();
-});

src/pages/Login/Login.test.js

@@ -267,51 +267,51 @@ exports[`<Login /> rendering should render without crashing 1`] = `
                         <div
                           className="field is-grouped socialButtons"
                         >
-                          <a
-                            className="is-facebook socialButton"
-                            onClick={[Function]}
+                          <e
+                            firebaseAuth={
+                              Object {
+                                "apiKey": "AIzaSyA0DDb3-lvIxvS9x8UZF0_A4gEThrdTIJ8",
+                                "appName": "[DEFAULT]",
+                                "authDomain": "react-firebase-admin-eeac2.firebaseapp.com",
+                                "currentUser": null,
+                              }
+                            }
+                            uiConfig={
+                              Object {
+                                "callbacks": Object {
+                                  "signInFailure": [Function],
+                                  "signInSuccessWithAuthResult": [Function],
+                                },
+                                "signInFlow": "popup",
+                                "signInOptions": Array [
+                                  Object {
+                                    "fullLabel": "Continue with Facebook",
+                                    "provider": "facebook.com",
+                                    "scopes": Array [
+                                      "email",
+                                    ],
+                                  },
+                                  Object {
+                                    "fullLabel": "Continue with Google",
+                                    "provider": "google.com",
+                                    "scopes": Array [
+                                      "https://www.googleapis.com/auth/user.addresses.read",
+                                      "https://www.googleapis.com/auth/userinfo.email",
+                                    ],
+                                  },
+                                  Object {
+                                    "fullLabel": "Continue with Microsoft",
+                                    "provider": "microsoft.com",
+                                  },
+                                ],
+                                "signInSuccessUrl": "/home",
+                              }
+                            }
                           >
-                            <span
-                              className="icon icon"
-                            >
-                              <i
-                                className="mdi mdi-facebook"
-                              />
-                            </span>
-                            <span>
-                              Continue with Facebook
-                            </span>
-                          </a>
-                          <a
-                            className="is-google socialButton"
-                            onClick={[Function]}
-                          >
-                            <span
-                              className="icon icon"
-                            >
-                              <i
-                                className="mdi mdi-google"
-                              />
-                            </span>
-                            <span>
-                              Continue with Google
-                            </span>
-                          </a>
-                          <a
-                            className="is-microsoft socialButton"
-                            onClick={[Function]}
-                          >
-                            <span
-                              className="icon icon"
-                            >
-                              <i
-                                className="mdi mdi-microsoft"
-                              />
-                            </span>
-                            <span>
-                              Continue with Microsoft
-                            </span>
-                          </a>
+                            <div
+                              id="firebaseui_container"
+                            />
+                          </e>
                         </div>
                       </div>
                     </div>