Introduce support for 3rd-party auth (OAuth2 & LDAP)

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/User/AuthProvider.vue

@@ -0,0 +1,26 @@
+<template>
+  <a
+    class="button is-light"
+    v-if="Object.keys(SELECTED_PROVIDERS).includes(oauthProvider.id)"
+    :href="`/auth/${oauthProvider.id}`"
+  >
+    <b-icon :icon="oauthProvider.id" />
+    <span>{{ SELECTED_PROVIDERS[oauthProvider.id] }}</span></a
+  >
+  <a class="button is-light" :href="`/auth/${oauthProvider.id}`" v-else>
+    <b-icon icon="lock" />
+    <span>{{ oauthProvider.label }}</span>
+  </a>
+</template>
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+import { IOAuthProvider } from "../../types/config.model";
+import { SELECTED_PROVIDERS } from "../../utils/auth";
+
+@Component
+export default class AuthProvider extends Vue {
+  @Prop({ required: true, type: Object }) oauthProvider!: IOAuthProvider;
+
+  SELECTED_PROVIDERS = SELECTED_PROVIDERS;
+}
+</script>

js/src/components/User/AuthProviders.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <b>{{ $t("Sign in with") }}</b>
+    <div class="buttons">
+      <auth-provider
+        v-for="provider in oauthProviders"
+        :oauthProvider="provider"
+        :key="provider.id"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+import { IOAuthProvider } from "../../types/config.model";
+import AuthProvider from "./AuthProvider.vue";
+
+@Component({
+  components: {
+    AuthProvider,
+  },
+})
+export default class AuthProviders extends Vue {
+  @Prop({ required: true, type: Array }) oauthProviders!: IOAuthProvider[];
+}
+</script>

js/src/graphql/config.ts

@@ -62,6 +62,13 @@ export const CONFIG = gql`
       features {
         groups
       }
+      auth {
+        ldap
+        oauthProviders {
+          id
+          label
+        }
+      }
     }
   }
 `;

js/src/graphql/user.ts

@@ -35,6 +35,15 @@ export const LOGGED_USER = gql`
     loggedUser {
       id
       email
+      defaultActor {
+        id
+        preferredUsername
+        name
+        avatar {
+          url
+        }
+      }
+      provider
     }
   }
 `;
