From 511f94fc7f261d0d0df9c9b96bd2d8452b449ea9 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sat, 20 Feb 2021 23:19:27 +0100
Subject: [PATCH] *: cleanup code, return errors in challenge_invalid, fixup
 rendering

---
 authentik/core/templates/partials/form.html   |   4 +-
 authentik/flows/challenge.py                  |  35 +++-
 authentik/flows/stage.py                      |  41 ++--
 authentik/flows/templates/flows/shell.html    |   2 +-
 authentik/flows/tests/test_views.py           |   6 +-
 authentik/flows/views.py                      |  30 ++-
 authentik/sources/oauth/models.py             |   4 +-
 authentik/sources/saml/models.py              |   2 +-
 authentik/stages/captcha/tests.py             |   2 +-
 authentik/stages/consent/tests.py             |   6 +-
 authentik/stages/dummy/tests.py               |   2 +-
 authentik/stages/email/tests/test_stage.py    |   2 +-
 authentik/stages/identification/forms.py      |  32 ---
 authentik/stages/identification/stage.py      |  66 ++++--
 authentik/stages/identification/tests.py      |  48 +++--
 authentik/stages/invitation/tests.py          |   4 +-
 authentik/stages/password/tests.py            |   2 +-
 authentik/stages/prompt/tests.py              |   2 +-
 authentik/stages/user_delete/tests.py         |   2 +-
 authentik/stages/user_login/tests.py          |   2 +-
 authentik/stages/user_logout/tests.py         |   2 +-
 authentik/stages/user_write/tests.py          |   4 +-
 web/src/api/Flows.ts                          |  35 ++++
 .../identification/IdentificationStage.ts     |  76 +++++--
 web/src/pages/generic/FlowExecutor.ts         | 191 +++++-------------
 25 files changed, 306 insertions(+), 296 deletions(-)

diff --git a/authentik/core/templates/partials/form.html b/authentik/core/templates/partials/form.html
index be6358093..4a3b81c4c 100644
--- a/authentik/core/templates/partials/form.html
+++ b/authentik/core/templates/partials/form.html
@@ -3,7 +3,7 @@
 
 {% csrf_token %}
 {% if form.non_field_errors %}
-<div class="pf-c-form__group has-error">
+<div class="pf-c-form__group">
     <p class="pf-c-form__helper-text pf-m-error">
         {{ form.non_field_errors }}
     </p>
@@ -13,7 +13,7 @@
 {% if field.field.widget|fieldtype == 'HiddenInput' %}
     {{ field }}
 {% else %}
-<div class="pf-c-form__group {% if field.errors %} has-error {% endif %}">
+<div class="pf-c-form__group">
     {% if field.field.widget|fieldtype == 'RadioSelect' %}
         <label class="pf-c-form__label" {% if field.field.required %}class="required" {% endif %}
             for="{{ field.name }}-{{ forloop.counter0 }}">
diff --git a/authentik/flows/challenge.py b/authentik/flows/challenge.py
index bca48deb6..d2ed89ac2 100644
--- a/authentik/flows/challenge.py
+++ b/authentik/flows/challenge.py
@@ -4,7 +4,7 @@ from typing import TYPE_CHECKING, Optional
 
 from django.db.models.base import Model
 from django.http import JsonResponse
-from rest_framework.fields import ChoiceField, JSONField
+from rest_framework.fields import ChoiceField, DictField
 from rest_framework.serializers import CharField, Serializer
 
 from authentik.flows.transfer.common import DataclassEncoder
@@ -19,7 +19,19 @@ class ChallengeTypes(Enum):
     native = "native"
     shell = "shell"
     redirect = "redirect"
-    error = "error"
+
+
+class ErrorDetailSerializer(Serializer):
+    """Serializer for rest_framework's error messages"""
+
+    string = CharField()
+    code = CharField()
+
+    def create(self, validated_data: dict) -> Model:
+        return Model()
+
+    def update(self, instance: Model, validated_data: dict) -> Model:
+        return Model()
 
 
 class Challenge(Serializer):
@@ -28,9 +40,12 @@ class Challenge(Serializer):
 
     type = ChoiceField(choices=list(ChallengeTypes))
     component = CharField(required=False)
-    args = JSONField()
     title = CharField(required=False)
 
+    response_errors = DictField(
+        child=ErrorDetailSerializer(many=True), allow_empty=False, required=False
+    )
+
     def create(self, validated_data: dict) -> Model:
         return Model()
 
@@ -38,6 +53,18 @@ class Challenge(Serializer):
         return Model()
 
 
+class RedirectChallenge(Challenge):
+    """Challenge type to redirect the client"""
+
+    to = CharField()
+
+
+class ShellChallenge(Challenge):
+    """Legacy challenge type to render HTML as-is"""
+
+    body = CharField()
+
+
 class ChallengeResponse(Serializer):
     """Base class for all challenge responses"""
 
@@ -57,6 +84,6 @@ class ChallengeResponse(Serializer):
 class HttpChallengeResponse(JsonResponse):
     """Subclass of JsonResponse that uses the `DataclassEncoder`"""
 
-    def __init__(self, challenge: Challenge, **kwargs) -> None:
+    def __init__(self, challenge, **kwargs) -> None:
         # pyright: reportGeneralTypeIssues=false
         super().__init__(challenge.data, encoder=DataclassEncoder, **kwargs)
diff --git a/authentik/flows/stage.py b/authentik/flows/stage.py
index 9f794f20a..38cd05c56 100644
--- a/authentik/flows/stage.py
+++ b/authentik/flows/stage.py
@@ -4,19 +4,21 @@ from typing import Any
 
 from django.http import HttpRequest
 from django.http.request import QueryDict
-from django.http.response import HttpResponse, JsonResponse
+from django.http.response import HttpResponse
 from django.utils.translation import gettext_lazy as _
 from django.views.generic import TemplateView
+from structlog.stdlib import get_logger
 
 from authentik.flows.challenge import (
     Challenge,
-    ChallengeResponse, ChallengeTypes,
+    ChallengeResponse,
     HttpChallengeResponse,
 )
 from authentik.flows.planner import PLAN_CONTEXT_PENDING_USER
 from authentik.flows.views import FlowExecutorView
 
 PLAN_CONTEXT_PENDING_USER_IDENTIFIER = "pending_user_identifier"
+LOGGER = get_logger()
 
 FakeUser = namedtuple("User", ["username", "email"])
 
@@ -63,8 +65,9 @@ class ChallengeStageView(StageView):
 
     def get(self, request: HttpRequest, *args, **kwargs) -> HttpResponse:
         challenge = self.get_challenge()
-        challenge.title = self.executor.flow.title
-        challenge.is_valid()
+        challenge.initial_data["title"] = self.executor.flow.title
+        if not challenge.is_valid():
+            LOGGER.warning(challenge.errors)
         return HttpChallengeResponse(challenge)
 
     # pylint: disable=unused-argument
@@ -79,19 +82,25 @@ class ChallengeStageView(StageView):
         """Return the challenge that the client should solve"""
         raise NotImplementedError
 
-    def challenge_valid(self, challenge: ChallengeResponse) -> HttpResponse:
+    def challenge_valid(self, response: ChallengeResponse) -> HttpResponse:
         """Callback when the challenge has the correct format"""
         raise NotImplementedError
 
-    def challenge_invalid(self, challenge: ChallengeResponse) -> HttpResponse:
+    def challenge_invalid(self, response: ChallengeResponse) -> HttpResponse:
         """Callback when the challenge has the incorrect format"""
-        challenge_response = Challenge(data={
-            "type": ChallengeTypes.error,
-            "args": {
-                "errors": challenge.errors
-            }
-        })
-        challenge_response.is_valid()
-        return HttpChallengeResponse(
-            challenge_response
-        )
+        challenge_response = self.get_challenge()
+        challenge_response.initial_data["title"] = self.executor.flow.title
+        full_errors = {}
+        for field, errors in response.errors.items():
+            for error in errors:
+                full_errors.setdefault(field, [])
+                full_errors[field].append(
+                    {
+                        "string": str(error),
+                        "code": error.code,
+                    }
+                )
+        challenge_response.initial_data["response_errors"] = full_errors
+        if not challenge_response.is_valid():
+            LOGGER.warning(challenge_response.errors)
+        return HttpChallengeResponse(challenge_response)
diff --git a/authentik/flows/templates/flows/shell.html b/authentik/flows/templates/flows/shell.html
index 2c46d0833..f5ba8db5d 100644
--- a/authentik/flows/templates/flows/shell.html
+++ b/authentik/flows/templates/flows/shell.html
@@ -26,6 +26,6 @@
 {% endblock %}
 
 {% block main_container %}
-<ak-flow-executor class="pf-c-login__main" flowBodyUrl="{{ exec_url }}">
+<ak-flow-executor class="pf-c-login__main" flowSlug="{{ flow_slug }}">
 </ak-flow-executor>
 {% endblock %}
