{{ keycloak.authenticated }}
\n\n```\n\nOr with compile-time syntactic sugar\n```vue\n\n\n\n{{ keycloak.authenticated }}
\n\n```\n\nThe plugin also adds a `$keycloak` property to the global Vue instance.\nThis shadows most of the keycloak instance's properties and functions.\nAll other variables & functions can be found on `$keycloak.keycloak` attribute\n\n```vue\n\n{{ $keycloak.authenticated }}
\n\n```\n\nThis object from both of these methods is [reactive](https://v3.vuejs.org/guide/reactivity-fundamentals.html#declaring-reactive-state) and will update with new tokens and other information\nautomatically.\n\nThese properties/functions are exposed:\n\n```\n{\n ready: Boolean, // Flag indicating whether Keycloak has initialised and is ready\n authenticated: Boolean, // Flag indicating whether the user is authenticated\n userName: String, // Username from Keycloak. Collected from tokenParsed['preferred_username']\n fullName: String, // Full name from Keycloak. Collected from tokenParsed['name']\n login: Function, // [Keycloak] login function\n loginFn: Function, // Alias for login\n logoutFn: Function, // Keycloak logout function\n createLoginUrl: Function, // Keycloak createLoginUrl function\n createLogoutUrl: Function, // Keycloak createLogoutUrl function\n createRegisterUrl: Function, // Keycloak createRegisterUrl function\n register: Function, // Keycloak register function\n accountManagement: Function, // Keycloak accountManagement function\n createAccountUrl: Function, // Keycloak createAccountUrl function\n loadUserProfile: Function, // Keycloak loadUserProfile function\n subject: String, // The user id\n idToken: String, // The base64 encoded ID token.\n idTokenParsed: Object, // The parsed id token as a JavaScript object.\n realmAccess: Object, // The realm roles associated with the token.\n resourceAccess: Object, // The resource roles associated with the token.\n refreshToken: String, // The base64 encoded refresh token that can be used to retrieve a new token.\n refreshTokenParsed: Object, // The parsed refresh token as a JavaScript object.\n timeSkew: Number, // The estimated time difference between the browser time and the Keycloak server in seconds. This value is just an estimation, but is accurate enough when determining if a token is expired or not.\n responseMode: String, // Response mode passed in init (default value is fragment).\n responseType: String, // Response type sent to Keycloak with login requests. This is determined based on the flow value used during initialization, but can be overridden by setting this value.\n hasRealmRole: Function, // Keycloak hasRealmRole function\n hasResourceRole: Function, // Keycloak hasResourceRole function\n token: String, // The base64 encoded token that can be sent in the Authorization header in requests to services\n tokenParsed: String // The parsed token as a JavaScript object\n keycloak: Object // The original keycloak instance 'as is' from keycloak-js adapter\n}\n```\n\n## Options\n\nYou can pass in an object as options to the plugin. The following keys are valid options. See below for description.\n\n| Key | Type | Default |\n| ---------------------- | ------------------------------ | -------------------------------- |\n| `config` | String | Object | `window.__BASEURL__ + '/config'` |\n| `init` | Object | `{onLoad: 'login-required'}` |\n| `logout` | Object | |\n| `onReady` | Function(keycloak) | |\n| `onInitError` | Function(error, keycloakError) | |\n| `onInitSuccess` | Function(authenticated) | |\n| `onAuthLogout` | Function(keycloak) | |\n| `onAuthRefreshError` | Function(keycloak) | |\n| `onAuthRefreshSuccess` | Function(keycloak) | |\n\n### config\n\nThe config object, either returned from an endpoint (string) or\nset directly (object), must be compatible with the [Keycloak JS adapter](https://www.keycloak.org/securing-apps/javascript-adapter#_using_the_adapter) constructor arguments.\n\nSee description below.\n\n#### String\n\nIf this option is a string, the plugin will treat it as an URL and make an HTTP GET request to it.\n\nIf not present, the plugin will look for a global variable `window.__BASEURL__` and prepend it to `'/config'` and use\nthis a default place to make a GET request.\n\nIf no `window.__BASEURL__` exists, `/config` is used.\n\nThe return value from the request is used as constructor parameters for the Keycloak adapter.\nAs such, it should be an object with valid keys/values.\n\n[See Keycloak's Javascript adapter reference](https://www.keycloak.org/securing-apps/javascript-adapter#_using_the_adapter)\n\nE.g.\n\n```\n{\n realm: String,\n url: String,\n clientId: String\n}\n```\n\nThese values will be used as constructor parameters to the official Keycloak adapter.\n\n#### Object\n\nIf this option is an object, it will be passed on as constructor parameters for the [Keycloak adapter](https://www.keycloak.org/securing-apps/javascript-adapter#_using_the_adapter).\nNo HTTP GET request is done in this case.\n\n### init\n\nThis option is the parameter object for the `Keycloak.init` method.\n\n### logout\n\nThis option is the parameter object for the `Keycloak.logout` method.\n\n### onReady\n\nThis option is a callback function that is executed once Keycloak has initialised and is ready. You can be sure\nthat the Vue instance has a property called `$keycloak` in this function. See above for possible values.\n\nThe callback function has one parameter, which is the keycloak object returned from the Keycloak adapter on\ninstantiation.\n\nOne use case for this callback could be to instantiate and mount the Vue application. Then we are sure that the Keycloak\nauthentication and the `$keycloak` property are properly finished and hydrated with data:\n\n```javascript\nimport VueKeyCloak from '@dsb-norge/vue-keycloak-js'\n\ncreateApp(App)\n .use(VueKeyCloak, {\n onReady: (keycloak) => {\n console.log(`I wonder what Keycloak returns: ${keycloak}`)\n }\n })\n .mount('#app')\n```\n\nIn conjunction with the above, you might find it useful to intercept e.g. axios and set the token on each request:\n\n```javascript\nfunction tokenInterceptor () {\n axios.interceptors.request.use(config => {\n const keycloak = useKeycloak()\n if (keycloak.authenticated) {\n // Note that this is a simple example.\n // you should be careful not to leak tokens to third parties.\n // in this example the token is added to all usage of axios.\n config.headers.Authorization = `Bearer ${keycloak.token}`\n }\n return config\n }, error => {\n return Promise.reject(error)\n })\n}\n\ncreateApp(App)\n .use(VueKeyCloak, {\n onReady: (keycloak) => {\n tokenInterceptor()\n }\n })\n .mount('#app')\n```\n\n### onInitError\n\nThis option is a callback function that is executed if Keycloak initialisation has failed.\n\nThe callback function has one parameter, which is the error object returned by Keycloak. Note that this may be undefined\neven though an error has occurred, as Keycloak does not return an error object in every error case.\n\n### onInitSuccess\n\nThis option is a callback function that is executed if Keycloak initialisation has succeeded.\n\nThe callback function has one parameter, which is the `authenticated` value returned by Keycloak's `init` method.\n\n### onAuthLogout\n\nThis option is a callback function that is executed if the user is logged out (will only be called if the session status iframe is enabled, or in Cordova mode).\n\nThe callback function has one parameter, which is the keycloak object returned from the Keycloak adapter on\ninstantiation.\n\n### onAuthRefreshError\n\nThis option is a callback function that is executed if there was an error while trying to refresh the token.\n\nThe callback function has one parameter, which is the keycloak object returned from the Keycloak adapter on\ninstantiation.\n\n### onAuthRefreshSuccess\n\nThis option is a callback function that is executed when the token is refreshed.\n\nThe callback function has one parameter, which is the keycloak object returned from the Keycloak adapter on\ninstantiation.\n\n## Examples\n\n### Supply a configuration object for the Keycloak constructor\n\n```javascript\ncreateApp(App)\n .use(VueKeyCloak, {\n config: {\n realm: 'MyRealm',\n url: 'https://my.keycloak.server',\n clientId: 'MyClientId'\n }\n })\n .mount('#app')\n```\n\n### Supply init option (disable monitoring login state)\n\n```javascript\ncreateApp(App)\n .use(VueKeyCloak, {\n init: {\n onLoad: 'login-required',\n checkLoginIframe: false\n },\n })\n .mount('#app')\n```\n\n### Supply init option (use `check-sso`)\n\nRemember; `login-required` is the default value for the onLoad property\nin the init object. So without passing an `init` object as argument, the default is\n`{ init: 'login-required' }`\n\n\n##### To avoid waiting for configuration endpoint before loading vue app:\n```javascript\ncreateApp(App)\n .use(VueKeyCloak, {\n init: {\n onLoad: 'check-sso'\n },\n })\n .mount('#app')\n```\n\n##### Wait until keycloak adapter is ready before loading vue app:\n```javascript\nconst app = createApp(App)\napp.use(VueKeyCloak, {\n init: {\n onLoad: 'check-sso'\n },\n onReady: kc => {\n app.mount('#app')\n }\n})\n```\n\n### Example applications\n\nYou can find different examples in the [examples](./examples) folder.\n\n\n#### Simple 'in component' secret displaying properties/functions: [simple](https://github.com/dsb-norge/vue-keycloak-js/tree/master/examples/simple)\n\n#### Simple example written in TypeScript: [typescript](https://github.com/dsb-norge/vue-keycloak-js/tree/master/examples/typescript)\n\n#### Example with axios interceptors showing how to do secure requests: [axios-interceptor](https://github.com/dsb-norge/vue-keycloak-js/tree/master/examples/axios-interceptor)\n\n\n## How to release\n\n```bash\n$ git checkout main\n$ npm version [major | minor | patch ]\n$ git push\n$ git push --tags\n```\n\nGo to GitHub and create a new release based on the latest tag.\nGitHub Actions will then build and publish the release to npmjs.com.\n\n## Frequently asked questions\n\nWe try to answer the most frequently asked questions here.\n\n### Localhost !== 127.0.0.1\n\nNote that if you run keycloak on your own machine it is important to be consistent with the settings for its address. Cookies created from 127.0.0.1 will not be sent to \"localhost\" and vice versa.\n","readmeFilename":"README.md"}