Merge branch 'main' into community-and-support-welcome-dashboard-content

Author: liamlaverty

docs/authentication.md

@@ -36,7 +36,9 @@ There are two ways to use this:
 	"CMS": {
 		"Security":{
 			"BackOfficeHost": "http://localhost:5173",
-			"AuthorizeCallbackPathName": "/"
+			"AuthorizeCallbackPathName": "/oauth_complete",
+			"AuthorizeCallbackLogoutPathName": "/logout",
+			"AuthorizeCallbackErrorPathName": "/error",
 		},
 	},
 	[...]

src/apps/app/app-auth.controller.ts

@@ -1,19 +1,12 @@
-import {
-	UMB_AUTH_CONTEXT,
-	UMB_MODAL_APP_AUTH,
-	UMB_STORAGE_REDIRECT_URL,
-	type UmbUserLoginState,
-} from '@umbraco-cms/backoffice/auth';
+import { UMB_AUTH_CONTEXT, UMB_MODAL_APP_AUTH, 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 { filter, firstValueFrom, skip } from '@umbraco-cms/backoffice/external/rxjs';
+import { firstValueFrom } from '@umbraco-cms/backoffice/external/rxjs';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
-import type { ManifestAuthProvider } from '@umbraco-cms/backoffice/extension-registry';
 
 export class UmbAppAuthController extends UmbControllerBase {
 	#authContext?: typeof UMB_AUTH_CONTEXT.TYPE;
-	#firstTimeLoggingIn = true;
 
 	constructor(host: UmbControllerHost) {
 		super(host);
@@ -23,14 +16,8 @@ export class UmbAppAuthController extends UmbControllerBase {
 
 			// Observe the user's authorization state and start the authorization flow if the user is not authorized
 			this.observe(
-				context.isAuthorized.pipe(
-					// Skip the first since it is always false
-					skip(1),
-					// Only continue if the value is false
-					filter((x) => !x),
-				),
+				context.timeoutSignal,
 				() => {
-					this.#firstTimeLoggingIn = false;
 					this.makeAuthorizationRequest('timedOut');
 				},
 				'_authState',
@@ -66,11 +53,6 @@ export class UmbAppAuthController extends UmbControllerBase {
 			throw new Error('[Fatal] Auth context is not available');
 		}
 
-		// Save location.href so we can redirect to it after login
-		if (location.href !== this.#authContext.getPostLogoutRedirectUrl()) {
-			window.sessionStorage.setItem(UMB_STORAGE_REDIRECT_URL, location.href);
-		}
-
 		// Figure out which providers are available
 		const availableProviders = await firstValueFrom(this.#authContext.getAuthProviders(umbExtensionsRegistry));
 
@@ -80,7 +62,7 @@ export class UmbAppAuthController extends UmbControllerBase {
 
 		// If the user is timed out, we can show the login modal directly
 		if (userLoginState === 'timedOut') {
-			const selected = await this.#showLoginModal(userLoginState, availableProviders);
+			const selected = await this.#showLoginModal(userLoginState);
 
 			if (!selected) {
 				return false;
@@ -91,7 +73,7 @@ export class UmbAppAuthController extends UmbControllerBase {
 
 		if (availableProviders.length === 1) {
 			// One provider available (most likely the Umbraco provider), so initiate the authorization request to the default provider
-			this.#authContext.makeAuthorizationRequest(availableProviders[0].forProviderName);
+			await this.#authContext.makeAuthorizationRequest(availableProviders[0].forProviderName, true);
 			return this.#updateState();
 		}
 
@@ -103,12 +85,12 @@ export class UmbAppAuthController extends UmbControllerBase {
 
 		if (redirectProvider) {
 			// Redirect directly to the provider
-			this.#authContext.makeAuthorizationRequest(redirectProvider.forProviderName);
+			await this.#authContext.makeAuthorizationRequest(redirectProvider.forProviderName, true);
 			return this.#updateState();
 		}
 
 		// Show the provider selection screen
-		const selected = await this.#showLoginModal(userLoginState, availableProviders);
+		const selected = await this.#showLoginModal(userLoginState);
 
 		if (!selected) {
 			return false;
@@ -117,45 +99,32 @@ export class UmbAppAuthController extends UmbControllerBase {
 		return this.#updateState();
 	}
 
-	async #showLoginModal(
-		userLoginState: UmbUserLoginState,
-		availableProviders: Array<ManifestAuthProvider>,
-	): Promise<boolean> {
+	async #showLoginModal(userLoginState: UmbUserLoginState): Promise<boolean> {
 		if (!this.#authContext) {
 			throw new Error('[Fatal] Auth context is not available');
 		}
 
-		// Check if any provider denies local login
-		const denyLocalLogin = availableProviders.some((provider) => provider.meta?.behavior?.denyLocalLogin);
-		if (denyLocalLogin) {
-			// Unregister the Umbraco provider
-			umbExtensionsRegistry.unregister('Umb.AuthProviders.Umbraco');
-		}
-
 		// Show the provider selection screen
+		const authModalKey = 'umbAuthModal';
 		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
-		modalManager.remove('umbAuthModal');
+
 		const selected = await modalManager
 			.open(this._host, UMB_MODAL_APP_AUTH, {
 				data: {
 					userLoginState,
 				},
 				modal: {
-					key: 'umbAuthModal',
-					backdropBackground: this.#firstTimeLoggingIn
-						? 'var(--umb-auth-backdrop, rgb(244, 244, 244))'
-						: 'var(--umb-auth-backdrop-timedout, rgba(244, 244, 244, 0.75))',
+					key: authModalKey,
+					backdropBackground: 'var(--umb-auth-backdrop, rgb(244, 244, 244))',
 				},
 			})
 			.onSubmit()
 			.catch(() => undefined);
 
-		if (!selected?.providerName) {
+		if (!selected?.success) {
 			return false;
 		}
 
-		this.#authContext.makeAuthorizationRequest(selected.providerName, selected.loginHint);
-
 		return true;
 	}
 
@@ -164,9 +133,6 @@ export class UmbAppAuthController extends UmbControllerBase {
 			throw new Error('[Fatal] Auth context is not available');
 		}
 
-		// Reinitialize the auth flow (load the state from local storage)
-		this.#authContext.setInitialState();
-
 		// The authorization flow is finished, so let the caller know if the user is authorized
 		return this.#authContext.getIsAuthorized();
 	}

src/apps/app/app-error.element.ts

@@ -32,6 +32,14 @@ export class UmbAppErrorElement extends UmbLitElement {
 	@property()
 	error?: unknown;
 
+	/**
+	 * Hide the back button
+	 *
+	 * @attr
+	 */
+	@property({ type: Boolean, attribute: 'hide-back-button' })
+	hideBackButton = false;
+
 	constructor() {
 		super();
 
@@ -168,11 +176,15 @@ export class UmbAppErrorElement extends UmbLitElement {
 
 		<div id="container" class="uui-text">
 			<uui-box id="box" headline-variant="h1">
-				<uui-button
-					slot="header-actions"
-					label=${this.localize.term('general_back')}
-					look="secondary"
-					@click=${() => (location.href = '')}></uui-button>
+				${this.hideBackButton
+					? nothing
+					: html`
+							<uui-button
+								slot="header-actions"
+								label=${this.localize.term('general_back')}
+								look="secondary"
+								@click=${() => (location.href = '')}></uui-button>
+						`}
 				<div slot="headline">
 					${this.errorHeadline
 						? this.errorHeadline

src/apps/app/app.element.ts

@@ -17,6 +17,7 @@ import {
 	UmbAppEntryPointExtensionInitializer,
 	umbExtensionsRegistry,
 } from '@umbraco-cms/backoffice/extension-registry';
+import { filter, first, firstValueFrom } from '@umbraco-cms/backoffice/external/rxjs';
 
 @customElement('umb-app')
 export class UmbAppElement extends UmbLitElement {
@@ -57,6 +58,27 @@ export class UmbAppElement extends UmbLitElement {
 			path: 'install',
 			component: () => import('../installer/installer.element.js'),
 		},
+		{
+			path: 'oauth_complete',
+			component: () => import('./app-error.element.js'),
+			setup: (component) => {
+				const searchParams = new URLSearchParams(window.location.search);
+				const hasCode = searchParams.has('code');
+				(component as UmbAppErrorElement).hideBackButton = true;
+				(component as UmbAppErrorElement).errorHeadline = this.localize.term('general_login');
+				(component as UmbAppErrorElement).errorMessage = hasCode
+					? this.localize.term('errors_externalLoginSuccess')
+					: this.localize.term('errors_externalLoginFailed');
+
+				// Complete the authorization request
+				this.#authContext?.completeAuthorizationRequest().finally(() => {
+					// If we don't have an opener, redirect to the root
+					if (!window.opener) {
+						history.replaceState(null, '', '');
+					}
+				});
+			},
+		},
 		{
 			path: 'upgrade',
 			component: () => import('../upgrader/upgrader.element.js'),
@@ -67,6 +89,17 @@ export class UmbAppElement extends UmbLitElement {
 			resolve: () => {
 				this.#authContext?.clearTokenStorage();
 				this.#authController.makeAuthorizationRequest('loggedOut');
+
+				// Listen for the user to be authorized
+				this.#authContext?.isAuthorized
+					.pipe(
+						filter((x) => !!x),
+						first(),
+					)
+					.subscribe(() => {
+						// Redirect to the root
+						history.replaceState(null, '', '');
+					});
 			},
 		},
 		{
@@ -86,7 +119,6 @@ export class UmbAppElement extends UmbLitElement {
 		OpenAPI.BASE = window.location.origin;
 
 		new UmbBundleExtensionInitializer(this, umbExtensionsRegistry);
-		new UmbAppEntryPointExtensionInitializer(this, umbExtensionsRegistry);
 
 		new UUIIconRegistryEssential().attach(this);
 
@@ -109,6 +141,8 @@ export class UmbAppElement extends UmbLitElement {
 
 		// Register public extensions (login extensions)
 		await new UmbServerExtensionRegistrator(this, umbExtensionsRegistry).registerPublicExtensions();
+		const initializer = new UmbAppEntryPointExtensionInitializer(this, umbExtensionsRegistry);
+		await firstValueFrom(initializer.loaded);
 
 		// Try to initialise the auth flow and get the runtime status
 		try {
@@ -161,12 +195,12 @@ export class UmbAppElement extends UmbLitElement {
 	}
 
 	#redirect() {
-		// If there is a ?code parameter in the url, then we are in the middle of the oauth flow
-		// and we need to complete the login (the authorization notifier will redirect after this is done
-		// essentially hitting this method again)
-		const queryParams = new URLSearchParams(window.location.search);
-		if (queryParams.has('code')) {
-			this.#authContext?.completeAuthorizationRequest();
+		const pathname = pathWithoutBasePath({ start: true, end: false });
+
+		// If we are on the oauth_complete or error page, we should not redirect
+		if (pathname === '/oauth_complete' || pathname === '/error') {
+			// Initialize the router
+			history.replaceState(null, '', location.href);
 			return;
 		}
 
@@ -184,8 +218,6 @@ export class UmbAppElement extends UmbLitElement {
 				break;
 
 			case RuntimeLevelModel.RUN: {
-				const pathname = pathWithoutBasePath({ start: true, end: false });
-
 				// If we are on installer or upgrade page, redirect to the root since we are in the RUN state
 				if (pathname === '/install' || pathname === '/upgrade') {
 					history.replaceState(null, '', '/');

src/assets/lang/da-dk.ts

@@ -712,7 +712,9 @@ export default {
 		unauthorized: 'Du har ikke tilladelse til at udføre denne handling',
 		userNotFound: 'Den angivne bruger blev ikke fundet i databasen',
 		externalInfoNotFound: 'Serveren kunne ikke kommunikere med den eksterne loginudbyder',
-		externalLoginFailed: 'Serveren mislykkedes i at logge ind med den eksterne loginudbyder',
+		externalLoginFailed:
+			'Serveren mislykkedes i at logge ind med den eksterne loginudbyder. Luk dette vindue og prøv igen.',
+		externalLoginSuccess: 'Du er nu logget ind. Du kan nu lukke dette vindue.',
 	},
 	openidErrors: {
 		accessDenied: 'Access denied',

src/assets/lang/en-us.ts

@@ -717,7 +717,9 @@ export default {
 		unauthorized: 'You were not authorized before performing this action',
 		userNotFound: 'The local user was not found in the database',
 		externalInfoNotFound: 'The server did not succeed in communicating with the external login provider',
-		externalLoginFailed: 'The server failed to authorize you against the external login provider',
+		externalLoginFailed:
+			'The server failed to authorize you against the external login provider. Please close the window and try again.',
+		externalLoginSuccess: 'You have successfully logged in. You may now close this window.',
 	},
 	openidErrors: {
 		accessDenied: 'Access denied',

src/assets/lang/en.ts

@@ -727,7 +727,9 @@ export default {
 		unauthorized: 'You were not authorized before performing this action',
 		userNotFound: 'The local user was not found in the database',
 		externalInfoNotFound: 'The server did not succeed in communicating with the external login provider',
-		externalLoginFailed: 'The server failed to authorize you against the external login provider',
+		externalLoginFailed:
+			'The server failed to authorize you against the external login provider. Please close the window and try again.',
+		externalLoginSuccess: 'You have successfully logged in. You may now close this window.',
 	},
 	openidErrors: {
 		accessDenied: 'Access denied',

src/external/openid/redirect_based_handler.ts

@@ -69,11 +69,11 @@ export class RedirectRequestHandler extends AuthorizationRequestHandler {
 			this.storageBackend.setItem(authorizationServiceConfigurationKey(handle), JSON.stringify(configuration.toJson())),
 		]);
 
-		persisted.then(() => {
+		return persisted.then(() => {
 			// make the redirect request
 			const url = this.buildRequestUrl(configuration, request);
 			log('Making a request to ', request, url);
-			this.locationLike.assign(url);
+			return url;
 		});
 	}
 

src/external/rxjs/index.ts

@@ -18,4 +18,5 @@ export {
 	filter,
 	startWith,
 	skip,
+	first,
 } from 'rxjs';

src/libs/extension-api/initializers/extension-initializer-base.ts

@@ -4,6 +4,7 @@ import type { SpecificManifestTypeOrManifestBase } from '../types/map.types.js';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 import type { UmbElement } from '@umbraco-cms/backoffice/element-api';
 import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
+import { ReplaySubject } from '@umbraco-cms/backoffice/external/rxjs';
 
 /**
  * Base class for extension initializers, which are responsible for loading and unloading extensions.
@@ -15,24 +16,30 @@ export abstract class UmbExtensionInitializerBase<
 	protected host;
 	protected extensionRegistry;
 	#extensionMap = new Map();
+	#loaded = new ReplaySubject<void>(1);
+	loaded = this.#loaded.asObservable();
 
 	constructor(host: UmbElement, extensionRegistry: UmbExtensionRegistry<T>, manifestType: Key) {
 		super(host);
 		this.host = host;
 		this.extensionRegistry = extensionRegistry;
-		this.observe(extensionRegistry.byType<Key, T>(manifestType), (extensions) => {
+		this.observe(extensionRegistry.byType<Key, T>(manifestType), async (extensions) => {
 			this.#extensionMap.forEach((existingExt) => {
 				if (!extensions.find((b) => b.alias === existingExt.alias)) {
 					this.unloadExtension(existingExt);
 					this.#extensionMap.delete(existingExt.alias);
 				}
 			});
 
-			extensions.forEach((extension) => {
-				if (this.#extensionMap.has(extension.alias)) return;
-				this.#extensionMap.set(extension.alias, extension);
-				this.instantiateExtension(extension);
-			});
+			await Promise.all(
+				extensions.map((extension) => {
+					if (this.#extensionMap.has(extension.alias)) return;
+					this.#extensionMap.set(extension.alias, extension);
+					return this.instantiateExtension(extension);
+				}),
+			);
+
+			this.#loaded.next();
 		});
 	}