From 88c49abe7441b1f96b1e4078953937ac05f6dae7 Mon Sep 17 00:00:00 2001
From: sd <sebastiandobe@mailbox.org>
Date: Thu, 2 May 2024 13:20:32 +0200
Subject: [PATCH 01/10] create a new `<Modal>` component

---
 frontend/src/lib/Modal.svelte | 90 +++++++++++++++++++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 frontend/src/lib/Modal.svelte

diff --git a/frontend/src/lib/Modal.svelte b/frontend/src/lib/Modal.svelte
new file mode 100644
index 00000000..c6738d17
--- /dev/null
+++ b/frontend/src/lib/Modal.svelte
@@ -0,0 +1,90 @@
+<script>
+    import IconStop from "$lib/icons/IconStop.svelte";
+
+    /** @type {boolean} */
+    export let showModal;
+
+    /** @type {HTMLDialogElement} */
+    let dialog;
+
+    $: if (dialog && showModal) dialog.showModal();
+</script>
+
+<!-- According to MDN docs, a dialog element must not have a tabindex -->
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
+<dialog
+        bind:this={dialog}
+        on:close={() => (showModal = false)}
+        on:click|self={() => dialog.close()}
+>
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div on:click|stopPropagation>
+        <div
+                role="button"
+                tabindex="0"
+                class="close"
+                on:click={() => dialog.close()}
+        >
+            <IconStop color="var(--col-err)" width={24}/>
+        </div>
+        <div class="inner">
+            <slot></slot>
+        </div>
+    </div>
+</dialog>
+
+<style>
+    dialog {
+        border-radius: 3px;
+        border: none;
+        padding: 0;
+    }
+
+    dialog::backdrop {
+        background: rgba(0, 0, 0, 0.3);
+    }
+
+    dialog > div {
+        padding: 1rem;
+    }
+
+    dialog > div > div {
+        position: relative;
+    }
+
+    dialog[open] {
+        animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+
+    @keyframes zoom {
+        from {
+            transform: scale(0.95);
+        }
+        to {
+            transform: scale(1);
+        }
+    }
+
+    dialog[open]::backdrop {
+        animation: fade 0.2s ease-out;
+    }
+
+    @keyframes fade {
+        from {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
+    }
+
+    .close {
+        margin: -1rem -1rem 0 0;
+        cursor: pointer;
+        text-align: right;
+    }
+
+    .inner {
+        margin-top: -.5rem;
+    }
+</style>

From 9aa0ef4f9ddbdd4cfc22437644e97e1d1c46aac1 Mon Sep 17 00:00:00 2001
From: sd <sebastiandobe@mailbox.org>
Date: Thu, 2 May 2024 13:21:09 +0200
Subject: [PATCH 02/10] UI: prepare the "link provider" feature

---
 .../src/components/account/AccInfo.svelte     | 135 +++++++++++++++++-
 .../src/routes/oidc/authorize/+page.svelte    |   7 +-
 rauthy-models/src/i18n/account.rs             |  14 +-
 3 files changed, 143 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/account/AccInfo.svelte b/frontend/src/components/account/AccInfo.svelte
index c8d09f80..6bc849cc 100644
--- a/frontend/src/components/account/AccInfo.svelte
+++ b/frontend/src/components/account/AccInfo.svelte
@@ -2,10 +2,11 @@
     import CheckIcon from "$lib/CheckIcon.svelte";
     import {buildWebIdUri, formatDateFromTs} from "../../utils/helpers.js";
     import {onMount} from "svelte";
-    import {getAuthProvidersTemplate} from "../../utils/helpers.js";
     import Button from "$lib/Button.svelte";
-    import Tooltip from "$lib/Tooltip.svelte";
     import {deleteUserProviderLink} from "../../utils/dataFetching.js";
+    import Modal from "$lib/Modal.svelte";
+    import getPkce from "oauth-pkce";
+    import {PKCE_VERIFIER_UPSTREAM} from "../../utils/constants.js";
 
     export let t;
     export let user = {};
@@ -15,6 +16,9 @@
     export let viewModePhone = false;
 
     let unlinkErr = false;
+    let showModal = true;
+    // let showModal = false;
+    let providersAvailable = [];
 
     $: isFederated = user.account_type.startsWith('federated');
     $: accType = isFederated ? `${user.account_type}: ${authProvider?.name || ''}` : user.account_type;
@@ -22,6 +26,27 @@
     $: classRow = viewModePhone ? 'rowPhone' : 'row';
     $: classLabel = viewModePhone ? 'labelPhone' : 'label';
 
+    onMount(() => {
+        // value for dev testing only
+        const providersTpl = [{
+            "id": "7F6N7fb3el3P5XimjJSaeD2o",
+            "name": "Rauthy IAM"
+        }, {"id": "7F6N7fb3el3P5XimjJSaeD2O", "name": "Rauthy IAM 2"}];
+        // const providersTpl = document?.getElementsByTagName("template").namedItem("auth_providers")?.innerHTML;
+        console.log(providersTpl);
+        providersAvailable = providersTpl;
+    })
+
+    function linkProvider(id) {
+        console.error('TODO linkProvider');
+        // getPkce(64, (error, {challenge, verifier}) => {
+        //     if (!error) {
+        //         localStorage.setItem(PKCE_VERIFIER_UPSTREAM, verifier);
+        //         providerLoginPkce(id, challenge);
+        //     }
+        // });
+    }
+
     async function unlinkProvider() {
         let res = await deleteUserProviderLink();
         let body = await res.json();
@@ -70,8 +95,39 @@
                         </div>
                     {/if}
                 </div>
-            {:else}
-                <!-- TODO -->
+            {:else if providersAvailable.length > 0}
+                <div
+                        role="button"
+                        tabindex="0"
+                        class="provider-link"
+                        on:click={() => showModal = !showModal}
+                        on:keypress={() => showModal = !showModal}
+                >
+                    {t.providerLink}
+                </div>
+                <Modal bind:showModal>
+                    <p>
+                        {t.providerLinkDesc}
+                    </p>
+
+                    <div class="providers">
+                        {#each providersAvailable as provider (provider.id)}
+                            <Button on:click={() => linkProvider(provider.id)} level={3}>
+                                <div class="flex-inline">
+                                    <img
+                                            src="{`/auth/v1/providers/${provider.id}/img`}"
+                                            alt=""
+                                            width="20"
+                                            height="20"
+                                    />
+                                    <span class="provider-name">
+                                        {provider.name}
+                                    </span>
+                                </div>
+                            </Button>
+                        {/each}
+                    </div>
+                </Modal>
             {/if}
         </div>
     </div>
@@ -133,7 +189,6 @@
             </span>
         </div>
     {/if}
-
 </div>
 
 <style>
@@ -142,6 +197,56 @@
         padding: 10px;
     }
 
+    dialog {
+        animation: fade-out 0.7s ease-out;
+    }
+
+    dialog[open] {
+        animation: fade-in 0.7s ease-out;
+    }
+
+    dialog[open]::backdrop {
+        animation: backdrop-fade-in 0.7s ease-out forwards;
+    }
+
+    @keyframes fade-in {
+        0% {
+            opacity: 0;
+            transform: scaleY(0);
+            display: none;
+        }
+
+        100% {
+            opacity: 1;
+            transform: scaleY(1);
+            display: block;
+        }
+    }
+
+    @keyframes fade-out {
+        0% {
+            opacity: 1;
+            transform: scaleY(1);
+            display: block;
+        }
+
+        100% {
+            opacity: 0;
+            transform: scaleY(0);
+            display: none;
+        }
+    }
+
+    @keyframes backdrop-fade-in {
+        0% {
+            background-color: rgb(0 0 0 / 0%);
+        }
+
+        100% {
+            background-color: rgb(0 0 0 / 25%);
+        }
+    }
+
     .label {
         width: 10rem;
     }
@@ -154,11 +259,31 @@
         margin-left: -5px;
     }
 
+    .flex-inline {
+        display: inline-flex;
+        align-items: center;
+        gap: .5rem;
+    }
+
     .link-err {
         margin-left: 5px;
         color: var(--col-err);
     }
 
+    .provider-link {
+        color: var(--col-act2);
+        cursor: pointer;
+    }
+
+    .provider-name {
+        margin-bottom: -4px;
+    }
+
+    .providers {
+        margin-top: .66rem;
+        display: flex;
+    }
+
     .row {
         display: flex;
     }
diff --git a/frontend/src/routes/oidc/authorize/+page.svelte b/frontend/src/routes/oidc/authorize/+page.svelte
index d707eec9..a80ff0b0 100644
--- a/frontend/src/routes/oidc/authorize/+page.svelte
+++ b/frontend/src/routes/oidc/authorize/+page.svelte
@@ -407,7 +407,7 @@
                         <Button on:click={() => providerLogin(provider.id)} level={3}>
                             <div class="flex-inline">
                                 <img src="{`/auth/v1/providers/${provider.id}/img`}" alt="" width="20" height="20"/>
-                                {provider.name}
+                                <span class="providerName">{provider.name}</span>
                             </div>
                         </Button>
                     {/each}
@@ -515,6 +515,11 @@
         margin-top: .66rem;
     }
 
+    .providerName {
+        /*margin-bottom: -14px;*/
+        margin-top: 4px;
+    }
+
     .reg {
         margin-left: 5px;
     }
diff --git a/rauthy-models/src/i18n/account.rs b/rauthy-models/src/i18n/account.rs
index 93f7b0a9..d8c45352 100644
--- a/rauthy-models/src/i18n/account.rs
+++ b/rauthy-models/src/i18n/account.rs
@@ -165,9 +165,9 @@ external provider or by local password. Do you want to request a reset?"#,
             password_reset: "Password Reset",
             phone: "Phone",
             provider_link: "Federate Account",
-            provider_link_desc: r#"You can allow linking to a federated account for a short period
-of time. After activating this function, you will get logged out and redirect to the login page.
-You can then choose an upstream provider which will be linked to this account, if the email matches."#,
+            provider_link_desc: r#"You can link this account to one of the following login providers.
+After activating this function, you will be redirected to the login page of the chosen one.
+After a successful login and if the email matches, your account will be linked."#,
             provider_unlink: "Unlink Federation",
             provider_unlink_desc: r#"Only if you have set up at least a password or a passkey for this
 account, you can unlink it from the upstream provider."#,
@@ -260,10 +260,10 @@ Login entweder per externem Provider oder lokalem Password möglich. Passwort Re
             password_reset: "Passwort Reset",
             phone: "Telefon",
             provider_link: "Account Verbinden",
-            provider_link_desc: r#"Das Verbinden dieses Accounts mit einem externen Provider kann
-für eine kurze Zeit erlaubt werden. Nach der Aktivierung foldet ein Ausloggen mit Umleitung zur
-Login Seite. Dort kann dann ein Account Provider gewählt werden. Sollte nach erfolgreichem Login
-die E-Mail Adresse übereinstimmen, wird sie mit diesem Account verbunden."#,
+            provider_link_desc: r#"Dieser Account kann mit einem der folgenden Login Provider
+verbunden werden. Nach der Aktivierung des Prozesses wird eine Weiterleitung auf die Login Seite
+des gewählten Providers ausgelöst. Nach erfolgreichem Login und bei Übereinstimmung der E-Mail
+Adressen wird dieser Account verknüpft."#,
             provider_unlink: "Verbindung Trennen",
             provider_unlink_desc: r#"Nur wenn mindestens ein Passwort oder ein Passkey für diesen
 Account gesetzt ist, kann die Verbindung zum Provider gelöst werden."#,

From a0e293e8b19523a99e5552fbd104a9cfba060c80 Mon Sep 17 00:00:00 2001
From: sd <sebastiandobe@mailbox.org>
Date: Thu, 2 May 2024 13:52:34 +0200
Subject: [PATCH 03/10] impl `AuthProviderLinkCookie` struct

---
 rauthy-models/src/entity/auth_providers.rs | 57 +++++++++++++++++++---
 1 file changed, 51 insertions(+), 6 deletions(-)

diff --git a/rauthy-models/src/entity/auth_providers.rs b/rauthy-models/src/entity/auth_providers.rs
index b7749b19..52b242bc 100644
--- a/rauthy-models/src/entity/auth_providers.rs
+++ b/rauthy-models/src/entity/auth_providers.rs
@@ -12,7 +12,7 @@ use crate::request::{
 };
 use crate::response::{ProviderLinkedUserResponse, ProviderLookupResponse};
 use crate::{AuthStep, AuthStepAwaitWebauthn, AuthStepLoggedIn};
-use actix_web::cookie::Cookie;
+use actix_web::cookie::{Cookie, SameSite};
 use actix_web::http::header;
 use actix_web::http::header::HeaderValue;
 use actix_web::{cookie, web, HttpRequest};
@@ -23,13 +23,13 @@ use itertools::Itertools;
 use rauthy_common::constants::{
     APPLICATION_JSON, CACHE_NAME_12HR, CACHE_NAME_AUTH_PROVIDER_CALLBACK, COOKIE_UPSTREAM_CALLBACK,
     IDX_AUTH_PROVIDER, IDX_AUTH_PROVIDER_TEMPLATE, PROVIDER_CALLBACK_URI,
-    PROVIDER_CALLBACK_URI_ENCODED, RAUTHY_VERSION, UPSTREAM_AUTH_CALLBACK_TIMEOUT_SECS,
-    WEBAUTHN_REQ_EXP,
+    PROVIDER_CALLBACK_URI_ENCODED, PROVIDER_LINK_COOKIE, PWD_RESET_COOKIE, RAUTHY_VERSION,
+    UPSTREAM_AUTH_CALLBACK_TIMEOUT_SECS, WEBAUTHN_REQ_EXP,
 };
 use rauthy_common::error_response::{ErrorResponse, ErrorResponseType};
 use rauthy_common::utils::{
-    base64_decode, base64_encode, base64_url_encode, base64_url_no_pad_decode, get_rand,
-    new_store_id,
+    base64_decode, base64_encode, base64_url_decode, base64_url_encode, base64_url_no_pad_decode,
+    get_rand, new_store_id,
 };
 use redhac::{cache_del, cache_get, cache_get_from, cache_get_value, cache_insert, AckLevel};
 use reqwest::header::{ACCEPT, AUTHORIZATION};
@@ -98,7 +98,7 @@ impl From<String> for AuthProviderType {
 
 /// Minimal version of the OpenID metadata. This is used for upstream oauth2 lookup.
 /// Only includes the data we care about when doing a config lookup.
-#[derive(Clone, Debug, Serialize, Deserialize, ToSchema)]
+#[derive(Debug, Clone, Serialize, Deserialize, ToSchema)]
 pub struct WellKnownLookup {
     pub issuer: String,
     pub authorization_endpoint: String,
@@ -109,6 +109,51 @@ pub struct WellKnownLookup {
     pub code_challenge_methods_supported: Vec<String>,
 }
 
+#[derive(Debug, Serialize, Deserialize)]
+pub struct AuthProviderLinkCookie {
+    pub provider_id: String,
+    pub user_id: String,
+    pub user_email: String,
+}
+
+impl TryFrom<Cookie<'_>> for AuthProviderLinkCookie {
+    type Error = ErrorResponse;
+
+    fn try_from(value: Cookie) -> Result<AuthProviderLinkCookie, Self::Error> {
+        let bytes_enc = base64_url_decode(value.value())?;
+        let dec = EncValue::try_from(bytes_enc)?.decrypt()?;
+        let slf = bincode::deserialize::<AuthProviderLinkCookie>(dec.as_ref())?;
+        Ok(slf)
+    }
+}
+
+impl AuthProviderLinkCookie {
+    pub fn build_cookie(&self) -> Result<Cookie<'_>, ErrorResponse> {
+        let bytes = bincode::serialize(self)?;
+        let secret_enc = EncValue::encrypt(bytes.as_ref())?.into_bytes().to_vec();
+        let value = base64_url_encode(&secret_enc);
+
+        let cookie = cookie::Cookie::build(PROVIDER_LINK_COOKIE, value)
+            .secure(true)
+            .http_only(true)
+            .same_site(SameSite::Lax)
+            .max_age(cookie::time::Duration::seconds(300))
+            .path("/auth")
+            .finish();
+        Ok(cookie)
+    }
+
+    pub fn deletion_cookie(&self) -> Cookie<'_> {
+        cookie::Cookie::build(PROVIDER_LINK_COOKIE, "")
+            .secure(true)
+            .http_only(true)
+            .same_site(SameSite::Lax)
+            .max_age(cookie::time::Duration::ZERO)
+            .path("/auth")
+            .finish()
+    }
+}
+
 /// Upstream Auth Provider for upstream logins without a local Rauthy account
 #[derive(Debug, Clone, Serialize, Deserialize, FromRow)]
 pub struct AuthProvider {

From 510f5a94db553588db13f2c22ae111d4db20c387 Mon Sep 17 00:00:00 2001
From: sd <sebastiandobe@mailbox.org>
Date: Thu, 2 May 2024 13:55:11 +0200
Subject: [PATCH 04/10] define new API endpoints and cookie names for
 linking-feature

---
 rauthy-common/src/constants.rs        |  1 +
 rauthy-handlers/src/auth_providers.rs | 40 ++++++++++++++++++++++++++-
 rauthy-main/src/main.rs               |  1 +
 3 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/rauthy-common/src/constants.rs b/rauthy-common/src/constants.rs
index 8b057cd0..aaba8e72 100644
--- a/rauthy-common/src/constants.rs
+++ b/rauthy-common/src/constants.rs
@@ -25,6 +25,7 @@ pub const COOKIE_SESSION: &str = "rauthy-session";
 pub const COOKIE_MFA: &str = "rauthy-mfa";
 pub const COOKIE_LOCALE: &str = "locale";
 pub const COOKIE_UPSTREAM_CALLBACK: &str = "upstream_auth_callback";
+pub const PROVIDER_LINK_COOKIE: &str = "rauthy-provider-link";
 pub const PWD_RESET_COOKIE: &str = "rauthy-pwd-reset";
 pub const APP_ID_HEADER: &str = "mfa-app-id";
 pub const CSRF_HEADER: &str = "csrf-token";
diff --git a/rauthy-handlers/src/auth_providers.rs b/rauthy-handlers/src/auth_providers.rs
index a1fc1adf..01a31edf 100644
--- a/rauthy-handlers/src/auth_providers.rs
+++ b/rauthy-handlers/src/auth_providers.rs
@@ -189,6 +189,9 @@ pub async fn post_provider_callback(
 ) -> Result<HttpResponse, ErrorResponse> {
     principal.validate_session_auth_or_init()?;
 
+    // TODO extract the new possibly existing provider link cookie and provide
+    // that information to the login_finish fn
+
     let payload = payload.into_inner();
     let session = principal.get_session()?;
     let (auth_step, cookie) =
@@ -208,7 +211,7 @@ pub async fn post_provider_callback(
 
 /// DELETE a link between an existing user account and an upstream provider
 ///
-/// This will always unlink the currently logged in user from its registered
+/// This will always unlink the currently logged-in user from its registered
 /// upstream auth provider. The user account must have been set up with at least
 /// a password or a passkey. Otherwise, this endpoint will return an error.
 #[utoipa::path(
@@ -435,3 +438,38 @@ pub async fn put_provider_img(
 
     Ok(HttpResponse::Ok().finish())
 }
+
+/// POST a link between an existing user account and an upstream provider
+///
+/// This action will create a link between an already existing, non-linked account and a configured
+/// upstream auth provider. This can only be issued from within an authenticated, valid session.
+#[utoipa::path(
+    post,
+    path = "/providers/{id}/link",
+    tag = "providers",
+    responses(
+        (status = 200, description = "OK"),
+        (status = 400, description = "BadRequest", body = ErrorResponse),
+        (status = 401, description = "Unauthorized", body = ErrorResponse),
+        (status = 403, description = "Forbidden", body = ErrorResponse),
+    ),
+)]
+#[post("/providers/{id}/link")]
+pub async fn post_provider_link(
+    data: web::Data<AppState>,
+    id: web::Path<String>,
+    principal: ReqPrincipal,
+) -> Result<HttpResponse, ErrorResponse> {
+    principal.validate_session_auth()?;
+
+    let user_id = principal.user_id()?.to_string();
+
+    // TODO
+    // make sure the user is currently un-linked
+    // set an encrypted cookie with the provider_id + user_id / email
+    // directly redirect to the provider login page
+    // modify the callback to check for this new cookie
+    todo!()
+
+    // Ok(HttpResponse::Ok().json(user))
+}
diff --git a/rauthy-main/src/main.rs b/rauthy-main/src/main.rs
index 8a1404c3..1e6ce1da 100644
--- a/rauthy-main/src/main.rs
+++ b/rauthy-main/src/main.rs
@@ -500,6 +500,7 @@ async fn actix_main(app_state: web::Data<AppState>) -> std::io::Result<()> {
                             .service(auth_providers::delete_provider)
                             .service(auth_providers::get_provider_img)
                             .service(auth_providers::put_provider_img)
+                            .service(auth_providers::post_provider_link)
                             .service(blacklist::get_blacklist)
                             .service(blacklist::post_blacklist)
                             .service(blacklist::delete_blacklist)

From fd70ffb00195ac82d98ed8bb6180ae833320c8e0 Mon Sep 17 00:00:00 2001
From: sd <sebastiandobe@mailbox.org>
Date: Thu, 2 May 2024 15:56:02 +0200
Subject: [PATCH 05/10] remove `Login` from the UI index button label
 translations

---
 rauthy-models/src/i18n/index.rs | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/rauthy-models/src/i18n/index.rs b/rauthy-models/src/i18n/index.rs
index 97e6bbe7..e8472d80 100644
--- a/rauthy-models/src/i18n/index.rs
+++ b/rauthy-models/src/i18n/index.rs
@@ -27,16 +27,16 @@ impl I18nIndex<'_> {
     fn build_en() -> Self {
         Self {
             register: "Register",
-            account_login: "Account Login",
-            admin_login: "Admin Login",
+            account_login: "Account",
+            admin_login: "Admin",
         }
     }
 
     fn build_de() -> Self {
         Self {
             register: "Registrieren",
-            account_login: "Account Login",
-            admin_login: "Admin Login",
+            account_login: "Account",
+            admin_login: "Admin",
         }
     }
 }

From e3e434e32060a4c3df7357d9bcfa246048b736d5 Mon Sep 17 00:00:00 2001
From: sd <sebastiandobe@mailbox.org>
Date: Thu, 2 May 2024 15:56:28 +0200
Subject: [PATCH 06/10] add new `AuthStep::ProviderLink` and handle it properly

---
 rauthy-handlers/src/auth_providers.rs | 34 +++++++++++++++++++--------
 rauthy-handlers/src/lib.rs            |  5 ++++
 rauthy-models/src/lib.rs              |  1 +
 3 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/rauthy-handlers/src/auth_providers.rs b/rauthy-handlers/src/auth_providers.rs
index 01a31edf..4643ab9b 100644
--- a/rauthy-handlers/src/auth_providers.rs
+++ b/rauthy-handlers/src/auth_providers.rs
@@ -7,7 +7,7 @@ use rauthy_common::constants::{HEADER_HTML, HEADER_JSON};
 use rauthy_common::error_response::{ErrorResponse, ErrorResponseType};
 use rauthy_models::app_state::AppState;
 use rauthy_models::entity::auth_providers::{
-    AuthProvider, AuthProviderCallback, AuthProviderTemplate,
+    AuthProvider, AuthProviderCallback, AuthProviderLinkCookie, AuthProviderTemplate,
 };
 use rauthy_models::entity::colors::ColorEntity;
 use rauthy_models::entity::logos::{Logo, LogoType};
@@ -134,7 +134,6 @@ pub async fn post_provider_lookup(
 #[post("/providers/login")]
 pub async fn post_provider_login(
     data: web::Data<AppState>,
-    // req: HttpRequest,
     payload: Json<ProviderLoginRequest>,
     principal: ReqPrincipal,
 ) -> Result<HttpResponse, ErrorResponse> {
@@ -189,9 +188,6 @@ pub async fn post_provider_callback(
 ) -> Result<HttpResponse, ErrorResponse> {
     principal.validate_session_auth_or_init()?;
 
-    // TODO extract the new possibly existing provider link cookie and provide
-    // that information to the login_finish fn
-
     let payload = payload.into_inner();
     let session = principal.get_session()?;
     let (auth_step, cookie) =
@@ -457,19 +453,37 @@ pub async fn put_provider_img(
 #[post("/providers/{id}/link")]
 pub async fn post_provider_link(
     data: web::Data<AppState>,
-    id: web::Path<String>,
+    provider_id: web::Path<String>,
     principal: ReqPrincipal,
+    payload: Json<ProviderLoginRequest>,
 ) -> Result<HttpResponse, ErrorResponse> {
     principal.validate_session_auth()?;
 
     let user_id = principal.user_id()?.to_string();
+    let user = User::find(&data, user_id).await?;
 
-    // TODO
     // make sure the user is currently un-linked
+    if user.auth_provider_id.is_some() {
+        return Err(ErrorResponse::new(
+            ErrorResponseType::BadRequest,
+            "user is already federated".to_string(),
+        ));
+    }
+
     // set an encrypted cookie with the provider_id + user_id / email
+    let link_cookie = AuthProviderLinkCookie {
+        provider_id: provider_id.into_inner(),
+        user_id: user.id,
+        user_email: user.email,
+    };
+
     // directly redirect to the provider login page
-    // modify the callback to check for this new cookie
-    todo!()
+    let (login_cookie, xsrf_token, location) =
+        AuthProviderCallback::login_start(&data, payload.into_inner()).await?;
 
-    // Ok(HttpResponse::Ok().json(user))
+    Ok(HttpResponse::Accepted()
+        .insert_header((LOCATION, location))
+        .cookie(login_cookie)
+        .cookie(link_cookie.build_cookie()?)
+        .body(xsrf_token))
 }
diff --git a/rauthy-handlers/src/lib.rs b/rauthy-handlers/src/lib.rs
index 7b6f59be..1b1d89b4 100644
--- a/rauthy-handlers/src/lib.rs
+++ b/rauthy-handlers/src/lib.rs
@@ -80,6 +80,11 @@ pub async fn map_auth_step(
 
             Ok((resp, res.has_password_been_hashed))
         }
+
+        AuthStep::ProviderLink => {
+            // TODO generate a new event type in this case?
+            Ok((HttpResponse::NoContent().finish(), false))
+        }
     }
 }
 
diff --git a/rauthy-models/src/lib.rs b/rauthy-models/src/lib.rs
index b590f073..468cb832 100644
--- a/rauthy-models/src/lib.rs
+++ b/rauthy-models/src/lib.rs
@@ -28,6 +28,7 @@ pub mod templates;
 pub enum AuthStep {
     LoggedIn(AuthStepLoggedIn),
     AwaitWebauthn(AuthStepAwaitWebauthn),
+    ProviderLink,
 }
 
 pub struct AuthStepLoggedIn {

From 8c1b5907a39ab1f430e5530da842154625978bf2 Mon Sep 17 00:00:00 2001
From: sd <sebastiandobe@mailbox.org>
Date: Thu, 2 May 2024 15:57:43 +0200
Subject: [PATCH 07/10] check the existence of a provider-link-allowance cookie
 during provider callback and handle it properly

---
 rauthy-models/src/entity/auth_providers.rs | 83 ++++++++++++++++++----
 1 file changed, 69 insertions(+), 14 deletions(-)

diff --git a/rauthy-models/src/entity/auth_providers.rs b/rauthy-models/src/entity/auth_providers.rs
index 52b242bc..8338d3fc 100644
--- a/rauthy-models/src/entity/auth_providers.rs
+++ b/rauthy-models/src/entity/auth_providers.rs
@@ -23,7 +23,7 @@ use itertools::Itertools;
 use rauthy_common::constants::{
     APPLICATION_JSON, CACHE_NAME_12HR, CACHE_NAME_AUTH_PROVIDER_CALLBACK, COOKIE_UPSTREAM_CALLBACK,
     IDX_AUTH_PROVIDER, IDX_AUTH_PROVIDER_TEMPLATE, PROVIDER_CALLBACK_URI,
-    PROVIDER_CALLBACK_URI_ENCODED, PROVIDER_LINK_COOKIE, PWD_RESET_COOKIE, RAUTHY_VERSION,
+    PROVIDER_CALLBACK_URI_ENCODED, PROVIDER_LINK_COOKIE, RAUTHY_VERSION,
     UPSTREAM_AUTH_CALLBACK_TIMEOUT_SECS, WEBAUTHN_REQ_EXP,
 };
 use rauthy_common::error_response::{ErrorResponse, ErrorResponseType};
@@ -143,7 +143,7 @@ impl AuthProviderLinkCookie {
         Ok(cookie)
     }
 
-    pub fn deletion_cookie(&self) -> Cookie<'_> {
+    pub fn deletion_cookie<'a>() -> Cookie<'a> {
         cookie::Cookie::build(PROVIDER_LINK_COOKIE, "")
             .secure(true)
             .http_only(true)
@@ -814,6 +814,12 @@ impl AuthProviderCallback {
             return Err(ErrorResponse::new(ErrorResponseType::Internal, err));
         }
 
+        // extract a possibly existing provider link cookie for
+        // linking an existing account to a provider
+        let link_cookie = req
+            .cookie(PROVIDER_LINK_COOKIE)
+            .and_then(|c| AuthProviderLinkCookie::try_from(c).ok());
+
         // deserialize payload and validate the information
         let (user, provider_mfa_login) = match res.json::<AuthProviderTokenSet>().await {
             Ok(ts) => {
@@ -831,7 +837,9 @@ impl AuthProviderCallback {
                 if let Some(id_token) = ts.id_token {
                     let claims_bytes = AuthProviderIdClaims::self_as_bytes_from_token(&id_token)?;
                     let claims = AuthProviderIdClaims::try_from(claims_bytes.as_slice())?;
-                    claims.validate_update_user(data, &provider).await?
+                    claims
+                        .validate_update_user(data, &provider, &link_cookie)
+                        .await?
                 } else if let Some(access_token) = ts.access_token {
                     // the id_token only exists, if we actually have an OIDC provider.
                     // If we only get an access token, we need to do another request to the
@@ -848,7 +856,9 @@ impl AuthProviderCallback {
 
                     let res_bytes = res.bytes().await?;
                     let claims = AuthProviderIdClaims::try_from(res_bytes.as_bytes())?;
-                    claims.validate_update_user(data, &provider).await?
+                    claims
+                        .validate_update_user(data, &provider, &link_cookie)
+                        .await?
                 } else {
                     let err = "Neither `access_token` nor `id_token` existed";
                     error!("{}", err);
@@ -871,6 +881,16 @@ impl AuthProviderCallback {
         user.check_enabled()?;
         user.check_expired()?;
 
+        if link_cookie.is_some() {
+            // If this is the case, we don't need to validate any further client values.
+            // We will not generate a new auth code at all -> this is just a request to federate
+            // an existing account. The federation has been done in the step above already.
+            return Ok((
+                AuthStep::ProviderLink,
+                AuthProviderLinkCookie::deletion_cookie(),
+            ));
+        }
+
         // validate client values
         let client = Client::find_maybe_ephemeral(data, slf.req_client_id).await?;
         let force_mfa = client.force_mfa();
@@ -1132,6 +1152,7 @@ impl AuthProviderIdClaims<'_> {
         &self,
         data: &web::Data<AppState>,
         provider: &AuthProvider,
+        link_cookie: &Option<AuthProviderLinkCookie>,
     ) -> Result<(User, ProviderMfaLogin), ErrorResponse> {
         if self.email.is_none() {
             let err = "No `email` in ID token claims. This is a mandatory claim";
@@ -1175,17 +1196,51 @@ impl AuthProviderIdClaims<'_> {
                 // which is a key value for Rauthy, does not yet exist for another user.
                 // On conflict, the DB would return an error anyway, but the error message is
                 // rather cryptic for a normal user.
-                if let Ok(user) = User::find_by_email(data, self.email.unwrap().to_string()).await {
-                    let err = format!(
-                        "User with email '{}' already exists but is not linked to this provider.",
-                        user.email
-                    );
-                    error!("{}", err);
-                    debug!("{:?}", user);
-                    return Err(ErrorResponse::new(ErrorResponseType::Forbidden, err));
-                }
+                if let Ok(mut user) =
+                    User::find_by_email(data, self.email.unwrap().to_string()).await
+                {
+                    // TODO check if creating a new link for an existing user is allowed
+                    if let Some(link) = link_cookie {
+                        if link.provider_id != provider.id {
+                            return Err(ErrorResponse::new(
+                                ErrorResponseType::BadRequest,
+                                "bad provider_id in link cookie".to_string(),
+                            ));
+                        }
 
-                None
+                        if link.user_id != user.id {
+                            // In this case, the link cookie exists from another user session.
+                            // It is possible to build this situation manually with access to
+                            // multiple accounts.
+                            return Err(ErrorResponse::new(
+                                ErrorResponseType::BadRequest,
+                                "bad user_id in link cookie".to_string(),
+                            ));
+                        }
+
+                        // finally, this is our condition we allow linking for existing accs
+                        if link.user_email != user.email {
+                            return Err(ErrorResponse::new(
+                                ErrorResponseType::BadRequest,
+                                "Invalid E-Mail".to_string(),
+                            ));
+                        }
+
+                        // If we got here, everything was fine, and we can create the link.
+                        // No need to `.save()` here, will be done later anyway with other updates.
+                        user.auth_provider_id = Some(provider.id.clone());
+                        user.federation_uid = Some(claims_user_id.clone());
+
+                        Some(user)
+                    } else {
+                        return Err(ErrorResponse::new(ErrorResponseType::Forbidden, format!(
+                            "User with email '{}' already exists but is not linked to this provider.",
+                            user.email
+                        )));
+                    }
+                } else {
+                    None
+                }
             }
         };
         debug!("user_opt:\n{:?}", user_opt);

From 54c027e95cb1870d7427114be99d1207f9619755 Mon Sep 17 00:00:00 2001
From: sd <sebastiandobe@mailbox.org>
Date: Thu, 2 May 2024 15:58:07 +0200
Subject: [PATCH 08/10] UI: update all necessary places to make the provider
 link work

---
 .../src/components/account/AccInfo.svelte     | 101 +++++++-----------
 .../src/components/account/AccMain.svelte     |   2 +-
 frontend/src/lib/Modal.svelte                 |   8 +-
 .../routes/providers/callback/+page.svelte    |   3 +
 frontend/src/utils/dataFetching.js            |   8 ++
 5 files changed, 56 insertions(+), 66 deletions(-)

diff --git a/frontend/src/components/account/AccInfo.svelte b/frontend/src/components/account/AccInfo.svelte
index 6bc849cc..e29218b7 100644
--- a/frontend/src/components/account/AccInfo.svelte
+++ b/frontend/src/components/account/AccInfo.svelte
@@ -1,9 +1,9 @@
 <script>
     import CheckIcon from "$lib/CheckIcon.svelte";
-    import {buildWebIdUri, formatDateFromTs} from "../../utils/helpers.js";
+    import {buildWebIdUri, formatDateFromTs, saveProviderToken} from "../../utils/helpers.js";
     import {onMount} from "svelte";
     import Button from "$lib/Button.svelte";
-    import {deleteUserProviderLink} from "../../utils/dataFetching.js";
+    import {deleteUserProviderLink, postUserProviderLink} from "../../utils/dataFetching.js";
     import Modal from "$lib/Modal.svelte";
     import getPkce from "oauth-pkce";
     import {PKCE_VERIFIER_UPSTREAM} from "../../utils/constants.js";
@@ -16,11 +16,10 @@
     export let viewModePhone = false;
 
     let unlinkErr = false;
-    let showModal = true;
-    // let showModal = false;
+    let showModal = false;
     let providersAvailable = [];
 
-    $: isFederated = user.account_type.startsWith('federated');
+    $: isFederated = user.account_type?.startsWith('federated');
     $: accType = isFederated ? `${user.account_type}: ${authProvider?.name || ''}` : user.account_type;
 
     $: classRow = viewModePhone ? 'rowPhone' : 'row';
@@ -31,20 +30,44 @@
         const providersTpl = [{
             "id": "7F6N7fb3el3P5XimjJSaeD2o",
             "name": "Rauthy IAM"
-        }, {"id": "7F6N7fb3el3P5XimjJSaeD2O", "name": "Rauthy IAM 2"}];
+        }];
         // const providersTpl = document?.getElementsByTagName("template").namedItem("auth_providers")?.innerHTML;
-        console.log(providersTpl);
         providersAvailable = providersTpl;
     })
 
     function linkProvider(id) {
-        console.error('TODO linkProvider');
-        // getPkce(64, (error, {challenge, verifier}) => {
-        //     if (!error) {
-        //         localStorage.setItem(PKCE_VERIFIER_UPSTREAM, verifier);
-        //         providerLoginPkce(id, challenge);
-        //     }
-        // });
+        getPkce(64, (error, {challenge, verifier}) => {
+            if (!error) {
+                localStorage.setItem(PKCE_VERIFIER_UPSTREAM, verifier);
+                providerLoginPkce(id, challenge);
+            }
+        });
+    }
+
+    async function providerLoginPkce(id, pkce_challenge) {
+        let data = {
+            email: user.email,
+            client_id: 'rauthy',
+            redirect_uri: window.location.href,
+            // scopes: '',
+            // state: state,
+            // nonce: nonce,
+            // code_challenge: challenge,
+            // code_challenge_method: challengeMethod,
+            provider_id: id,
+            pkce_challenge,
+        };
+        let res = await postUserProviderLink(id, data);
+        if (res.ok) {
+            const xsrfToken = await res.text();
+            saveProviderToken(xsrfToken);
+
+            window.location.href = res.headers.get('location');
+        } else {
+            let body = await res.json();
+            // TODO catch error even necessary? should be handled in `/callback` already...
+            console.error(body);
+        }
     }
 
     async function unlinkProvider() {
@@ -197,56 +220,6 @@
         padding: 10px;
     }
 
-    dialog {
-        animation: fade-out 0.7s ease-out;
-    }
-
-    dialog[open] {
-        animation: fade-in 0.7s ease-out;
-    }
-
-    dialog[open]::backdrop {
-        animation: backdrop-fade-in 0.7s ease-out forwards;
-    }
-
-    @keyframes fade-in {
-        0% {
-            opacity: 0;
-            transform: scaleY(0);
-            display: none;
-        }
-
-        100% {
-            opacity: 1;
-            transform: scaleY(1);
-            display: block;
-        }
-    }
-
-    @keyframes fade-out {
-        0% {
-            opacity: 1;
-            transform: scaleY(1);
-            display: block;
-        }
-
-        100% {
-            opacity: 0;
-            transform: scaleY(0);
-            display: none;
-        }
-    }
-
-    @keyframes backdrop-fade-in {
-        0% {
-            background-color: rgb(0 0 0 / 0%);
-        }
-
-        100% {
-            background-color: rgb(0 0 0 / 25%);
-        }
-    }
-
     .label {
         width: 10rem;
     }
diff --git a/frontend/src/components/account/AccMain.svelte b/frontend/src/components/account/AccMain.svelte
index 7cc59f3b..2818270d 100644
--- a/frontend/src/components/account/AccMain.svelte
+++ b/frontend/src/components/account/AccMain.svelte
@@ -40,7 +40,7 @@
     }
 
     $: if (providers) {
-        if (user.account_type.startsWith('federated')) {
+        if (user.account_type?.startsWith('federated')) {
             authProvider = providers.filter(p => p.id === user.auth_provider_id)[0];
         }
     }
diff --git a/frontend/src/lib/Modal.svelte b/frontend/src/lib/Modal.svelte
index c6738d17..a9ed6fe1 100644
--- a/frontend/src/lib/Modal.svelte
+++ b/frontend/src/lib/Modal.svelte
@@ -28,7 +28,13 @@
             <IconStop color="var(--col-err)" width={24}/>
         </div>
         <div class="inner">
-            <slot></slot>
+            <!--
+            Just make sure that whatever we have in here will be loaded / fetched lazy.
+            There is no need to load resources like images if the dialog is closed anyway.
+            -->
+            {#if showModal}
+                <slot></slot>
+            {/if}
         </div>
     </div>
 </dialog>
diff --git a/frontend/src/routes/providers/callback/+page.svelte b/frontend/src/routes/providers/callback/+page.svelte
index 46fa2a62..1d5b1491 100644
--- a/frontend/src/routes/providers/callback/+page.svelte
+++ b/frontend/src/routes/providers/callback/+page.svelte
@@ -42,6 +42,9 @@
             // -> all good, but needs additional passkey validation
             error = '';
             webauthnData = await res.json();
+        } else if (res.status === 204) {
+            // in case of a 204, we have done a user federation on an existing account -> just redirect
+            window.location.replace('/auth/v1/account');
         } else if (res.status === 403) {
             // we will get a forbidden if for instance the user already exists but without
             // any upstream provider link (or the wrong one)
diff --git a/frontend/src/utils/dataFetching.js b/frontend/src/utils/dataFetching.js
index 5e91d97a..77feb567 100644
--- a/frontend/src/utils/dataFetching.js
+++ b/frontend/src/utils/dataFetching.js
@@ -217,6 +217,14 @@ export async function getUserPasskeys(id) {
     });
 }
 
+export async function postUserProviderLink(id, data) {
+    return await fetch(`/auth/v1/providers/${id}/link`, {
+        method: 'POST',
+        headers: getCsrfHeaders(),
+        body: JSON.stringify(data),
+    });
+}
+
 export async function deleteUserProviderLink() {
     return await fetch('/auth/v1/providers/link', {
         method: 'DELETE',

From dd72e785c7b69f71ae4f0a4eccb5cff603eb305a Mon Sep 17 00:00:00 2001
From: sd <sebastiandobe@mailbox.org>
Date: Thu, 2 May 2024 15:58:37 +0200
Subject: [PATCH 09/10] disable `webid` in the default dev config -> most
 people will not use it

---
 rauthy.cfg | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/rauthy.cfg b/rauthy.cfg
index 42a1f0a6..459f9c0c 100644
--- a/rauthy.cfg
+++ b/rauthy.cfg
@@ -23,7 +23,7 @@ DANGER_COOKIE_INSECURE=false
 # provider login while running the UI in dev mode. Point it to the
 # full address, where ever your UI is running.
 # This will only be respected when `DEV_MODE == true` as well.
-#DEV_MODE_PROVIDER_CALLBACK_URL="localhost:5173
+#DEV_MODE_PROVIDER_CALLBACK_URL="localhost:5173"
 
 # Can be set to 'true' during local development to allow an HTTP scheme for the DPoP 'htu' claim
 # Will only be applied if `DEV_MODE == true` as well.
@@ -620,7 +620,7 @@ ENABLE_EPHEMERAL_CLIENTS=true
 # Can be set to 'true' to enable WebID functionality like needed
 # for things like Solid OIDC.
 # default: false
-ENABLE_WEB_ID=true
+#ENABLE_WEB_ID=true
 
 # If set to 'true', 'solid' will be added to the 'aud' claim from the ID token
 # for ephemeral clients.

From b9cd8ce7a4c2b298b6dd8d075237dc4da800507d Mon Sep 17 00:00:00 2001
From: sd <sebastiandobe@mailbox.org>
Date: Thu, 2 May 2024 16:01:35 +0200
Subject: [PATCH 10/10] update changelog and notes

---
 CHANGELOG.md | 14 +++++++++++++-
 dev_notes.md |  3 +--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 79fe6868..5f338a90 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -89,8 +89,19 @@ at the bottom as well.
 A new button has been introduced to the account view of federated accounts.  
 You can now "Unlink" an account from an upstream provider, if you have set it up with at least
 a password or passkey before.
+
 [8b1d9a8](https://github.com/sebadob/rauthy/commit/8b1d9a882b0d4b059f3ed884deaacfcdeb109856)
 
+#### Link Existing Account to Provider
+
+This is the counterpart to the unlink feature from above.
+This makes it possible to link an already existing, unlinked user account to an upstream auth provider.
+The only condition is a matching `email` claim after successful login. Apart from that, there are quite a few things
+going on behind the scenes and you must trigger this provider link from an authorized, valid session from inside your
+user account view. This is necessary to prevent account takeovers if an upstream provider has been hacked in some way.
+
+[]()
+
 #### Bootstrap default Admin in production
 
 You can set environment variables either via `rauthy.cfg`, `.env` or as just an env var during
@@ -200,7 +211,8 @@ The allowed names for roles, groups and scopes have been adjusted. Rauthy allows
 now and containing `:` or `*`. This will make it possible to define custom scopes with names like
 `urn:matrix:client:api:guest` or `urn:matrix:client:api:*`.
 
-[]()
+[a5982d9](https://github.com/sebadob/rauthy/commit/a5982d91f37a2f2917ed4215dc6ded216dc0fd69)
+[50d0214](https://github.com/sebadob/rauthy/commit/50d021440eb50473977ec851a46c0bc979bbd12b)
 
 ### Bugfixes
 
diff --git a/dev_notes.md b/dev_notes.md
index af55688b..2f9eb39a 100644
--- a/dev_notes.md
+++ b/dev_notes.md
@@ -4,9 +4,7 @@
 
 ## TODO before v0.23.0
 
-- link to upstream provider with existing account
 - sessions view needs pagination
-- check out the possibility to include SCIM
 
 ## Stage 1 - essentials
 
@@ -15,6 +13,7 @@
 ## Stage 2 - features - do before v1.0.0
 
 - prettify the UI
+- check out the possibility to include SCIM
 - update the book with all the new features
 - benchmarks and performance tuning
 - maybe get a nicer logo