diff --git a/changelog/unreleased/enhancement-route-meta-props b/changelog/unreleased/enhancement-route-meta-props
new file mode 100644
index 00000000000..5d175e25463
--- /dev/null
+++ b/changelog/unreleased/enhancement-route-meta-props
@@ -0,0 +1,8 @@
+Enhancement: Auth context in route meta props
+
+The route meta prop has been extended by a new "meta.authContext" property (can be one out of "anonymous", "user", "publicLink" or "hybrid"). With this, app developers can now define anonymous routes, which was hardcoded to a few well known route names before.
+Anonymous routes are rendered in the application layout, i.e. with the top bar, as the ownCloud Web Chrome should always be visible to the user (except for a few handpicked exceptions in the web runtime, which are still rendered in the plain layout).
+
+https://github.com/owncloud/web/issues/7234
+https://github.com/owncloud/web/issues/7863
+https://github.com/owncloud/web/pull/7874
diff --git a/packages/web-app-draw-io/src/index.js b/packages/web-app-draw-io/src/index.js
index eece4850391..0312bbe70e1 100644
--- a/packages/web-app-draw-io/src/index.js
+++ b/packages/web-app-draw-io/src/index.js
@@ -7,7 +7,7 @@ const routes = [
     path: '/:driveAliasAndItem*',
     component: App,
     meta: {
-      auth: false,
+      authContext: 'hybrid',
       patchCleanPath: true
     }
   }
diff --git a/packages/web-app-external/src/index.js b/packages/web-app-external/src/index.js
index d7d87fef322..92c6449d552 100644
--- a/packages/web-app-external/src/index.js
+++ b/packages/web-app-external/src/index.js
@@ -13,7 +13,7 @@ const routes = [
     path: '/:driveAliasAndItem*',
     component: App,
     meta: {
-      auth: false,
+      authContext: 'hybrid',
       patchCleanPath: true
     }
   }
diff --git a/packages/web-app-files/src/router/common.ts b/packages/web-app-files/src/router/common.ts
index cf91457fcfb..74e22b9ddb6 100644
--- a/packages/web-app-files/src/router/common.ts
+++ b/packages/web-app-files/src/router/common.ts
@@ -25,6 +25,7 @@ export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
         path: 'list/:page?',
         component: components.SearchResults,
         meta: {
+          authContext: 'user',
           title: $gettext('Search results'),
           contextQueryItems: ['term', 'provider']
         }
@@ -40,6 +41,7 @@ export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
         path: '',
         component: components.Favorites,
         meta: {
+          authContext: 'user',
           title: $gettext('Favorite files')
         }
       }
diff --git a/packages/web-app-files/src/router/deprecated.ts b/packages/web-app-files/src/router/deprecated.ts
index c7f189cff92..96a50c20b76 100644
--- a/packages/web-app-files/src/router/deprecated.ts
+++ b/packages/web-app-files/src/router/deprecated.ts
@@ -19,7 +19,7 @@ const deprecatedRedirect = (routeConfig: {
   redirect: (to: Route) => Location
 }): RouteConfig => {
   return {
-    meta: routeConfig.meta,
+    meta: { ...routeConfig.meta, authContext: 'anonymous' }, // authContext belongs to the redirect target, not to the redirect itself.
     path: routeConfig.path,
     redirect: (to) => {
       const location = routeConfig.redirect(to)
@@ -82,9 +82,6 @@ export const buildRoutes = (): RouteConfig[] =>
     },
     {
       path: '/public/list/:item*',
-      meta: {
-        auth: false
-      },
       redirect: (to) => createLocationPublic('files-public-link', to)
     },
     {
@@ -93,9 +90,6 @@ export const buildRoutes = (): RouteConfig[] =>
     },
     {
       path: '/public-link/:token',
-      meta: {
-        auth: false
-      },
       redirect: (to) => ({ name: 'resolvePublicLink', params: { token: to.params.token } })
     }
   ].map(deprecatedRedirect)
diff --git a/packages/web-app-files/src/router/public.ts b/packages/web-app-files/src/router/public.ts
index ab638976a90..706ee7a3d2c 100644
--- a/packages/web-app-files/src/router/public.ts
+++ b/packages/web-app-files/src/router/public.ts
@@ -28,7 +28,7 @@ export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
         path: ':driveAliasAndItem*',
         component: components.Spaces.DriveResolver,
         meta: {
-          auth: false,
+          authContext: 'publicLink',
           patchCleanPath: true
         }
       }
@@ -46,7 +46,7 @@ export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
         path: ':token?',
         component: components.FilesDrop,
         meta: {
-          auth: false,
+          authContext: 'publicLink',
           title: $gettext('Public file upload')
         }
       }
diff --git a/packages/web-app-files/src/router/shares.ts b/packages/web-app-files/src/router/shares.ts
index 7e4690457b6..a4f1c87cc4a 100644
--- a/packages/web-app-files/src/router/shares.ts
+++ b/packages/web-app-files/src/router/shares.ts
@@ -28,6 +28,7 @@ export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
         path: 'with-me',
         component: components.Shares.SharedWithMe,
         meta: {
+          authContext: 'user',
           title: $gettext('Files shared with me')
         }
       },
@@ -36,6 +37,7 @@ export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
         path: 'with-others',
         component: components.Shares.SharedWithOthers,
         meta: {
+          authContext: 'user',
           title: $gettext('Files shared with others')
         }
       },
@@ -44,6 +46,7 @@ export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
         path: 'via-link',
         component: components.Shares.SharedViaLink,
         meta: {
+          authContext: 'user',
           title: $gettext('Files shared via link')
         }
       }
diff --git a/packages/web-app-files/src/router/spaces.ts b/packages/web-app-files/src/router/spaces.ts
index 3f84b9343b7..f3d5eb5bde0 100644
--- a/packages/web-app-files/src/router/spaces.ts
+++ b/packages/web-app-files/src/router/spaces.ts
@@ -27,6 +27,7 @@ export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
         name: locationSpacesProjects.name,
         component: components.Spaces.Projects,
         meta: {
+          authContext: 'user',
           title: $gettext('Spaces')
         }
       },
