├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── views
    │   ├── Home.vue
    │   ├── Unauthorized.vue
    │   └── Secured.vue
    ├── plugins
    │   └── authentication.js
    ├── App.vue
    ├── components
    │   └── HelloWorld.vue
    └── router
    │   └── index.js
├── babel.config.js
├── .gitignore
├── README.md
└── package.json


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davetrux/vue-keycloak-demo/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davetrux/vue-keycloak-demo/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import authentication from "@/plugins/authentication"
 5 | 
 6 | Vue.config.productionTip = false
 7 | Vue.use(authentication)
 8 | 
 9 | Vue.$keycloak
10 |   .init({ checkLoginIframe: false })
11 |   .then(() => {
12 |     new Vue({
13 |       router,
14 |       render: h => h(App)
15 |     }).$mount('#app')
16 |   })
17 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <img alt="Vue logo" src="../assets/logo.png">
 4 |     <HelloWorld msg="Welcome to Your Secured App"/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | // @ is an alias to /src
10 | import HelloWorld from '@/components/HelloWorld.vue'
11 | 
12 | export default {
13 |   name: 'Home',
14 |   components: {
15 |     HelloWorld
16 |   }
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-keycloak-demo
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/src/plugins/authentication.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Keycloak from 'keycloak-js'
 3 | 
 4 | const options = {
 5 |   url: 'http://localhost:8001/auth/',
 6 |   realm: 'local-dev',
 7 |   clientId: 'vue-demo'
 8 | }
 9 | 
10 | const _keycloak = Keycloak(options)
11 | 
12 | const Plugin = {
13 |   install(Vue) {
14 |     Vue.$keycloak = _keycloak
15 |   }
16 | }
17 | 
18 | Plugin.install = Vue => {
19 |   Vue.$keycloak = _keycloak
20 |   Object.defineProperties(Vue.prototype, {
21 |     $keycloak: {
22 |       get() {
23 |         return _keycloak
24 |       }
25 |     }
26 |   })
27 | }
28 | 
29 | Vue.use(Plugin)
30 | 
31 | export default Plugin
32 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <div id="nav">
 4 |       <router-link to="/">Home</router-link> |
 5 |       <router-link to="/secured">Secured</router-link>
 6 |     </div>
 7 |     <router-view/>
 8 |   </div>
 9 | </template>
10 | 
11 | <style lang="scss">
12 | #app {
13 |   font-family: Avenir, Helvetica, Arial, sans-serif;
14 |   -webkit-font-smoothing: antialiased;
15 |   -moz-osx-font-smoothing: grayscale;
16 |   text-align: center;
17 |   color: #2c3e50;
18 | }
19 | 
20 | #nav {
21 |   padding: 30px;
22 | 
23 |   a {
24 |     font-weight: bold;
25 |     color: #2c3e50;
26 | 
27 |     &.router-link-exact-active {
28 |       color: #42b983;
29 |     }
30 |   }
31 | }
32 | 
33 | button {
34 |   margin-top: 30px;
35 |   color: #42b983;
36 |   font-size: 1.2rem;
37 |   padding: 8px;
38 |   border-radius: 6px;
39 | }
40 | </style>
41 | 


--------------------------------------------------------------------------------
/src/views/Unauthorized.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Unauthorized</h1>
 4 |     <div>Hello {{ firstName }} {{ lastName }}</div>
 5 |     <div>Your account does not have access to that page.</div>
 6 |     <div><button @click="logout">Logout</button></div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import Vue from 'vue'
12 | 
13 | export default {
14 |   name: "Unauthorized",
15 |   data: function () {
16 |     return {
17 |       firstName: '',
18 |       lastName: ''
19 |     }
20 |   },
21 |   beforeMount() {
22 |     this.firstName = Vue.$keycloak.tokenParsed.given_name
23 |     this.lastName = Vue.$keycloak.tokenParsed.family_name
24 |   },
25 |   methods: {
26 |     logout () {
27 |       Vue.$keycloak.logout({ redirectUri: window.location.origin })
28 |     }
29 |   }
30 | }
31 | </script>
32 | 
33 | <style scoped>
34 | 
35 | </style>
36 | 


--------------------------------------------------------------------------------
/src/views/Secured.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="about">
 3 |     <h1>Secure Content</h1>
 4 |     <div>Hello {{ firstName }} {{ lastName }}</div>
 5 |     <div>This page is secured by Keycloak</div>
 6 |     <div><button @click="logout">Logout</button></div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import Vue from 'vue'
