Rework examples and refactor session handling #322

renoirb · 2018-04-20T20:17:41Z

Expanded examples in place and fixed things broken in my previous patch-set. I noticed that some examples were not all behaving without errors in the logs, although I'm 100% sure what is unfinished and what isn’t.

This PR fix found errors, adds things, and improves structure. (Hopefully)

Summary of the changes

Left lots of notes to capture how things are meant, to help future users

Minor things

Removed un needed translation keys
Fixed broken Vuex store getters for city, organizers, cities, foods

Added

examples/activity/NewActivity.vue now saves change to Vuex (but nothing reads it, yet)
New account/token.vue to visualize session cookie set by Koa (ctx.session.jwt)
Activities examples has had some harmonization work in Vuex Store namespace

Major change

Handling session state

Removed client side authentication, Koa handles authentication and exposes what is possible.

See #JwtTokenAreTooValuableToBeNonHttpOnly in the code, it is inspired by the idea of NOT using localStorage/sessionStorage at all.

Besides the new /hpi/auth/token (that should have validation to respond than), I feel this would be an improvement in ways to teach how to handle session state. — I'm open to discussing about it, maybe this design isn’t good.

Sharing account information from external source

Notice the keysMapWithLodashPathAndDefault key, it is a way where one could use either data from JWT token payload, OR from a validation service available to Nuxt/Koa from a private network.

renoirb

Here are a few notes I'm adding to explain ideas behind my additions.

renoirb · 2018-04-20T20:25:14Z

server/app.js

@@ -93,9 +95,11 @@ async function start () {
    }
  })

+  // Add valid and beforeSave hooks here to ensure session is valid #TODO


Related to #321

I'd like to see if we're not missing anything about session validation when we have an external validation service to trust.

renoirb · 2018-04-20T20:26:34Z

server/locales/zh.json

