Feature: Facebook Authentication

database.rules.json

@@ -2,11 +2,11 @@
   "rules": {
     "users": {
       "$user": {
-        ".write": "auth !== null && auth.token.email_verified === true && ((auth.token.isAdmin === true && data.child('isAdmin').val() === false) || auth.uid === $user)",
-        ".read": "auth !== null && auth.token.email_verified === true && ((auth.token.isAdmin === true && data.child('isAdmin').val() === false) || auth.uid === $user)"
+        ".write": "auth !== null && (auth.token.email_verified === true || auth.provider === 'facebook') && ((auth.token.isAdmin === true && data.child('isAdmin').val() === false) || auth.uid === $user)",
+        ".read": "auth !== null && (auth.token.email_verified === true || auth.provider === 'facebook') && ((auth.token.isAdmin === true && data.child('isAdmin').val() === false) || auth.uid === $user)"
       },
-      ".write": "auth !== null && auth.token.email_verified === true && auth.token.isAdmin === true",
-      ".read": "auth !== null && auth.token.email_verified === true && auth.token.isAdmin === true"
+      ".write": "auth !== null && (auth.token.email_verified === true || auth.provider === 'facebook') && auth.token.isAdmin === true",
+      ".read": "auth !== null && (auth.token.email_verified === true || auth.provider === 'facebook') && auth.token.isAdmin === true"
     }
   }
 }

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "bulma": "^0.8.2",
+    "bulma-social": "^1.1.1",
     "classnames": "^2.2.6",
     "cookies-js": "^1.2.3",
     "date-fns": "^2.14.0",

src/components/DatePicker/__snapshots__/DatePicker.test.js.snap

@@ -47,8 +47,11 @@ exports[`<DatePickerStyled /> rendering should render without crashing 1`] = `
         "Home.content": "Home content",
         "Home.home": "Home",
         "Login.email": "E-mail Address",
+        "Login.facebook": "Continue with Facebook",
         "Login.forgotPassword": "Forgot Password?",
+        "Login.google": "Continue with Google",
         "Login.login": "Login",
+        "Login.microsoft": "Continue with Microsoft",
         "Login.password": "Password",
         "Login.setNewPassword": "Set your new password",
         "Login.setPassword": "Set Password",
@@ -97,10 +100,14 @@ exports[`<DatePickerStyled /> rendering should render without crashing 1`] = `
         "Users.permDelete": "This will permanently delete the user. Action can not be undone.",
         "Users.search": "Search:",
         "Users.users": "Users",
+        "auth/account-exists-with-different-credential": "Email on another sign in method",
+        "auth/cancelled-popup-request": "Too many pop ups, just one pop up is allowed",
         "auth/email-already-exists": "Email already in use",
         "auth/expired-action-code": "The invitation link has expired, get in touch with your administrator",
         "auth/invalid-action-code": "The invitation link has expired, get in touch with your administrator",
         "auth/invalid-email": "Email is invalid",
+        "auth/popup-blocked": "Pop up blocked by the browser, please enable pop ups for this page",
+        "auth/popup-closed-by-user": "Operation cancelled, pop up was closed",
         "auth/too-many-requests": "Too many attempts made, try again later",
         "auth/user-disabled": "User disabled",
         "auth/wrong-password": "Invalid credentials",

src/components/Layout/__snapshots__/Layout.test.js.snap

@@ -47,8 +47,11 @@ exports[`<Layout /> rendering should render without crashing 1`] = `
         "Home.content": "Home content",
         "Home.home": "Home",
         "Login.email": "E-mail Address",
+        "Login.facebook": "Continue with Facebook",
         "Login.forgotPassword": "Forgot Password?",
+        "Login.google": "Continue with Google",
         "Login.login": "Login",
+        "Login.microsoft": "Continue with Microsoft",
         "Login.password": "Password",
         "Login.setNewPassword": "Set your new password",
         "Login.setPassword": "Set Password",
@@ -97,10 +100,14 @@ exports[`<Layout /> rendering should render without crashing 1`] = `
         "Users.permDelete": "This will permanently delete the user. Action can not be undone.",
         "Users.search": "Search:",
         "Users.users": "Users",
+        "auth/account-exists-with-different-credential": "Email on another sign in method",
+        "auth/cancelled-popup-request": "Too many pop ups, just one pop up is allowed",
         "auth/email-already-exists": "Email already in use",
         "auth/expired-action-code": "The invitation link has expired, get in touch with your administrator",
         "auth/invalid-action-code": "The invitation link has expired, get in touch with your administrator",
         "auth/invalid-email": "Email is invalid",
+        "auth/popup-blocked": "Pop up blocked by the browser, please enable pop ups for this page",
+        "auth/popup-closed-by-user": "Operation cancelled, pop up was closed",
         "auth/too-many-requests": "Too many attempts made, try again later",
         "auth/user-disabled": "User disabled",
         "auth/wrong-password": "Invalid credentials",

src/components/Navigation/Aside/__snapshots__/Aside.test.js.snap

