My current setup involves implementing authentication with Keycloak in a Nuxt.js middleware using the code below:
import Keycloak from 'keycloak-js'
const keycloak = new Keycloak({
url: 'http://localhost:8080/auth',
realm: 'dev-employee',
clientId: 'emp-ui'
})
export default function({ store, redirect }) {
if (keycloak.authenticated) return true
return keycloak
.init({
onLoad: 'login-required',
checkLoginIframe: true,
checkLoginIframeInterval: 5
})
.success(authenticated => {})
.error(function() {
alert('failed to initialize')
})
}
In the nuxt.config.js file:
router: {
middleware: ['authentication']
},
Upon loading the browser window, the page renders and attempts to authenticate, causing a reload. The desired behavior is for the page to wait and not render until the Keycloak authentication is successful.