login through OIDC now working with local JWT aund (test) user listing

package-lock.json

@@ -12881,6 +12881,11 @@
         }
       }
     },
+    "vue-cookies": {
+      "version": "1.5.13",
+      "resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.5.13.tgz",
+      "integrity": "sha512-8pjpXnvbNWx1Lft0t3MJnW+ylv0Wa2Tb6Ch617u/pQah3+SfXUZZdkh3EL3bSpe/Sw2Wdw3+DhycgQsKANSxXg=="
+    },
     "vue-flag-icon": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/vue-flag-icon/-/vue-flag-icon-1.0.6.tgz",

package.json

@@ -15,6 +15,7 @@
     "vue": "^2.6.6",
     "vue-axios": "^2.1.4",
     "vue-class-component": "^6.0.0",
+    "vue-cookies": "^1.5.13",
     "vue-flag-icon": "^1.0.6",
     "vue-i18n": "^8.9.0",
     "vue-property-decorator": "^7.0.0",

src/api/index.ts

@@ -15,7 +15,7 @@ export function saveSurveyResponse (surveyResponse: any) {
 }
 
 export function postNewSurvey (survey: any, jwt: any) {
-    return axios.post(`${API_URL}/surveys/`, survey, { headers: { Authorization: `Bearer: ${jwt}` } })
+    return axios.post(`${API_URL}/surveys/`, survey, { headers: { Authorization: `Bearer ${jwt}` } })
 }
 
 export function authenticate (userData: any) {
@@ -26,6 +26,21 @@ export function register (userData: any) {
     return axios.post(`${API_URL}/auth/register`, userData)
 }
 
+// This function probably isn't really useful here, as a user must be redirected to the actual OIDC provider.
+// -> So login involves user interaction through the frontend (and not just API calls).
+export function oidc_login (redirection_url: any) {
+    return axios.get(`${API_URL}/auth/oidc`, redirection_url)
+}
+
+export function getFreshToken (refresh_token: any) {
+    return axios.get(`${API_URL}/auth/fresh`, refresh_token)
+}
+
 export function getProviders () {
     return axios.get(`${API_URL}/auth/providers`)
-}
+}
+
+export function fetchUsers (jwt: any) {
+    console.log("JWT: " + jwt);
+    return axios.get(`${API_URL}/v1/user`, { headers: { Authorization: `Bearer ${jwt}` } })
+}

src/components/Login.vue

@@ -13,6 +13,15 @@
                 <a :href="provider.url">{{ index }} ({{provider.type}})</a>
             </li>
             </ul>
+
+            <h3>Users</h3>
+            <ul>
+                <li v-for="(user) in users" >
+                    <a href="#">({{user.id}}) {{user.first_name}}</a>
+                </li>
+            </ul>
+            <button v-on:click="oidc_login">Login via OIDC</button>
+            <a href="/api/auth/oidc?redirect_url=/login">OIDC with redirect</a>
         </section>
         <section class="section">
             <div class="container">
@@ -61,6 +70,9 @@
                 this.$store.dispatch('register', { email: this.email, password: this.password })
                     .then(() => this.$router.push('/'));
             },
