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

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")}`,
},
];

95
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"
?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(
"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"
?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(
"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>
<ak-switch-input
name="caseInsensitiveMatching"
label=${msg("Case insensitive matching")}
?checked=${first(this.instance?.caseInsensitiveMatching, true)}
help=${msg(
"When enabled, user fields are matched regardless of their casing.",
)}
></ak-switch-input>
<ak-switch-input
name="pretendUserExists"
label=${msg("Pretend user exists")}
?checked=${first(this.instance?.pretendUserExists, true)}
help=${msg(
"When enabled, the stage will always accept the given user identifier and continue.",
)}
></ak-switch-input>
<ak-switch-input
name="showMatchedUser"
label=${msg("Show matched user")}
?checked=${first(this.instance?.showMatchedUser, true)}
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.",
)}
></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;
}
}