add basic user authentication

front/package-lock.json

@@ -8,6 +8,7 @@
       "name": "personal-library-manager",
       "version": "0.0.0",
       "dependencies": {
+        "pinia": "^3.0.3",
         "vue": "^3.5.18",
         "vue-router": "^4.5.1"
       },
@@ -1903,7 +1904,6 @@
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.5.0.tgz",
       "integrity": "sha512-VSWO/W6nNQdyP520F1mhf+Lc2f8pjGQOtoHHm7Ze8Go1kX7akpVIrtTa0fn+HB0QJEDVacl6aO08YE0PgXfdnQ==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -2063,7 +2063,6 @@
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
       "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-what": "^4.1.8"
@@ -2731,7 +2730,6 @@
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
       "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/human-signals": {
@@ -2882,7 +2880,6 @@
       "version": "4.1.16",
       "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
       "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.13"
@@ -3071,7 +3068,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
       "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/mrmime": {
@@ -3299,7 +3295,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
       "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/picocolors": {
@@ -3321,6 +3316,60 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.3.tgz",
+      "integrity": "sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^7.7.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.4.4",
+        "vue": "^2.7.0 || ^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-api": {
+      "version": "7.7.7",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.7.tgz",
+      "integrity": "sha512-lwOnNBH2e7x1fIIbVT7yF5D+YWhqELm55/4ZKf45R9T8r9dE2AIOy8HKjfqzGsoTHFbWbr337O4E0A0QADnjBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.7"
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-kit": {
+      "version": "7.7.7",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.7.tgz",
+      "integrity": "sha512-wgoZtxcTta65cnZ1Q6MbAfePVFxfM+gq0saaeytoph7nEa7yMXoi6sCPy4ufO111B9msnw0VOWjPEFCXuAKRHA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.7",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-shared": {
+      "version": "7.7.7",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.7.tgz",
+      "integrity": "sha512-+udSj47aRl5aKb0memBvcUG9koarqnxNM5yjuREvqwK6T3ap4mn3Zqqc17QrBFTqSMjr3HK1cvStEZpMDpfdyw==",
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -3443,7 +3492,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
       "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/rollup": {
@@ -3577,7 +3625,6 @@
       "version": "14.0.1",
       "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
       "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -3613,7 +3660,6 @@
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.2.tgz",
       "integrity": "sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "copy-anything": "^3.0.2"

front/package.json

@@ -14,6 +14,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "pinia": "^3.0.3",
     "vue": "^3.5.18",
     "vue-router": "^4.5.1"
   },

front/src/AppNavBar.vue

@@ -1,5 +1,8 @@
 <script setup>
   import { RouterLink } from 'vue-router'
+  import { useAuthStore } from './auth.store.js'
+
+  const authStore = useAuthStore();
 </script>
 
 <template>
@@ -29,14 +32,22 @@
     </div>
 
     <div class="navbar-end">
-      <div class="navbar-item">
+      <div v-if="authStore.user" class="navbar-item">
+        <div >
+           {{ authStore.user.username }}
+        </div>
+        <a @click="authStore.logout" class="button is-light">
+          Log out
+        </a>
+      </div>
+      <div v-else class="navbar-item">
         <div  class="buttons">
           <RouterLink to="/signup" class="button is-primary">
             <strong>Sign up</strong>
           </RouterLink>
-          <a class="button is-light">
+          <RouterLink to="/login" class="button is-light">
             Log in
-          </a>
+          </RouterLink>
         </div>
       </div>
     </div>

front/src/LogIn.vue

@@ -0,0 +1,74 @@
+<script setup>
+  import { ref, computed } from 'vue'
+  import { postLogin, extractFromErrorFromField, extractGlobalFormError } from './api.js'
+  import { useRouter } from 'vue-router'
+  import { useAuthStore } from './auth.store.js'
+
+  const router = useRouter();
+
+  const user = ref({
+    username: "",
+    password: ""
+  });
+
+  const errors = ref(null)
+
+  const formError = computed(() => {
+    return extractGlobalFormError(errors.value);
+  })
+  const userError = computed(() => {
+    return extractFromErrorFromField("Username", errors.value);
+  })
+  const passwordError = computed(() => {
+    return extractFromErrorFromField("Password", errors.value);
+  })
+
+  function onSubmit(e) {
+    postLogin(user)
+      .then((res) => {
+        if (res.ok) {
+          res.json().then((json) => login(user.value.username, json));
+          router.push('/');
+          return;
+        } else {
+          res.json().then((json) => (errors.value = json));
+        }
+      })
+  }
+
+  function login(username, json) {
+    useAuthStore().login({username: username, token: json["token"]})
+  }
+</script>
+
+
+<template>
+  <div v-if="formError" class="notification is-danger">
+    <p>{{formError}}</p>
+  </div>
+  <form class="box" @submit.prevent="onSubmit">
+    <div class="field">
+      <label class="label">Username</label>
+      <div class="control">
+        <input :class="'input ' + (userError ? 'is-danger' : '')" type="text" minlength="2" maxlength="20"
+        required v-model="user.username" placeholder="Username">
+      </div>
+      <p v-if="userError" class="help is-danger">{{userError}}</p>
+    </div>
+    <div class="field">
+      <label class="label">Password</label>
+      <div class="control">
+        <input :class="'input ' + (passwordError ? 'is-danger' : '')" type="password" minlength="6"
+        maxlength="100" v-model="user.password" required placeholder="Password">
+      </div>
+      <p v-if="passwordError" class="help is-danger">{{passwordError}}</p>
+    </div>
+    <div class="field">
+      <div class="control">
+        <button class="button is-link">Log In</button>
+      </div>
+    </div>
+  </form>
+</template>
+
+<style scoped></style>

front/src/SignUp.vue

@@ -1,7 +1,7 @@
 <script setup>
-  import { ref, reactive, computed } from 'vue'
+  import { ref, computed } from 'vue'
-  import { postBook, postSignup } from './api.js'
+  import { postSignUp, extractFromErrorFromField, extractGlobalFormError } from './api.js'
-  import { useRouter, useRoute } from 'vue-router'
+  import { useRouter } from 'vue-router'
 
   const router = useRouter();
 
@@ -9,28 +9,21 @@
     username: "",
     password: ""
   });
+
   const errors = ref(null)
+
+  const formError = computed(() => {
+    return extractGlobalFormError(errors.value);
+  })
   const userError = computed(() => {
-    return extractErrorFromField("Username");
+    return extractFromErrorFromField("Username", errors.value);
   })
   const passwordError = computed(() => {
-    return extractErrorFromField("Password");
+    return extractFromErrorFromField("Password", errors.value);
   })
 
-  function extractErrorFromField(fieldName) {
+  function onSubmit() {
-    if (errors.value === null) {
+    postSignUp(user)
-     return "";
-    }
-    const titleErr = errors.value.find((e) => e["field"] === fieldName);
-    if (typeof titleErr !== 'undefined') {
-      return titleErr.error
-    } else {
-      return "";
-    }
-  }
-
-  function onSubmit(e) {
-    postSignup(user)
       .then((res) => {
         if (res.ok) {
           router.push('/');
@@ -43,7 +36,10 @@
 </script>
 
 <template>
-  <form @submit.prevent="onSubmit">
+  <div v-if="formError" class="notification is-danger">
+    <p>{{formError}}</p>
+  </div>
+  <form class="box" @submit.prevent="onSubmit">
     <div class="field">
       <label class="label">Username</label>
       <div class="control">
@@ -62,7 +58,7 @@
     </div>
     <div class="field">
       <div class="control">
-        <button class="button is-link">Submit</button>
+        <button class="button is-link">Sign In</button>
       </div>
     </div>
   </form>

front/src/api.js

@@ -19,21 +19,43 @@ export function getBooks() {
 }
 
 export function postBook(book) {
-  return fetch(baseUrl + '/book', {
+  return genericPostCall('/book', book.value)
+}
+
+export function postLogin(user) {
+  return genericPostCall('/auth/login', user.value)
+}
+
+export function postSignUp(user) {
+  return genericPostCall('/auth/signup', user.value)
+}
+
+export function genericPostCall(apiRoute, object) {
+  return fetch(baseUrl + apiRoute, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json'
     },
-    body: JSON.stringify(book.value)
+    body: JSON.stringify(object)
   })
 }
 
-export function postSignup(user) {
+export function extractFromErrorFromField(fieldName, errors) {
-  return fetch(baseUrl + '/auth/signup', {
+  if (errors === null || !('field' in errors)) {
-    method: 'POST',
+    return "";
-    headers: {
+  }
-      'Content-Type': 'application/json'
+  const titleErr = errs.find((e) => e["field"] === fieldName);
-    },
+  if (typeof titleErr !== 'undefined') {
-    body: JSON.stringify(user.value)
+    return titleErr.error;
-  })
+  } else {
+    return "";
+  }
+}
+
+export function extractGlobalFormError(errors) {
+  if (errors !== null && "error" in errors) {
+    return errors["error"];
+  } else {
+    return "";
+  }
 }

front/src/auth.store.js

@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia';
+import { useRouter } from 'vue-router'
+
+export const useAuthStore = defineStore('auth', {
+  state: () => ({
+    // initialize state from local storage to enable user to stay logged in
+    user: JSON.parse(localStorage.getItem('user')),
+    returnUrl: null
+  }),
+  actions: {
+    login(user) {
+      this.user = user;
+      localStorage.setItem('user', JSON.stringify(user));
+    },
+    logout() {
+      this.user = null;
+      localStorage.removeItem('user');
+      useRouter().push('/');
+    }
+  }
+});

front/src/main.js

@@ -1,15 +1,18 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import { createRouter, createWebHistory } from 'vue-router'
 import App from './App.vue'
 import BooksBrowser from './BooksBrowser.vue'
 import AddBook from './AddBook.vue'
 import SignUp from './SignUp.vue'
+import LogIn from './LogIn.vue'
 
 
 const routes = [
   { path: '/', component: BooksBrowser },
   { path: '/add', component: AddBook },
   { path: '/signup', component: SignUp },
+  { path: '/login', component: LogIn },
 ]
 
 export const router = createRouter({
@@ -17,4 +20,6 @@ export const router = createRouter({
   routes,
 })
 
-createApp(App).use(router).mount('#app')
+const pinia = createPinia()
+
+createApp(App).use(pinia).use(router).mount('#app')

go.mod

@@ -23,6 +23,7 @@ require (
 	github.com/go-playground/universal-translator v0.18.1 // indirect
 	github.com/go-playground/validator/v10 v10.27.0 // indirect
 	github.com/goccy/go-json v0.10.5 // indirect
+	github.com/golang-jwt/jwt/v5 v5.3.0 // indirect
 	github.com/jinzhu/inflection v1.0.0 // indirect
 	github.com/jinzhu/now v1.1.5 // indirect
 	github.com/json-iterator/go v1.1.12 // indirect

go.sum

@@ -28,6 +28,8 @@ github.com/go-playground/validator/v10 v10.27.0 h1:w8+XrWVMhGkxOaaowyKH35gFydVHO
 github.com/go-playground/validator/v10 v10.27.0/go.mod h1:I5QpIEbmr8On7W0TktmJAumgzX4CA1XNl4ZmDuVHKKo=
 github.com/goccy/go-json v0.10.5 h1:Fq85nIqj+gXn/S5ahsiTlK3TmC85qgirsdTP/+DeaC4=
 github.com/goccy/go-json v0.10.5/go.mod h1:oq7eo15ShAhp70Anwd5lgX2pLfOS3QCiwU/PULtXL6M=
+github.com/golang-jwt/jwt/v5 v5.3.0 h1:pv4AsKCKKZuqlgs5sUmn4x8UlGa0kEVt/puTpKx9vvo=
+github.com/golang-jwt/jwt/v5 v5.3.0/go.mod h1:fxCRLWMO43lRc8nhHWY6LGqRcf+1gQWArsqaEUEa5bE=
 github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8=
 github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX3N/iU=
 github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=

internal/api/dto.go

@@ -6,7 +6,12 @@ type bookPostCreate struct {
 	Rating int    `json:"rating" binding:"min=0,max=10"`
 }
 
-type userPostCreate struct {
+type userSignup struct {
+	Username string `json:"username" binding:"required,min=2,max=20"`
+	Password string `json:"password" binding:"required,min=6,max=100"`
+}
+
+type userLogin struct {
 	Username string `json:"username" binding:"required,min=2,max=20"`
 	Password string `json:"password" binding:"required,min=6,max=100"`
 }

internal/api/mapper.go

@@ -13,7 +13,7 @@ func (b bookPostCreate) toBook() model.Book {
 	}
 }
 
-func (u userPostCreate) toUser() (model.User, error) {
+func (u userSignup) toUser() (model.User, error) {
 	user := model.User{
 		Name:     u.Username,
 		Password: "",

internal/api/routes.go

@@ -2,11 +2,14 @@ package api
 
 import (
 	"errors"
+	"fmt"
 	"net/http"
 
+	"git.artlef.fr/PersonalLibraryManager/internal/jwtauth"
 	"git.artlef.fr/PersonalLibraryManager/internal/model"
 	"github.com/gin-gonic/gin"
 	"github.com/go-playground/validator/v10"
+	"golang.org/x/crypto/bcrypt"
 	"gorm.io/gorm"
 )
 
@@ -32,8 +35,8 @@ func PostBookHandler(c *gin.Context, db *gorm.DB) {
 	c.String(200, "Success")
 }
 
-func PostUserHandler(c *gin.Context, db *gorm.DB) {
+func PostSignupHandler(c *gin.Context, db *gorm.DB) {
-	var user userPostCreate
+	var user userSignup
 	err := c.ShouldBindJSON(&user)
 	if err != nil {
 		manageBindingError(c, err)
@@ -52,6 +55,37 @@ func PostUserHandler(c *gin.Context, db *gorm.DB) {
 	c.String(200, "Success")
 }
 
+func PostLoginHandler(c *gin.Context, db *gorm.DB) {
+	var user userLogin
+	err := c.ShouldBindJSON(&user)
+	if err != nil {
+		manageBindingError(c, err)
+		return
+	}
+
+	if !isUserAndPasswordOk(db, user.Username, user.Password) {
+		c.JSON(http.StatusInternalServerError,
+			gin.H{"error": "Invalid credentials."})
+		return
+	}
+
+	var jwtToken string
+	jwtToken, err = jwtauth.GenerateJwtToken(user.Username)
+	if err != nil {
+		c.JSON(http.StatusUnauthorized,
+			gin.H{"error": fmt.Errorf("Error when generating JWT token: %w", err)})
+		return
+	}
+	c.JSON(200, gin.H{"message": "Authentication was a success.", "token": jwtToken})
+}
+
+func isUserAndPasswordOk(db *gorm.DB, username string, password string) bool {
+	var user model.User
+	db.Where("name = ?", username).First(&user)
+	err := bcrypt.CompareHashAndPassword([]byte(user.Password), []byte(password))
+	return err == nil
+}
+
 func manageBindingError(c *gin.Context, err error) {
 	var ve validator.ValidationErrors
 	if errors.As(err, &ve) {

internal/jwtauth/jwt.go

@@ -0,0 +1,22 @@
+package jwtauth
+
+import (
+	"encoding/base64"
+	"os"
+
+	"github.com/golang-jwt/jwt/v5"
+)
+
+func GenerateJwtToken(username string) (string, error) {
+	var s string
+	key, err := base64.URLEncoding.DecodeString(os.Getenv(getKeyVariableName()))
+	if err != nil {
+		return s, err
+	}
+	t := jwt.NewWithClaims(jwt.SigningMethodHS256,
+		jwt.MapClaims{
+			"iss": "PersonalLibraryManager",
+			"sub": username,
+		})
+	return t.SignedString(key)
+}

internal/jwtauth/key.go

@@ -0,0 +1,39 @@
+package jwtauth
+
+import (
+	"crypto/rand"
+	"encoding/base64"
+	"os"
+)
+
+func generateRandomBytes(n int) ([]byte, error) {
+	b := make([]byte, n)
+	_, err := rand.Read(b)
+	if err != nil {
+		return nil, err
+	}
+	return b, nil
+}
+
+func generateSecureToken(n int) (string, error) {
+	bytes, err := generateRandomBytes(n)
+	if err != nil {
+		return "", err
+	}
+	return base64.URLEncoding.EncodeToString(bytes), nil
+}
+
+func getKeyVariableName() string {
+	return "PLM_JWT_KEY"
+}
+
+func InitKey() error {
+	var err error
+	keyName := getKeyVariableName()
+	key := os.Getenv(keyName)
+	if key == "" {
+		key, err = generateSecureToken(64)
+		os.Setenv(keyName, key)
+	}
+	return err
+}

main.go

@@ -7,6 +7,7 @@ import (
 	"git.artlef.fr/PersonalLibraryManager/internal/api"
 	"git.artlef.fr/PersonalLibraryManager/internal/config"
 	"git.artlef.fr/PersonalLibraryManager/internal/db"
+	"git.artlef.fr/PersonalLibraryManager/internal/jwtauth"
 )
 
 func main() {
@@ -17,6 +18,10 @@ func main() {
 
 func setup(config *config.Config) *gin.Engine {
 	db := db.Initdb(config.DatabaseFilePath, config.DemoDataPath)
+	err := jwtauth.InitKey()
+	if err != nil {
+		panic(err)
+	}
 	r := gin.Default()
 	r.Use(cors.Default()) // All origins allowed by default
 	r.GET("/books", func(c *gin.Context) {
@@ -26,7 +31,10 @@ func setup(config *config.Config) *gin.Engine {
 		api.PostBookHandler(c, db)
 	})
 	r.POST("/auth/signup", func(c *gin.Context) {
-		api.PostUserHandler(c, db)
+		api.PostSignupHandler(c, db)
+	})
+	r.POST("/auth/login", func(c *gin.Context) {
+		api.PostLoginHandler(c, db)
 	})
 	return r
 }