From 8bb10266b0d14c0cf44ca9adaba1d57f2f97f7e7 Mon Sep 17 00:00:00 2001
From: Markus Thielen <markus.thielen@basebox.io>
Date: Tue, 16 May 2023 12:25:44 +0200
Subject: [PATCH] Auth0 related changes

---
 bbconf/bb_todo-resolver.toml | 162 +++++++++++++++++------------------
 src/App.vue                  |   2 +-
 src/components/Lists.vue     |   2 +-
 src/components/Todo.vue      |   2 +-
 src/components/Welcome.vue   |   2 +-
 src/store.js                 |  31 +++++--
 6 files changed, 109 insertions(+), 92 deletions(-)

diff --git a/bbconf/bb_todo-resolver.toml b/bbconf/bb_todo-resolver.toml
index 7a6a583..76288ff 100644
--- a/bbconf/bb_todo-resolver.toml
+++ b/bbconf/bb_todo-resolver.toml
@@ -1,33 +1,62 @@
-[resolvers.createTask]
-operation_name = "createTask"
+[resolvers.getUser]
+operation_name = "getUser"
 
-[resolvers.createTask.resolver]
+[resolvers.getUser.resolver]
+command_type = "SQLSelect"
+
+[resolvers.getUser.resolver.command]
+table = "User"
+columns = []
+modify_values = []
+nested_modify_tables = []
+aggregate_result = true
+
+[[resolvers.getUser.resolver.command.where_clauses]]
+table = "User"
+column = "username"
+condition_str = "= '$username'"
+index = ""
+
+[resolvers.updateList]
+operation_name = "updateList"
+
+[resolvers.updateList.resolver]
+command_type = "SQLUpdate"
+
+[resolvers.updateList.resolver.command]
+table = "List"
+columns = []
+nested_modify_tables = []
+aggregate_result = true
+
+[[resolvers.updateList.resolver.command.modify_values]]
+column = "title"
+value = "'$title'"
+
+[[resolvers.updateList.resolver.command.where_clauses]]
+table = "List"
+column = "id"
+condition_str = "= '$id'"
+index = ""
+
+[resolvers.createList]
+operation_name = "createList"
+
+[resolvers.createList.resolver]
 command_type = "SQLInsert"
 
-[resolvers.createTask.resolver.command]
-table = "Task"
+[resolvers.createList.resolver.command]
+table = "List"
 columns = []
 nested_modify_tables = []
 where_clauses = []
 aggregate_result = true
 
-[[resolvers.createTask.resolver.command.modify_values]]
+[[resolvers.createList.resolver.command.modify_values]]
 column = "title"
 value = "'$title'"
 
-[[resolvers.createTask.resolver.command.modify_values]]
-column = "description"
-value = "'$description'"
-
-[[resolvers.createTask.resolver.command.modify_values]]
-column = "completed"
-value = "'$completed'"
-
-[[resolvers.createTask.resolver.command.modify_values]]
-column = "list_id"
-value = "'$list.$id'"
-
-[[resolvers.createTask.resolver.command.modify_values]]
+[[resolvers.createList.resolver.command.modify_values]]
 column = "user_username"
 value = "'$user.$username'"
 
@@ -71,6 +100,39 @@ column = "id"
 condition_str = "= '$id'"
 index = ""
 
+[resolvers.createTask]
+operation_name = "createTask"
+
+[resolvers.createTask.resolver]
+command_type = "SQLInsert"
+
+[resolvers.createTask.resolver.command]
+table = "Task"
+columns = []
+nested_modify_tables = []
+where_clauses = []
+aggregate_result = true
+
+[[resolvers.createTask.resolver.command.modify_values]]
+column = "title"
+value = "'$title'"
+
+[[resolvers.createTask.resolver.command.modify_values]]
+column = "description"
+value = "'$description'"
+
+[[resolvers.createTask.resolver.command.modify_values]]
+column = "completed"
+value = "'$completed'"
+
+[[resolvers.createTask.resolver.command.modify_values]]
+column = "list_id"
+value = "'$list.$id'"
+
+[[resolvers.createTask.resolver.command.modify_values]]
+column = "user_username"
+value = "'$user.$username'"
+
 [resolvers.deleteList]
 operation_name = "deleteList"
 
@@ -90,27 +152,6 @@ column = "id"
 condition_str = "= '$id'"
 index = ""
 
-[resolvers.createList]
-operation_name = "createList"
-
-[resolvers.createList.resolver]
-command_type = "SQLInsert"
-
-[resolvers.createList.resolver.command]
-table = "List"
-columns = []
-nested_modify_tables = []
-where_clauses = []
-aggregate_result = true
-
-[[resolvers.createList.resolver.command.modify_values]]
-column = "title"
-value = "'$title'"
-
-[[resolvers.createList.resolver.command.modify_values]]
-column = "user_username"
-value = "'$user.$username'"
-
 [resolvers.updateTask]
 operation_name = "updateTask"
 
@@ -144,44 +185,3 @@ table = "Task"
 column = "id"
 condition_str = "= '$id'"
 index = ""