12 | 
13 | export default {
14 |   name: 'Secured',
15 |   data: function () {
16 |     return {
17 |       firstName: '',
18 |       lastName: ''
19 |     }
20 |   },
21 |   beforeMount() {
22 |     this.firstName = Vue.$keycloak.tokenParsed.given_name
23 |     this.lastName = Vue.$keycloak.tokenParsed.family_name
24 |   },
25 |   methods: {
26 |     logout () {
27 |       Vue.$keycloak.logout({ redirectUri: window.location.origin })
28 |     }
29 |   }
30 | }
31 | </script>
32 | 
33 |  <style scoped lang="scss">
34 | 
35 |  </style>
36 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-keycloak-demo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "keycloak-js": "^12.0.4",
13 |     "vue": "^2.6.11",
14 |     "vue-router": "^3.2.0"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "~4.5.0",
18 |     "@vue/cli-plugin-eslint": "~4.5.0",
19 |     "@vue/cli-plugin-router": "~4.5.0",
20 |     "@vue/cli-service": "~4.5.0",
21 |     "babel-eslint": "^10.1.0",
22 |     "eslint": "^6.7.2",
23 |     "eslint-plugin-vue": "^6.2.2",
24 |     "node-sass": "^4.12.0",
25 |     "sass-loader": "^8.0.2",
26 |     "vue-template-compiler": "^2.6.11"
27 |   },
28 |   "eslintConfig": {
29 |     "root": true,
30 |     "env": {
31 |       "node": true
32 |     },
33 |     "extends": [
34 |       "plugin:vue/essential",
35 |       "eslint:recommended"
36 |     ],
37 |     "parserOptions": {
38 |       "parser": "babel-eslint"
39 |     },
40 |     "rules": {}
41 |   },
42 |   "browserslist": [
43 |     "> 1%",
44 |     "last 2 versions",
45 |     "not dead"
46 |   ]
47 | }
48 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       Clicked the link above marked "Secured" to see the content blocked by authorization.
 6 |     </p>
 7 |     <p>Use the login button below to force a login before attempting to see the secured content</p>
 8 |     <div v-if="!isAuthenticated"><button @click="login">Login</button></div>
 9 |     <div v-else><button @click="logout">Logout</button></div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import Vue from 'vue'
15 | 
16 | export default {
17 |   name: 'HelloWorld',
18 |   props: {
19 |     msg: String
20 |   },
21 |   computed: {
22 |     isAuthenticated: () => {
23 |       return Vue.$keycloak.authenticated
24 |     }
25 |   },
26 |   methods: {
27 |     login () {
28 |       Vue.$keycloak.login({ redirectUri: window.location.origin })
29 |     },
30 |     logout () {
31 |       Vue.$keycloak.logout({ redirectUri: window.location.origin })
32 |     }
33 |   }
34 | }
35 | </script>
36 | 
37 | <!-- Add "scoped" attribute to limit CSS to this component only -->
38 | <style scoped lang="scss">
39 | h3 {
40 |   margin: 40px 0 0;
41 | }
42 | ul {
43 |   list-style-type: none;
44 |   padding: 0;
45 | }
46 | li {
47 |   display: inline-block;
48 |   margin: 0 10px;
49 | }
50 | a {
51 |   color: #42b983;
52 | }
53 | </style>
54 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import Home from '../views/Home.vue'
 4 | 
 5 | Vue.use(VueRouter)
 6 | 
 7 | const routes = [
 8 |   {
 9 |     path: '/',
10 |     name: 'Home',
11 |     component: Home,
12 |     meta: {
13 |       isAuthenticated: false
14 |     }
15 |   },
16 |   {
17 |     path: '/secured',
18 |     name: 'Secured',
19 |     meta: {
20 |       isAuthenticated: true
21 |     },
22 |     component: () => import('../views/Secured.vue')
23 |   },
24 |   {
25 |     path: '/unauthorized',
26 |     name: 'Unauthorized',
27 |     meta: {
28 |       isAuthenticated: false
29 |     },
30 |     component: () => import('../views/Unauthorized.vue')
31 |   }
32 | ]
33 | 
34 | const router = new VueRouter({
35 |   mode: 'history',
36 |   base: process.env.BASE_URL,
37 |   routes
38 | })
39 | 
40 | router.beforeEach((to, from, next) => {
41 |   if (to.meta.isAuthenticated) {
42 |     // Get the actual url of the app, it's needed for Keycloak
43 |     const basePath = window.location.toString()
44 |     if (!Vue.$keycloak.authenticated) {
45 |       // The page is protected and the user is not authenticated. Force a login.
46 |       Vue.$keycloak.login({ redirectUri: basePath.slice(0, -1) + to.path })
47 |     } else if (Vue.$keycloak.hasResourceRole('vue-demo-user')) {
48 |       // The user was authenticated, and has the app role (is authorized). Update the token.
49 |       Vue.$keycloak.updateToken(70)
50 |         .then(() => {
51 |           next()
52 |         })
53 |         .catch(err => {
54 |           console.error(err)
55 |         })
56 |     } else {
57 |       // The user was authenticated, but did not have the correct role (is not authorized)
58 |       // Redirect the user to an error page
59 |       next({ name: 'Unauthorized' })
60 |     }
61 |   } else {
62 |     // This page did not require authentication
63 |     next()
64 |   }
65 | })
66 | 
67 | export default router
68 | 


--------------------------------------------------------------------------------