Auth0 related changes

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>

src/components/Lists.vue

@@ -78,7 +78,7 @@ export default {
           createList(
             title: "${list.title}"
             user: {
-              username: "${store.session.username}"
+              username: "${store.userId}"
             }
           ) {
             id

src/components/Todo.vue

@@ -128,7 +128,7 @@ export default {
               id: "${task.list.id}"
             },
             user: {
-              username: "${store.session.username}"
+              username: "${store.userId}"
             }
           ) {
             id

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>

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
         }