+            oidc_login () {
+                this.$store.dispatch('oidc_login', "\\oidc_login_redirection");
+            },
         },
         mounted () {
             EventBus.$on('failedRegistering', (msg) => {
@@ -72,12 +84,28 @@
             EventBus.$on('loginProvidersLoaded', (providers) => {
                 this.loginProviders = providers;
             });
+            EventBus.$on('storedTokens', () => {
+                this.$store.dispatch('loadUsers');
+            });
+
             this.$store.dispatch('loadLoginProviders');
+
+            // get tokens
+            if(this.$cookies.isKey("tokens")){
+                this.$store.dispatch('storeTokens', JSON.parse(atob(this.$cookies.get("tokens"))));
+                this.$cookies.remove("tokens");
+            }
+            console.log(this.$cookies.keys());
         },
         beforeDestroy () {
             EventBus.$off('failedRegistering');
             EventBus.$off('failedAuthentication');
         },
+        computed: {
+            users () {
+                return this.$store.state.users;
+            },
+        },
     }
 </script>
 

src/main.ts

@@ -4,6 +4,7 @@ import VueAxios from 'vue-axios';
 import App from './App.vue';
 import router from './router';
 import store from './store';
+import VueCookies from 'vue-cookies'
 import i18n from '@/plugins/i18n';
 // @ts-ignore
 import FlagIcon from 'vue-flag-icon';
@@ -12,6 +13,7 @@ import FlagIcon from 'vue-flag-icon';
 
 Vue.use(VueAxios, axios);
 Vue.use(FlagIcon);
+Vue.use(VueCookies)
 
 // setup fake backend
 // import { configureFakeBackend } from './helpers';

src/store.ts

@@ -3,7 +3,16 @@ import Vuex from 'vuex';
 
 
 // imports of AJAX functions will go here
-import { fetchSurveys, fetchSurvey, getProviders, saveSurveyResponse, postNewSurvey, authenticate, register } from '@/api';
+import {
+  fetchSurveys,
+  fetchSurvey,
+  getProviders,
+  saveSurveyResponse,
+  postNewSurvey,
+  authenticate,
+  register,
+  oidc_login, fetchUsers, getFreshToken
+} from '@/api';
 import { isValidJwt, EventBus } from '@/utils';
 
 Vue.use(Vuex);
@@ -14,7 +23,11 @@ const state = {
   loginProviders: [],
   currentSurvey: {},
   user: {},
+  users: [],
+  access_token: '',
+  refresh_token: '',
   jwt: '',
+  jwt_refresh_token: '',
 };
 
 const actions = {
@@ -35,6 +48,19 @@ const actions = {
   addSurveyResponse(context: any) {
     return saveSurveyResponse(context.state.currentSurvey);
   },
+  loadUsers(context: any) {
+    return fetchUsers(context.state.access_token)
+        .then((response) => {
+          console.log(response);
+          console.log(response.data);
+          context.commit('setUsers', { users: response.data });
+          EventBus.$emit('usersLoaded', response.data);
+        })
+        .catch((error) => {
+          console.log('Error loading users!', error);
+          EventBus.$emit('failedLoadingUsers', error);
+        });
+  },
   loadLoginProviders(context: any) {
     return getProviders()
         .then((response) => {
@@ -45,12 +71,34 @@ const actions = {
   login(context: any, userData: any) {
     context.commit('setUserData', { userData });
     return authenticate(userData)
-        .then((response) => context.commit('setJwtToken', { jwt: response.data }))
+        .then((response) => context.commit('setJwtToken', { tokens: response.data }))
         .catch((error) => {
           console.log('Error Authenticating: ', error);
           EventBus.$emit('failedAuthentication', error);
         });
   },
+  oidc_login(context: any, redirection_url: any) {
+    //context.commit('setUserData', { userData });
+    return oidc_login(redirection_url)
+        .then((response) => context.commit('setJwtToken', { tokens: response.data }))
+        .catch((error) => {
+          console.log('Error Authenticating: ', error);
+          EventBus.$emit('failedAuthentication', error);
+        });
+  },
+  refreshToken(context: any) {
+    //context.commit('setUserData', { userData });
+    return getFreshToken(context.state.refresh_token)
+        .then((response) => context.commit('setTokens', { tokens: response.data }))
+        .catch((error) => {
+          console.log('Error Refreshing token: ', error);
+          EventBus.$emit('failedRefreshingToken', error);
+        });
+  },
+  storeTokens(context: any, tokens: any){
+    context.commit('setTokens', {tokens});
+    EventBus.$emit('storedTokens');
+  },
   register(context: any, userData: any) {
     context.commit('setUserData', { userData });
     return register(userData)
@@ -61,7 +109,7 @@ const actions = {
         });
   },
   submitNewSurvey(context: any, survey: any) {
-    return postNewSurvey(survey, context.state.jwt.token);
+    return postNewSurvey(survey, context.state.access_token);
   },
 };
 
@@ -77,6 +125,9 @@ const mutations = {
     }
     sState.currentSurvey = payload.survey;
   },
+  setUsers(sState: any, payload: any) {
+    sState.users = payload.users;
+  },
   setChoice(sState: any, payload: any) {
     const { questionId, choice } = payload;
     const nQuestions = sState.currentSurvey.questions.length;
@@ -97,9 +148,17 @@ const mutations = {
   },
   setJwtToken(sState: any, payload: any) {
     console.log('setJwtToken payload = ', payload);
-    localStorage.token = payload.jwt.token;
+    localStorage.tokens = payload.tokens;
-    sState.jwt = payload.jwt;
+    sState.jwt = payload.tokens.access_token;
+    sState.jwt_refresh_token = payload.tokens.refresh_token;
   },
+  setTokens(sState: any, payload:any){
+    console.log('setTokens payload = ', payload);
+    sState.access_token = payload.tokens.access_token;
+    sState.refresh_token = payload.tokens.refresh_token;
+    console.log(sState.access_token);
+    console.log(sState.access_token);
+  }
 };
 
 const getters = {