-
-[resolvers.getUser]
-operation_name = "getUser"
-
-[resolvers.getUser.resolver]
-command_type = "SQLSelect"
-
-[resolvers.getUser.resolver.command]
-table = "User"
-columns = []
-modify_values = []
-nested_modify_tables = []
-aggregate_result = true
-
-[[resolvers.getUser.resolver.command.where_clauses]]
-table = "User"
-column = "username"
-condition_str = "= '$username'"
-index = ""
-
-[resolvers.updateList]
-operation_name = "updateList"
-
-[resolvers.updateList.resolver]
-command_type = "SQLUpdate"
-
-[resolvers.updateList.resolver.command]
-table = "List"
-columns = []
-nested_modify_tables = []
-aggregate_result = true
-
-[[resolvers.updateList.resolver.command.modify_values]]
-column = "title"
-value = "'$title'"
-
-[[resolvers.updateList.resolver.command.where_clauses]]
-table = "List"
-column = "id"
-condition_str = "= '$id'"
-index = ""
diff --git a/src/App.vue b/src/App.vue
index b3bd6a2..6e4b6c2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -46,7 +46,7 @@ function dismissError() {
             </li>
           </ul>
           <ul class="navbar-nav mb-2 mb-lg-0">
-            <li class="navbar-text">Hello, {{ store.session.username }}!</li>
+            <li class="navbar-text">Hello, {{ store.userDisplayName }}!</li>
             <li class="nav-item ms-2">
               <button class="nav-link btn btn-sm btn-secondary" @click="logOut()">Logout</button>
             </li>
diff --git a/src/components/Lists.vue b/src/components/Lists.vue
index 0a41d4c..4e75943 100644
--- a/src/components/Lists.vue
+++ b/src/components/Lists.vue
@@ -78,7 +78,7 @@ export default {
           createList(
             title: "${list.title}"
             user: {
-              username: "${store.session.username}"
+              username: "${store.userId}"
             }
           ) {
             id
diff --git a/src/components/Todo.vue b/src/components/Todo.vue
index b561052..167bc31 100644
--- a/src/components/Todo.vue
+++ b/src/components/Todo.vue
@@ -128,7 +128,7 @@ export default {
               id: "${task.list.id}"
             },
             user: {
-              username: "${store.session.username}"
+              username: "${store.userId}"
             }
           ) {
             id
diff --git a/src/components/Welcome.vue b/src/components/Welcome.vue
index 0391477..7821498 100644
--- a/src/components/Welcome.vue
+++ b/src/components/Welcome.vue
@@ -12,7 +12,7 @@ import { store} from "../store";
 
 <template>
   <div class="greetings">
-    <h1 class="primary">Welcome, {{ store.userName }}!</h1>
+    <h1 class="primary">Welcome, {{ store.userDisplayName }}!</h1>
     <h3>
       To basebox' ToDo Sample app.
     </h3>
diff --git a/src/store.js b/src/store.js
index f2c07c4..5c0bbad 100644
--- a/src/store.js
+++ b/src/store.js
@@ -9,8 +9,11 @@ import {gqlQuery} from "./util/net";
 
 export const store = reactive({
 
-  /** Username of the currently logged-in user */
-  userName: "stranger",
+  /** User display name of the currently logged-in user */
+  userDisplayName: "stranger",
+
+  /* Unique user id of the currently logged in user */
+  userId: "",
 
   /** base URL of basebox broker host */
   baseboxHost: import.meta.env.BASEBOX_HOST || "http://127.0.0.1:8080",
@@ -72,7 +75,21 @@ export async function storeInit(session) {
 
   /* save user session in the store */
   store.session = { ...session };
-  store.userName = session.first_name ? session.first_name : session.username;
+
+  /* The information in the session object depends on the OpenID Connect provider.
+   * The following fields are always present:
+   *
+   * `token` - basebox session token
+   * `subject` - unique user id (not a username, rather a number or UUID)
+   * `id_token_claims` - all fields found in the ID token.
+   * 
+   * Since we assume Auth0 being the Open ID Connect provider, we use `id_token_claims.nickname`
+   * as the user name we display in the UI.
+   */ 
+  store.userDisplayName = session.id_token_claims.nickname;
+
+  /* The unique user ID is the 'sub' field from the ID token. */
+  store.userId = session.subject;
 
   /* Create user and default list.
    * We cannot run these requests in parallel, since the user record must exist in the database
@@ -82,8 +99,8 @@ export async function storeInit(session) {
     console.info("NOTE: If next request fails, it is probably because the user already exists. In this case, the error is ignored.");
     await gqlQuery(`mutation {
       createUser(
-        username: "${session.username}",
-        name: "${session.first_name} ${session.last_name}"
+        username: "${store.userId}",
+        name: "${store.userDisplayName}"
       ) {
         username
       }
@@ -101,7 +118,7 @@ export async function storeInit(session) {
 
   /* Load user info, lists and todos. */
   gqlQuery(`query {
-    getUser(username: "${store.session.username}") {
+    getUser(username: "${store.userId}") {
       name
       lists {
         id
@@ -125,7 +142,7 @@ export async function storeInit(session) {
       gqlQuery(`mutation {
         createList(
           title: "Default",
-          user: { username: "${store.session.username}" }
+          user: { username: "${store.userId}" }
         ) {
           title
         }