Auth0 Implementation (#1)

* Defining Settings

* Server-Side implementation

* Fixed querys parameters on client, added axios, fixed server

* Various fixes, remove hardcoded redirect url

* Update HomeController.cs

Author: spolezhaev

ClientApp/@types/alltypes.d.ts

@@ -0,0 +1 @@
+declare module 'EventEmitter';

ClientApp/assets/loading.svg

@@ -0,0 +1,78 @@
+import auth0, { WebAuth } from 'auth0-js'
+import router from '../router/'
+import EventEmitter from 'EventEmitter'
+
+export default class AuthService {
+    authenticated = this.isAuthenticated()
+    authNotifier = new EventEmitter()
+    auth0: WebAuth
+    constructor(hostname:string, port:string, protocol:string) {
+        this.login = this.login.bind(this);
+        this.setSession = this.setSession.bind(this)
+        this.logout = this.logout.bind(this)
+        this.isAuthenticated = this.isAuthenticated.bind(this)
+        var stringBuild = protocol + "//" + hostname;
+        if (port !== "")
+          stringBuild += ':' + port
+        stringBuild += '/callback'
+        this.auth0 = new auth0.WebAuth({
+          domain: 'dotnextrussia.eu.auth0.com',
+          clientID: 'g7saZcm47evyY3kWWP26ZxifDpxycl9h',
+          redirectUri: stringBuild,
+          audience: 'http://medhelp20171124063439.azurewebsites.net/',
+          responseType: 'token id_token',
+          scope: 'openid profile read:templates'
+      });
+    }
+    
+
+
+
+    login() {
+        this.auth0.authorize();
+    }
+
+    handleAuthentication () {
+        this.auth0.parseHash((err, authResult) => {
+          if (authResult && authResult.accessToken && authResult.idToken) {
+            this.setSession(authResult)
+            router.replace('home')
+          } else if (err) {
+            router.replace('home')
+            console.log(err)
+            alert(`Error: ${err.error}. Check the console for further details.`)
+          }
+          location.reload()          
+        })
+      }
+
+      setSession (authResult : any) {
+        // Set the time that the access token will expire at
+        let expiresAt = JSON.stringify(
+          authResult.expiresIn * 1000 + new Date().getTime()
+        )
+        localStorage.setItem('access_token', authResult.accessToken)
+        localStorage.setItem('id_token', authResult.idToken)
+        localStorage.setItem('expires_at', expiresAt)
+        this.authNotifier.emit('authChange', { authenticated: true })
+      }
+
+      logout () {
+        // Clear access token and ID token from local storage
+        localStorage.removeItem('access_token')
+        localStorage.removeItem('id_token')
+        localStorage.removeItem('expires_at')
+        //this.userProfile = null
+        this.authNotifier.emit('authChange', false)
+        // navigate to the home route
+        router.replace('home')
+        location.reload()
+      }
+
+      isAuthenticated () {
+        // Check whether the current time is past the
+        // access token's expiry time
+        let expiresAt = JSON.parse(localStorage.getItem('expires_at') || '{}')
+        return new Date().getTime() < expiresAt
+      }
+}

ClientApp/auth/AuthService.ts

@@ -2,16 +2,13 @@ import './css/site.css';
 import 'bootstrap';
 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import router from './router'
+import App from './components/app/app'
 Vue.use(VueRouter);
 
-const routes = [
-    { path: '/', component: require('./components/home/home.vue.html') },
-    { path: '/counter', component: require('./components/counter/counter.vue.html') },
-    { path: '/fetchdata', component: require('./components/fetchdata/fetchdata.vue.html') }
-];
 
 new Vue({
     el: '#app-root',
-    router: new VueRouter({ mode: 'history', routes: routes }),
+    router: router,
     render: h => h(require('./components/app/app.vue.html'))
 });

ClientApp/boot.ts

@@ -1,10 +1,29 @@
 import Vue from 'vue';
 import { Component } from 'vue-property-decorator';
+import AuthService from '../../auth/AuthService';
 
-@Component({
+
+
+const auth = new AuthService(window.location.hostname, window.location.port, window.location.protocol)
+
+var { login, logout, authenticated, authNotifier } = auth
+
+export default Vue.extend({
+    name: 'app',
     components: {
         MenuComponent: require('../navmenu/navmenu.vue.html')
+    },
+    data() {
+        authNotifier.on('authChange', (authState:any) => {
+            authenticated = authState.authenticated
+        })
+        return {
+            auth,
+            authenticated
+        }
+    },
+    methods: {
+        login,
+        logout
     }
-})
-export default class AppComponent extends Vue {
-}
+})

ClientApp/components/app/app.ts

@@ -3,12 +3,18 @@
         <div class="row">
             <div class="col-sm-3">
                 <menu-component />
+                
             </div>
             <div class="col-sm-9">
-                <router-view></router-view>
+                <router-view
+                :auth="auth" 
+                :authenticated="authenticated">
+                </router-view>
             </div>
         </div>
+    
     </div>
+   
 </template>
 
 <script src="./app.ts"></script>

ClientApp/components/app/app.vue.html

@@ -0,0 +1,11 @@
+import Vue from "vue";
+
+export default Vue.extend({
+    name: 'callback',
+    props: ['auth'],
+    data () {
+      // alert(JSON.stringify(this.auth))
+      this.auth.handleAuthentication()
+      return {}
+    }
+  })

ClientApp/components/callback/callback.ts

@@ -0,0 +1,20 @@
+<template>
+    <div class="spinner">
+      <img src="../../assets/loading.svg" alt="loading"/>
+    </div>
+  </template>
+
+  <style>
+    .spinner {
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      height: 100vh;
+      width: 100vw;
+      background-color: white;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+  </style>

ClientApp/components/callback/callback.vue.html

@@ -1,5 +1,7 @@
 import Vue from 'vue';
 import { Component } from 'vue-property-decorator';
+import axios from 'axios';
+
 
 interface WeatherForecast {
     dateFormatted: string;
@@ -11,12 +13,25 @@ interface WeatherForecast {
 @Component
 export default class FetchDataComponent extends Vue {
     forecasts: WeatherForecast[] = [];
-
+     HTTP = axios.create({
+        baseURL: 'api/SampleData/WeatherForecasts',
+        
+      })
     mounted() {
-        fetch('api/SampleData/WeatherForecasts')
-            .then(response => response.json() as Promise<WeatherForecast[]>)
-            .then(data => {
-                this.forecasts = data;
-            });
+        axios.get("api/SampleData/WeatherForecasts",
+                {
+                    headers: {
+                        Authorization: 'Bearer ' + localStorage.getItem('access_token')
+                    }
+                })
+            .then(response => {
+                this.forecasts = response.data
+            })
+            .catch(e => {
+                alert(e)
+            })
+           
+        // fetch('api/SampleData/WeatherForecasts')
+        
     }
 }

ClientApp/components/fetchdata/fetchdata.ts

@@ -0,0 +1,5 @@
+import Vue from 'vue';
+export default Vue.extend({
+    name: 'home',
+    props: ['auth', 'authenticated']
+  })