@@ -64,7 +73,7 @@ export const VALIDATE_EMAIL = gql`
 `;
 
 export const DELETE_ACCOUNT = gql`
-  mutation DeleteAccount($password: String, $userId: ID!) {
+  mutation DeleteAccount($password: String, $userId: ID) {
     deleteAccount(password: $password, userId: $userId) {
       id
     }

js/src/i18n/en_US.json

@@ -703,5 +703,10 @@
   "New discussion": "New discussion",
   "Create a discussion": "Create a discussion",
   "Create the discussion": "Create the discussion",
-  "View all discussions": "View all discussions"
+  "View all discussions": "View all discussions",
+  "Sign in with": "Sign in with",
+  "Your email address was automatically set based on your {provider} account.": "Your email address was automatically set based on your {provider} account.",
+  "You can't change your password because you are registered through {provider}.": "You can't change your password because you are registered through {provider}.",
+  "Error while login with {provider}. Retry or login another way.": "Error while login with {provider}. Retry or login another way.",
+  "Error while login with {provider}. This login provider doesn't exist.": "Error while login with {provider}. This login provider doesn't exist."
 }

js/src/i18n/fr_FR.json

@@ -703,5 +703,10 @@
   "{number} participations": "Aucune participation|Une participation|{number} participations",
   "{profile} (by default)": "{profile} (par défault)",
   "{title} ({count} todos)": "{title} ({count} todos)",
-  "© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap"
+  "© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap",
+  "Sign in with": "Se connecter avec",
+  "Your email address was automatically set based on your {provider} account.": "Votre adresse email a été définie automatiquement en se basant sur votre compte {provider}.",
+  "You can't change your password because you are registered through {provider}.": "Vous ne pouvez pas changer votre mot de passe car vous vous êtes enregistré via {provider}.",
+  "Error while login with {provider}. Retry or login another way.": "Erreur lors de la connexion avec {provider}. Réessayez ou bien connectez vous autrement.",
+  "Error while login with {provider}. This login provider doesn't exist.": "Erreur lors de la connexion avec {provider}. Cette méthode de connexion n'existe pas."
 }

js/src/router/index.ts

@@ -112,6 +112,11 @@ const router = new Router({
       component: () => import(/* webpackChunkName: "cookies" */ "@/views/Interact.vue"),
       meta: { requiredAuth: false },
     },
+    {
+      path: "/auth/:provider/callback",
+      name: "auth-callback",
+      component: () => import("@/views/User/ProviderValidation.vue"),
+    },
     {
       path: "/404",
       name: RouteName.PAGE_NOT_FOUND,

js/src/types/config.model.ts

@@ -74,4 +74,13 @@ export interface IConfig {
   };
   federating: boolean;
   version: string;
+  auth: {
+    ldap: boolean;
+    oauthProviders: IOAuthProvider[];
+  };
+}
+
+export interface IOAuthProvider {
+  id: string;
+  label: string;
 }

js/src/types/current-user.model.ts

@@ -9,15 +9,11 @@ export enum ICurrentUserRole {
 }
 
 export interface ICurrentUser {
-  id: number;
+  id: string;
   email: string;
   isLoggedIn: boolean;
   role: ICurrentUserRole;
-  participations: Paginate<IParticipant>;
-  defaultActor: IPerson;
-  drafts: IEvent[];
-  settings: IUserSettings;
-  locale: string;
+  defaultActor?: IPerson;
 }
 
 export interface IUser extends ICurrentUser {
@@ -25,6 +21,22 @@ export interface IUser extends ICurrentUser {
   confirmationSendAt: Date;
   actors: IPerson[];
   disabled: boolean;
+  participations: Paginate<IParticipant>;
+  drafts: IEvent[];
+  settings: IUserSettings;
+  locale: string;
+  provider?: string;
+}
+
+export enum IAuthProvider {
+  LDAP = "ldap",
+  GOOGLE = "google",
+  DISCORD = "discord",
+  GITHUB = "github",
+  KEYCLOAK = "keycloak",
+  FACEBOOK = "facebook",
+  GITLAB = "gitlab",
+  TWITTER = "twitter",
 }
 
 export enum INotificationPendingParticipationEnum {

js/src/types/login-error-code.model.ts

@@ -6,4 +6,6 @@ export enum LoginError {
   USER_NOT_CONFIRMED = "User account not confirmed",
   USER_DOES_NOT_EXIST = "No user with this email was found",
   USER_EMAIL_PASSWORD_INVALID = "Impossible to authenticate, either your email or password are invalid.",
+  LOGIN_PROVIDER_ERROR = "Error with Login Provider",
+  LOGIN_PROVIDER_NOT_FOUND = "Login Provider not found",
 }

js/src/utils/auth.ts

@@ -94,3 +94,14 @@ export async function logout(apollo: ApolloClient<NormalizedCacheObject>) {
 
   deleteUserData();
 }
+
+export const SELECTED_PROVIDERS: { [key: string]: string } = {
+  twitter: "Twitter",
+  discord: "Discord",
+  facebook: "Facebook",
+  github: "Github",
+  gitlab: "Gitlab",
+  google: "Google",
+  keycloak: "Keycloak",
+  ldap: "LDAP",
+};

js/src/views/Settings/AccountSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="loggedUser">
     <nav class="breadcrumb" aria-label="breadcrumbs">
       <ul>
         <li>
@@ -24,6 +24,13 @@
       >
         <b slot="email">{{ loggedUser.email }}</b>
       </i18n>
+      <b-message v-if="!canChangeEmail" type="is-warning" :closable="false">
+        {{
+          $t("Your email address was automatically set based on your {provider} account.", {
+            provider: providerName(loggedUser.provider),
+          })
+        }}
+      </b-message>
       <b-notification
         type="is-danger"
         has-icon
@@ -33,7 +40,7 @@
         v-for="error in changeEmailErrors"
         >{{ error }}</b-notification
       >
-      <form @submit.prevent="resetEmailAction" ref="emailForm" class="form">
+      <form @submit.prevent="resetEmailAction" ref="emailForm" class="form" v-if="canChangeEmail">
         <b-field :label="$t('New email')">
           <b-input aria-required="true" required type="email" v-model="newEmail" />
         </b-field>
@@ -58,6 +65,13 @@
       <div class="setting-title">
         <h2>{{ $t("Password") }}</h2>
       </div>
+      <b-message v-if="!canChangePassword" type="is-warning" :closable="false">
+        {{
+          $t("You can't change your password because you are registered through {provider}.", {
+            provider: providerName(loggedUser.provider),
+          })
+        }}
+      </b-message>
       <b-notification
         type="is-danger"
         has-icon
@@ -67,7 +81,12 @@
         v-for="error in changePasswordErrors"
         >{{ error }}</b-notification
       >
-      <form @submit.prevent="resetPasswordAction" ref="passwordForm" class="form">
+      <form
+        @submit.prevent="resetPasswordAction"
+        ref="passwordForm"
+        class="form"
+        v-if="canChangePassword"
+      >
         <b-field :label="$t('Old password')">
           <b-input
             aria-required="true"
@@ -124,11 +143,11 @@
                     <br />
                     <b>{{ $t("There will be no way to recover your data.") }}</b>
                   </p>
-                  <p class="content">
+                  <p class="content" v-if="hasUserGotAPassword">
                     {{ $t("Please enter your password to confirm this action.") }}
                   </p>
                   <form @submit.prevent="deleteAccount">
-                    <b-field>
+                    <b-field v-if="hasUserGotAPassword">
                       <b-input
                         type="password"
                         v-model="passwordForAccountDeletion"
@@ -160,8 +179,8 @@
 import { Component, Vue, Ref } from "vue-property-decorator";
 import { CHANGE_EMAIL, CHANGE_PASSWORD, DELETE_ACCOUNT, LOGGED_USER } from "../../graphql/user";
 import RouteName from "../../router/name";
-import { ICurrentUser } from "../../types/current-user.model";
-import { logout } from "../../utils/auth";
+import { IUser, IAuthProvider } from "../../types/current-user.model";
+import { logout, SELECTED_PROVIDERS } from "../../utils/auth";
 
 @Component({
   apollo: {
@@ -171,7 +190,7 @@ import { logout } from "../../utils/auth";
 export default class AccountSettings extends Vue {
   @Ref("passwordForm") readonly passwordForm!: HTMLElement;
 
-  loggedUser!: ICurrentUser;
+  loggedUser!: IUser;
 
   passwordForEmailChange = "";
 
@@ -243,7 +262,7 @@ export default class AccountSettings extends Vue {
       await this.$apollo.mutate({
         mutation: DELETE_ACCOUNT,
         variables: {
-          password: this.passwordForAccountDeletion,
+          password: this.hasUserGotAPassword ? this.passwordForAccountDeletion : null,
         },
       });
       await logout(this.$apollo.provider.defaultClient);
@@ -260,6 +279,28 @@ export default class AccountSettings extends Vue {
     }
   }
 
+  get canChangePassword() {
+    return !this.loggedUser.provider;
+  }
+
+  get canChangeEmail() {
+    return !this.loggedUser.provider;
+  }
+
+  providerName(id: string) {
+    if (SELECTED_PROVIDERS[id]) {
+      return SELECTED_PROVIDERS[id];
+    }
+    return id;
+  }
+
+  get hasUserGotAPassword(): boolean {
+    return (
+      this.loggedUser &&
+      (this.loggedUser.provider == null || this.loggedUser.provider == IAuthProvider.LDAP)
+    );
+  }
+
   private handleErrors(type: string, err: any) {
     console.error(err);
 

js/src/views/Settings/Notifications.vue

@@ -95,10 +95,7 @@
 <script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
 import { USER_SETTINGS, SET_USER_SETTINGS } from "../../graphql/user";
-import {
-  ICurrentUser,
-  INotificationPendingParticipationEnum,
-} from "../../types/current-user.model";
+import { IUser, INotificationPendingParticipationEnum } from "../../types/current-user.model";
 import RouteName from "../../router/name";
 
 @Component({
@@ -107,7 +104,7 @@ import RouteName from "../../router/name";
   },
 })
 export default class Notifications extends Vue {
-  loggedUser!: ICurrentUser;
+  loggedUser!: IUser;
 
   notificationOnDay = true;
 

js/src/views/Settings/Preferences.vue

@@ -52,7 +52,7 @@ import { Component, Vue, Watch } from "vue-property-decorator";
 import { TIMEZONES } from "../../graphql/config";
 import { USER_SETTINGS, SET_USER_SETTINGS, UPDATE_USER_LOCALE } from "../../graphql/user";
 import { IConfig } from "../../types/config.model";
-import { ICurrentUser } from "../../types/current-user.model";
+import { IUser } from "../../types/current-user.model";
 import langs from "../../i18n/langs.json";
 import RouteName from "../../router/name";
 
@@ -65,7 +65,7 @@ import RouteName from "../../router/name";
 export default class Preferences extends Vue {
   config!: IConfig;
 
-  loggedUser!: ICurrentUser;
+  loggedUser!: IUser;
 
   selectedTimezone: string | null = null;
 
@@ -74,7 +74,7 @@ export default class Preferences extends Vue {
   RouteName = RouteName;
 
   @Watch("loggedUser")
-  setSavedTimezone(loggedUser: ICurrentUser) {
+  setSavedTimezone(loggedUser: IUser) {
     if (loggedUser && loggedUser.settings.timezone) {
       this.selectedTimezone = loggedUser.settings.timezone;
     } else {

js/src/views/User/Login.vue

@@ -10,6 +10,26 @@
           :aria-close-label="$t('Close')"
           >{{ $t("You need to login.") }}</b-message
         >
+        <b-message
+          v-else-if="errorCode === LoginError.LOGIN_PROVIDER_ERROR"
+          type="is-danger"
+          :aria-close-label="$t('Close')"
+          >{{
+            $t("Error while login with {provider}. Retry or login another way.", {
+              provider: $route.query.provider,
+            })
+          }}</b-message
+        >
+        <b-message
+          v-else-if="errorCode === LoginError.LOGIN_PROVIDER_NOT_FOUND"
+          type="is-danger"
+          :aria-close-label="$t('Close')"
+          >{{
+            $t("Error while login with {provider}. This login provider doesn't exist.", {
+              provider: $route.query.provider,
+            })
+          }}</b-message
+        >
         <b-message title="Error" type="is-danger" v-for="error in errors" :key="error">
           <span v-if="error === LoginError.USER_NOT_CONFIRMED">
             <span>
@@ -60,6 +80,11 @@
           <p class="control has-text-centered">
             <button class="button is-primary is-large">{{ $t("Login") }}</button>
           </p>
+
+          <div class="control" v-if="config && config.auth.oauthProviders.length > 0">
+            <auth-providers :oauthProviders="config.auth.oauthProviders" />
+          </div>
+
           <p class="control">
             <router-link
               class="button is-text"
@@ -103,6 +128,7 @@ import { LoginErrorCode, LoginError } from "../../types/login-error-code.model";
 import { ICurrentUser } from "../../types/current-user.model";
 import { CONFIG } from "../../graphql/config";
 import { IConfig } from "../../types/config.model";
+import AuthProviders from "../../components/User/AuthProviders.vue";
 
 @Component({
   apollo: {
@@ -113,6 +139,9 @@ import { IConfig } from "../../types/config.model";
       query: CURRENT_USER_CLIENT,
     },
   },
+  components: {
+    AuthProviders,
+  },
   metaInfo() {
     return {
       // if no subcomponents specify a metaInfo.title, this title will be used

js/src/views/User/ProviderValidation.vue

@@ -0,0 +1,64 @@
+<template> </template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { VALIDATE_USER, UPDATE_CURRENT_USER_CLIENT, LOGGED_USER } from "../../graphql/user";
+import RouteName from "../../router/name";
+import { saveUserData, changeIdentity } from "../../utils/auth";
+import { ILogin } from "../../types/login.model";
+import { ICurrentUserRole, ICurrentUser, IUser } from "../../types/current-user.model";
+import { IDENTITIES } from "../../graphql/actor";
+
+@Component
+export default class ProviderValidate extends Vue {
+  async mounted() {
+    const accessToken = this.getValueFromMeta("auth-access-token");
+    const refreshToken = this.getValueFromMeta("auth-refresh-token");
+    const userId = this.getValueFromMeta("auth-user-id");
+    const userEmail = this.getValueFromMeta("auth-user-email");
+    const userRole = this.getValueFromMeta("auth-user-role") as ICurrentUserRole;
+    const userActorId = this.getValueFromMeta("auth-user-actor-id");
+
+    if (!(userId && userEmail && userRole && accessToken && refreshToken)) {
+      return this.$router.push("/");
+    }
+    const login = {
+      user: { id: userId, email: userEmail, role: userRole, isLoggedIn: true },
+      accessToken,
+      refreshToken,
+    };
+    saveUserData(login);
+    await this.$apollo.mutate({
+      mutation: UPDATE_CURRENT_USER_CLIENT,
+      variables: {
+        id: userId,
+        email: userEmail,
+        isLoggedIn: true,
+        role: ICurrentUserRole.USER,
+      },
+    });
+    const { data } = await this.$apollo.query<{ loggedUser: IUser }>({
+      query: LOGGED_USER,
+    });
+    const { loggedUser } = data;
+
+    if (loggedUser.defaultActor) {
+      await changeIdentity(this.$apollo.provider.defaultClient, loggedUser.defaultActor);
+      await this.$router.push({ name: RouteName.HOME });
+    } else {
+      // If the user didn't register any profile yet, let's create one for them
+      await this.$router.push({
+        name: RouteName.REGISTER_PROFILE,
+        params: { email: loggedUser.email, userAlreadyActivated: "true" },
+      });
+    }
+  }
+
+  getValueFromMeta(name: string) {
+    const element = document.querySelector(`meta[name="${name}"]`);
+    if (element && element.getAttribute("content")) {
+      return element.getAttribute("content");
+    }
+    return null;
+  }
+}
+</script>

js/src/views/User/Register.vue

@@ -96,6 +96,7 @@
                 {{ $t("Register") }}
               </b-button>
             </p>
+
             <p class="control">
               <router-link
                 class="button is-text"
@@ -113,6 +114,11 @@
                 >{{ $t("Login") }}</router-link
               >
             </p>
+
+            <hr />
+            <div class="control" v-if="config && config.auth.oauthProviders.length > 0">
+              <auth-providers :oauthProviders="config.auth.oauthProviders" />
+            </div>
           </form>
 
           <div v-if="errors.length > 0">
@@ -131,9 +137,10 @@ import RouteName from "../../router/name";
 import { IConfig } from "../../types/config.model";
 import { CONFIG } from "../../graphql/config";
 import Subtitle from "../../components/Utils/Subtitle.vue";
+import AuthProviders from "../../components/User/AuthProviders.vue";
 
 @Component({
-  components: { Subtitle },
+  components: { Subtitle, AuthProviders },
   metaInfo() {
     return {
       // if no subcomponents specify a metaInfo.title, this title will be used

js/src/views/User/Validate.vue

@@ -18,7 +18,7 @@
 import { Component, Prop, Vue } from "vue-property-decorator";
 import { VALIDATE_USER, UPDATE_CURRENT_USER_CLIENT } from "../../graphql/user";
 import RouteName from "../../router/name";
-import { saveUserData, changeIdentity } from "../../utils/auth";
+import { saveUserData, saveTokenData, changeIdentity } from "../../utils/auth";
 import { ILogin } from "../../types/login.model";
 import { ICurrentUserRole } from "../../types/current-user.model";
 
@@ -45,6 +45,7 @@ export default class Validate extends Vue {
 
       if (data) {
         saveUserData(data.validateUser);
+        saveTokenData(data.validateUser);
 
         const { user } = data.validateUser;