Commit 51c4e5df authored by A. Koch's avatar A. Koch

added auth0 basics

parent bcc7f210
......@@ -66,3 +66,5 @@ _book
*.pdf
.idea
auth0.json
{
"domain": "yourdomain.auth0.com",
"clientID": "YOUR_CLIENT_ID",
"audience": "https://yourdomain.com/userinfo",
"redirectUri": "http://localhost:8080/users/callback"
}
This diff is collapsed.
......@@ -31,6 +31,8 @@
"@feathersjs/feathers": "^3.0.2",
"@feathersjs/primus-client": "^1.0.1",
"@feathersjs/rest-client": "^1.3.2",
"EventEmitter": "^1.0.0",
"auth0-js": "^9.4.2",
"bluebird": "^3.5.1",
"d3": "^4.13.0",
"es6-promise": "^4.1.1",
......@@ -132,7 +134,7 @@
"license": "MIT",
"appConfig": {
"apiHost": "https://motionbank-api.herokuapp.com",
"apiHostLocal": "https://motionbank-api.herokuapp.com",
"apiHostLocal": "http://localhost:3030",
"streamerHost": "http://localhost:8888",
"idField": "uuid"
}
......
......@@ -2,8 +2,8 @@
#q-app
animated-background
q-layout(ref="layout", view="hHh LpR fFf")
user-nav(slot="header")
router-view
user-nav(slot="header", :login="login", :auth="auth", :authenticated="authenticated")
router-view(:auth="auth", :authenticated="authenticated")
</template>
<script>
......@@ -15,13 +15,38 @@ import UserNav from './components/shared/partials/UserNav'
import {
QLayout
} from 'quasar-framework'
import * as auth0Conf from '../auth0.json'
import Auth0 from './lib/services/auth0'
const auth = new Auth0(auth0Conf)
const { login, logout, authenticated, authNotifier } = auth
export default {
data () {
authNotifier.on('authChange', authState => {
console.log('authChange', authState)
this.authenticated = authState.authenticated
})
return {
auth,
authenticated
}
},
methods: {
login,
logout,
isAuthenticated () {
return this.authenticated
}
},
components: {
QLayout,
AnimatedBackground,
UserNav
},
created: function () {
/*
const { $store } = this
$store.dispatch('auth/authenticate')
.catch(err => {
......@@ -36,6 +61,7 @@ export default {
}
}
})
*/
}
}
</script>
......@@ -12,11 +12,19 @@
q-btn(color="primary", flat, icon="settings",
v-if="user", @click="$router.push(`/users/me/edit`)") {{ $t('navigation.manage_account') }}
// Local
//q-btn(color="primary", flat, icon="eject",
//v-if="user", @click="logout") {{ $t('navigation.logout') }}
// q-btn(color="primary", flat, icon="arrow_forward",
// v-if="!user", @click="$router.push({ name: 'users.login' })") {{ $t('navigation.login') }}
// Auth0
q-btn(color="primary", flat, icon="eject",
v-if="user", @click="logout") {{ $t('navigation.logout') }}
v-if="authenticated", @click="auth.logout()") {{ $t('navigation.logout') }}
q-btn(color="primary", flat, icon="arrow_forward",
v-if="!user", @click="$router.push({ name: 'users.login' })") {{ $t('navigation.login') }}
v-if="!authenticated", @click="auth.login()") {{ $t('navigation.login') }}
</template>
<script>
......@@ -33,6 +41,7 @@
QIcon,
QBtn
},
props: ['authenticated', 'auth'],
data () {
return {
currentApp: null
......
<template lang="pug">
p Logging in...
</template>
<script>
export default {
name: 'callback',
props: ['auth'],
data () {
this.auth.handleAuthentication()
return {}
}
}
</script>
import callback from './callback'
import create from './create'
import forgot from './forgot'
import login from './login'
import manage from './manage'
export default {
callback,
create,
forgot,
login,
......
import auth0 from 'auth0-js'
import EventEmitter from 'EventEmitter'
import router from '../../router'
import * as auth0Conf from '../../../auth0.json'
const
auth = new auth0.WebAuth(Object.assign({
responseType: 'token id_token',
scope: 'openid'
}, auth0Conf)),
authNotifier = new EventEmitter()
class Auth0 {
constructor () {
this.userProfile = null
this.login = this.login.bind(this)
this.setSession = this.setSession.bind(this)
this.logout = this.logout.bind(this)
this.isAuthenticated = this.isAuthenticated.bind(this)
}
get authNotifier () {
return authNotifier
}
get authenticated () {
this.isAuthenticated()
}
login () {
console.log(auth)
auth.authorize()
}
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
authNotifier.emit('authChange', false)
// navigate to the home route
router.replace('site.welcome')
}
handleAuthentication () {
const _this = this
auth.parseHash((err, authResult) => {
if (authResult && authResult.accessToken && authResult.idToken) {
_this.setSession(authResult)
console.log(authResult, _this)
router.replace('edit')
}
else if (err) {
router.replace('site.welcome')
console.log(err)
}
})
}
setSession (authResult) {
// 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 })
}
isAuthenticated () {
// Check whether the current time is past the
// Access Token's expiry time
const expiresAt = JSON.parse(localStorage.getItem('expires_at'))
return new Date().getTime() < expiresAt
}
}
export default Auth0
import Auth0 from './auth0'
import notifications from './notifications'
import logging from './logging'
export default {
Auth0,
notifications,
logging
}
......@@ -47,6 +47,7 @@ const router = new VueRouter({
//
// User management
//
{ path: '/users/callback', component: users.callback, name: 'users.callback', meta: {} },
{ path: '/users/create', component: users.create, name: 'users.create', meta: { anonymous: true } },
{ path: '/users/login', component: users.login, name: 'users.login', meta: { anonymous: true } },
{ path: '/users/forgot', component: users.forgot, name: 'users.forgot', meta: { anonymous: true } },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment