Add support for oidc

src/components/LoginPage.vue

@@ -31,6 +31,11 @@
             <div>
                 <a v-t="'titles.login'" class="btn w-auto" @click="login" />
             </div>
+            <ul class="children:pb-3">
+                <li v-for="provider in oidcProviders" :key="provider.name">
+                    <a class="btn" :href="provider.authUri">Login with {{ provider.name }}</a>
+                </li>
+            </ul>
         </form>
     </div>
 </template>
@@ -41,10 +46,17 @@ export default {
         return {
             username: null,
             password: null,
+            oidcProviders: null,
         };
     },
     mounted() {
-        //TODO: Add Server Side check
+        const session = this.$route.query.session;
+        if (session) {
+            this.setPreference("authToken" + this.hashCode(this.authApiUrl()), session);
+            this.setPreference("isOidcLogin", true);
+            window.location = import.meta.env.BASE_URL;
+        }
+        this.fetchConfig();
         if (this.getAuthToken()) {
             this.$router.push(import.meta.env.BASE_URL);
         }
@@ -53,6 +65,16 @@ export default {
         document.title = this.$t("titles.login") + " - Piped";
     },
     methods: {
+        async fetchConfig() {
+            this.fetchJson(this.apiUrl() + "/config").then(config => {
+                this.oidcProviders = config?.oidcProviders.map(name => {
+                    return {
+                        name,
+                        authUri: `${this.authApiUrl()}/oidc/${name}/login?redirect=${window.location.origin}/login`,
+                    };
+                });
+            });
+        },
         login() {
             if (!this.username || !this.password) return;
             this.fetchJson(this.authApiUrl() + "/login", null, {

src/components/PreferencesPage.vue

@@ -330,6 +330,7 @@
             <strong v-t="'actions.delete_account'" />
             <div class="flex items-center">
                 <input
+                    v-if="!isOidcLogin"
                     id="txtDeleteAccountPassword"
                     ref="txtDeleteAccountPassword"
                     v-model="password"
@@ -415,6 +416,7 @@ export default {
     },
     data() {
         return {
+            isOidcLogin: false,
             mobileChapterLayout: "Vertical",
             selectedInstance: null,
             authInstance: false,
@@ -527,14 +529,22 @@ export default {
         document.title = this.$t("titles.preferences") + " - Piped";
     },
     async mounted() {
+        const deleted = this.$route.query.deleted;
+        if (deleted) {
+            this.logout();
+        }
         if (Object.keys(this.$route.query).length > 0) this.$router.replace({ query: {} });
 
+        const token = this.getAuthToken();
+        if (token && this.$route.query.deleted == token) this.logout();
+
         this.fetchInstances();
 
         if (this.testLocalStorage) {
             this.selectedInstance = this.getPreferenceString("instance", import.meta.env.VITE_PIPED_API);
             this.authInstance = this.getPreferenceBoolean("authInstance", false);
             this.selectedAuthInstance = this.getPreferenceString("auth_instance_url", this.selectedInstance);
+            this.isOidcLogin = this.getPreferenceBoolean("isOidcLogin", false);
 
             this.sponsorBlock = this.getPreferenceBoolean("sponsorblock", true);
             var skipOptions, skipList;
@@ -668,6 +678,13 @@ export default {
             return "https://www.ssllabs.com/ssltest/analyze.html?d=" + new URL(url).host + "&latest";
         },
         async deleteAccount() {
+            if (this.getPreferenceBoolean("isOidcLogin", false)) {
+                const url = new URL("/user/delete", this.authApiUrl());
+                url.searchParams.append("session", this.getAuthToken());
+                url.searchParams.append("redirect", `${window.location.origin}/preferences`);
+                window.location = url.href;
+                return;
+            }
             this.fetchJson(this.authApiUrl() + "/user/delete", null, {
                 method: "POST",
                 headers: {
@@ -685,6 +702,8 @@ export default {
         logout() {
             // reset the auth token
             localStorage.removeItem("authToken" + this.hashCode(this.authApiUrl()));
+            // Remove oidc state
+            localStorage.removeItem("isOidcLogin");
             // redirect to trending page
             window.location = import.meta.env.BASE_URL;
         },