@@ -35,6 +36,7 @@ export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
         name: locationSpacesGeneric.name,
         component: components.Spaces.DriveResolver,
         meta: {
+          authContext: 'user',
           patchCleanPath: true
         }
       }
diff --git a/packages/web-app-files/src/router/trash.ts b/packages/web-app-files/src/router/trash.ts
index 8b9daaf2e5a..b770f33ce39 100644
--- a/packages/web-app-files/src/router/trash.ts
+++ b/packages/web-app-files/src/router/trash.ts
@@ -21,6 +21,7 @@ export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
         path: ':driveAliasAndItem*',
         component: components.Spaces.DriveResolver,
         meta: {
+          authContext: 'user',
           patchCleanPath: true
         }
       }
diff --git a/packages/web-app-pdf-viewer/src/index.js b/packages/web-app-pdf-viewer/src/index.js
index 2a7ad1ccb31..ec17da753c6 100644
--- a/packages/web-app-pdf-viewer/src/index.js
+++ b/packages/web-app-pdf-viewer/src/index.js
@@ -12,7 +12,7 @@ const routes = [
     component: App,
     name: 'pdf-viewer',
     meta: {
-      auth: false,
+      authContext: 'hybrid',
       title: $gettext('PDF Viewer'),
       patchCleanPath: true
     }
diff --git a/packages/web-app-preview/src/index.js b/packages/web-app-preview/src/index.js
index 22c3d529531..18167c46cc9 100644
--- a/packages/web-app-preview/src/index.js
+++ b/packages/web-app-preview/src/index.js
@@ -14,7 +14,7 @@ const routes = [
     component: App,
     name: 'media',
     meta: {
-      auth: false,
+      authContext: 'hybrid',
       title: $gettext('Preview'),
       patchCleanPath: true
     }
diff --git a/packages/web-app-search/src/index.ts b/packages/web-app-search/src/index.ts
index a3cc316ddfa..1d4527d6b44 100644
--- a/packages/web-app-search/src/index.ts
+++ b/packages/web-app-search/src/index.ts
@@ -35,6 +35,7 @@ export default {
           path: 'list/:page?',
           component: List,
           meta: {
+            authContext: 'user',
             contextQueryItems: ['term', 'provider']
           }
         }
diff --git a/packages/web-app-text-editor/src/index.js b/packages/web-app-text-editor/src/index.js
index be9014c2d03..f495d6470ea 100644
--- a/packages/web-app-text-editor/src/index.js
+++ b/packages/web-app-text-editor/src/index.js
@@ -14,8 +14,8 @@ const routes = [
     component: App,
     name: 'text-editor',
     meta: {
+      authContext: 'hybrid',
       title: $gettext('Text Editor'),
-      auth: false,
       patchCleanPath: true
     }
   }
diff --git a/packages/web-app-user-management/src/index.js b/packages/web-app-user-management/src/index.js
index 7662c6c8e52..353b07d3821 100644
--- a/packages/web-app-user-management/src/index.js
+++ b/packages/web-app-user-management/src/index.js
@@ -25,6 +25,7 @@ const routes = [
     name: 'user-management-users',
     component: Users,
     meta: {
+      authContext: 'user',
       title: $gettext('Users')
     }
   },
@@ -33,6 +34,7 @@ const routes = [
     name: 'user-management-groups',
     component: Groups,
     meta: {
+      authContext: 'user',
       title: $gettext('Groups')
     }
   }
diff --git a/packages/web-pkg/src/composables/router/types.ts b/packages/web-pkg/src/composables/router/types.ts
index ac707736603..f0880de49b6 100644
--- a/packages/web-pkg/src/composables/router/types.ts
+++ b/packages/web-pkg/src/composables/router/types.ts
@@ -1,3 +1,5 @@
+import { RouteMeta } from 'vue-router'
+
 type Dictionary<T> = { [key: string]: T }
 
 export type QueryValue = string | (string | null)[]
@@ -5,3 +7,13 @@ export type LocationQuery = Dictionary<QueryValue>
 
 export type ParamValue = string
 export type LocationParams = Dictionary<ParamValue>
+
+export const authContextValues = ['anonymous', 'user', 'publicLink', 'hybrid'] as const
+export type AuthContext = typeof authContextValues[number]
+
+export interface WebRouteMeta extends RouteMeta {
+  title?: string
+  authContext?: AuthContext
+  patchCleanPath?: boolean
+  contextQueryItems?: string[]
+}
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index adaf7941e5d..9806c01086e 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -49,7 +49,7 @@ import LayoutLoading from './layouts/Loading.vue'
 import LayoutPlain from './layouts/Plain.vue'
 import { getBackendVersion, getWebVersion } from './container/versions'
 import { defineComponent } from '@vue/composition-api'
-import { isPublicLinkContext, isUserContext, isAuthenticationRequired } from './router'
+import { isPublicLinkContext, isUserContext } from './router'
 import { additionalTranslations } from './helpers/additionalTranslations' // eslint-disable-line
 import { eventBus } from 'web-pkg/src/services'
 
@@ -70,17 +70,23 @@ export default defineComponent({
     ...mapGetters(['configuration', 'capabilities', 'getSettingsValue']),
     ...mapGetters('runtime/auth', ['isUserContextReady', 'isPublicLinkContextReady']),
     layout() {
-      if (!this.$route.name || !isAuthenticationRequired(this.$router, this.$route)) {
+      const plainLayoutRoutes = [
+        'login',
+        'logout',
+        'oidcCallback',
+        'oidcSilentRedirect',
+        'resolvePublicLink',
+        'accessDenied'
+      ]
+      if (!this.$route.name || plainLayoutRoutes.includes(this.$route.name)) {
         return LayoutPlain
       }
-
       if (isPublicLinkContext(this.$router, this.$route)) {
         return this.isPublicLinkContextReady ? LayoutApplication : LayoutLoading
       }
       if (isUserContext(this.$router, this.$route)) {
         return this.isUserContextReady ? LayoutApplication : LayoutLoading
       }
-
       return LayoutApplication
     },
     favicon() {
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index cb7d557ffa9..cfed206f6d3 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -9,7 +9,7 @@
     <div id="web-content-main" class="oc-px-s oc-pb-s">
       <div class="app-container oc-flex">
         <sidebar-nav v-if="isSidebarVisible" class="app-navigation" :nav-items="sidebarNavItems" />
-        <app-loading-spinner v-if="areSpacesLoading" />
+        <app-loading-spinner v-if="isLoading" />
         <template v-else>
           <router-view
             v-for="name in ['default', 'app', 'fullscreen']"
@@ -37,11 +37,12 @@ import UploadInfo from '../components/UploadInfo.vue'
 import {
   useActiveApp,
   useRoute,
+  useRouteMeta,
   useSpacesLoading,
   useStore,
   useUserContext
 } from 'web-pkg/src/composables'
-import { watch, defineComponent } from '@vue/composition-api'
+import { computed, defineComponent, unref, watch } from '@vue/composition-api'
 
 export default defineComponent({
   name: 'ApplicationLayout',
@@ -73,8 +74,17 @@ export default defineComponent({
       },
       { immediate: true }
     )
+
+    const requiredAuthContext = useRouteMeta('authContext')
+    const { areSpacesLoading } = useSpacesLoading({ store })
+    const isLoading = computed(() => {
+      if (unref(requiredAuthContext) === 'anonymous') {
+        return false
+      }
+      return unref(areSpacesLoading)
+    })
     return {
-      ...useSpacesLoading({ store }),
+      isLoading,
       activeApp: useActiveApp(),
       isUserContext: useUserContext({ store })
     }
diff --git a/packages/web-runtime/src/layouts/Plain.vue b/packages/web-runtime/src/layouts/Plain.vue
index 5dcf63037ac..56dd366f20d 100644
--- a/packages/web-runtime/src/layouts/Plain.vue
+++ b/packages/web-runtime/src/layouts/Plain.vue
@@ -1,13 +1,35 @@
 <template>
-  <div>
+  <div
+    class="oc-login oc-height-viewport"
+    :style="{ backgroundImage: 'url(' + backgroundImg + ')' }"
+  >
+    <h1 class="oc-invisible-sr" v-text="pageTitle" />
     <router-view />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+import { computed, defineComponent, unref } from '@vue/composition-api'
+import { useRouteMeta, useStore, useTranslations } from 'web-pkg'
 
 export default defineComponent({
-  name: 'PlainLayout'
+  name: 'PlainLayout',
+  setup() {
+    const store = useStore()
+    const { $gettext } = useTranslations()
+    const title = useRouteMeta('title')
+
+    const pageTitle = computed(() => {
+      return $gettext(unref(title))
+    })
+    const backgroundImg = computed(() => {
+      return store.getters.configuration?.currentTheme?.loginPage?.backgroundImg
+    })
+
+    return {
+      pageTitle,
+      backgroundImg
+    }
+  }
 })
 </script>
diff --git a/packages/web-runtime/src/pages/accessDenied.vue b/packages/web-runtime/src/pages/accessDenied.vue
index 7497e585cd3..1cda5ce3851 100644
--- a/packages/web-runtime/src/pages/accessDenied.vue
+++ b/packages/web-runtime/src/pages/accessDenied.vue
@@ -1,63 +1,63 @@
 <template>
-  <div
-    class="oc-login oc-height-viewport"
-    :style="{ backgroundImage: 'url(' + backgroundImg + ')' }"
-  >
-    <h1 class="oc-invisible-sr" v-text="pageTitle" />
-    <div class="oc-login-card-wrapper oc-height-viewport oc-flex oc-flex-center oc-flex-middle">
-      <div class="oc-login-card">
-        <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
-        <div class="oc-login-card-body oc-width-medium">
-          <h2 class="oc-login-card-title" v-text="cardTitle" />
-          <p v-text="cardHint" />
-        </div>
+  <div class="oc-height-viewport oc-flex oc-flex-column oc-flex-center oc-flex-middle">
+    <div class="oc-login-card">
+      <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
+      <div class="oc-login-card-body oc-width-medium">
+        <h2 class="oc-login-card-title" v-text="cardTitle" />
+        <p v-text="cardHint" />
+      </div>
+      <div class="oc-login-card-footer oc-pt-rm">
+        <p>
+          {{ footerSlogan }}
+        </p>
       </div>
-      <oc-button
-        id="exitAnchor"
-        type="router-link"
-        class="oc-mt-m oc-width-medium"
-        :to="{ name: 'login' }"
-        size="large"
-        appearance="filled"
-        variation="primary"
-        v-text="navigateToLoginText"
-      />
     </div>
+    <oc-button
+      id="exitAnchor"
+      type="router-link"
+      class="oc-mt-m oc-width-medium"
+      :to="{ name: 'login' }"
+      size="large"
+      appearance="filled"
+      variation="primary"
+      v-text="navigateToLoginText"
+    />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
-import { mapGetters } from 'vuex'
+import { computed, defineComponent } from '@vue/composition-api'
+import { useStore, useTranslations } from 'web-pkg'
 
 export default defineComponent({
   name: 'AccessDeniedPage',
-  computed: {
-    ...mapGetters(['configuration']),
-    pageTitle() {
-      return this.$gettext(this.$route.meta.title)
-    },
-    cardTitle() {
-      return this.$gettext('Logged out')
-    },
-    cardHint() {
-      return this.$gettext('You were automatically logged out for security reasons.')
-    },
-    navigateToLoginText() {
-      return this.$gettext('Log in again')
-    },
-    logoImg() {
-      return this.configuration.currentTheme.logo.login
-    },
-    backgroundImg() {
-      return this.configuration.currentTheme.loginPage.backgroundImg
+  setup() {
+    const store = useStore()
+    const { $gettext } = useTranslations()
+
+    const logoImg = computed(() => {
+      return store.getters.configuration.currentTheme.logo.login
+    })
+    const cardTitle = computed(() => {
+      return $gettext('Logged out')
+    })
+    const cardHint = computed(() => {
+      return $gettext('You were automatically logged out for security reasons.')
+    })
+    const footerSlogan = computed(() => {
+      return store.getters.configuration.currentTheme.general.slogan
+    })
+    const navigateToLoginText = computed(() => {
+      return $gettext('Log in again')
+    })
+
+    return {
+      logoImg,
+      cardTitle,
+      cardHint,
+      footerSlogan,
+      navigateToLoginText
     }
   }
 })
 </script>
-
-<style lang="scss" scoped>
-.oc-login-card-wrapper {
-  flex-flow: column;
-}
-</style>
diff --git a/packages/web-runtime/src/pages/login.vue b/packages/web-runtime/src/pages/login.vue
index 0fe6ddb7910..f3d3384bfa7 100644
--- a/packages/web-runtime/src/pages/login.vue
+++ b/packages/web-runtime/src/pages/login.vue
@@ -1,91 +1,76 @@
 <template>
-  <div
-    v-if="initialized"
-    class="oc-login oc-height-viewport"
-    :style="{ backgroundImage: 'url(' + backgroundImg + ')' }"
-  >
-    <h1 class="oc-invisible-sr">{{ pageTitle }}</h1>
-    <div class="oc-login-card oc-position-center">
-      <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
-      <div class="oc-login-card-body">
-        <h2 class="oc-login-card-title">
-          <translate :translate-params="{ productName: $_productName }"
-            >Welcome to %{productName}</translate
-          >
-        </h2>
-        <p v-translate>
-          Please click the button below to authenticate and get access to your data.
-        </p>
-        <oc-button
-          id="authenticate"
-          size="large"
-          variation="primary"
-          appearance="filled"
-          class="oc-login-authorize-button"
-          @click="performLogin"
-        >
-          <translate>Login</translate>
-        </oc-button>
-      </div>
-      <div class="oc-login-card-footer">
-        <p>
-          {{ configuration.currentTheme.general.slogan }}
-        </p>
+  <div class="oc-width-1-1 oc-height-1-1">
+    <app-loading-spinner v-if="autoRedirect" />
+    <div v-else class="oc-height-viewport oc-flex oc-flex-column oc-flex-center oc-flex-middle">
+      <div class="oc-login-card">
+        <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
+        <div class="oc-login-card-body oc-width-medium">
+          <h2 class="oc-login-card-title">
+            <translate :translate-params="{ productName }">Welcome to %{productName}</translate>
+          </h2>
+          <p v-translate>
+            Please click the button below to authenticate and get access to your data.
+          </p>
+        </div>
+        <div class="oc-login-card-footer oc-pt-rm">
+          <p>{{ footerSlogan }}</p>
+        </div>
       </div>
+      <oc-button
+        id="authenticate"
+        size="large"
+        variation="primary"
+        appearance="filled"
+        class="oc-mt-m oc-width-medium oc-login-authorize-button"
+        @click="performLogin"
+      >
+        <translate>Login</translate>
+      </oc-button>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { mapGetters } from 'vuex'
 import { authService } from '../services/auth'
-import { queryItemAsString, useRouteQuery } from 'web-pkg/src/composables'
-import { defineComponent } from '@vue/composition-api'
+import { queryItemAsString, useRouteQuery, useStore } from 'web-pkg/src/composables'
+import { computed, defineComponent, unref } from '@vue/composition-api'
+import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 
 export default defineComponent({
   name: 'LoginPage',
-  setup() {
-    return {
-      redirectUrl: useRouteQuery('redirectUrl')
-    }
+  components: {
+    AppLoadingSpinner
   },
-  data() {
-    return {
-      loading: false,
-      initialized: false
-    }
-  },
-  computed: {
-    ...mapGetters(['configuration']),
-
-    pageTitle() {
-      return this.$gettext(this.$route.meta.title)
-    },
-
-    $_productName() {
-      return this.configuration.currentTheme.general.name
-    },
-
-    logoImg() {
-      return this.configuration.currentTheme.logo.login
-    },
+  setup() {
+    const store = useStore()
 
-    backgroundImg() {
-      return this.configuration.currentTheme.loginPage.backgroundImg
+    const redirectUrl = useRouteQuery('redirectUrl')
+    const performLogin = () => {
+      authService.loginUser(queryItemAsString(unref(redirectUrl)))
     }
-  },
-
-  created() {
-    if (this.configuration.currentTheme.loginPage.autoRedirect) {
-      this.performLogin()
-    } else {
-      this.initialized = true
+    const autoRedirect = computed(() => {
+      return store.getters.configuration.currentTheme.loginPage.autoRedirect
+    })
+    if (unref(autoRedirect)) {
+      performLogin()
     }
-  },
 
-  methods: {
-    performLogin() {
-      authService.loginUser(queryItemAsString(this.redirectUrl))
+    const productName = computed(() => {
+      return store.getters.configuration.currentTheme.general.name
+    })
+    const logoImg = computed(() => {
+      return store.getters.configuration.currentTheme.logo.login
+    })
+    const footerSlogan = computed(() => {
+      return store.getters.configuration.currentTheme.general.slogan
+    })
+
+    return {
+      autoRedirect,
+      productName,
+      logoImg,
+      footerSlogan,
+      performLogin
     }
   }
 })
diff --git a/packages/web-runtime/src/pages/logout.vue b/packages/web-runtime/src/pages/logout.vue
index 3309441452b..e3186c4d88b 100644
--- a/packages/web-runtime/src/pages/logout.vue
+++ b/packages/web-runtime/src/pages/logout.vue
@@ -1,15 +1,52 @@
 <template>
-  <div>
-    <p v-translate>Please wait while you're being logged out.</p>
+  <div class="oc-login-card oc-position-center">
+    <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
+    <div class="oc-login-card-body oc-width-medium">
+      <h2 class="oc-login-card-title" v-text="cardTitle" />
+      <p v-text="cardHint" />
+    </div>
+    <div class="oc-login-card-footer oc-pt-rm">
+      <p>
+        {{ footerSlogan }}
+      </p>
+    </div>
   </div>
 </template>
-<script>
-import { authService } from '../services/auth'
-export default {
+<script lang="ts">
+import { computed, defineComponent } from '@vue/composition-api'
+import { useRouter, useStore, useTranslations } from 'web-pkg'
+import { authService } from 'web-runtime/src/services/auth'
+
+export default defineComponent({
   name: 'LogoutPage',
-  async created() {
-    await authService.logoutUser()
-    this.router.push({ name: 'login' })
+  setup() {
+    const router = useRouter()
+    const store = useStore()
+    const { $gettext } = useTranslations()
+
+    authService.logoutUser().then(() => {
+      router.push({ name: 'login' })
+    })
+
+    const logoImg = computed(() => {
+      return store.getters.configuration.currentTheme.logo.login
+    })
+    const cardTitle = computed(() => {
+      return $gettext('Logout in progress')
+    })
+    const cardHint = computed(() => {
+      return $gettext("Please wait while you're being logged out.")
+    })
+    const footerSlogan = computed(() => {
+      return store.getters.configuration.currentTheme.general.slogan
+    })
+
+    return {
+      logoImg,
+      cardTitle,
+      cardHint,
+      footerSlogan
+    }
   }
-}
+})
 </script>
diff --git a/packages/web-runtime/src/pages/missingOrInvalidConfig.vue b/packages/web-runtime/src/pages/missingOrInvalidConfig.vue
index 85237c32bc4..3268772c848 100644
--- a/packages/web-runtime/src/pages/missingOrInvalidConfig.vue
+++ b/packages/web-runtime/src/pages/missingOrInvalidConfig.vue
@@ -1,51 +1,54 @@
 <template>
-  <div id="Web" class="oc-height-1-1" :style="{ backgroundImage: 'url(' + backgroundImg + ')' }">
-    <div class="oc-login oc-height-viewport">
-      <div class="oc-login-card oc-position-center">
-        <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
-        <div class="oc-login-card-body">
-          <h1 v-translate class="oc-login-card-title">Missing or invalid config</h1>
-          <p v-translate>Please check if the file config.json exists and is correct.</p>
-          <p v-translate>Also, make sure to check the browser console for more information.</p>
-        </div>
-        <div class="oc-login-card-footer">
-          <p>
-            <translate>For help visit our</translate>
-            <a v-translate href="https://owncloud.dev/clients/web" target="_blank">documentation</a>
-            <translate>or join our</translate>
-            <a v-translate href="https://talk.owncloud.com/channel/web" target="_blank">chat</a>.
-          </p>
-        </div>
-      </div>
+  <div class="oc-login-card oc-position-center">
+    <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
+    <div class="oc-login-card-body">
+      <h1 v-translate class="oc-login-card-title">Missing or invalid config</h1>
+      <p v-translate>Please check if the file config.json exists and is correct.</p>
+      <p v-translate>Also, make sure to check the browser console for more information.</p>
+    </div>
+    <div class="oc-login-card-footer">
+      <p>
+        <translate>For help visit our</translate>
+        <a v-translate href="https://owncloud.dev/clients/web" target="_blank">documentation</a>
+        <translate>or join our</translate>
+        <a v-translate href="https://talk.owncloud.com/channel/web" target="_blank">chat</a>.
+      </p>
+      <p>
+        {{ footerSlogan }}
+      </p>
     </div>
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script lang="ts">
 import { getBackendVersion, getWebVersion } from '../container/versions'
+import { computed, defineComponent } from '@vue/composition-api'
+import { useStore } from 'web-pkg'
 
-export default {
+export default defineComponent({
   name: 'MissingConfigPage',
+  setup() {
+    const store = useStore()
 
-  computed: {
-    ...mapGetters(['configuration']),
-
-    backgroundImg() {
-      return this.configuration.currentTheme.loginPage.backgroundImg
-    },
-
-    logoImg() {
-      return this.configuration.currentTheme.logo.login
-    },
+    const logoImg = computed(() => {
+      return store.getters.configuration?.currentTheme?.logo?.login
+    })
+    const footerSlogan = computed(() => {
+      return store.getters.configuration?.currentTheme?.general?.slogan
+    })
+    const favicon = computed(() => {
+      return store.getters.configuration?.currentTheme?.logo?.favicon
+    })
 
-    favicon() {
-      return this.configuration.currentTheme.logo.favicon
+    return {
+      logoImg,
+      footerSlogan,
+      favicon
     }
   },
 
   metaInfo() {
-    const metaInfo = {}
+    const metaInfo: any = {}
     if (this.favicon) {
       metaInfo.link = [{ rel: 'icon', href: this.favicon }]
     }
@@ -58,5 +61,5 @@ export default {
     metaInfo.meta = [metaGenerator]
     return metaInfo
   }
-}
+})
 </script>
diff --git a/packages/web-runtime/src/pages/oidcCallback.vue b/packages/web-runtime/src/pages/oidcCallback.vue
index da860832c0a..4c954e829ba 100644
--- a/packages/web-runtime/src/pages/oidcCallback.vue
+++ b/packages/web-runtime/src/pages/oidcCallback.vue
@@ -1,68 +1,61 @@
 <template>
-  <div
-    class="oc-login oc-height-viewport"
-    :style="{ backgroundImage: 'url(' + backgroundImg + ')' }"
-  >
-    <h1 class="oc-invisible-sr">{{ pageTitle }}</h1>
-    <div class="oc-login-card oc-position-center">
-      <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
-      <div v-show="error" class="oc-login-card-body">
-        <h2 v-translate class="oc-login-card-title">Authentication failed</h2>
-        <p v-translate>Please contact the administrator if this error persists.</p>
-      </div>
-      <div v-show="!error" class="oc-login-card-body">
-        <h3 v-translate class="oc-login-card-title">Logging you in</h3>
-        <p v-translate>Please wait, you are being redirected.</p>
-      </div>
-      <div class="oc-login-card-footer">
-        <p>{{ configuration.currentTheme.general.slogan }}</p>
-      </div>
+  <div class="oc-login-card oc-position-center">
+    <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
+    <div v-show="error" class="oc-login-card-body">
+      <h2 v-translate class="oc-login-card-title">Authentication failed</h2>
+      <p v-translate>Please contact the administrator if this error persists.</p>
+    </div>
+    <div v-show="!error" class="oc-login-card-body">
+      <h3 v-translate class="oc-login-card-title">Logging you in</h3>
+      <p v-translate>Please wait, you are being redirected.</p>
+    </div>
+    <div class="oc-login-card-footer oc-pt-rm">
+      <p>{{ footerSlogan }}</p>
     </div>
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-import { authService } from '../services/auth'
+<script lang="ts">
+import { computed, defineComponent, onMounted, ref, unref } from '@vue/composition-api'
+import { useRoute, useStore } from 'web-pkg'
+import { authService } from 'web-runtime/src/services/auth'
 
-export default {
+export default defineComponent({
   name: 'OidcCallbackPage',
-  data() {
-    return {
-      error: false
-    }
-  },
-
-  computed: {
-    ...mapGetters(['configuration']),
-
-    pageTitle() {
-      return this.$gettext(this.$route.meta.title)
-    },
+  setup() {
+    const store = useStore()
+
+    const error = ref(false)
+
+    const logoImg = computed(() => {
+      return store.getters.configuration.currentTheme.logo.login
+    })
+    const footerSlogan = computed(() => {
+      return store.getters.configuration.currentTheme.general.slogan
+    })
+
+    const route = useRoute()
+    onMounted(() => {
+      if (unref(route).query.error) {
+        error.value = true
+        console.warn(
+          `OAuth error: ${unref(route).query.error} - ${unref(route).query.error_description}`
+        )
+        return
+      }
+
+      if (unref(route).path === '/oidc-silent-redirect') {
+        authService.signInSilentCallback()
+      } else {
+        authService.signInCallback()
+      }
+    })
 
-    backgroundImg() {
-      return this.configuration.currentTheme.loginPage.backgroundImg
-    },
-
-    logoImg() {
-      return this.configuration.currentTheme.logo.login
-    }
-  },
-
-  mounted() {
-    if (this.$route.query.error) {
-      this.error = true
-      console.warn(
-        'OAuth error: ' + this.$route.query.error + ' - ' + this.$route.query.error_description
-      )
-      return
-    }
-
-    if (this.$route.path === '/oidc-silent-redirect') {
-      authService.signInSilentCallback()
-    } else {
-      authService.signInCallback()
+    return {
+      error,
+      logoImg,
+      footerSlogan
     }
   }
-}
+})
 </script>
diff --git a/packages/web-runtime/src/pages/resolvePrivateLink.vue b/packages/web-runtime/src/pages/resolvePrivateLink.vue
index a1e0cc8ce62..c2590f42702 100644
--- a/packages/web-runtime/src/pages/resolvePrivateLink.vue
+++ b/packages/web-runtime/src/pages/resolvePrivateLink.vue
@@ -1,50 +1,52 @@
 <template>
-  <div class="oc-height-1-1 oc-link-resolve">
-    <div class="oc-link-resolve-wrapper oc-flex oc-flex-center oc-flex-middle">
-      <h1 class="oc-invisible-sr">{{ pageTitle }}</h1>
-      <div class="oc-card oc-text-center oc-width-medium">
-        <template v-if="loading">
-          <div class="oc-card-body">
-            <h2 key="private-link-loading">
-              <translate>Resolving private link…</translate>
-            </h2>
-            <oc-spinner class="oc-mt-m" :aria-hidden="true" />
-          </div>
-        </template>
-        <template v-else-if="errorMessage">
-          <div class="oc-card-body oc-link-resolve-error-message">
-            <h2 v-if="isUnacceptedShareError" class="oc-link-resolve-error-title">
-              {{ resource.name }}
-            </h2>
-            <h2 v-else key="private-link-error" class="oc-link-resolve-error-title">
-              <translate>An error occurred while resolving the private link</translate>
-            </h2>
-            <p>{{ errorMessage }}</p>
-            <p
-              v-if="isUnacceptedShareError"
-              v-text="$gettext('Note: You can reload this page after you accept the share.')"
-            ></p>
-          </div>
-        </template>
-      </div>
-      <oc-button
-        v-if="isUnacceptedShareError"
-        type="router-link"
-        variation="primary"
-        appearance="filled"
-        target="_blank"
-        class="oc-mt-m oc-text-center oc-width-medium"
-        :to="sharedWithMeRoute"
-      >
-        <span class="text" v-text="openSharedWithMeLabel" />
-      </oc-button>
+  <div
+    class="oc-link-resolve oc-height-viewport oc-flex oc-flex-column oc-flex-center oc-flex-middle"
+  >
+    <div class="oc-card oc-text-center oc-width-large">
+      <template v-if="loading">
+        <div class="oc-card-header">
+          <h2 key="private-link-loading">
+            <translate>Resolving private link…</translate>
+          </h2>
+        </div>
+        <div class="oc-card-body">
+          <oc-spinner :aria-hidden="true" />
+        </div>
+      </template>
+      <template v-else-if="errorMessage">
+        <div class="oc-card-header oc-link-resolve-error-title">
+          <h2 v-if="isUnacceptedShareError">
+            {{ resource.name }}
+          </h2>
+          <h2 v-else key="private-link-error">
+            <translate>An error occurred while resolving the private link</translate>
+          </h2>
+        </div>
+        <div class="oc-card-body oc-link-resolve-error-message">
+          <p class="oc-text-xlarge">{{ errorMessage }}</p>
+          <p
+            v-if="isUnacceptedShareError"
+            v-text="$gettext('Note: You can reload this page after you accept the share.')"
+          />
+        </div>
+      </template>
     </div>
+    <oc-button
+      v-if="isUnacceptedShareError"
+      type="router-link"
+      variation="primary"
+      appearance="filled"
+      target="_blank"
+      class="oc-mt-m oc-text-center oc-width-medium"
+      :to="sharedWithMeRoute"
+    >
+      <span class="text" v-text="openSharedWithMeLabel" />
+    </oc-button>
   </div>
 </template>
 
 <script lang="ts">
 import {
-  useRoute,
   useRouteParam,
   useStore,
   useTranslations,
@@ -75,7 +77,6 @@ export default defineComponent({
   setup() {
     const store = useStore()
     const router = useRouter()
-    const route = useRoute()
     const id = useRouteParam('fileId')
     const { $gettext, $gettextInterpolate } = useTranslations()
     const hasSpaces = useCapabilitySpacesEnabled(store)
@@ -83,10 +84,6 @@ export default defineComponent({
     const sharedParentResource: Ref<Resource> = ref()
     const isUnacceptedShareError = ref(false)
 
-    const pageTitle = computed(() => $gettext(unref(route).meta.title))
-    const configuration = computed(() => {
-      return store.getters.configuration
-    })
     const clientService = useClientService()
 
     onMounted(() => {
@@ -146,7 +143,7 @@ export default defineComponent({
         params,
         query: { ...query, ...(scrollTo && { scrollTo }) }
       }
-      return router.push(location)
+      router.push(location)
     })
 
     const getMatchingSpace = (id) => {
@@ -215,8 +212,6 @@ export default defineComponent({
     })
 
     return {
-      pageTitle,
-      configuration,
       errorMessage,
       loading,
       resource,
@@ -230,18 +225,12 @@ export default defineComponent({
 
 <style lang="scss">
 .oc-link-resolve {
-  &-wrapper {
-    flex-flow: column;
-    min-height: 96vh;
-  }
-
   .oc-card {
     background: var(--oc-color-background-highlight);
     border-radius: 15px;
   }
 
-  h2 {
-    font-size: var(--oc-font-size-medium);
+  .oc-card-header h2 {
     margin: 0;
   }
 }
diff --git a/packages/web-runtime/src/pages/resolvePublicLink.vue b/packages/web-runtime/src/pages/resolvePublicLink.vue
index 8f3082cb22b..d0a71274a65 100644
--- a/packages/web-runtime/src/pages/resolvePublicLink.vue
+++ b/packages/web-runtime/src/pages/resolvePublicLink.vue
@@ -1,7 +1,8 @@
 <template>
-  <div class="oc-height-1-1 oc-link-resolve">
-    <h1 class="oc-invisible-sr">{{ pageTitle }}</h1>
-    <div class="oc-card oc-border oc-rounded oc-position-center oc-text-center oc-width-large">
+  <div
+    class="oc-link-resolve oc-height-viewport oc-flex oc-flex-column oc-flex-center oc-flex-middle"
+  >
+    <div class="oc-card oc-text-center oc-width-large">
       <template v-if="isLoading">
         <div class="oc-card-header">
           <h2 key="public-link-loading">
@@ -50,10 +51,8 @@
           </div>
         </form>
       </template>
-      <div class="oc-card-footer">
-        <p>
-          {{ footerSlogan }}
-        </p>
+      <div class="oc-card-footer oc-pt-rm">
+        <p>{{ footerSlogan }}</p>
       </div>
     </div>
   </div>
@@ -66,8 +65,6 @@ import { authService } from '../services/auth'
 import {
   queryItemAsString,
   useClientService,
-  useRoute,
-  useRouteMeta,
   useRouteParam,
   useRouteQuery,
   useRouter,
@@ -91,7 +88,6 @@ export default defineComponent({
   setup() {
     const clientService = useClientService()
     const router = useRouter()
-    const route = useRoute()
     const store = useStore()
     const token = useRouteParam('token')
     const redirectUrl = useRouteQuery('redirectUrl')
@@ -224,10 +220,6 @@ export default defineComponent({
 
     const { $gettext } = useTranslations()
     const footerSlogan = computed(() => store.getters.configuration.currentTheme.general.slogan)
-    const pageTitleRaw = useRouteMeta('title')
-    const pageTitle = computed(() => {
-      return $gettext(unref(pageTitleRaw))
-    })
     const passwordFieldLabel = computed(() => {
       return $gettext('Enter password for public link')
     })
@@ -248,7 +240,6 @@ export default defineComponent({
       isLoading,
       errorMessage,
       footerSlogan,
-      pageTitle,
       resolvePublicLinkTask
     }
   }
@@ -257,6 +248,11 @@ export default defineComponent({
 
 <style lang="scss">
 .oc-link-resolve {
+  .oc-card {
+    background: var(--oc-color-background-highlight);
+    border-radius: 15px;
+  }
+
   .oc-text-input-message {
     justify-content: center;
   }
diff --git a/packages/web-runtime/src/router/helpers.ts b/packages/web-runtime/src/router/helpers.ts
index b6a0fdbce11..e010208bbca 100644
--- a/packages/web-runtime/src/router/helpers.ts
+++ b/packages/web-runtime/src/router/helpers.ts
@@ -1,6 +1,11 @@
 import { base, router } from './index'
 import Router, { Route, RouteRecordPublic } from 'vue-router'
-import { contextQueryToFileContextProps, LocationParams } from 'web-pkg/src/composables'
+import {
+  authContextValues,
+  contextQueryToFileContextProps,
+  LocationParams,
+  WebRouteMeta
+} from 'web-pkg/src/composables'
 
 export const buildUrl = (pathname) => {
   const isHistoryMode = !!base
@@ -40,41 +45,42 @@ export const buildUrl = (pathname) => {
  * @returns {boolean}
  */
 export const isUserContext = (router: Router, to: Route): boolean => {
-  if (!isAuthenticationRequired(router, to)) {
-    return false
-  }
-
-  if (to.meta?.auth !== false) {
+  const meta = getRouteMeta(to)
+  if (meta.authContext === 'user') {
     return true
   }
+  if (meta.authContext !== 'hybrid') {
+    return false
+  }
 
   const contextRoute = getContextRoute(router, to)
-  return !contextRoute || contextRoute.meta?.auth !== false
+  return !contextRoute || getRouteMeta({ meta: contextRoute.meta } as Route).authContext === 'user'
 }
 
 /**
- * Checks if the `to` route or the route it was reached from (i.e. the `contextRoute`) is a public link (with or without password).
+ * Checks if the `to` route or the route it was reached from (i.e. the `contextRoute`) needs a resolved public link context (with or without password).
  *
  * @param router {Router}
  * @param to {Route}
  * @returns {boolean}
  */
 export const isPublicLinkContext = (router: Router, to: Route): boolean => {
-  if (!isAuthenticationRequired(router, to)) {
-    return false
-  }
-
-  const publicLinkRouteNames = ['files-public-link', 'files-public-upload']
-  if (publicLinkRouteNames.includes(to.name)) {
+  if (to.params.driveAliasAndItem?.startsWith('public/')) {
     return true
   }
 
-  if (to.params.driveAliasAndItem?.startsWith('public/')) {
+  const meta = getRouteMeta(to)
+  if (meta.authContext === 'publicLink') {
     return true
   }
+  if (meta.authContext !== 'hybrid') {
+    return false
+  }
 
   const contextRoute = getContextRoute(router, to)
-  return contextRoute && publicLinkRouteNames.includes(contextRoute?.name)
+  return (
+    contextRoute && getRouteMeta({ meta: contextRoute.meta } as Route).authContext === 'publicLink'
+  )
 }
 
 /**
@@ -107,33 +113,14 @@ const extractPublicLinkTokenFromRouteParams = (params: LocationParams): string =
 }
 
 /**
- * Asserts whether any form of authentication is required, i.e.
- * - a user or
- * - public link (with or without password), which represents an impersonation of a user via public share
+ * Asserts that no form of authentication is required.
  *
  * @param router {Router}
  * @param to {Route}
  * @returns {boolean}
  */
-export const isAuthenticationRequired = (router: Router, to: Route): boolean => {
-  const publicRouteNames = [
-    'login',
-    'oidcCallback',
-    'oidcSilentRedirect',
-    'resolvePublicLink',
-    'accessDenied'
-  ]
-
-  if (publicRouteNames.includes(to.name)) {
-    return false
-  }
-
-  const contextRoute = getContextRoute(router, to)
-  if (publicRouteNames.includes(contextRoute?.name)) {
-    return false
-  }
-
-  return true
+export const isAnonymousContext = (router: Router, to: Route): boolean => {
+  return getRouteMeta(to).authContext === 'anonymous'
 }
 
 /**
@@ -154,3 +141,39 @@ const getContextRoute = (router: Router, to: Route): RouteRecordPublic | null =>
 
   return router.getRoutes().find((r) => r.name === to.query[contextRouteNameKey])
 }
+
+const getRouteMeta = (to: Route): WebRouteMeta => {
+  if (!to.meta) {
+    return {
+      authContext: 'user'
+    }
+  }
+
+  // rewrite deprecated `auth` property to the respective `authContext` value
+  if (!to.meta.authContext && Object.prototype.hasOwnProperty.call(to.meta, 'auth')) {
+    to.meta.authContext = to.meta.auth ? 'user' : 'hybrid'
+    console.warn(
+      `route key meta.auth is deprecated. Please switch to meta.authContext="${to.meta.authContext}" in route "${to.name}".`
+    )
+  }
+
+  if (to?.meta?.authContext) {
+    if (authContextValues.includes(to.meta.authContext)) {
+      return to.meta
+    }
+    console.warn(
+      `invalid authContext "${to.meta.authContext}" in route "${
+        to.name
+      }". must be one of [${authContextValues.join(', ')}].`
+    )
+  }
+  if (to?.meta) {
+    return {
+      ...to.meta,
+      authContext: 'user'
+    }
+  }
+  return {
+    authContext: 'user'
+  }
+}
diff --git a/packages/web-runtime/src/router/index.ts b/packages/web-runtime/src/router/index.ts
index c67209564f6..bdada899b84 100644
--- a/packages/web-runtime/src/router/index.ts
+++ b/packages/web-runtime/src/router/index.ts
@@ -40,49 +40,49 @@ export const router = patchRouter(
         path: '/login',
         name: 'login',
         component: LoginPage,
-        meta: { title: $gettext('Login') }
+        meta: { title: $gettext('Login'), authContext: 'anonymous' }
       },
       {
         path: '/logout',
         name: 'logout',
         component: LogoutPage,
-        meta: { title: $gettext('Logout') }
+        meta: { title: $gettext('Logout'), authContext: 'anonymous' }
       },
       {
         path: '/oidc-callback',
         name: 'oidcCallback',
         component: OidcCallbackPage,
-        meta: { title: $gettext('Oidc callback') }
+        meta: { title: $gettext('Oidc callback'), authContext: 'anonymous' }
       },
       {
         path: '/oidc-silent-redirect',
         name: 'oidcSilentRedirect',
         component: OidcCallbackPage,
-        meta: { title: $gettext('Oidc redirect') }
+        meta: { title: $gettext('Oidc redirect'), authContext: 'anonymous' }
       },
       {
         path: '/f/:fileId',
         name: 'resolvePrivateLink',
         component: ResolvePrivateLinkPage,
-        meta: { title: $gettext('Private link') }
+        meta: { title: $gettext('Private link'), authContext: 'user' }
       },
       {
         path: '/s/:token',
         name: 'resolvePublicLink',
         component: ResolvePublicLinkPage,
-        meta: { title: $gettext('Public link') }
+        meta: { title: $gettext('Public link'), authContext: 'anonymous' }
       },
       {
         path: '/access-denied',
         name: 'accessDenied',
         component: AccessDeniedPage,
-        meta: { title: $gettext('Access denied') }
+        meta: { title: $gettext('Access denied'), authContext: 'anonymous' }
       },
       {
         path: '/account',
         name: 'account',
         component: Account,
-        meta: { title: $gettext('Account') }
+        meta: { title: $gettext('Account'), authContext: 'user' }
       }
     ]
   })