habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Co-authored-by: Marc 'risson' Schmitt <marc.schmitt@risson.space>
This commit is contained in:
Ken Sternberg
2025-04-17 03:37:49 -07:00
committed by GitHub
parent fb5053ec83
commit 5e6874cc1f
17 changed files with 5623 additions and 7173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
authentik/flows/tests/test_inspector.py
View File

@ -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"),

1
authentik/stages/identification/api.py
View File

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

21
authentik/stages/identification/migrations/0016_identificationstage_enable_remember_me.py Normal file
View File

@ -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.",
),
),
]

8
authentik/stages/identification/models.py
View File

@ -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,

2
authentik/stages/identification/stage.py
View File

@ -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

5
blueprints/schema.json
View File

@ -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": []

15
schema.yml
View File

@ -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

12328
web/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

16
web/package.json
View File

@ -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",

1
web/scripts/eslint.precommit.mjs
View File

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

8
web/src/admin/providers/ldap/LDAPOptionsAndHelp.ts
View File

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

77
web/src/admin/stages/identification/IdentificationStageForm.ts
View File

@ -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">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
<ak-switch-input
name="caseInsensitiveMatching"
label=${msg("Case insensitive matching")}
?checked=${first(this.instance?.caseInsensitiveMatching, 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("Case insensitive matching")}</span
>
</label>
<p class="pf-c-form__helper-text">
${msg(
help=${msg(
"When enabled, user fields are matched regardless of their casing.",
)}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="pretendUserExists">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
></ak-switch-input>
<ak-switch-input
name="pretendUserExists"
label=${msg("Pretend user exists")}
?checked=${first(this.instance?.pretendUserExists, 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("Pretend user exists")}</span>
</label>
<p class="pf-c-form__helper-text">
${msg(
help=${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"
></ak-switch-input>
<ak-switch-input
name="showMatchedUser"
label=${msg("Show matched user")}
?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(
help=${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>
></ak-switch-input>
<ak-switch-input
name="enableRememberMe"
label=${msg('Enable "Remember me on this device"')}
?checked=${this.instance?.enableRememberMe}
help=${msg(
"When enabled, the user can save their username in a cookie, allowing them to skip directly to entering their password.",
)}
></ak-switch-input>
</div>
</ak-form-group>
<ak-form-group>

13
web/src/flow/stages/identification/IdentificationStage.ts
View File

@ -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`

156
web/src/flow/stages/identification/RememberMeController.ts Normal file
View File

@ -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;
}
}

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

@ -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).