@@ -48,8 +48,11 @@ Object {
           "Home.content": "Home content",
           "Home.home": "Home",
           "Login.email": "E-mail Address",
+          "Login.facebook": "Continue with Facebook",
           "Login.forgotPassword": "Forgot Password?",
+          "Login.google": "Continue with Google",
           "Login.login": "Login",
+          "Login.microsoft": "Continue with Microsoft",
           "Login.password": "Password",
           "Login.setNewPassword": "Set your new password",
           "Login.setPassword": "Set Password",
@@ -98,10 +101,14 @@ Object {
           "Users.permDelete": "This will permanently delete the user. Action can not be undone.",
           "Users.search": "Search:",
           "Users.users": "Users",
+          "auth/account-exists-with-different-credential": "Email on another sign in method",
+          "auth/cancelled-popup-request": "Too many pop ups, just one pop up is allowed",
           "auth/email-already-exists": "Email already in use",
           "auth/expired-action-code": "The invitation link has expired, get in touch with your administrator",
           "auth/invalid-action-code": "The invitation link has expired, get in touch with your administrator",
           "auth/invalid-email": "Email is invalid",
+          "auth/popup-blocked": "Pop up blocked by the browser, please enable pop ups for this page",
+          "auth/popup-closed-by-user": "Operation cancelled, pop up was closed",
           "auth/too-many-requests": "Too many attempts made, try again later",
           "auth/user-disabled": "User disabled",
           "auth/wrong-password": "Invalid credentials",

src/components/Navigation/NavBar/__snapshots__/NavBar.test.js.snap

@@ -47,8 +47,11 @@ exports[`<NavBar /> rendering should render without crashing 1`] = `
         "Home.content": "Home content",
         "Home.home": "Home",
         "Login.email": "E-mail Address",
+        "Login.facebook": "Continue with Facebook",
         "Login.forgotPassword": "Forgot Password?",
+        "Login.google": "Continue with Google",
         "Login.login": "Login",
+        "Login.microsoft": "Continue with Microsoft",
         "Login.password": "Password",
         "Login.setNewPassword": "Set your new password",
         "Login.setPassword": "Set Password",
@@ -97,10 +100,14 @@ exports[`<NavBar /> rendering should render without crashing 1`] = `
         "Users.permDelete": "This will permanently delete the user. Action can not be undone.",
         "Users.search": "Search:",
         "Users.users": "Users",
+        "auth/account-exists-with-different-credential": "Email on another sign in method",
+        "auth/cancelled-popup-request": "Too many pop ups, just one pop up is allowed",
         "auth/email-already-exists": "Email already in use",
         "auth/expired-action-code": "The invitation link has expired, get in touch with your administrator",
         "auth/invalid-action-code": "The invitation link has expired, get in touch with your administrator",
         "auth/invalid-email": "Email is invalid",
+        "auth/popup-blocked": "Pop up blocked by the browser, please enable pop ups for this page",
+        "auth/popup-closed-by-user": "Operation cancelled, pop up was closed",
         "auth/too-many-requests": "Too many attempts made, try again later",
         "auth/user-disabled": "User disabled",
         "auth/wrong-password": "Invalid credentials",

src/components/UserForm/__snapshots__/UserForm.test.js.snap

@@ -47,8 +47,11 @@ exports[`<UserForm /> rendering should render without crashing 1`] = `
         "Home.content": "Home content",
         "Home.home": "Home",
         "Login.email": "E-mail Address",
+        "Login.facebook": "Continue with Facebook",
         "Login.forgotPassword": "Forgot Password?",
+        "Login.google": "Continue with Google",
         "Login.login": "Login",
+        "Login.microsoft": "Continue with Microsoft",
         "Login.password": "Password",
         "Login.setNewPassword": "Set your new password",
         "Login.setPassword": "Set Password",
@@ -97,10 +100,14 @@ exports[`<UserForm /> rendering should render without crashing 1`] = `
         "Users.permDelete": "This will permanently delete the user. Action can not be undone.",
         "Users.search": "Search:",
         "Users.users": "Users",
+        "auth/account-exists-with-different-credential": "Email on another sign in method",
+        "auth/cancelled-popup-request": "Too many pop ups, just one pop up is allowed",
         "auth/email-already-exists": "Email already in use",
         "auth/expired-action-code": "The invitation link has expired, get in touch with your administrator",
         "auth/invalid-action-code": "The invitation link has expired, get in touch with your administrator",
         "auth/invalid-email": "Email is invalid",
+        "auth/popup-blocked": "Pop up blocked by the browser, please enable pop ups for this page",
+        "auth/popup-closed-by-user": "Operation cancelled, pop up was closed",
         "auth/too-many-requests": "Too many attempts made, try again later",
         "auth/user-disabled": "User disabled",
         "auth/wrong-password": "Invalid credentials",

src/languages/en.json

@@ -7,6 +7,9 @@
   "Login.password": "Password",
   "Login.setPassword": "Set Password",
   "Login.forgotPassword": "Forgot Password?",
+  "Login.facebook": "Continue with Facebook",
+  "Login.google": "Continue with Google",
+  "Login.microsoft": "Continue with Microsoft",
   "NotFound.404": "Error 404: page not found",
   "NotFound.url": "The requested URL {url} was not found",
   "NotFound.back": "Go Back",
@@ -77,6 +80,10 @@
   "storage/quota-exceeded": "Internal server error, get in touch with your administrator",
   "storage/unauthenticated": "Unauthenticated, please authenticate and try again",
   "storage/unauthorized": "Unauthorized, you are not authorized to perform this action",
+  "auth/account-exists-with-different-credential": "Email on another sign in method",
+  "auth/popup-blocked": "Pop up blocked by the browser, please enable pop ups for this page",
+  "auth/popup-closed-by-user": "Operation cancelled, pop up was closed",
+  "auth/cancelled-popup-request": "Too many pop ups, just one pop up is allowed",
   "utils.default": "Unknown error, get in touch with your administrator",
   "utils.safePassword": "Safe password",
   "utils.unsafePassword": "Unsafe password",

src/languages/es.json

@@ -7,6 +7,9 @@
   "Login.password": "Contraseña",
   "Login.setPassword": "Establecer contraseña",
   "Login.forgotPassword": "Olvido su contraseña?",
+  "Login.facebook": "Continuar con Facebook",
+  "Login.google": "Continuar con Google",
+  "Login.microsoft": "Continuar con Microsoft",
   "NotFound.404": "Error 404: página no encontrada",
   "NotFound.url": "El URL {url} no fue encontrado",
   "NotFound.back": "Regresar",
@@ -77,6 +80,10 @@
   "storage/quota-exceeded": "Error interno del servidor, contáctese con su administrador",
   "storage/unauthenticated": "Sin autenticación, por favor autentíquese e intente de nuevo",
   "storage/unauthorized": "Sin autorización, no se encuentra autorizado para realizar esta acción",
+  "auth/account-exists-with-different-credential": "Email en otro método de inicio de sesión",
+  "auth/popup-blocked": "Pop up bloqueado por el navegador, por favor habilite los pop ups para esta página",
+  "auth/popup-closed-by-user": "Operacion cancelada, el pop up fue cerrado",
+  "auth/cancelled-popup-request": "Demasiados pop ups, solamente un pop up es permitido",
   "utils.default": "Error desconocido, contáctese con su administrador",
   "utils.safePassword": "Contraseña segura",
   "utils.unsafePassword": "Contraseña insegura",

src/pages/Home/__snapshots__/Home.test.js.snap

@@ -26,8 +26,11 @@ exports[`<Home /> rendering should render without crashing 1`] = `
       "Home.content": "Home content",
       "Home.home": "Home",
       "Login.email": "E-mail Address",
+      "Login.facebook": "Continue with Facebook",
       "Login.forgotPassword": "Forgot Password?",
+      "Login.google": "Continue with Google",
       "Login.login": "Login",
+      "Login.microsoft": "Continue with Microsoft",
       "Login.password": "Password",
       "Login.setNewPassword": "Set your new password",
       "Login.setPassword": "Set Password",
@@ -76,10 +79,14 @@ exports[`<Home /> rendering should render without crashing 1`] = `
       "Users.permDelete": "This will permanently delete the user. Action can not be undone.",
       "Users.search": "Search:",
       "Users.users": "Users",
+      "auth/account-exists-with-different-credential": "Email on another sign in method",
+      "auth/cancelled-popup-request": "Too many pop ups, just one pop up is allowed",
       "auth/email-already-exists": "Email already in use",
       "auth/expired-action-code": "The invitation link has expired, get in touch with your administrator",
       "auth/invalid-action-code": "The invitation link has expired, get in touch with your administrator",
       "auth/invalid-email": "Email is invalid",
+      "auth/popup-blocked": "Pop up blocked by the browser, please enable pop ups for this page",
+      "auth/popup-closed-by-user": "Operation cancelled, pop up was closed",
       "auth/too-many-requests": "Too many attempts made, try again later",
       "auth/user-disabled": "User disabled",
       "auth/wrong-password": "Invalid credentials",

src/pages/Login/Login.module.scss

@@ -1,8 +1,15 @@
 .errorMessage {
   margin: 0.7rem 0 0 0;
 }
-
-.forgot-password {
-  display: block;
-  margin: 1rem 0 0 0;
+.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.test.js

@@ -1,6 +1,8 @@
 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 '.';
 
@@ -38,3 +40,22 @@ describe('<Login /> rendering', () => {
     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);
+});
+
+it('should dispatch authFacebook action when the user tries to log in with Facebook', () => {
+  const { component } = mountWithProviders(<Login />)({
+    auth: {
+      userData: {}
+    }
+  });
+
+  component.find('#facebook').simulate('click');
+
+  expect(authActions.authFacebook).toHaveBeenCalled();
+});