feat(Facebook): Implementing Facebook auth

.env.example

@@ -4,3 +4,4 @@ VUE_APP_SENTRY_PROJECT_ID=projectId
 VUE_APP_SENTRY_ENABLED=false
 VUE_APP_GOOGLE_ANALYTICS_ID=id
 VUE_APP_GOOGLE_ANALYTICS_ENABLED=false
+VUE_APP_FACEBOOK_APP_ID=id

CHANGELOG.md

@@ -1,5 +1,30 @@
 # 📈 LIST OF CHANGES FOR WEREWOLVES ASSISTANT WEB
 
+## 1.0.0-beta.12 (2021-??-??)
+
+### 📦 Packages
+
+* `vue-facebook-login-component` installed with version `4.0.1`.
+* `@fortawesome/fontawesome-free` updated to version `5.15.3`.
+* `@sentry/browser` updated to version `6.2.3`.
+* `@sentry/integrations` updated to version `6.2.3`.
+* `@vue/cli-plugin-e2e-cypress` updated to version `4.5.12`.
+* `@vue/cli-plugin-eslint` updated to version `4.5.12`.
+* `@vue/cli-plugin-router` updated to version `4.5.12`.
+* `@vue/cli-plugin-unit-mocha` updated to version `4.5.12`.
+* `@vue/cli-plugin-vuex` updated to version `4.5.12`.
+* `@vue/cli-service` updated to version `4.5.12`.
+* `chai` updated to version `4.3.4`.
+* `eslint` updated to version `7.22.0`.
+* `eslint-plugin-vue` updated to version `7.8.0`.
+* `particles.vue` updated to version `2.7.1`.
+* `qs` updated to version `6.10.1`.
+* `sweetalert2` updated to version `10.15.6`.
+* `v-tooltip` updated to version `2.1.3`.
+* `vue-i18n` updated to version `8.24.2`.
+
+---
+
 ## 1.0.0-beta.11 (2021-03-03)
 
 ### 🚀 New features

README.md

@@ -115,6 +115,8 @@ Complete list of all enabled rules is available in the **[.eslintrc.js file](htt
         -  _**Not Required**_
     * **VUE_APP_GOOGLE_ANALYTICS_ENABLED**: If you want to enable traffic data measurement with Google Analytics.
         -  _**Not Required - Default value**_: `false`
+   * **VUE_APP_FACEBOOK_APP_ID**: Facebook application ID if you want to enable Facebook authentication.
+       -  _**Not Required**_
 
 ## <a name="lets-go">🔌 Let's go</a>
 To start the web app **on development mode**, simply run `npm start`.

config/index.js

@@ -8,5 +8,6 @@ export default {
         enabled: process.env.VUE_APP_GOOGLE_ANALYTICS_ENABLED === "true",
         id: process.env.VUE_APP_GOOGLE_ANALYTICS_ID,
     },
+    facebook: { app: { ID: process.env.VUE_APP_FACEBOOK_APP_ID } },
     API: { werewolvesAssistant: { baseURL: process.env.VUE_APP_WEREWOLVES_ASSISTANT_API_URL } },
 };

package.json

@@ -1,7 +1,7 @@
 {
     "name": "werewolves-assistant-web",
     "description": "Werewolves Assistant Web is a Vue web app using the Werewolves Assistant API. Thanks to this app, being the game master of the Werewolves of Millers Hollow game is so easy !",
-    "versioan": "1.0.0-beta.11",
+    "versioan": "1.0.0-beta.12",
     "private": true,
     "scripts": {
         "start": "npm run serve",
@@ -37,6 +37,7 @@
         "vee-validate": "^3.4.5",
         "vue": "^2.6.12",
         "vue-backtotop": "^1.6.1",
+        "vue-facebook-login-component": "^4.0.1",
         "vue-flip": "1.0.2",
         "vue-github-buttons": "^3.1.0",
         "vue-gtag": "^1.10.0",

public/index.html

@@ -28,5 +28,6 @@
         </div>
     </div>
 </div>
+<script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v10.0&appId=345573000200118&autoLogAppEvents=1" nonce="TAfP9VaE"></script>
 </body>
 </html>

src/components/Home/AccountModal/AccountModal.vue

@@ -28,7 +28,8 @@
                         <div class="modal-body">
                             <transition mode="out-in" name="switch-panel">
                                 <LoginPanel v-if="panel === 'log-in'" ref="loginPanel" key="log-in-panel"
-                                            :loading="loading" class="account-panel" @open-register-tab="panel = 'register'"/>
+                                            :loading="loading" class="account-panel" @open-register-tab="panel = 'register'"
+                                            @hide-account-modal="hide"/>
                                 <RegisterPanel v-else-if="panel === 'register'" ref="registerPanel" key="register-panel"
                                                :loading="loading" class="account-panel" @open-login-tab="panel = 'log-in'"/>
                             </transition>
@@ -105,7 +106,7 @@ export default {
                 this.loading = true;
                 if (this.panel === "log-in") {
                     await this.login(this.$refs.loginPanel.getCredentials());
-                    $("#account-modal").modal("hide");
+                    this.hide();
                 } else if (this.panel === "register") {
                     await this.register();
                 }
@@ -121,6 +122,9 @@ export default {
                 }
             }
         },
+        hide() {
+            $("#account-modal").modal("hide");
+        },
     },
 };
 </script>

src/components/Home/AccountModal/FacebookLoginButton.vue

