map up the onSubmit, state and provider

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

@@ -1,4 +1,9 @@
-import { UMB_AUTH_CONTEXT, UMB_MODAL_APP_AUTH, UMB_STORAGE_REDIRECT_URL } from '@umbraco-cms/backoffice/auth';
+import {
+	UMB_AUTH_CONTEXT,
+	UMB_MODAL_APP_AUTH,
+	UMB_STORAGE_REDIRECT_URL,
+	type UmbUserLoginState,
+} from '@umbraco-cms/backoffice/auth';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { firstValueFrom } from '@umbraco-cms/backoffice/external/rxjs';
@@ -41,7 +46,7 @@ export class UmbAppAuthController extends UmbControllerBase {
 	 * Starts the authorization flow.
 	 * It will check which providers are available and either redirect directly to the provider or show a provider selection screen.
 	 */
-	async makeAuthorizationRequest(): Promise<boolean> {
+	async makeAuthorizationRequest(userLoginState: UmbUserLoginState = 'loggingIn'): Promise<boolean> {
 		if (!this.#authContext) {
 			throw new Error('[Fatal] Auth context is not available');
 		}
@@ -67,7 +72,11 @@ export class UmbAppAuthController extends UmbControllerBase {
 				// 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)
+					.open(this._host, UMB_MODAL_APP_AUTH, {
+						data: {
+							userLoginState,
+						},
+					})
 					.onSubmit()
 					.catch(() => undefined);
 
@@ -75,7 +84,7 @@ export class UmbAppAuthController extends UmbControllerBase {
 					return false;
 				}
 
-				this.#authContext.makeAuthorizationRequest(selected.providerName);
+				this.#authContext.makeAuthorizationRequest(selected.providerName, selected.loginHint);
 			}
 		}
 

src/Umbraco.Web.UI.Client/src/packages/core/auth/index.ts

@@ -5,3 +5,5 @@ export * from './auth.context.token.js';
 export * from './modals/index.js';
 export * from './models/openApiConfiguration.js';
 export * from './components/index.js';
+
+export type * from './types.js';

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

@@ -1,12 +1,13 @@
 import { UmbModalBaseElement } from '../../modal/index.js';
-import type { UmbModalAppAuthValue } from './umb-app-auth-modal.token.js';
+import type { UmbModalAppAuthConfig, UmbModalAppAuthValue } from './umb-app-auth-modal.token.js';
 import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 
 @customElement('umb-app-auth-modal')
-export class UmbAppAuthModalElement extends UmbModalBaseElement<never, UmbModalAppAuthValue> {
+export class UmbAppAuthModalElement extends UmbModalBaseElement<UmbModalAppAuthConfig, UmbModalAppAuthValue> {
 	get props() {
 		return {
+			userLoginState: this.data?.userLoginState ?? 'loggingIn',
 			onSubmit: this.onSubmit,
 		};
 	}

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

@@ -1,10 +1,25 @@
+import type { UmbUserLoginState } from '../types.js';
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
-export type UmbModalAppAuthValue = {
-	providerName?: string;
+export type UmbModalAppAuthConfig = {
+	userLoginState: UmbUserLoginState;
 };
 
-export const UMB_MODAL_APP_AUTH = new UmbModalToken<never, UmbModalAppAuthValue>('Umb.Modal.AppAuth', {
+export type UmbModalAppAuthValue = {
+	/**
+	 * The name of the provider that the user has selected to authenticate with.
+	 * @required
+	 */
+	providerName?: string;
+
+	/**
+	 * The login hint that the user has provided to the provider.
+	 * @optional
+	 */
+	loginHint?: string;
+};
+
+export const UMB_MODAL_APP_AUTH = new UmbModalToken<UmbModalAppAuthConfig, UmbModalAppAuthValue>('Umb.Modal.AppAuth', {
 	modal: {
 		type: 'dialog',
 	},

src/Umbraco.Web.UI.Client/src/packages/core/auth/types.ts

@@ -0,0 +1,5 @@
+/**
+ * User login state that can be used to determine the current state of the user.
+ * @example 'loggedIn'
+ */
+export type UmbUserLoginState = 'loggingIn' | 'loggedOut' | 'timedOut';