From cd5f4ecceefb2c8518a2d6bbc9e95ae144ff7a4c Mon Sep 17 00:00:00 2001
From: andig <andi@evcc.io>
Date: Wed, 3 Dec 2025 20:30:40 +0100
Subject: [PATCH] OAuth: clarify callback window can be closed (#25789)

---
 .../components/Config/AuthSuccessBanner.vue   | 29 +++++++++++++++++++
 assets/js/views/Config.vue                    | 13 +++++++++
 i18n/de.json                                  |  1 +
 i18n/en.json                                  |  1 +
 server/providerauth/handler.go                |  4 +--
 5 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 assets/js/components/Config/AuthSuccessBanner.vue

diff --git a/assets/js/components/Config/AuthSuccessBanner.vue b/assets/js/components/Config/AuthSuccessBanner.vue
new file mode 100644
index 000000000..de55f83ff
--- /dev/null
+++ b/assets/js/components/Config/AuthSuccessBanner.vue
@@ -0,0 +1,29 @@
+<template>
+	<div class="alert alert-success my-4 pb-0" role="alert" data-testid="auth-success-banner">
+		<p>{{ $t("header.authProviders.success", { title: providerName }) }}</p>
+	</div>
+</template>
+
+<script lang="ts">
+import type { AuthProviders } from "@/types/evcc";
+import { defineComponent, type PropType } from "vue";
+
+export default defineComponent({
+	name: "AuthSuccessBanner",
+	props: {
+		providerId: { type: String, required: true },
+		authProviders: { type: Object as PropType<AuthProviders>, default: () => ({}) },
+	},
+	computed: {
+		providerName() {
+			for (const [name, provider] of Object.entries(this.authProviders)) {
+				console.log(provider.id, this.providerId);
+				if (provider.id === this.providerId) {
+					return name;
+				}
+			}
+			return "Unknown";
+		},
+	},
+});
+</script>
diff --git a/assets/js/views/Config.vue b/assets/js/views/Config.vue
index db33e87ba..30c85804e 100644
--- a/assets/js/views/Config.vue
+++ b/assets/js/views/Config.vue
@@ -3,6 +3,11 @@
 		<div class="container px-4">
 			<TopHeader :title="$t('config.main.title')" />
 			<div class="wrapper pb-5">
+				<AuthSuccessBanner
+					v-if="callbackCompleted"
+					:provider-id="callbackCompleted"
+					:auth-providers="authProviders"
+				/>
 				<WelcomeBanner v-if="loadpointsRequired" />
 				<ExperimentalBanner v-else-if="$hiddenFeatures()" />
 
@@ -437,6 +442,7 @@ type DeviceValuesMap = Record<DeviceType, Record<string, any>>;
 import BackupRestoreModal from "@/components/Config/BackupRestoreModal.vue";
 import WelcomeBanner from "../components/Config/WelcomeBanner.vue";
 import ExperimentalBanner from "../components/Config/ExperimentalBanner.vue";
+import AuthSuccessBanner from "../components/Config/AuthSuccessBanner.vue";
 import PasswordModal from "../components/Auth/PasswordModal.vue";
 
 export default defineComponent({
@@ -453,6 +459,7 @@ export default defineComponent({
 		EebusIcon,
 		EebusModal,
 		ExperimentalBanner,
+		AuthSuccessBanner,
 		GeneralConfig,
 		HemsIcon,
 		HemsModal,
@@ -523,6 +530,12 @@ export default defineComponent({
 		return { title: this.$t("config.main.title") };
 	},
 	computed: {
+		callbackCompleted() {
+			return this.$route.query["callbackCompleted"] as string | undefined;
+		},
+		authProviders() {
+			return store.state?.authProviders;
+		},
 		loadpointsRequired() {
 			return this.loadpoints.length === 0;
 		},
diff --git a/i18n/de.json b/i18n/de.json
index cd49a259b..649ea0cf5 100644
--- a/i18n/de.json
+++ b/i18n/de.json
@@ -697,6 +697,7 @@
     "authProviders": {
       "confirmLogout": "Sicher, dass du {title} trennen möchtest?",
       "loggedOut": "Erfolgreich abgemeldet",
+      "success": "Die Autorisierung mit {title} war erfolgreich. Du kannst diesen Tab jetzt schließen.",
       "title": "Autorisierungsstatus"
     },
     "blog": "Blog",
diff --git a/i18n/en.json b/i18n/en.json
index 442dccb9a..439174f38 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -697,6 +697,7 @@
     "authProviders": {
       "confirmLogout": "Are you sure you want to disconnect {title}?",
       "loggedOut": "Successfully logged out",
+      "success": "Authorization with {title} was successful. You can now close this tab.",
       "title": "Authorization Status"
     },
     "blog": "Blog",
diff --git a/server/providerauth/handler.go b/server/providerauth/handler.go
index a105f90a3..bf17d6d07 100644
--- a/server/providerauth/handler.go
+++ b/server/providerauth/handler.go
@@ -54,7 +54,7 @@ func (a *Handler) run(paramC chan<- util.Param) {
 		res := make(map[string]*AuthProvider)
 		for id, provider := range a.providers {
 			res[provider.DisplayName()] = &AuthProvider{
-				ID:            url.QueryEscape(id),
+				ID:            id,
 				Authenticated: provider.Authenticated(),
 			}
 		}
@@ -182,5 +182,5 @@ func (a *Handler) handleCallback(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	http.Redirect(w, r, "/", http.StatusFound)
+	http.Redirect(w, r, "/#/config?callbackCompleted="+url.QueryEscape(id), http.StatusFound)
 }