Integrate passportjs for muti-strategy authentication and SSO

client/components/app/ConfigSideNav.vue

@@ -104,6 +104,11 @@ export default {
           id: 'config-rss-feeds',
           title: this.$strings.HeaderRSSFeeds,
           path: '/config/rss-feeds'
+        },
+        {
+          id: 'config-authentication',
+          title: this.$strings.HeaderAuthentication,
+          path: '/config/authentication'
         }
       ]
 

client/pages/config.vue

@@ -57,6 +57,7 @@ export default {
         else if (pageName === 'item-metadata-utils') return this.$strings.HeaderItemMetadataUtils
         else if (pageName === 'rss-feeds') return this.$strings.HeaderRSSFeeds
         else if (pageName === 'email') return this.$strings.HeaderEmail
+        else if (pageName === 'authentication') return this.$strings.HeaderAuthentication
       }
       return this.$strings.HeaderSettings
     }

client/pages/config/authentication.vue

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <app-settings-content :header-text="$strings.HeaderAuthentication">
+      <div class="w-full border border-white/10 rounded-xl p-4 my-4 bg-primary/25">
+        <div class="flex items-center">
+          <ui-checkbox v-model="enableLocalAuth" checkbox-bg="bg" />
+          <p class="text-lg pl-4">Password Authentication</p>
+        </div>
+      </div>
+      <div class="w-full border border-white/10 rounded-xl p-4 my-4 bg-primary/25">
+        <div class="flex items-center">
+          <ui-checkbox v-model="enableOpenIDAuth" checkbox-bg="bg" />
+          <p class="text-lg pl-4">OpenID Connect Authentication</p>
+        </div>
+        <div class="overflow-hidden">
+          <transition name="slide">
+            <div v-if="enableOpenIDAuth" class="flex flex-wrap pt-4">
+              <ui-text-input-with-label ref="issuerUrl" v-model="newAuthSettings.authOpenIDIssuerURL" :disabled="savingSettings" :label="'Issuer URL'" class="mb-2" />
+
+              <ui-text-input-with-label ref="authorizationUrl" v-model="newAuthSettings.authOpenIDAuthorizationURL" :disabled="savingSettings" :label="'Authorize URL'" class="mb-2" />
+
+              <ui-text-input-with-label ref="tokenUrl" v-model="newAuthSettings.authOpenIDTokenURL" :disabled="savingSettings" :label="'Token URL'" class="mb-2" />
+
+              <ui-text-input-with-label ref="userInfoUrl" v-model="newAuthSettings.authOpenIDUserInfoURL" :disabled="savingSettings" :label="'Userinfo URL'" class="mb-2" />
+
+              <ui-text-input-with-label ref="openidClientId" v-model="newAuthSettings.authOpenIDClientID" :disabled="savingSettings" :label="'Client ID'" class="mb-2" />
+
+              <ui-text-input-with-label ref="openidClientSecret" v-model="newAuthSettings.authOpenIDClientSecret" :disabled="savingSettings" :label="'Client Secret'" class="mb-2" />
+            </div>
+          </transition>
+        </div>
+      </div>
+      <div class="w-full flex items-center justify-end p-4">
+        <ui-btn color="success" :padding-x="8" small class="text-base" :loading="savingSettings" @click="saveSettings">{{ $strings.ButtonSave }}</ui-btn>
+      </div>
+    </app-settings-content>
+  </div>
+</template>
+
+<script>
+export default {
+  async asyncData({ store, redirect, app }) {
+    if (!store.getters['user/getIsAdminOrUp']) {
+      redirect('/')
+      return
+    }
+
+    const authSettings = await app.$axios.$get('/api/auth-settings').catch((error) => {
+      console.error('Failed', error)
+      return null
+    })
+    if (!authSettings) {
+      redirect('/config')
+      return
+    }
+    return {
+      authSettings
+    }
+  },
+  data() {
+    return {
+      enableLocalAuth: false,
+      enableOpenIDAuth: false,
+      savingSettings: false,
+      newAuthSettings: {}
+    }
+  },
+  computed: {
+    authMethods() {
+      return this.authSettings.authActiveAuthMethods || []
+    }
+  },
+  methods: {
+    validateOpenID() {
+      let isValid = true
+      if (!this.newAuthSettings.authOpenIDIssuerURL) {
+        this.$toast.error('Issuer URL required')
+        isValid = false
+      }
+      if (!this.newAuthSettings.authOpenIDAuthorizationURL) {
+        this.$toast.error('Authorize URL required')
+        isValid = false
+      }
+      if (!this.newAuthSettings.authOpenIDTokenURL) {
+        this.$toast.error('Token URL required')
+        isValid = false
+      }
+      if (!this.newAuthSettings.authOpenIDUserInfoURL) {
+        this.$toast.error('Userinfo URL required')
+        isValid = false
+      }
+      if (!this.newAuthSettings.authOpenIDClientID) {
+        this.$toast.error('Client ID required')
+        isValid = false
+      }
+      if (!this.newAuthSettings.authOpenIDClientSecret) {
+        this.$toast.error('Client Secret required')
+        isValid = false
+      }
+      return isValid
+    },
+    async saveSettings() {
+      if (!this.enableLocalAuth && !this.enableOpenIDAuth) {
+        this.$toast.error('Must have at least one authentication method enabled')
+        return
+      }
+
+      if (this.enableOpenIDAuth && !this.validateOpenID()) {
+        return
+      }
+
+      this.newAuthSettings.authActiveAuthMethods = []
+      if (this.enableLocalAuth) this.newAuthSettings.authActiveAuthMethods.push('local')
+      if (this.enableOpenIDAuth) this.newAuthSettings.authActiveAuthMethods.push('openid')
+
+      this.savingSettings = true
+      const success = await this.$store.dispatch('updateServerSettings', this.newAuthSettings)
+      this.savingSettings = false
+      if (success) {
+        this.$toast.success('Server settings updated')
+      } else {
+        this.$toast.error('Failed to update server settings')
+      }
+    },
+    init() {
+      this.newAuthSettings = {
+        ...this.authSettings
+      }
+      this.enableLocalAuth = this.authMethods.includes('local')
+      this.enableOpenIDAuth = this.authMethods.includes('openid')
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
+

client/pages/login.vue

@@ -25,9 +25,12 @@
       </div>
       <div v-else-if="isInit" class="w-full max-w-md px-8 pb-8 pt-4 -mt-40">
         <p class="text-3xl text-white text-center mb-4">{{ $strings.HeaderLogin }}</p>
+
         <div class="w-full h-px bg-white bg-opacity-10 my-4" />
+
         <p v-if="error" class="text-error text-center py-2">{{ error }}</p>
-        <form @submit.prevent="submitForm">
+
+        <form v-show="login_local" @submit.prevent="submitForm">
           <label class="text-xs text-gray-300 uppercase">{{ $strings.LabelUsername }}</label>
           <ui-text-input v-model="username" :disabled="processing" class="mb-3 w-full" />
 
@@ -37,6 +40,17 @@
             <ui-btn type="submit" :disabled="processing" color="primary" class="leading-none">{{ processing ? 'Checking...' : $strings.ButtonSubmit }}</ui-btn>
           </div>
         </form>
+
+        <div v-if="login_local && (login_google_oauth20 || login_openid)" class="w-full h-px bg-white bg-opacity-10 my-4" />
+
+        <div class="w-full flex py-3">
+          <a v-show="login_google_oauth20" :href="googleAuthUri">
+            <ui-btn color="primary" class="leading-none">Login with Google</ui-btn>
+          </a>
+          <a v-show="login_openid" :href="openidAuthUri">
+            <ui-btn color="primary" class="leading-none">Login with OpenId</ui-btn>
+          </a>
+        </div>
       </div>
     </div>
   </div>
@@ -60,7 +74,10 @@ export default {
       },
       confirmPassword: '',
       ConfigPath: '',
-      MetadataPath: ''
+      MetadataPath: '',
+      login_local: true,
+      login_google_oauth20: false,
+      login_openid: false
     }
   },
   watch: {
@@ -93,6 +110,12 @@ export default {
   computed: {
     user() {
       return this.$store.state.user.user
+    },
+    googleAuthUri() {
+      return `${process.env.serverUrl}/auth/google?callback=${location.toString()}`
+    },
+    openidAuthUri() {
+      return `${process.env.serverUrl}/auth/openid?callback=${location.toString()}`
     }
   },
   methods: {
@@ -162,6 +185,7 @@ export default {
         else this.error = 'Unknown Error'
         return false
       })
+
       if (authRes?.error) {
         this.error = authRes.error
       } else if (authRes) {
@@ -196,28 +220,52 @@ export default {
       this.processing = true
       this.$axios
         .$get('/status')
-        .then((res) => {
+        .then((data) => {
           this.processing = false
-          this.isInit = res.isInit
-          this.showInitScreen = !res.isInit
-          this.$setServerLanguageCode(res.language)
+          this.isInit = data.isInit
+          this.showInitScreen = !data.isInit
+          this.$setServerLanguageCode(data.language)
           if (this.showInitScreen) {
-            this.ConfigPath = res.ConfigPath || ''
-            this.MetadataPath = res.MetadataPath || ''
+            this.ConfigPath = data.ConfigPath || ''
+            this.MetadataPath = data.MetadataPath || ''
+          } else {
+            this.updateLoginVisibility(data.authMethods || [])
           }
         })
         .catch((error) => {
           console.error('Status check failed', error)
           this.processing = false
           this.criticalError = 'Status check failed'
         })
+    },
+    updateLoginVisibility(authMethods) {
+      if (authMethods.includes('local') || !authMethods.length) {
+        this.login_local = true
+      } else {
+        this.login_local = false
+      }
+
+      if (authMethods.includes('google-oauth20')) {
+        this.login_google_oauth20 = true
+      } else {
+        this.login_google_oauth20 = false
+      }
+
+      if (authMethods.includes('openid')) {
+        this.login_openid = true
+      } else {
+        this.login_openid = false
+      }
     }
   },
   async mounted() {
+    if (new URLSearchParams(window.location.search).get('setToken')) {
+      localStorage.setItem('token', new URLSearchParams(window.location.search).get('setToken'))
+    }
     if (localStorage.getItem('token')) {
-      var userfound = await this.checkAuth()
-      if (userfound) return // if valid user no need to check status
+      if (await this.checkAuth()) return // if valid user no need to check status
     }
+
     this.checkStatus()
   }
 }

client/store/index.js

@@ -66,7 +66,7 @@ export const getters = {
 
 export const actions = {
   updateServerSettings({ commit }, payload) {
-    var updatePayload = {
+    const updatePayload = {
       ...payload
     }
     return this.$axios.$patch('/api/settings', updatePayload).then((result) => {

client/strings/en-us.json

@@ -88,6 +88,7 @@
   "HeaderAppriseNotificationSettings": "Apprise Notification Settings",
   "HeaderAudiobookTools": "Audiobook File Management Tools",
   "HeaderAudioTracks": "Audio Tracks",
+  "HeaderAuthentication": "Authentication",
   "HeaderBackups": "Backups",
   "HeaderChangePassword": "Change Password",
   "HeaderChapters": "Chapters",