providers/oauth2: fix redirect uri input (#12122)

* fix elements disappearing

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix incorrect field input

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix wizard form and display

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

authentik/providers/proxy/api.py

@@ -13,6 +13,7 @@ from authentik.core.api.providers import ProviderSerializer
 from authentik.core.api.used_by import UsedByMixin
 from authentik.core.api.utils import ModelSerializer, PassiveSerializer
 from authentik.lib.utils.time import timedelta_from_string
+from authentik.providers.oauth2.api.providers import RedirectURISerializer
 from authentik.providers.oauth2.models import ScopeMapping
 from authentik.providers.oauth2.views.provider import ProviderInfoView
 from authentik.providers.proxy.models import ProxyMode, ProxyProvider
@@ -39,7 +40,7 @@ class ProxyProviderSerializer(ProviderSerializer):
     """ProxyProvider Serializer"""
 
     client_id = CharField(read_only=True)
-    redirect_uris = CharField(read_only=True)
+    redirect_uris = RedirectURISerializer(many=True, read_only=True, source="_redirect_uris")
     outpost_set = ListField(child=CharField(), read_only=True, source="outpost_set.all")
 
     def validate_basic_auth_enabled(self, value: bool) -> bool:

schema.yml

@@ -51498,7 +51498,9 @@ components:
           description: When enabled, this provider will intercept the authorization
             header and authenticate requests based on its value.
         redirect_uris:
-          type: string
+          type: array
+          items:
+            $ref: '#/components/schemas/RedirectURI'
           readOnly: true
         cookie_domain:
           type: string

web/src/admin/applications/wizard/methods/oauth/ak-application-wizard-authentication-by-oauth.ts

@@ -11,6 +11,10 @@ import {
     redirectUriHelp,
     subjectModeOptions,
 } from "@goauthentik/admin/providers/oauth2/OAuth2ProviderForm";
+import {
+    IRedirectURIInput,
+    akOAuthRedirectURIInput,
+} from "@goauthentik/admin/providers/oauth2/OAuth2ProviderRedirectURI";
 import {
     makeSourceSelector,
     oauth2SourcesProvider,
@@ -31,7 +35,13 @@ import { customElement, state } from "@lit/reactive-element/decorators.js";
 import { html, nothing } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import { ClientTypeEnum, FlowsInstancesListDesignationEnum, SourcesApi } from "@goauthentik/api";
+import {
+    ClientTypeEnum,
+    FlowsInstancesListDesignationEnum,
+    MatchingModeEnum,
+    RedirectURI,
+    SourcesApi,
+} from "@goauthentik/api";
 import { type OAuth2Provider, type PaginatedOAuthSourceList } from "@goauthentik/api";
 
 import BaseProviderPanel from "../BaseProviderPanel";
@@ -120,14 +130,27 @@ export class ApplicationWizardAuthenticationByOauth extends BaseProviderPanel {
                         >
                         </ak-text-input>
 
-                        <ak-textarea-input
+                        <ak-form-element-horizontal
+                            label=${msg("Redirect URIs/Origins")}
+                            required
                             name="redirectUris"
-                            label=${msg("Redirect URIs/Origins (RegEx)")}
-                            .value=${provider?.redirectUris}
-                            .errorMessages=${errors?.redirectUriHelp ?? []}
-                            .bighelp=${redirectUriHelp}
                         >
-                        </ak-textarea-input>
+                            <ak-array-input
+                                .items=${[]}
+                                .newItem=${() => ({
+                                    matchingMode: MatchingModeEnum.Strict,
+                                    url: "",
+                                })}
+                                .row=${(f?: RedirectURI) =>
+                                    akOAuthRedirectURIInput({
+                                        ".redirectURI": f,
+                                        "style": "width: 100%",
+                                        "name": "oauth2-redirect-uri",
+                                    } as unknown as IRedirectURIInput)}
+                            >
+                            </ak-array-input>
+                            ${redirectUriHelp}
+                        </ak-form-element-horizontal>
 
                         <ak-form-element-horizontal
                             label=${msg("Signing Key")}

web/src/admin/providers/oauth2/OAuth2ProviderForm.ts

@@ -234,6 +234,7 @@ export class OAuth2ProviderFormPage extends BaseProviderForm<OAuth2Provider> {
                                 akOAuthRedirectURIInput({
                                     ".redirectURI": f,
                                     "style": "width: 100%",
+                                    "name": "oauth2-redirect-uri",
                                 } as unknown as IRedirectURIInput)}
                         >
                         </ak-array-input>

web/src/admin/providers/oauth2/OAuth2ProviderRedirectURI.ts

@@ -84,7 +84,7 @@ export class OAuth2ProviderRedirectURI extends AkControlElement<RedirectURI> {
                 required
                 id="url"
                 placeholder=${msg("URL")}
-                name="href"
+                name="url"
                 tabindex="1"
             />
         </div>`;

web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts

@@ -234,7 +234,11 @@ export class OAuth2ProviderViewPage extends AKElement {
                                 </dt>
                                 <dd class="pf-c-description-list__description">
                                     <div class="pf-c-description-list__text">
-                                        ${this.provider.redirectUris}
+                                        <ul>
+                                            ${this.provider.redirectUris.map((ru) => {
+                                                return html`<li>${ru.matchingMode}: ${ru.url}</li>`;
+                                            })}
+                                        </ul>
                                     </div>
                                 </dd>
                             </div>

web/src/admin/providers/proxy/ProxyProviderViewPage.ts

@@ -392,9 +392,13 @@ export class ProxyProviderViewPage extends AKElement {
                                 <dd class="pf-c-description-list__description">
                                     <div class="pf-c-description-list__text">
                                         <ul class="pf-c-list">
-                                            ${this.provider.redirectUris.split("\n").map((url) => {
+                                            <ul>
-                                                return html`<li><pre>${url}</pre></li>`;
+                                                ${this.provider.redirectUris.map((ru) => {
-                                            })}
+                                                    return html`<li>
+                                                        ${ru.matchingMode}: ${ru.url}
+                                                    </li>`;
+                                                })}
+                                            </ul>
                                         </ul>
                                     </div>
                                 </dd>