Fake useReferrer: true needed in order to being able to use useKeycloak: true?

[qconn-io]

Hi team,

great work with the theme. I actually came to learn about how to extend the default theme with Keycloak and could learn a lot - thanks.

I tried the sample from the /docs folder and if I just follow the manual and configure the Keycloak - it's not kicking in, I get access to the main page without auth. I looked into KeycloakLayout.vue code and I think the reason is that "const hasAccess = ref(true)" is true per default. If I make it into being false, e.g. by specifying "useReferrer: true", without the referer object, then Keycloak logic starts working.

Maybe I do not understand your intention ot maybe you want to make the default hasAccess = false, when useReferrer or useKeycloak are true .

Thanks!

[cnouguier]

Hi @kamax7C0
Thanks for posting the issue. I need to dig into the code ;).

In the meantime, the fact that hasAccess defaults to true is due to some strange behavior we noticed during the site refresh. The pages were no longer displayed in their entirety, sometimes even blank.

[qconn-io]

Thanks for the feedback. Since I only needed Keycloak, I currently implemented it this way:

<template>
    <div v-if="loading">
        <p>Loading...</p>
    </div>
    <div v-else-if="isAuthenticated">
        <Layout />
    </div>
    <div v-else>
        <p>Not authenticated. Redirecting to login...</p>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Keycloak from 'keycloak-js';
import { useData } from 'vitepress'
import DefaultTheme from 'vitepress/theme'

const { Layout } = DefaultTheme
const { theme } = useData()
const loading = ref(true);
const isAuthenticated = ref(false);

const keycloak = new Keycloak(theme.value.keycloak);

onMounted(() => {
    keycloak.init({ onLoad: 'login-required', checkLoginIframe: false})
        .then(authenticated => {
            console.log('authenticated: ' + authenticated);
            isAuthenticated.value = authenticated;
            loading.value = false;
        })
        .catch(() => {
            console.error('Failed to initialize Keycloak');
            loading.value = false;
        });
});
</script>

It does the trick. No content is shown before authentication.