feat: Login with OAuth via OpenID Connect (OIDC) (#3280)

* initial oidc implementation

* add dynamic scheme

* e2e test setup

* add caching

* fix

* try this

* add libldap-2.5 to runtime dependencies (#2849)

* New translations en-us.json (Norwegian) (#2851)

* New Crowdin updates (#2855)

* New translations en-us.json (Italian)

* New translations en-us.json (Norwegian)

* New translations en-us.json (Portuguese)

* fix

* remove cache

* cache yarn deps

* cache docker image

* cleanup action

* lint

* fix tests

* remove not needed variables

* run code gen

* fix tests

* add docs

* move code into custom scheme

* remove unneeded type

* fix oidc admin

* add more tests

* add better spacing on login page

* create auth providers

* clean up testing stuff

* type fixes

* add OIDC auth method to postgres enum

* add option to bypass login screen and go directly to iDP

* remove check so we can fallback to another auth method oauth fails

* Add provider name to be shown at the login screen

* add new properties to admin about api

* fix spec

* add a prompt to change auth method when changing password

* Create new auth section. Add more info on auth methods

* update docs

* run ruff

* update docs

* format

* docs gen

* formatting

* initialize logger in class

* mypy type fixes

* docs gen

* add models to get proper fields in docs and fix serialization

* validate id token before using it

* only request a mealie token on initial callback

* remove unused method

* fix unit tests

* docs gen

* check for valid idToken before getting token

* add iss to mealie token

* check to see if we already have a mealie token before getting one

* fix lock file

* update authlib

* update lock file

* add remember me environment variable

* add user group setting to allow only certain groups to log in

---------

Co-authored-by: Carter Mintey <cmintey8@gmail.com>
Co-authored-by: Carter <35710697+cmintey@users.noreply.github.com>

frontend/pages/login.vue

@@ -70,6 +70,26 @@
               </v-btn>
             </div>
           </v-card-actions>
+
+          <div v-if="allowOidc" class="d-flex my-4 justify-center align-center" width="80%">
+            <v-divider class="div-width"/>
+            <span
+                class="absolute px-2"
+                :class="{
+                    'bg-white': !$vuetify.theme.dark && !isDark,
+                    'bg-background': $vuetify.theme.dark || isDark,
+                }"
+            >
+                {{ $t("user.or") }}
+            </span>
+          </div>
+          <v-card-actions v-if="allowOidc" class="justify-center">
+          <div class="max-button">
+            <v-btn color="primary" large rounded class="rounded-xl" block @click.native="oidcAuthenticate">
+                {{ $t("user.login-oidc") }} {{ oidcProviderName }}
+            </v-btn>
+          </div>
+        </v-card-actions>
         </v-form>
       </v-card-text>
       <v-card-actions class="d-flex justify-center flex-column flex-sm-row">
@@ -161,6 +181,32 @@ export default defineComponent({
     const { passwordIcon, inputType, togglePasswordShow } = usePasswordField();
 
     const allowSignup = computed(() => appInfo.value?.allowSignup || false);
+    const allowOidc = computed(() => appInfo.value?.enableOidc || false);
+    const oidcRedirect = computed(() => appInfo.value?.oidcRedirect || false);
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    const oidcProviderName = computed(() => appInfo.value?.oidcProviderName || "OAuth")
+
+    whenever(
+        () => allowOidc.value && oidcRedirect.value && !isCallback() && !isDirectLogin(),
+        () => oidcAuthenticate(),
+        {immediate: true}
+    )
+
+    function isCallback() {
+        return router.currentRoute.query.state;
+    }
+
+    function isDirectLogin() {
+        return router.currentRoute.query.direct
+    }
+
+    async function oidcAuthenticate() {
+        try {
+            await $auth.loginWith("oidc")
+        } catch (error) {
+            alert.error(i18n.t("events.something-went-wrong") as string);
+        }
+    }
 
     async function authenticate() {
       if (form.email.length === 0 || form.password.length === 0) {
@@ -199,7 +245,10 @@ export default defineComponent({
       form,
       loggingIn,
       allowSignup,
+      allowOidc,
       authenticate,
+      oidcAuthenticate,
+      oidcProviderName,
       passwordIcon,
       inputType,
       togglePasswordShow,
@@ -250,4 +299,20 @@ export default defineComponent({
 .bg-off-white {
   background: #f5f8fa;
 }
+
+.absolute {
+    position: absolute;
+}
+
+.div-width {
+    max-width: 75%;
+}
+
+.bg-background {
+    background-color: #1e1e1e;
+}
+
+.bg-white {
+    background-color: #fff;
+}
 </style>