Client side OAuth2 app with VueJS - Server component needed? - vue.js

Question

I am new to building JavaScript client-side apps with OAuth2.
I am using a JavaScript library that uses localStorage for OAuth implementation which implements Implicit Flow where only a client-id is needed -- no client-secret.
My corporation uses an enterprise identity provider/auth server (not Social networks) for issuing tokens. My custom app checks for the token on return and then proceeds with navigation using Vue Router's navigation guards.
Question:
From a security perspective, is the below code a good practical starting point? I plan to convert this into a JavaScript single page application (Webpack) where the app won't load protected pages unless a token is found (just the welcome/landing page is shown with an lOGIN button for auth). Is some kind of server validation necessary or is the client library good enough?
Here's a simple example of my auth flow (using Google as the Auth
server for demonstration purposes)
let client = new jso.JSO({
providerID: "google",
default_lifetime: 1800,
client_id: '<my-app-id>',
redirect_uri: "http://localhost/overview",
authorization: "https://accounts.google.com/o/oauth2/auth",
scopes: { request: ["https://www.googleapis.com/auth/userinfo.profile"] }
})
// check the browser response params when user returns
client.callback()
const LandingPage = Vue.component('landing-page', {
template: `<div>
<h2>Thisis the landing page.</h2>
<button v-on:click="oauthLogin">Login</button>
</div>`,
methods: {
oauthLogin() {
// get the token from the response params
client.getToken()
}
}
})
const OverView = { template: '<div><h1>Welcome!</h1><p>Here is what site is about.</p></div>' }
const PResource = { template: '<h2>Protected Resource Content Here</h2>' }
const router = new VueRouter({
mode: 'history',
routes: [
// {
// path: '*',
// component: NotFound
// },
{
path: '/',
component: LandingPage,
meta: {
requiresAuth: false
}
},
{
path: '/overview',
component: OverView,
meta: {
requiresAuth: true
}
},
{
path: '/protected-resource',
component: PResource,
meta: {
requiresAuth: true
}
}
]
})
router.beforeEach((to, from, next) => {
const token = window.localStorage.getItem('tokens-google')
if (to.matched.some(record => record.meta.requiresAuth)) {
//if token exists, continue user to protected resource
if (token !== null) {
next()
} else {
//if no token exists, send to a landing page
next({
path: '/',
query: {
redirect: to.fullPath
}
})
}
} else {
// if token exists and user navigates to root, redirect to /overview
if (token !== null && to.path == '/') {
next({ path: '/overview' })
} else {
next() // make sure to always call next()!
}
}
})
var app = new Vue({
el: '#app',
computed: {
checkToken() {
return window.localStorage.getItem('tokens-google')
}
},
router
})
Thanks!