if the user times out, always show the login screen

src/Umbraco.Web.UI.Client/src/apps/app/app-auth.controller.ts

@@ -69,6 +69,17 @@ export class UmbAppAuthController extends UmbControllerBase {
 			throw new Error('[Fatal] Auth context is not available');
 		}
 
+		// If the user is timed out, we can show the login modal directly
+		if (userLoginState === 'timedOut') {
+			const selected = await this.#showLoginModal(userLoginState);
+
+			if (!selected) {
+				return false;
+			}
+
+			return this.#updateState();
+		}
+
 		// Figure out which providers are available
 		const availableProviders = await firstValueFrom(this.#authContext.getAuthProviders());
 
@@ -88,32 +99,47 @@ export class UmbAppAuthController extends UmbControllerBase {
 				this.#authContext.makeAuthorizationRequest(redirectProvider.forProviderName);
 			} else {
 				// Show the provider selection screen
-				const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
-				const selected = await modalManager
-					.open(this._host, UMB_MODAL_APP_AUTH, {
-						data: {
-							userLoginState,
-						},
-						modal: {
-							backdropBackground: this.#firstTimeLoggingIn
-								? "var(--umb-auth-backdrop, url('https://picsum.photos/1440?grayscale&blur=2') center center / cover no-repeat)"
-								: 'var(--umb-auth-backdrop-timedout, rgb(0, 0, 0))',
-						},
-					})
-					.onSubmit()
-					.catch(() => undefined);
+				const selected = await this.#showLoginModal(userLoginState);
 
-				if (!selected?.providerName) {
+				if (!selected) {
 					return false;
 				}
-
-				this.#authContext.makeAuthorizationRequest(selected.providerName, selected.loginHint);
 			}
 		}
 
 		return this.#updateState();
 	}
 
+	async #showLoginModal(userLoginState: UmbUserLoginState): Promise<boolean> {
+		if (!this.#authContext) {
+			throw new Error('[Fatal] Auth context is not available');
+		}
+
+		// Show the provider selection screen
+		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
+		const selected = await modalManager
+			.open(this._host, UMB_MODAL_APP_AUTH, {
+				data: {
+					userLoginState,
+				},
+				modal: {
+					backdropBackground: this.#firstTimeLoggingIn
+						? "var(--umb-auth-backdrop, url('https://picsum.photos/1440?grayscale&blur=2') center center / cover no-repeat)"
+						: 'var(--umb-auth-backdrop-timedout, rgb(0, 0, 0))',
+				},
+			})
+			.onSubmit()
+			.catch(() => undefined);
+
+		if (!selected?.providerName) {
+			return false;
+		}
+
+		this.#authContext.makeAuthorizationRequest(selected.providerName, selected.loginHint);
+
+		return true;
+	}
+
 	#updateState() {
 		if (!this.#authContext) {
 			throw new Error('[Fatal] Auth context is not available');

src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts

@@ -1016,6 +1016,7 @@ export default {
 	login: {
 		instruction: 'Log ind på Umbraco',
 		signInWith: 'Log ind med {0}',
+		timeout: 'Du er blevet logget ud på grund af inaktivitet, vil du logge ind igen?',
 	},
 	main: {
 		dashboard: 'Skrivebord',

src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts

@@ -1013,6 +1013,7 @@ export default {
 	login: {
 		instruction: 'Sign in to Umbraco',
 		signInWith: 'Sign in with {0}',
+		timeout: 'Your session has timed out. Please sign in again below.',
 	},
 	main: {
 		dashboard: 'Dashboard',

src/Umbraco.Web.UI.Client/src/packages/core/auth/modals/umb-app-auth-modal.element.ts

@@ -15,6 +15,7 @@ export class UmbAppAuthModalElement extends UmbModalBaseElement<UmbModalAppAuthC
 	render() {
 		return html`
 			<umb-body-layout id="layout" .headline=${this.localize.term('login_instruction')}>
+				${this.data?.userLoginState === 'timedOut' ? html`<p>${this.localize.term('login_timeout')}</p>` : ''}
 				<umb-extension-slot
 					id="providers"
 					type="authProvider"