@@ -0,0 +1,5 @@
+{
+  "auth.login.required.missing": "用户名/密码未填写",


I’ve mistakenly forgotten to make nested objects.
That'll do for now, I wanted to make error messages i18n without importing ALL translation from client-side.

renoirb · 2018-04-20T20:28:29Z

server/utils/helpers.js

+/**
+ * Handle possibility where token endpoint, at exp returns seconds instead of µ seconds
+ */
+export const handleTokenExp = exp => {


This isn’t used here, but has been a solution when I lost a few hours in a day because my exp int value was seconds, instead of milliseconds. And it was failing silently.

Such a handler could be useful to ensure discrepancy between backend implementation and expectation.

renoirb · 2018-04-20T20:29:46Z

server/utils/helpers.js

+    ...restOfRequestConfig
+  } = requestConfig
+  let requestConfigObj = {
+    timeout: consts.AXIOS_DEFAULT_TIMEOUT,


Another pain point was that timeout was too short, and wasn’t the same in both client/server.
Backends doesn’t always respond fast. Most notably ones in production with loads of data and across various networks.

renoirb · 2018-04-20T20:35:27Z

client/middleware/check-auth.js

+  const hasSession = maybeReq !== null && !!maybeReq.session
+  let maybeAuthenticated = await store.getters.authenticated
+  if (hasSession === true && maybeAuthenticated === false) {
+    const { data } = await $axios.get('/hpi/auth/whois')


Related to #321 ; Delegate to Koa all data management.

renoirb · 2018-04-20T20:36:37Z

client/pages/login.vue

+      })
+      .catch(error => {
+        const errorMessage = error.toString()
+        this.captchaSvg = `<small style="line-height:1em;display:block;">${errorMessage}</small>`


There was no error management, now that makes it be more elegant if it breaks.

renoirb · 2018-04-20T20:36:54Z

client/pages/login.vue

-  logout () {
-    this.$store.dispatch('logout')
-  }
+  refreshCaptcha = debounce(this.getCaptcha, 500) // Note to you, reader, does this still work?


Does this really work?

renoirb · 2018-04-20T20:37:14Z

client/plugins/axios-defaults.js

@@ -1,26 +0,0 @@
-import axios from 'axios'


Not needed anymore, due to proposed design change.

renoirb · 2018-04-20T20:39:19Z

client/store/index.js

    try {
-      const { data: { access_token: token } } = await axios.post('/hpi/auth/login', {
+      await axios.post('/hpi/auth/login', {


Post ouf things to Koa.
If successful, it'll create a cookie payload that's a JSON string that has the JWT token in.
Since it's going to be HttpOnly, AND a Signed Cookie, we're sure the token will transit only via the cookie, and nowhere else (ideally).

renoirb · 2018-04-20T20:40:38Z

server/api/routes-auth.js

+    if (fakeIsValid) {
+      validated.UserInfo = {
+        UserName: 'admin',
+        DisplayName: 'Haaw D. Minh',


This is a joke I’ve created to myself and left there.
If this is inappropriate, please tell me :)

Talking about easter egg in my contributions.
In my previous PR, I've added a "city" called Lyster. I used an utf based emojii of a palm tree for Chinese.

The joke being that Lyster is a small town here in Québec (where my family is from), and we call it "Lyster Beach". It is in the middle of the land, it's only a church, and farms. And I wanted to have only one symbol to illustrate a city name, and thought it could be a funny thing to do.

We can remove those if you think it's inappropriate.

clarkdo

Thank you so much for the contributions, will start to read them asap

clarkdo

LGTM

renoirb · 2018-04-24T12:52:42Z

Any recent attempt at building a production build from master?

clarkdo · 2018-04-24T13:25:42Z

@renoirb
dev is the development branch, so I migrated your commits to dev and then will release them into master
I will appreciate it very much if you can review if the latest dev branch includes all your changes. 😸

renoirb · 2018-04-25T04:04:49Z

I could build on master (where you merged my previous PR). Issues was about devDependencies and dependencies at build time. Now it's OK, it does work as documented, I wouldn't have done it that way, but works anyway.

About dev branch.
A few weeks ago, I originally was rebasing my PR on top of dev instead of master.
But I got confused with the TypeScript syntax, running and dependencies and therefore cancelled my ambition to write with that stack. ECMAScript 2017+ is great :)

Could you run my PR code with it? I may need help there.
Besides that, yes, I'll take a look!

renoirb · 2018-04-30T22:37:25Z

Hi! Sorry for delay, just a quick note that I haven't forgotten reviewing.
I hope I can do it this week.

renoirb added 4 commits April 16, 2018 12:43

Expanded documentation for routes-auth Koa middleware

dcec2f8

Make /hpi handle JWT and data reads. Add validate.

d28e575

Previous PR broke example, fixing them.

b43d9be

Porting improvements from private project relevant to PR.

e095e13

renoirb commented Apr 20, 2018

View reviewed changes

clarkdo reviewed Apr 23, 2018

View reviewed changes

clarkdo approved these changes Apr 24, 2018

View reviewed changes

clarkdo merged commit 838c6b2 into clarkdo:master Apr 24, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rework examples and refactor session handling #322

Rework examples and refactor session handling #322

renoirb commented Apr 20, 2018 •

edited

Loading

renoirb left a comment

renoirb Apr 20, 2018

renoirb Apr 20, 2018

renoirb Apr 20, 2018

renoirb Apr 20, 2018

renoirb Apr 20, 2018 •

edited

Loading

renoirb Apr 20, 2018

renoirb Apr 20, 2018

renoirb Apr 20, 2018

renoirb Apr 20, 2018

renoirb Apr 20, 2018

renoirb Apr 21, 2018 •

edited

Loading

clarkdo left a comment

clarkdo left a comment

renoirb commented Apr 24, 2018

clarkdo commented Apr 24, 2018 •

edited

Loading

renoirb commented Apr 25, 2018 •

edited

Loading

renoirb commented Apr 30, 2018

		@@ -0,0 +1,5 @@
		{
		"auth.login.required.missing": "用户名/密码未填写",

Rework examples and refactor session handling #322

Rework examples and refactor session handling #322

Conversation

renoirb commented Apr 20, 2018 • edited Loading

Summary of the changes

Minor things

Added

Major change

Handling session state

Sharing account information from external source

renoirb left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

renoirb Apr 20, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

renoirb Apr 21, 2018 • edited Loading

Choose a reason for hiding this comment

clarkdo left a comment

Choose a reason for hiding this comment

clarkdo left a comment

Choose a reason for hiding this comment

renoirb commented Apr 24, 2018

clarkdo commented Apr 24, 2018 • edited Loading

renoirb commented Apr 25, 2018 • edited Loading

renoirb commented Apr 30, 2018

renoirb commented Apr 20, 2018 •

edited

Loading

renoirb Apr 20, 2018 •

edited

Loading

renoirb Apr 21, 2018 •

edited

Loading

clarkdo commented Apr 24, 2018 •

edited

Loading

renoirb commented Apr 25, 2018 •

edited

Loading