web: add remember me feature to IdentificationStage (#10397)

Co-authored-by: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Co-authored-by: Marc 'risson' Schmitt <marc.schmitt@risson.space>

authentik/flows/tests/test_inspector.py

@@ -48,6 +48,7 @@ class TestFlowInspector(APITestCase):
                 "allow_show_password": False,
                 "captcha_stage": None,
                 "component": "ak-stage-identification",
+                "enable_remember_me": False,
                 "flow_info": {
                     "background": "/static/dist/assets/images/flow_background.jpg",
                     "cancel_url": reverse("authentik_flows:cancel"),

authentik/stages/identification/api.py

@@ -36,6 +36,7 @@ class IdentificationStageSerializer(StageSerializer):
             "sources",
             "show_source_labels",
             "pretend_user_exists",
+            "enable_remember_me",
         ]
 
 

authentik/stages/identification/migrations/0016_identificationstage_enable_remember_me.py

@@ -0,0 +1,21 @@
+# Generated by Django 5.1.8 on 2025-04-16 17:14
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("authentik_stages_identification", "0015_identificationstage_captcha_stage"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="identificationstage",
+            name="enable_remember_me",
+            field=models.BooleanField(
+                default=False,
+                help_text="Show the user the 'Remember me on this device' toggle, allowing repeat users to skip straight to entering their password.",
+            ),
+        ),
+    ]

authentik/stages/identification/models.py

@@ -76,7 +76,13 @@ class IdentificationStage(Stage):
             "is entered."
         ),
     )
-
+    enable_remember_me = models.BooleanField(
+        default=False,
+        help_text=_(
+            "Show the user the 'Remember me on this device' toggle, allowing repeat "
+            "users to skip straight to entering their password."
+        ),
+    )
     enrollment_flow = models.ForeignKey(
         Flow,
         on_delete=models.SET_DEFAULT,

authentik/stages/identification/stage.py

@@ -85,6 +85,7 @@ class IdentificationChallenge(Challenge):
     primary_action = CharField()
     sources = LoginSourceSerializer(many=True, required=False)
     show_source_labels = BooleanField()
+    enable_remember_me = BooleanField(required=False, default=True)
 
     component = CharField(default="ak-stage-identification")
 
@@ -235,6 +236,7 @@ class IdentificationStageView(ChallengeStageView):
                 and current_stage.password_stage.allow_show_password,
                 "show_source_labels": current_stage.show_source_labels,
                 "flow_designation": self.executor.flow.designation,
+                "enable_remember_me": current_stage.enable_remember_me,
             }
         )
         # If the user has been redirected to us whilst trying to access an

blueprints/schema.json

@@ -11893,6 +11893,11 @@
                     "type": "boolean",
                     "title": "Pretend user exists",
                     "description": "When enabled, the stage will succeed and continue even when incorrect user info is entered."
+                },
+                "enable_remember_me": {
+                    "type": "boolean",
+                    "title": "Enable remember me",
+                    "description": "Show the user the 'Remember me on this device' toggle, allowing repeat users to skip straight to entering their password."
                 }
             },
             "required": []

schema.yml

@@ -46049,6 +46049,9 @@ components:
             $ref: '#/components/schemas/LoginSource'
         show_source_labels:
           type: boolean
+        enable_remember_me:
+          type: boolean
+          default: true
       required:
       - flow_designation
       - password_fields
@@ -46161,6 +46164,10 @@ components:
           type: boolean
           description: When enabled, the stage will succeed and continue even when
             incorrect user info is entered.
+        enable_remember_me:
+          type: boolean
+          description: Show the user the 'Remember me on this device' toggle, allowing
+            repeat users to skip straight to entering their password.
       required:
       - component
       - meta_model_name
@@ -46235,6 +46242,10 @@ components:
           type: boolean
           description: When enabled, the stage will succeed and continue even when
             incorrect user info is entered.
+        enable_remember_me:
+          type: boolean
+          description: Show the user the 'Remember me on this device' toggle, allowing
+            repeat users to skip straight to entering their password.
       required:
       - name
     ImpersonationRequest:
@@ -52290,6 +52301,10 @@ components:
           type: boolean
           description: When enabled, the stage will succeed and continue even when
             incorrect user info is entered.
+        enable_remember_me:
+          type: boolean
+          description: Show the user the 'Remember me on this device' toggle, allowing
+            repeat users to skip straight to entering their password.
     PatchedInitialPermissionsRequest:
       type: object
       description: InitialPermissions serializer

web/README.md

@@ -16,16 +16,16 @@ three contexts in which to run.
 
 The three contexts corresponds to objects in the API's `model` section, so let's use those names.
 
--   The root `Config`. The root configuration object of the server, containing mostly caching and
+- The root `Config`. The root configuration object of the server, containing mostly caching and
-    error reporting information. This is misleading, however; the `Config` object contains some user
+  error reporting information. This is misleading, however; the `Config` object contains some user
-    information, specifically a list of permissions the current user (or "no user") has.
+  information, specifically a list of permissions the current user (or "no user") has.
--   The root `CurrentTenant`. This describes the `Brand` information UIs should use, such as themes,
+- The root `CurrentTenant`. This describes the `Brand` information UIs should use, such as themes,
-    logos, favicon, and specific default flows for logging in, logging out, and recovering a user
+  logos, favicon, and specific default flows for logging in, logging out, and recovering a user
-    password.
+  password.
--   The current `SessionUser`, the person logged in: username, display name, and various states.
+- The current `SessionUser`, the person logged in: username, display name, and various states.
-    (Note: the authentik server permits administrators to "impersonate" any other user in order to
+  (Note: the authentik server permits administrators to "impersonate" any other user in order to
-    debug their authentikation experience. If impersonation is active, the `user` field reflects that
+  debug their authentikation experience. If impersonation is active, the `user` field reflects that
-    user, but it also includes a field, `original`, with the administrator's information.)
+  user, but it also includes a field, `original`, with the administrator's information.)
 
 (There is a fourth context object, Version, but its use is limited to displaying version information
 and checking for upgrades. Just be aware that you will see it, but you will probably never interact
@@ -36,55 +36,55 @@ insides are provided by third-party libraries (Patternfly and Rapidoc, respectiv
 three are actual applications. The descriptions below are wholly from the view of the user's
 experience:
 
--   `Flow`: From a given URL, displays a form that requests information from the user to accomplish a
+- `Flow`: From a given URL, displays a form that requests information from the user to accomplish a
-    task. Some tasks require the user to be logged in, but many (such as logging in itself!)
+  task. Some tasks require the user to be logged in, but many (such as logging in itself!)
-    obviously do not.
+  obviously do not.
--   `User`: Provides the user with access to the applications they can access, plus a few user
+- `User`: Provides the user with access to the applications they can access, plus a few user
-    settings.
+  settings.
--   `Admin`: Provides someone with super-user permissions access to the administrative functions of
+- `Admin`: Provides someone with super-user permissions access to the administrative functions of
-    the authentik server.
+  the authentik server.
 
 **Mental Model**
 
--   Upon initialization, _every_ authentik UI application fetches `Config` and `CurrentTenant`. `User`
+- Upon initialization, _every_ authentik UI application fetches `Config` and `CurrentTenant`. `User`
-    and `Admin` will also attempt to load the `SessionUser`; if there is none, the user is kicked out
+  and `Admin` will also attempt to load the `SessionUser`; if there is none, the user is kicked out
-    to the `Flow` for logging into authentik itself.
+  to the `Flow` for logging into authentik itself.
--   `Config`, `CurrentTenant`, and `SessionUser`, are provided by the `@goauthentik/api` application,
+- `Config`, `CurrentTenant`, and `SessionUser`, are provided by the `@goauthentik/api` application,
-    not by the codebase under `./web`. (Where you are now).
+  not by the codebase under `./web`. (Where you are now).
--   `Flow`, `User`, and `Admin` are all called `Interfaces` and are found in
+- `Flow`, `User`, and `Admin` are all called `Interfaces` and are found in
-    `./web/src/flow/FlowInterface`, `./web/src/user/UserInterface`, `./web/src/admin/AdminInterface`,
+  `./web/src/flow/FlowInterface`, `./web/src/user/UserInterface`, `./web/src/admin/AdminInterface`,
-    respectively.
+  respectively.
 
 Inside each of these you will find, in a hierarchal order:
 
--   The context layer described above
+- The context layer described above
-    -   A theme managing layer
+    - A theme managing layer
-    -   The orchestration layer:
+    - The orchestration layer:
-        -   web socket handler for server-generated events
+        - web socket handler for server-generated events
-        -   The router
+        - The router
-            -   Individual routes for each vertical slice and its relationship to other objects:
+            - Individual routes for each vertical slice and its relationship to other objects:
 
 Each slice corresponds to an object table on the server, and each slice _usually_ consists of the
 following:
 
--   A paginated collection display, usually using the `Table` foundation (found in
+- A paginated collection display, usually using the `Table` foundation (found in
-    `./web/src/elements/Table`)
+  `./web/src/elements/Table`)
--   The ability to view an individual object from the collection, which you may be able to:
+- The ability to view an individual object from the collection, which you may be able to:
-    -   Edit
+    - Edit
-    -   Delete
+    - Delete
--   A form for creating a new object
+- A form for creating a new object
--   Tabs showing that object's relationship to other objects
+- Tabs showing that object's relationship to other objects
-    -   Interactive elements for changing or deleting those relationships, or creating new ones.
+    - Interactive elements for changing or deleting those relationships, or creating new ones.
-    -   The ability to create new objects with which to have that relationship, if they're not part of
+    - The ability to create new objects with which to have that relationship, if they're not part of
-        the core objects (such as User->MFA authenticator apps, since the latter is not a "core" object
+      the core objects (such as User->MFA authenticator apps, since the latter is not a "core" object
-        and has no tab of its own).
+      and has no tab of its own).
 
 We are still a bit "all over the place" with respect to sub-units and common units; there are
 folders `common`, `elements`, and `components`, and ideally they would be:
 
--   `common`: non-UI related libraries all of our applications need
+- `common`: non-UI related libraries all of our applications need
--   `elements`: UI elements shared among multiple applications that do not need context
+- `elements`: UI elements shared among multiple applications that do not need context
--   `components`: UI elements shared among multiple that use one or more context
+- `components`: UI elements shared among multiple that use one or more context
 
 ... but at the moment there are some context-sensitive elements, and some UI-related stuff in
 `common`.
@@ -95,18 +95,18 @@ folders `common`, `elements`, and `components`, and ideally they would be:
 reliably documented any other way. For the most part, they contain comments related to custom
 settings in JSON files, which do not support comments.
 
--   `tsconfig.json`:
+- `tsconfig.json`:
-    -   `compilerOptions.useDefineForClassFields: false` is required to make TSC use the "classic" form
+    - `compilerOptions.useDefineForClassFields: false` is required to make TSC use the "classic" form
-        of field definition when compiling class definitions. Storybook does not handle the ESNext
+      of field definition when compiling class definitions. Storybook does not handle the ESNext
-        proposed definition mechanism (yet).
+      proposed definition mechanism (yet).
-    -   `compilerOptions.plugins.ts-lit-plugin.rules.no-unknown-tag-name: "off"`: required to support
+    - `compilerOptions.plugins.ts-lit-plugin.rules.no-unknown-tag-name: "off"`: required to support
-        rapidoc, which exports its tag late.
+      rapidoc, which exports its tag late.
-    -   `compilerOptions.plugins.ts-lit-plugin.rules.no-missing-import: "off"`: lit-analyzer currently
+    - `compilerOptions.plugins.ts-lit-plugin.rules.no-missing-import: "off"`: lit-analyzer currently
-        does not support path aliases very well, and cannot find the definition files associated with
+      does not support path aliases very well, and cannot find the definition files associated with
-        imports using them.
+      imports using them.
-    -   `compilerOptions.plugins.ts-lit-plugin.rules.no-incompatible-type-binding: "warn"`: lit-analyzer
+    - `compilerOptions.plugins.ts-lit-plugin.rules.no-incompatible-type-binding: "warn"`: lit-analyzer
-        does not support generics well when parsing a subtype of `HTMLElement`. As a result, this threw
+      does not support generics well when parsing a subtype of `HTMLElement`. As a result, this threw
-        too many errors to be supportable.
+      too many errors to be supportable.
 
 ### License
 

web/package.json

@@ -1,14 +1,6 @@
 {
     "name": "@goauthentik/web",
     "version": "0.0.0",
-    "overrides": {
-        "rapidoc": {
-            "@apitools/openapi-parser@": "0.0.37"
-        },
-        "chromedriver": {
-            "axios": "^1.8.4"
-        }
-    },
     "dependencies": {
         "@codemirror/lang-css": "^6.3.1",
         "@codemirror/lang-html": "^6.4.9",
@@ -136,6 +128,14 @@
         "@rollup/rollup-linux-arm64-gnu": "4.23.0",
         "@rollup/rollup-linux-x64-gnu": "4.23.0"
     },
+    "overrides": {
+        "rapidoc": {
+            "@apitools/openapi-parser@": "0.0.37"
+        },
+        "chromedriver": {
+            "axios": "^1.8.4"
+        }
+    },
     "private": true,
     "scripts": {
         "build": "wireit",

web/packages/sfe/README.md

@@ -9,11 +9,11 @@ It exists primarily to support late versions of Microsoft Office365 and Microsof
 software that still uses the MSEdge-18 and IE-11 _Trident_ web engine for web-based log-ins. It has
 limited support for the full language, supporting only the following stages:
 
--   identification
+- identification
--   password
+- password
--   redirect
+- redirect
--   autosubmit
+- autosubmit
--   authenticator validation (both code and WebAuthn)
+- authenticator validation (both code and WebAuthn)
 
 ### License
 

web/scripts/eslint.precommit.mjs

@@ -22,6 +22,7 @@ export default [
             "coverage/",
             "src/locale-codes.ts",
             "storybook-static/",
+            "scripts/esbuild",
             "src/locales/",
         ],
     },

web/src/admin/providers/ldap/LDAPOptionsAndHelp.ts

@@ -15,9 +15,7 @@ export const bindModeOptions = [
     {
         label: msg("Direct binding"),
         value: LDAPAPIAccessMode.Direct,
-        description: html`${msg(
+        description: html`${msg("Always execute the configured bind flow to authenticate the user")}`,
-            "Always execute the configured bind flow to authenticate the user",
-        )}`,
     },
 ];
 
@@ -33,9 +31,7 @@ export const searchModeOptions = [
     {
         label: msg("Direct querying"),
         value: LDAPAPIAccessMode.Direct,
-        description: html`${msg(
+        description: html`${msg("Always returns the latest data, but slower than cached querying")}`,
-            "Always returns the latest data, but slower than cached querying",
-        )}`,
     },
 ];
 

web/src/admin/stages/identification/IdentificationStageForm.ts

@@ -2,6 +2,7 @@ import "@goauthentik/admin/common/ak-flow-search/ak-flow-search";
 import { BaseStageForm } from "@goauthentik/admin/stages/BaseStageForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first, groupBy } from "@goauthentik/common/utils";
+import "@goauthentik/components/ak-switch-input.js";
 import "@goauthentik/elements/ak-checkbox-group/ak-checkbox-group.js";
 import "@goauthentik/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.js";
 import "@goauthentik/elements/forms/FormGroup";
@@ -158,68 +159,38 @@ export class IdentificationStageForm extends BaseStageForm<IdentificationStage>
                             )}
                         </p>
                     </ak-form-element-horizontal>
-                    <ak-form-element-horizontal name="caseInsensitiveMatching">
+                    <ak-switch-input
-                        <label class="pf-c-switch">
+                        name="caseInsensitiveMatching"
-                            <input
+                        label=${msg("Case insensitive matching")}
-                                class="pf-c-switch__input"
+                        ?checked=${first(this.instance?.caseInsensitiveMatching, true)}
-                                type="checkbox"
+                        help=${msg(
-                                ?checked=${first(this.instance?.caseInsensitiveMatching, true)}
+                            "When enabled, user fields are matched regardless of their casing.",
-                            />
+                        )}
-                            <span class="pf-c-switch__toggle">
+                    ></ak-switch-input>
-                                <span class="pf-c-switch__toggle-icon">
+                    <ak-switch-input
-                                    <i class="fas fa-check" aria-hidden="true"></i>
+                        name="pretendUserExists"
-                                </span>
+                        label=${msg("Pretend user exists")}
-                            </span>
+                        ?checked=${first(this.instance?.pretendUserExists, true)}
-                            <span class="pf-c-switch__label"
+                        help=${msg(
-                                >${msg("Case insensitive matching")}</span
+                            "When enabled, the stage will always accept the given user identifier and continue.",
-                            >
+                        )}
-                        </label>
+                    ></ak-switch-input>
-                        <p class="pf-c-form__helper-text">
+                    <ak-switch-input
-                            ${msg(
+                        name="showMatchedUser"
-                                "When enabled, user fields are matched regardless of their casing.",
+                        label=${msg("Show matched user")}
-                            )}
+                        ?checked=${first(this.instance?.showMatchedUser, true)}
-                        </p>
+                        help=${msg(
-                    </ak-form-element-horizontal>
+                            "When a valid username/email has been entered, and this option is enabled, the user's username and avatar will be shown. Otherwise, the text that the user entered will be shown.",
-                    <ak-form-element-horizontal name="pretendUserExists">
+                        )}
-                        <label class="pf-c-switch">
+                    ></ak-switch-input>
-                            <input
+                    <ak-switch-input
-                                class="pf-c-switch__input"
+                        name="enableRememberMe"
-                                type="checkbox"
+                        label=${msg('Enable "Remember me on this device"')}
-                                ?checked=${first(this.instance?.pretendUserExists, true)}
+                        ?checked=${this.instance?.enableRememberMe}
-                            />
+                        help=${msg(
-                            <span class="pf-c-switch__toggle">
+                            "When enabled, the user can save their username in a cookie, allowing them to skip directly to entering their password.",
-                                <span class="pf-c-switch__toggle-icon">
+                        )}
-                                    <i class="fas fa-check" aria-hidden="true"></i>
+                    ></ak-switch-input>
-                                </span>
-                            </span>
-                            <span class="pf-c-switch__label">${msg("Pretend user exists")}</span>
-                        </label>
-                        <p class="pf-c-form__helper-text">
-                            ${msg(
-                                "When enabled, the stage will always accept the given user identifier and continue.",
-                            )}
-                        </p>
-                    </ak-form-element-horizontal>
-                    <ak-form-element-horizontal name="showMatchedUser">
-                        <label class="pf-c-switch">
-                            <input
-                                class="pf-c-switch__input"
-                                type="checkbox"
-                                ?checked=${first(this.instance?.showMatchedUser, true)}
-                            />
-                            <span class="pf-c-switch__toggle">
-                                <span class="pf-c-switch__toggle-icon">
-                                    <i class="fas fa-check" aria-hidden="true"></i>
-                                </span>
-                            </span>
-                            <span class="pf-c-switch__label">${msg("Show matched user")}</span>
-                        </label>
-                        <p class="pf-c-form__helper-text">
-                            ${msg(
-                                "When a valid username/email has been entered, and this option is enabled, the user's username and avatar will be shown. Otherwise, the text that the user entered will be shown.",
-                            )}
-                        </p>
-                    </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
             <ak-form-group>

web/src/flow/stages/identification/IdentificationStage.ts

@@ -5,6 +5,7 @@ import "@goauthentik/elements/forms/FormElement";
 import "@goauthentik/flow/components/ak-flow-password-input.js";
 import { BaseStage } from "@goauthentik/flow/stages/base";
 import "@goauthentik/flow/stages/captcha/CaptchaStage";
+import { AkRememberMeController } from "@goauthentik/flow/stages/identification/RememberMeController.js";
 
 import { msg, str } from "@lit/localize";
 import { CSSResult, PropertyValues, TemplateResult, css, html, nothing } from "lit";
@@ -47,6 +48,8 @@ export class IdentificationStage extends BaseStage<
 > {
     form?: HTMLFormElement;
 
+    rememberMe: AkRememberMeController;
+
     @state()
     captchaToken = "";
     @state()
@@ -62,8 +65,9 @@ export class IdentificationStage extends BaseStage<
             PFFormControl,
             PFTitle,
             PFButton,
-            /* login page's icons */
+            AkRememberMeController.styles,
             css`
+                /* login page's icons */
                 .pf-c-login__main-footer-links-item button {
                     background-color: transparent;
                     border: 0;
@@ -81,6 +85,11 @@ export class IdentificationStage extends BaseStage<
         ];
     }
 
+    constructor() {
+        super();
+        this.rememberMe = new AkRememberMeController(this);
+    }
+
     updated(changedProperties: PropertyValues<this>) {
         if (changedProperties.has("challenge") && this.challenge !== undefined) {
             this.autoRedirect();
@@ -268,8 +277,10 @@ export class IdentificationStage extends BaseStage<
                     autocomplete="username"
                     spellcheck="false"
                     class="pf-c-form-control"
+                    value=${this.rememberMe?.username ?? ""}
                     required
                 />
+                ${this.rememberMe.render()}
             </ak-form-element>
             ${this.challenge.passwordFields
                 ? html`

web/src/flow/stages/identification/RememberMeController.ts

@@ -0,0 +1,156 @@
+import { getCookie } from "@goauthentik/common/utils.js";
+
+import { msg } from "@lit/localize";
+import { css, html, nothing } from "lit";
+import { ReactiveController, ReactiveControllerHost } from "lit";
+
+import type { IdentificationStage } from "./IdentificationStage.js";
+
+type RememberMeHost = ReactiveControllerHost & IdentificationStage;
+
+export class AkRememberMeController implements ReactiveController {
+    static get styles() {
+        return css`
+            .remember-me-switch {
+                display: inline-block;
+                padding-top: 0.25rem;
+            }
+        `;
+    }
+
+    username?: string;
+
+    rememberingUsername: boolean = false;
+
+    constructor(private host: RememberMeHost) {
+        this.trackRememberMe = this.trackRememberMe.bind(this);
+        this.toggleRememberMe = this.toggleRememberMe.bind(this);
+        this.host.addController(this);
+    }
+
+    // Record a stable token that we can use between requests to track if we've
+    // been here before.  If we can't, clear out the username.
+    hostConnected() {
+        try {
+            const sessionId = localStorage.getItem("authentik-remember-me-session");
+            if (!!this.localSession && sessionId === this.localSession) {
+                this.username = undefined;
+                localStorage?.removeItem("authentik-remember-me-user");
+            }
+            localStorage?.setItem("authentik-remember-me-session", this.localSession);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        } catch (_e: any) {
+            this.username = undefined;
+        }
+    }
+
+    get localSession() {
+        return (getCookie("authentik_csrf") ?? "").substring(0, 8);
+    }
+
+    get usernameField() {
+        return this.host.renderRoot.querySelector(
+            'input[name="uidField"]',
+        ) as HTMLInputElement | null;
+    }
+
+    get rememberMeToggle() {
+        return this.host.renderRoot.querySelector(
+            "#authentik-remember-me",
+        ) as HTMLInputElement | null;
+    }
+
+    get isValidChallenge() {
+        return !(
+            this.host.challenge.responseErrors &&
+            this.host.challenge.responseErrors.non_field_errors &&
+            this.host.challenge.responseErrors.non_field_errors.find(
+                (cre) => cre.code === "invalid",
+            )
+        );
+    }
+
+    get submitButton() {
+        return this.host.renderRoot.querySelector('button[type="submit"]') as HTMLButtonElement;
+    }
+
+    get isEnabled() {
+        return (
+            this.host.challenge !== undefined &&
+            this.host.challenge.enableRememberMe &&
+            typeof localStorage !== "undefined"
+        );
+    }
+
+    get canAutoSubmit() {
+        return (
+            !!this.host.challenge &&
+            !!this.username &&
+            !!this.usernameField?.value &&
+            !this.host.challenge.passwordFields &&
+            !this.host.challenge.passwordlessUrl
+        );
+    }
+
+    // Before the page is updated, try to extract the username from localstorage.
+    hostUpdate() {
+        if (!this.isEnabled) {
+            return;
+        }
+
+        try {
+            this.username = localStorage.getItem("authentik-remember-me-user") || undefined;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        } catch (_e: any) {
+            this.username = undefined;
+        }
+    }
+
+    // After the page is updated, if everything is ready to go, do the autosubmit.
+    hostUpdated() {
+        if (this.isEnabled && this.canAutoSubmit) {
+            this.submitButton?.click();
+        }
+    }
+
+    trackRememberMe() {
+        if (!this.usernameField || this.usernameField.value === undefined) {
+            return;
+        }
+        this.username = this.usernameField.value;
+        localStorage?.setItem("authentik-remember-me-user", this.username);
+    }
+
+    // When active, save current details and record every keystroke to the username.
+    // When inactive, clear all fields and remove keystroke recorder.
+    toggleRememberMe() {
+        if (!this.rememberMeToggle || !this.rememberMeToggle.checked) {
+            localStorage?.removeItem("authentik-remember-me-user");
+            localStorage?.removeItem("authentik-remember-me-session");
+            this.username = undefined;
+            this.usernameField?.removeEventListener("keyup", this.trackRememberMe);
+            return;
+        }
+        if (!this.usernameField) {
+            return;
+        }
+        localStorage?.setItem("authentik-remember-me-user", this.usernameField.value);
+        localStorage?.setItem("authentik-remember-me-session", this.localSession);
+        this.usernameField.addEventListener("keyup", this.trackRememberMe);
+    }
+
+    render() {
+        return this.isEnabled
+            ? html` <label class="pf-c-switch remember-me-switch">
+                  <input
+                      class="pf-c-switch__input"
+                      id="authentik-remember-me"
+                      @click=${this.toggleRememberMe}
+                      type="checkbox"
+                      ?checked=${!!this.username}
+                  />
+                  <span class="pf-c-form__label">${msg("Remember me on this device")}</span>
+              </label>`
+            : nothing;
+    }
+}

website/docs/add-secure-apps/flows-stages/stages/identification/index.mdx

@@ -34,6 +34,10 @@ These fields specify if and which flows are linked on the form. The enrollment f
 
 When enabled, any user identifier will be accepted as valid (as long as they match the correct format, i.e. when [User fields](#user-fields) is set to only allow Emails, then the identifier still needs to be an Email). The stage will succeed and the flow will continue to the next stage. Stages like the [Password stage](../password/index.md) and [Email stage](../email/index.mdx) are aware of this "pretend" user and will behave the same as if the user would exist.
 
+## Enable "Remember me on this device":ak-version[2025.4]
+
+When enabled, users will be given the option at login of having their username stored on the device. If selected, on future logins this stage will automatically fill in the username and fast-forward to the password field. Users will still have the options of clicking "Not you?" and going back to provide a different username or disable this feature.
+
 ## Source settings
 
 Some sources (like the [OAuth Source](../../../../users-sources/sources/protocols/oauth/index.mdx) and [SAML Source](../../../../users-sources/sources/protocols/saml/index.md)) require user interaction. To make these sources available to users, they can be selected in the Identification stage settings, which will show them below the selected [user field](#user-fields).