@@ -0,0 +1,47 @@
+<template>
+    <VFacebookLogin ref="facebook" :app-id="appId" :login-options="loginOptions" @login="login" @sdk-init="initSDK"/>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+import VFacebookLogin from "vue-facebook-login-component";
+import Config from "../../../../config";
+
+export default {
+    name: "FacebookLoginButton",
+    components: { VFacebookLogin },
+    data() {
+        return {
+            SDK: undefined,
+            appId: Config.facebook.app.ID,
+            version: "v10.0",
+            loginOptions: {
+                scope: "email",
+                // eslint-disable-next-line camelcase
+                auth_type: "rerequest",
+            },
+        };
+    },
+    methods: {
+        ...mapActions("user", { loginWithFacebook: "loginWithFacebook" }),
+        initSDK(SDK) {
+            this.SDK = SDK;
+        },
+        async login(data) {
+            try {
+                if (data) {
+                    await this.loginWithFacebook(data.authResponse.accessToken);
+                    this.$emit("hide-account-modal");
+                    this.SDK.scope.logout();
+                }
+            } catch (err) {
+                this.$error.display(err);
+            }
+        },
+    },
+};
+</script>
+
+<style scoped>
+
+</style>

src/components/Home/AccountModal/LoginPanel.vue

@@ -52,16 +52,22 @@
                 <a href="#" @click.prevent="$emit('open-register-tab')" v-html="$t('LoginPanel.IDontHaveAnAccountYet')"/>
             </div>
         </div>
+        <div class="row">
+            <div class="col-12">
+                <FacebookLoginButton class="mt-2" @hide-account-modal="hideAccountModal"/>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
 import Vue from "vue";
 import RedAsterisk from "../../shared/Forms/RedAsterisk";
+import FacebookLoginButton from "@/components/Home/AccountModal/FacebookLoginButton";
 
 export default {
     name: "LoginPanel",
-    components: { RedAsterisk },
+    components: { FacebookLoginButton, RedAsterisk },
     props: {
         loading: {
             type: Boolean,
@@ -106,6 +112,9 @@ export default {
             this.credentials.email = undefined;
             this.credentials.password = undefined;
         },
+        hideAccountModal() {
+            this.$emit("hide-account-modal");
+        },
     },
 };
 </script>

src/plugins/APIs/WerewolvesAssistantAPI.js

@@ -23,6 +23,8 @@ const WerewolvesAssistantAPI = {
 
         Vue.prototype.$werewolvesAssistantAPI.login = user => axios.post(`/users/login`, user);
 
+        Vue.prototype.$werewolvesAssistantAPI.loginWithFacebook = data => axios.post(`/users/login/facebook`, data);
+
         Vue.prototype.$werewolvesAssistantAPI.decodeToken = () => {
             let decoded = { userId: 0 };
             const token = localStorage.getItem("token");

src/plugins/vue-i18n/fr.json

@@ -163,6 +163,7 @@
     },
     "Login": {
         "loggedIn": "Connecté",
+        "loggedInWithFacebook": "Connecté avec Facebook",
         "loggedOut": "Déconnecté"
     },
     "AccountModal": {

src/store/modules/User.js

@@ -59,16 +59,24 @@ export default {
             }
             return getters.isLogged;
         },
-        async login({ commit, dispatch }, { email, password }) {
+        async login({ commit }, { email, password }) {
             const { data: loginData } = await Vue.prototype.$werewolvesAssistantAPI.login({ email, password });
             localStorage.setItem("token", loginData.token);
             Vue.prototype.$werewolvesAssistantAPI.setToken(loginData.token);
             const decoded = JWT.decode(loginData.token);
             const { data: userData } = await Vue.prototype.$werewolvesAssistantAPI.getUser(decoded.userId);
-            await dispatch("role/getAndSetRoles", {}, { root: true });
             commit("setUser", new User({ ...userData, logged: true }));
             Vue.prototype.$toasted.success(i18n.t("Login.loggedIn"), { icon: "check" });
         },
+        async loginWithFacebook({ commit }, accessToken) {
+            const { data: loginData } = await Vue.prototype.$werewolvesAssistantAPI.loginWithFacebook({ accessToken });
+            localStorage.setItem("token", loginData.token);
+            Vue.prototype.$werewolvesAssistantAPI.setToken(loginData.token);
+            const decoded = JWT.decode(loginData.token);
+            const { data: userData } = await Vue.prototype.$werewolvesAssistantAPI.getUser(decoded.userId);
+            commit("setUser", new User({ ...userData, logged: true }));
+            Vue.prototype.$toasted.success(i18n.t("Login.loggedInWithFacebook"), { icon: "check" });
+        },
         async logout({ commit }, { toasted = true }) {
             localStorage.removeItem("token");
             Vue.prototype.$werewolvesAssistantAPI.setToken(null);
@@ -84,8 +92,7 @@ export default {
             const token = localStorage.getItem("token");
             if (token) {
                 const decoded = JWT.decode(token);
-                const now = Math.round(new Date().getTime() / 1000);
-                if (decoded && decoded.exp && now < decoded.exp) {
+                if (decoded) {
                     Vue.prototype.$werewolvesAssistantAPI.setToken(token);
                     const { data } = await Vue.prototype.$werewolvesAssistantAPI.getUser(decoded.userId);
                     await dispatch("role/getAndSetRoles", {}, { root: true });