diff --git a/authentik/flows/tests/test_views.py b/authentik/flows/tests/test_views.py
index b97ae1579..5253c98f7 100644
--- a/authentik/flows/tests/test_views.py
+++ b/authentik/flows/tests/test_views.py
@@ -282,7 +282,7 @@ class TestFlowExecutor(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertJSONEqual(
             force_str(response.content),
-            {"args": {"to": reverse("authentik_core:shell")}, "type": "redirect"},
+            {"to": reverse("authentik_core:shell"), "type": "redirect"},
         )
 
     def test_reevaluate_keep(self):
@@ -359,7 +359,7 @@ class TestFlowExecutor(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertJSONEqual(
             force_str(response.content),
-            {"args": {"to": reverse("authentik_core:shell")}, "type": "redirect"},
+            {"to": reverse("authentik_core:shell"), "type": "redirect"},
         )
 
     def test_reevaluate_remove_consecutive(self):
@@ -435,7 +435,7 @@ class TestFlowExecutor(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertJSONEqual(
             force_str(response.content),
-            {"args": {"to": reverse("authentik_core:shell")}, "type": "redirect"},
+            {"to": reverse("authentik_core:shell"), "type": "redirect"},
         )
 
     def test_stageview_user_identifier(self):
diff --git a/authentik/flows/views.py b/authentik/flows/views.py
index 30d297c2e..626dfe005 100644
--- a/authentik/flows/views.py
+++ b/authentik/flows/views.py
@@ -4,7 +4,7 @@ from typing import Any, Optional
 
 from django.contrib.auth.mixins import LoginRequiredMixin
 from django.http import Http404, HttpRequest, HttpResponse, HttpResponseRedirect
-from django.shortcuts import get_object_or_404, redirect, reverse
+from django.shortcuts import get_object_or_404, redirect
 from django.template.response import TemplateResponse
 from django.utils.decorators import method_decorator
 from django.views.decorators.clickjacking import xframe_options_sameorigin
@@ -13,7 +13,12 @@ from structlog.stdlib import BoundLogger, get_logger
 
 from authentik.core.models import USER_ATTRIBUTE_DEBUG
 from authentik.events.models import cleanse_dict
-from authentik.flows.challenge import Challenge, ChallengeTypes, HttpChallengeResponse
+from authentik.flows.challenge import (
+    ChallengeTypes,
+    HttpChallengeResponse,
+    RedirectChallenge,
+    ShellChallenge,
+)
 from authentik.flows.exceptions import EmptyFlowException, FlowNonApplicableException
 from authentik.flows.models import ConfigurableStage, Flow, FlowDesignation, Stage
 from authentik.flows.planner import (
@@ -241,7 +246,7 @@ class FlowExecutorShellView(TemplateView):
     def get_context_data(self, **kwargs) -> dict[str, Any]:
         flow: Flow = get_object_or_404(Flow, slug=self.kwargs.get("flow_slug"))
         kwargs["background_url"] = flow.background.url
-        kwargs["exec_url"] = reverse("authentik_api:flow-executor", kwargs=self.kwargs)
+        kwargs["flow_slug"] = flow.slug
         self.request.session[SESSION_KEY_GET] = self.request.GET
         return kwargs
 
@@ -286,37 +291,30 @@ def to_stage_response(request: HttpRequest, source: HttpResponse) -> HttpRespons
         redirect_url = source["Location"]
         if request.path != redirect_url:
             return HttpChallengeResponse(
-                Challenge(
-                    {"type": ChallengeTypes.redirect, "args": {"to": redirect_url}}
+                RedirectChallenge(
+                    {"type": ChallengeTypes.redirect, "to": str(redirect_url)}
                 )
             )
-            # return JsonResponse({"type": "redirect", "to": redirect_url})
         return source
     if isinstance(source, TemplateResponse):
         return HttpChallengeResponse(
-            Challenge(
+            ShellChallenge(
                 {
                     "type": ChallengeTypes.shell,
-                    "args": {"body": source.render().content.decode("utf-8")},
+                    "body": source.render().content.decode("utf-8"),
                 }
             )
         )
-        # return JsonResponse(
-        #     {"type": "template", "body": }
-        # )
     # Check for actual HttpResponse (without isinstance as we dont want to check inheritance)
     if source.__class__ == HttpResponse:
         return HttpChallengeResponse(
-            Challenge(
+            ShellChallenge(
                 {
                     "type": ChallengeTypes.shell,
-                    "args": {"body": source.content.decode("utf-8")},
+                    "body": source.content.decode("utf-8"),
                 }
             )
         )
-        # return JsonResponse(
-        #     {"type": "template", "body": }
-        # )
     return source
 
 
diff --git a/authentik/sources/oauth/models.py b/authentik/sources/oauth/models.py
index f64148bbe..af232e976 100644
--- a/authentik/sources/oauth/models.py
+++ b/authentik/sources/oauth/models.py
@@ -4,7 +4,7 @@ from typing import Optional, Type
 from django.db import models
 from django.forms import ModelForm
 from django.templatetags.static import static
-from django.urls import reverse, reverse_lazy
+from django.urls import reverse
 from django.utils.translation import gettext_lazy as _
 from rest_framework.serializers import Serializer
 
@@ -57,7 +57,7 @@ class OAuthSource(Source):
     @property
     def ui_login_button(self) -> UILoginButton:
         return UILoginButton(
-            url=reverse_lazy(
+            url=reverse(
                 "authentik_sources_oauth:oauth-client-login",
                 kwargs={"source_slug": self.slug},
             ),
diff --git a/authentik/sources/saml/models.py b/authentik/sources/saml/models.py
index 8889a4afa..007cc89fc 100644
--- a/authentik/sources/saml/models.py
+++ b/authentik/sources/saml/models.py
@@ -165,7 +165,7 @@ class SAMLSource(Source):
     def ui_login_button(self) -> UILoginButton:
         return UILoginButton(
             name=self.name,
-            url=reverse_lazy(
+            url=reverse(
                 "authentik_sources_saml:login", kwargs={"source_slug": self.slug}
             ),
         )
diff --git a/authentik/stages/captcha/tests.py b/authentik/stages/captcha/tests.py
index b975a7c63..599f8f05a 100644
--- a/authentik/stages/captcha/tests.py
+++ b/authentik/stages/captcha/tests.py
@@ -51,5 +51,5 @@ class TestCaptchaStage(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertJSONEqual(
             force_str(response.content),
-            {"args": {"to": reverse("authentik_core:shell")}, "type": "redirect"},
+            {"to": reverse("authentik_core:shell"), "type": "redirect"},
         )
diff --git a/authentik/stages/consent/tests.py b/authentik/stages/consent/tests.py
index 73879774b..cc75031bb 100644
--- a/authentik/stages/consent/tests.py
+++ b/authentik/stages/consent/tests.py
@@ -51,7 +51,7 @@ class TestConsentStage(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertJSONEqual(
             force_str(response.content),
-            {"args": {"to": reverse("authentik_core:shell")}, "type": "redirect"},
+            {"to": reverse("authentik_core:shell"), "type": "redirect"},
         )
         self.assertFalse(UserConsent.objects.filter(user=self.user).exists())
 
@@ -82,7 +82,7 @@ class TestConsentStage(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertJSONEqual(
             force_str(response.content),
-            {"args": {"to": reverse("authentik_core:shell")}, "type": "redirect"},
+            {"to": reverse("authentik_core:shell"), "type": "redirect"},
         )
         self.assertTrue(
             UserConsent.objects.filter(
@@ -119,7 +119,7 @@ class TestConsentStage(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertJSONEqual(
             force_str(response.content),
-            {"args": {"to": reverse("authentik_core:shell")}, "type": "redirect"},
+            {"to": reverse("authentik_core:shell"), "type": "redirect"},
         )
         self.assertTrue(
             UserConsent.objects.filter(
diff --git a/authentik/stages/dummy/tests.py b/authentik/stages/dummy/tests.py
index 7ec2b6f83..bdbdb9e33 100644
--- a/authentik/stages/dummy/tests.py
+++ b/authentik/stages/dummy/tests.py
@@ -47,7 +47,7 @@ class TestDummyStage(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertJSONEqual(
             force_str(response.content),
-            {"args": {"to": reverse("authentik_core:shell")}, "type": "redirect"},
+            {"to": reverse("authentik_core:shell"), "type": "redirect"},
         )
 
     def test_form(self):
diff --git a/authentik/stages/email/tests/test_stage.py b/authentik/stages/email/tests/test_stage.py
index 73f648289..94e1d3c45 100644
--- a/authentik/stages/email/tests/test_stage.py
+++ b/authentik/stages/email/tests/test_stage.py
@@ -126,7 +126,7 @@ class TestEmailStage(TestCase):
             self.assertEqual(response.status_code, 200)
             self.assertJSONEqual(
                 force_str(response.content),
-                {"args": {"to": reverse("authentik_core:shell")}, "type": "redirect"},
+                {"to": reverse("authentik_core:shell"), "type": "redirect"},
             )
 
             session = self.client.session
diff --git a/authentik/stages/identification/forms.py b/authentik/stages/identification/forms.py
index 706c291f1..fb3678f70 100644
--- a/authentik/stages/identification/forms.py
+++ b/authentik/stages/identification/forms.py
@@ -40,35 +40,3 @@ class IdentificationStageForm(forms.ModelForm):
             "name": forms.TextInput(),
             "user_fields": ArrayFieldSelectMultiple(choices=UserFields.choices),
         }
-
-
-class IdentificationForm(forms.Form):
-    """Allow users to login"""
-
-    stage: IdentificationStage
-
-    title = _("Log in to your account")
-    uid_field = forms.CharField(label=_(""))
-
-    def __init__(self, *args, **kwargs):
-        self.stage = kwargs.pop("stage")
-        super().__init__(*args, **kwargs)
-        if self.stage.user_fields == [UserFields.E_MAIL]:
-            self.fields["uid_field"] = forms.EmailField()
-        label = human_list([x.title() for x in self.stage.user_fields])
-        self.fields["uid_field"].label = label
-        self.fields["uid_field"].widget.attrs.update(
-            {
-                "placeholder": _(label),
-                "autofocus": "autofocus",
-                # Autocomplete according to
-                # https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands
-                "autocomplete": "username",
-            }
-        )
-
-    def clean_uid_field(self):
-        """Validate uid_field after EmailValidator if 'email' is the only selected uid_fields"""
-        if self.stage.user_fields == [UserFields.E_MAIL]:
-            validate_email(self.cleaned_data.get("uid_field"))
-        return self.cleaned_data.get("uid_field")
diff --git a/authentik/stages/identification/stage.py b/authentik/stages/identification/stage.py
index a10e78c32..08cc2130b 100644
--- a/authentik/stages/identification/stage.py
+++ b/authentik/stages/identification/stage.py
@@ -1,16 +1,18 @@
 """Identification stage logic"""
-from typing import Optional, Union
+from dataclasses import asdict
+from typing import Optional
 
 from django.db.models import Q
+from django.db.models.base import Model
 from django.http import HttpResponse
 from django.urls import reverse
 from django.utils.translation import gettext as _
 from rest_framework.fields import CharField
-from rest_framework.serializers import ValidationError
+from rest_framework.serializers import Serializer, ValidationError
 from structlog.stdlib import get_logger
 
+from authentik.core.api.applications import ApplicationSerializer
 from authentik.core.models import Source, User
-from authentik.core.types import UILoginButton
 from authentik.flows.challenge import Challenge, ChallengeResponse, ChallengeTypes
 from authentik.flows.planner import PLAN_CONTEXT_PENDING_USER
 from authentik.flows.stage import (
@@ -23,6 +25,32 @@ from authentik.stages.identification.models import IdentificationStage, UserFiel
 LOGGER = get_logger()
 
 
+class UILoginButtonSerializer(Serializer):
+    """Serializer for Login buttons of sources"""
+
+    name = CharField()
+    url = CharField()
+    icon_url = CharField()
+
+    def create(self, validated_data: dict) -> Model:
+        return Model()
+
+    def update(self, instance: Model, validated_data: dict) -> Model:
+        return Model()
+
+
+class IdentificationChallenge(Challenge):
+    """Identification challenges with all UI elements"""
+
+    input_type = CharField()
+    application_pre = ApplicationSerializer(required=False)
+
+    enroll_url = CharField(required=False)
+    recovery_url = CharField(required=False)
+    primary_action = CharField()
+    sources = UILoginButtonSerializer(many=True, required=False)
+
+
 class IdentificationChallengeResponse(ChallengeResponse):
     """Identification challenge"""
 
@@ -63,25 +91,33 @@ class IdentificationStageView(ChallengeStageView):
 
     def get_challenge(self) -> Challenge:
         current_stage: IdentificationStage = self.executor.current_stage
-        args: dict[str, Union[str, list[UILoginButton]]] = {"input_type": "text"}
+        challenge = IdentificationChallenge(
+            data={
+                "type": ChallengeTypes.native,
+                "component": "ak-stage-identification",
+                "primary_action": _("Log in"),
+                "input_type": "text",
+            }
+        )
         if current_stage.user_fields == [UserFields.E_MAIL]:
-            args["input_type"] = "email"
+            challenge.initial_data["input_type"] = "email"
         # If the user has been redirected to us whilst trying to access an
         # application, SESSION_KEY_APPLICATION_PRE is set in the session
         if SESSION_KEY_APPLICATION_PRE in self.request.session:
-            args["application_pre"] = self.request.session[SESSION_KEY_APPLICATION_PRE]
+            challenge.initial_data["application_pre"] = self.request.session[
+                SESSION_KEY_APPLICATION_PRE
+            ]
         # Check for related enrollment and recovery flow, add URL to view
         if current_stage.enrollment_flow:
-            args["enroll_url"] = reverse(
+            challenge.initial_data["enroll_url"] = reverse(
                 "authentik_flows:flow-executor-shell",
                 kwargs={"flow_slug": current_stage.enrollment_flow.slug},
             )
         if current_stage.recovery_flow:
-            args["recovery_url"] = reverse(
+            challenge.initial_data["recovery_url"] = reverse(
                 "authentik_flows:flow-executor-shell",
                 kwargs={"flow_slug": current_stage.recovery_flow.slug},
             )
-        args["primary_action"] = _("Log in")
 
         # Check all enabled source, add them if they have a UI Login button.
         ui_sources = []
@@ -91,15 +127,9 @@ class IdentificationStageView(ChallengeStageView):
         for source in sources:
             ui_login_button = source.ui_login_button
             if ui_login_button:
-                ui_sources.append(ui_login_button)
-        args["sources"] = ui_sources
-        return Challenge(
-            data={
-                "type": ChallengeTypes.native,
-                "component": "ak-stage-identification",
-                "args": args,
-            }
-        )
+                ui_sources.append(asdict(ui_login_button))
+        challenge.initial_data["sources"] = ui_sources
+        return challenge
 
     def challenge_valid(
         self, challenge: IdentificationChallengeResponse
diff --git a/authentik/stages/identification/tests.py b/authentik/stages/identification/tests.py
index 88c3ee4a2..8c2ea99d9 100644
--- a/authentik/stages/identification/tests.py
+++ b/authentik/stages/identification/tests.py
@@ -57,7 +57,7 @@ class TestIdentificationStage(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertJSONEqual(
             force_str(response.content),
-            {"args": {"to": reverse("authentik_core:shell")}, "type": "redirect"},
+            {"to": reverse("authentik_core:shell"), "type": "redirect"},
         )
 
     def test_invalid_with_username(self):
@@ -109,18 +109,17 @@ class TestIdentificationStage(TestCase):
             {
                 "type": "native",
                 "component": "ak-stage-identification",
-                "args": {
-                    "input_type": "email",
-                    "enroll_url": "/flows/unique-enrollment-string/",
-                    "primary_action": "Log in",
-                    "sources": [
-                        {
-                            "icon_url": "/static/authentik/sources/.svg",
-                            "name": "test",
-                            "url": "/source/oauth/login/test/",
-                        }
-                    ],
-                },
+                "input_type": "email",
+                "enroll_url": "/flows/unique-enrollment-string/",
+                "primary_action": "Log in",
+                "title": self.flow.title,
+                "sources": [
+                    {
+                        "icon_url": "/static/authentik/sources/.svg",
+                        "name": "test",
+                        "url": "/source/oauth/login/test/",
+                    }
+                ],
             },
         )
 
@@ -149,17 +148,16 @@ class TestIdentificationStage(TestCase):
             {
                 "type": "native",
                 "component": "ak-stage-identification",
-                "args": {
-                    "input_type": "email",
-                    "recovery_url": "/flows/unique-recovery-string/",
-                    "primary_action": "Log in",
-                    "sources": [
-                        {
-                            "icon_url": "/static/authentik/sources/.svg",
-                            "name": "test",
-                            "url": "/source/oauth/login/test/",
-                        }
-                    ],
-                },
+                "input_type": "email",
+                "recovery_url": "/flows/unique-recovery-string/",
+                "primary_action": "Log in",
+                "title": self.flow.title,
+                "sources": [
+                    {
+                        "icon_url": "/static/authentik/sources/.svg",
+                        "name": "test",
+                        "url": "/source/oauth/login/test/",
+                    }
+                ],
             },
         )
diff --git a/authentik/stages/invitation/tests.py b/authentik/stages/invitation/tests.py
index f81f68d79..156ae2529 100644
--- a/authentik/stages/invitation/tests.py
+++ b/authentik/stages/invitation/tests.py
@@ -85,7 +85,7 @@ class TestUserLoginStage(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertJSONEqual(
             force_str(response.content),
-            {"args": {"to": reverse("authentik_core:shell")}, "type": "redirect"},
+            {"to": reverse("authentik_core:shell"), "type": "redirect"},
         )
 
         self.stage.continue_flow_without_invitation = False
@@ -124,5 +124,5 @@ class TestUserLoginStage(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertJSONEqual(
             force_str(response.content),
-            {"args": {"to": reverse("authentik_core:shell")}, "type": "redirect"},
+            {"to": reverse("authentik_core:shell"), "type": "redirect"},
         )
diff --git a/authentik/stages/password/tests.py b/authentik/stages/password/tests.py
index fcc1a40ef..6c39e341b 100644
--- a/authentik/stages/password/tests.py
+++ b/authentik/stages/password/tests.py
@@ -110,7 +110,7 @@ class TestPasswordStage(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertJSONEqual(
             force_str(response.content),
-            {"args": {"to": reverse("authentik_core:shell")}, "type": "redirect"},
+            {"to": reverse("authentik_core:shell"), "type": "redirect"},
         )
 
     def test_invalid_password(self):
diff --git a/authentik/stages/prompt/tests.py b/authentik/stages/prompt/tests.py
index cb706e50e..11bbac0ba 100644
--- a/authentik/stages/prompt/tests.py
+++ b/authentik/stages/prompt/tests.py
@@ -164,7 +164,7 @@ class TestPromptStage(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertJSONEqual(
             force_str(response.content),
-            {"args": {"to": reverse("authentik_core:shell")}, "type": "redirect"},
+            {"to": reverse("authentik_core:shell"), "type": "redirect"},
         )
 
         # Check that valid data has been saved
diff --git a/authentik/stages/user_delete/tests.py b/authentik/stages/user_delete/tests.py
index fbc213a1b..8a53b75c8 100644
--- a/authentik/stages/user_delete/tests.py
+++ b/authentik/stages/user_delete/tests.py
@@ -85,7 +85,7 @@ class TestUserDeleteStage(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertJSONEqual(
             force_str(response.content),
-            {"args": {"to": reverse("authentik_core:shell")}, "type": "redirect"},
+            {"to": reverse("authentik_core:shell"), "type": "redirect"},
         )
 
         self.assertFalse(User.objects.filter(username=self.username).exists())
diff --git a/authentik/stages/user_login/tests.py b/authentik/stages/user_login/tests.py
index 43f576450..c84960a8f 100644
--- a/authentik/stages/user_login/tests.py
+++ b/authentik/stages/user_login/tests.py
@@ -53,7 +53,7 @@ class TestUserLoginStage(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertJSONEqual(
             force_str(response.content),
-            {"args": {"to": reverse("authentik_core:shell")}, "type": "redirect"},
+            {"to": reverse("authentik_core:shell"), "type": "redirect"},
         )
 
     @patch(
diff --git a/authentik/stages/user_logout/tests.py b/authentik/stages/user_logout/tests.py
index d6aba0a40..7edd92ccc 100644
--- a/authentik/stages/user_logout/tests.py
+++ b/authentik/stages/user_logout/tests.py
@@ -49,7 +49,7 @@ class TestUserLogoutStage(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertJSONEqual(
             force_str(response.content),
-            {"args": {"to": reverse("authentik_core:shell")}, "type": "redirect"},
+            {"to": reverse("authentik_core:shell"), "type": "redirect"},
         )
 
     def test_form(self):
diff --git a/authentik/stages/user_write/tests.py b/authentik/stages/user_write/tests.py
index 91e6a94e2..0cf220d57 100644
--- a/authentik/stages/user_write/tests.py
+++ b/authentik/stages/user_write/tests.py
@@ -61,7 +61,7 @@ class TestUserWriteStage(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertJSONEqual(
             force_str(response.content),
-            {"args": {"to": reverse("authentik_core:shell")}, "type": "redirect"},
+            {"to": reverse("authentik_core:shell"), "type": "redirect"},
         )
         user_qs = User.objects.filter(
             username=plan.context[PLAN_CONTEXT_PROMPT]["username"]
@@ -98,7 +98,7 @@ class TestUserWriteStage(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertJSONEqual(
             force_str(response.content),
-            {"args": {"to": reverse("authentik_core:shell")}, "type": "redirect"},
+            {"to": reverse("authentik_core:shell"), "type": "redirect"},
         )
         user_qs = User.objects.filter(
             username=plan.context[PLAN_CONTEXT_PROMPT]["username"]
diff --git a/web/src/api/Flows.ts b/web/src/api/Flows.ts
index 74325c73e..2afed6395 100644
--- a/web/src/api/Flows.ts
+++ b/web/src/api/Flows.ts
@@ -1,6 +1,36 @@
 import { DefaultClient, AKResponse, QueryArguments, BaseInheritanceModel } from "./Client";
 import { TypeCreate } from "./Providers";
 
+export enum ChallengeTypes {
+    native = "native",
+    response = "response",
+    shell = "shell",
+    redirect = "redirect",
+}
+
+export interface Error {
+    code: string;
+    string: string;
+}
+
+export interface ErrorDict {
+    [key: string]: Error[];
+}
+
+export interface Challenge {
+    type: ChallengeTypes;
+    component?: string;
+    title?: string;
+    response_errors?: ErrorDict;
+}
+
+export interface ShellChallenge extends Challenge {
+    body: string;
+}
+export interface RedirectChallenge extends Challenge {
+    to: string;
+}
+
 export enum FlowDesignation {
     Authentication = "authentication",
     Authorization = "authorization",
@@ -44,6 +74,11 @@ export class Flow {
             return r.count;
         });
     }
+
+    static executor(slug: string): Promise<Challenge> {
+        return DefaultClient.fetch(["flows", "executor", slug]);
+    }
+
     static adminUrl(rest: string): string {
         return `/administration/flows/${rest}`;
     }
diff --git a/web/src/elements/stages/identification/IdentificationStage.ts b/web/src/elements/stages/identification/IdentificationStage.ts
index 6b7a5d1c8..1f7fb7ace 100644
--- a/web/src/elements/stages/identification/IdentificationStage.ts
+++ b/web/src/elements/stages/identification/IdentificationStage.ts
@@ -1,13 +1,14 @@
 import { gettext } from "django";
-import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
+import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import { Challenge, Error } from "../../../api/Flows";
 import { COMMON_STYLES } from "../../../common/styles";
 import { BaseStage } from "../base";
 
-export interface IdentificationStageArgs {
+export interface IdentificationChallenge extends Challenge {
 
     input_type: string;
     primary_action: string;
-    sources: UILoginButton[];
+    sources?: UILoginButton[];
 
     application_pre?: string;
 
@@ -22,11 +23,42 @@ export interface UILoginButton {
     icon_url?: string;
 }
 
+@customElement("ak-form-element")
+export class FormElement extends LitElement {
+
+    static get styles(): CSSResult[] {
+        return COMMON_STYLES;
+    }
+
+    @property()
+    label?: string;
+
+    @property({type: Boolean})
+    required = false;
+
+    @property({attribute: false})
+    errors?: Error[];
+
+    render(): TemplateResult {
+        return html`<div class="pf-c-form__group">
+                <label class="pf-c-form__label">
+                    <span class="pf-c-form__label-text">${this.label}</span>
+                    ${this.required ? html`<span class="pf-c-form__label-required" aria-hidden="true">*</span>` : html``}
+                </label>
+                <slot></slot>
+                ${(this.errors || []).map((error) => {
+                    return html`<p class="pf-c-form__helper-text pf-m-error">${error.string}</p>`;
+                })}
+            </div>`;
+    }
+
+}
+
 @customElement("ak-stage-identification")
 export class IdentificationStage extends BaseStage {
 
     @property({attribute: false})
-    args?: IdentificationStageArgs;
+    challenge?: IdentificationChallenge;
 
     static get styles(): CSSResult[] {
         return COMMON_STYLES;
@@ -51,58 +83,58 @@ export class IdentificationStage extends BaseStage {
     }
 
     renderFooter(): TemplateResult {
-        if (!(this.args?.enroll_url && this.args.recovery_url)) {
+        if (!(this.challenge?.enroll_url && this.challenge.recovery_url)) {
             return html``;
         }
         return html`<div class="pf-c-login__main-footer-band">
-                ${this.args.enroll_url ? html`
+                ${this.challenge.enroll_url ? html`
                 <p class="pf-c-login__main-footer-band-item">
                     ${gettext("Need an account?")}
-                    <a id="enroll" href="${this.args.enroll_url}">${gettext("Sign up.")}</a>
+                    <a id="enroll" href="${this.challenge.enroll_url}">${gettext("Sign up.")}</a>
                 </p>` : html``}
-                ${this.args.recovery_url ? html`
+                ${this.challenge.recovery_url ? html`
                 <p class="pf-c-login__main-footer-band-item">
                     ${gettext("Need an account?")}
-                    <a id="recovery" href="${this.args.recovery_url}">${gettext("Forgot username or password?")}</a>
+                    <a id="recovery" href="${this.challenge.recovery_url}">${gettext("Forgot username or password?")}</a>
                 </p>` : html``}
             </div>`;
     }
 
     render(): TemplateResult {
-        if (!this.args) {
+        if (!this.challenge) {
             return html`<ak-loading-state></ak-loading-state>`;
         }
         return html`<header class="pf-c-login__main-header">
                 <h1 class="pf-c-title pf-m-3xl">
-                    ${gettext("Log in to your account")}
+                    ${this.challenge.title}
                 </h1>
             </header>
             <div class="pf-c-login__main-body">
-                <form class="pf-c-form" @submit=${(e) => {this.submit(e);}}>
-                    ${this.args.application_pre ?
+                <form class="pf-c-form" @submit=${(e: Event) => {this.submit(e);}}>
+                    ${this.challenge.application_pre ?
                         html`<p>
-                            ${gettext(`Login to continue to ${this.args.application_pre}.`)}
+                            ${gettext(`Login to continue to ${this.challenge.application_pre}.`)}
                         </p>`:
                         html``}
 
-                    <div class="pf-c-form__group">
-                        <label class="pf-c-form__label">
-                            <span class="pf-c-form__label-text">${gettext("Email or Username")}</span>
-                            <span class="pf-c-form__label-required" aria-hidden="true">*</span>
-                        </label>
+                    <ak-form-element
+                        label="${gettext("Email or Username")}"
+                        ?required="${true}"
+                        class="pf-c-form__group"
+                        .errors=${(this.challenge?.response_errors || {})["uid_field"]}>
                         <input type="text" name="uid_field" placeholder="Email or Username" autofocus autocomplete="username" class="pf-c-form-control" required="">
-                    </div>
+                    </ak-form-element>
 
                     <div class="pf-c-form__group pf-m-action">
                         <button type="submit" class="pf-c-button pf-m-primary pf-m-block">
-                            ${this.args.primary_action}
+                            ${this.challenge.primary_action}
                         </button>
                     </div>
                 </form>
             </div>
             <footer class="pf-c-login__main-footer">
                 <ul class="pf-c-login__main-footer-links">
-                    ${this.args.sources.map((source) => {
+                    ${(this.challenge.sources || []).map((source) => {
                         return this.renderSource(source);
                     })}
                 </ul>
diff --git a/web/src/pages/generic/FlowExecutor.ts b/web/src/pages/generic/FlowExecutor.ts
index bee03f428..11db623e7 100644
--- a/web/src/pages/generic/FlowExecutor.ts
+++ b/web/src/pages/generic/FlowExecutor.ts
@@ -1,32 +1,19 @@
 import { gettext } from "django";
 import { LitElement, html, customElement, property, TemplateResult } from "lit-element";
 import { unsafeHTML } from "lit-html/directives/unsafe-html";
-import { SentryIgnoredError } from "../../common/errors";
 import { getCookie } from "../../utils";
 import "../../elements/stages/identification/IdentificationStage";
-
-enum ChallengeTypes {
-    native = "native",
-    response = "response",
-    shell = "shell",
-    redirect = "redirect",
-}
-
-interface Challenge {
-    type: ChallengeTypes;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    args: any;
-    component?: string;
-    title?: string;
-}
+import { ShellChallenge, Challenge, ChallengeTypes, Flow, RedirectChallenge } from "../../api/Flows";
+import { DefaultClient } from "../../api/Client";
+import { IdentificationChallenge } from "../../elements/stages/identification/IdentificationStage";
 
 @customElement("ak-flow-executor")
 export class FlowExecutor extends LitElement {
     @property()
-    flowBodyUrl = "";
+    flowSlug = "";
 
     @property({attribute: false})
-    flowBody?: TemplateResult;
+    challenge?: Challenge;
 
     createRenderRoot(): Element | ShadowRoot {
         return this;
@@ -41,7 +28,7 @@ export class FlowExecutor extends LitElement {
 
     submit(formData?: FormData): void {
         const csrftoken = getCookie("authentik_csrf");
-        const request = new Request(this.flowBodyUrl, {
+        const request = new Request(DefaultClient.makeUrl(["flows", "executor", this.flowSlug]), {
             headers: {
                 "X-CSRFToken": csrftoken,
             },
@@ -55,7 +42,7 @@ export class FlowExecutor extends LitElement {
                 return response.json();
             })
             .then((data) => {
-                this.updateCard(data);
+                this.challenge = data;
             })
             .catch((e) => {
                 this.errorMessage(e);
@@ -63,126 +50,33 @@ export class FlowExecutor extends LitElement {
     }
 
     firstUpdated(): void {
-        fetch(this.flowBodyUrl)
-            .then((r) => {
-                if (r.status === 404) {
-                    // Fallback when the flow does not exist, just redirect to the root
-                    window.location.pathname = "/";
-                } else if (!r.ok) {
-                    throw new SentryIgnoredError(r.statusText);
-                }
-                return r;
-            })
-            .then((r) => {
-                return r.json();
-            })
-            .then((r) => {
-                this.updateCard(r);
-            })
-            .catch((e) => {
-                // Catch JSON or Update errors
-                this.errorMessage(e);
-            });
-    }
-
-    async updateCard(data: Challenge): Promise<void> {
-        switch (data.type) {
-        case ChallengeTypes.redirect:
-            console.debug(`authentik/flows: redirecting to ${data.args.to}`);
-            window.location.assign(data.args.to || "");
-            break;
-        case ChallengeTypes.shell:
-            this.flowBody = html`${unsafeHTML(data.args.body)}`;
-            await this.requestUpdate();
-            this.checkAutofocus();
-            this.loadFormCode();
-            this.setFormSubmitHandlers();
-            break;
-        case ChallengeTypes.native:
-            switch (data.component) {
-                case "ak-stage-identification":
-                    this.flowBody = html`<ak-stage-identification .host=${this} .args=${data.args}></ak-stage-identification>`;
-                    break;
-                default:
-                    break;
-            }
-            break;
-        default:
-            console.debug(`authentik/flows: unexpected data type ${data.type}`);
-            break;
-        }
-    }
-
-    loadFormCode(): void {
-        this.querySelectorAll("script").forEach((script) => {
-            const newScript = document.createElement("script");
-            newScript.src = script.src;
-            document.head.appendChild(newScript);
-        });
-    }
-
-    checkAutofocus(): void {
-        const autofocusElement = <HTMLElement>this.querySelector("[autofocus]");
-        if (autofocusElement !== null) {
-            autofocusElement.focus();
-        }
-    }
-
-    updateFormAction(form: HTMLFormElement): boolean {
-        for (let index = 0; index < form.elements.length; index++) {
-            const element = <HTMLInputElement>form.elements[index];
-            if (element.value === form.action) {
-                console.debug(
-                    "authentik/flows: Found Form action URL in form elements, not changing form action."
-                );
-                return false;
-            }
-        }
-        form.action = this.flowBodyUrl;
-        console.debug(`authentik/flows: updated form.action ${this.flowBodyUrl}`);
-        return true;
-    }
-
-    checkAutosubmit(form: HTMLFormElement): void {
-        if ("autosubmit" in form.attributes) {
-            return form.submit();
-        }
-    }
-
-    setFormSubmitHandlers(): void {
-        this.querySelectorAll("form").forEach((form) => {
-            console.debug(`authentik/flows: Checking for autosubmit attribute ${form}`);
-            this.checkAutosubmit(form);
-            console.debug(`authentik/flows: Setting action for form ${form}`);
-            this.updateFormAction(form);
-            console.debug(`authentik/flows: Adding handler for form ${form}`);
-            form.addEventListener("submit", (e) => {
-                e.preventDefault();
-                const formData = new FormData(form);
-                this.flowBody = undefined;
-                this.submit(formData);
-            });
-            form.classList.add("ak-flow-wrapped");
+        Flow.executor(this.flowSlug).then((challenge) => {
+            this.challenge = challenge;
+        }).catch((e) => {
+            // Catch JSON or Update errors
+            this.errorMessage(e);
         });
     }
 
     errorMessage(error: string): void {
-        this.flowBody = html`
-            <style>
-                .ak-exception {
-                    font-family: monospace;
-                    overflow-x: scroll;
-                }
-            </style>
-            <header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">
-                    ${gettext("Whoops!")}
-                </h1>
-            </header>
-            <div class="pf-c-login__main-body">
-                <h3>${gettext("Something went wrong! Please try again later.")}</h3>
-                <pre class="ak-exception">${error}</pre>
-            </div>`;
+        this.challenge = <ShellChallenge>{
+            type: ChallengeTypes.shell,
+            body: `<style>
+                    .ak-exception {
+                        font-family: monospace;
+                        overflow-x: scroll;
+                    }
+                </style>
+                <header class="pf-c-login__main-header">
+                    <h1 class="pf-c-title pf-m-3xl">
+                        ${gettext("Whoops!")}
+                    </h1>
+                </header>
+                <div class="pf-c-login__main-body">
+                    <h3>${gettext("Something went wrong! Please try again later.")}</h3>
+                    <pre class="ak-exception">${error}</pre>
+                </div>`
+        };
     }
 
     loading(): TemplateResult {
@@ -196,9 +90,28 @@ export class FlowExecutor extends LitElement {
     }
 
     render(): TemplateResult {
-        if (this.flowBody) {
-            return this.flowBody;
+        if (!this.challenge) {
+            return this.loading();
         }
-        return this.loading();
+        switch(this.challenge.type) {
+        case ChallengeTypes.redirect:
+            console.debug(`authentik/flows: redirecting to ${(this.challenge as RedirectChallenge).to}`);
+            window.location.assign((this.challenge as RedirectChallenge).to);
+            break;
+        case ChallengeTypes.shell:
+            return html`${unsafeHTML((this.challenge as ShellChallenge).body)}`;
+        case ChallengeTypes.native:
+            switch (this.challenge.component) {
+                case "ak-stage-identification":
+                    return html`<ak-stage-identification .host=${this} .challenge=${this.challenge as IdentificationChallenge}></ak-stage-identification>`;
+                default:
+                    break;
+            }
+            break;
+        default:
+            console.debug(`authentik/flows: unexpected data type ${this.challenge.type}`);
+            break;
+        }
+        return html``;
     }
 }