diff --git a/.changeset/orange-trainers-allow.md b/.changeset/orange-trainers-allow.md
new file mode 100644
index 0000000000..9e2b148908
--- /dev/null
+++ b/.changeset/orange-trainers-allow.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-app': patch
+---
+
+chore: need to render additional root components outside of SignInWrapper
diff --git a/plugins/app/src/extensions/AppRoot.tsx b/plugins/app/src/extensions/AppRoot.tsx
index 014f9a1354..0b2546f199 100644
--- a/plugins/app/src/extensions/AppRoot.tsx
+++ b/plugins/app/src/extensions/AppRoot.tsx
@@ -16,7 +16,6 @@
import React, {
ComponentType,
- Fragment,
PropsWithChildren,
ReactNode,
useState,
@@ -96,14 +95,7 @@ export const AppRoot = createExtension({
}
let content: React.ReactNode = (
- <>
- {inputs.elements.map(el => (
-
- {el.get(coreExtensionData.reactElement)}
-
- ))}
- {inputs.children.get(coreExtensionData.reactElement)}
- >
+ <>{inputs.children.get(coreExtensionData.reactElement)}>
);
for (const wrapper of inputs.wrappers) {
@@ -120,6 +112,9 @@ export const AppRoot = createExtension({
RouterComponent={inputs.router?.get(
RouterBlueprint.dataRefs.component,
)}
+ extraElements={inputs.elements?.map(el =>
+ el.get(coreExtensionData.reactElement),
+ )}
>
{content}
,
@@ -187,6 +182,7 @@ export interface AppRouterProps {
children?: ReactNode;
SignInPageComponent?: ComponentType;
RouterComponent?: ComponentType>;
+ extraElements?: Array;
}
function DefaultRouter(props: PropsWithChildren<{}>) {
@@ -210,6 +206,7 @@ export function AppRouter(props: AppRouterProps) {
children,
SignInPageComponent,
RouterComponent = DefaultRouter,
+ extraElements = [],
} = props;
const configApi = useApi(configApiRef);
@@ -260,6 +257,7 @@ export function AppRouter(props: AppRouterProps) {
return (
+ {...extraElements}