add basic user authentication

This commit is contained in:
2025-10-01 21:43:37 +02:00
parent 57355fe9ac
commit f20e177480
16 changed files with 338 additions and 51 deletions

View File

@@ -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"

View File

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

View File

@@ -1,5 +1,8 @@
<script setup>
import { RouterLink } from 'vue-router'
import { useAuthStore } from './auth.store.js'
const authStore = useAuthStore();
</script>
<template>
@@ -14,7 +17,7 @@
<RouterLink to="/" class="navbar-item" activeClass="is-active">
Home
</RouterLink>
<RouterLink to="/add" class="navbar-item" activeClass="is-active">
<RouterLink to="/add" class="navbar-item" activeClass="is-active">
Add Book
</RouterLink>
<a class="navbar-item">
@@ -29,14 +32,22 @@
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<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>

74
front/src/LogIn.vue Normal file
View File

@@ -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>

View File

@@ -1,7 +1,7 @@
<script setup>
import { ref, reactive, computed } from 'vue'
import { postBook, postSignup } from './api.js'
import { useRouter, useRoute } from 'vue-router'
import { ref, computed } from 'vue'
import { postSignUp, extractFromErrorFromField, extractGlobalFormError } from './api.js'
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) {
if (errors.value === null) {
return "";
}
const titleErr = errors.value.find((e) => e["field"] === fieldName);
if (typeof titleErr !== 'undefined') {
return titleErr.error
} else {
return "";
}
}
function onSubmit(e) {
postSignup(user)
function onSubmit() {
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>

View File

@@ -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) {
return fetch(baseUrl + '/auth/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(user.value)
})
export function extractFromErrorFromField(fieldName, errors) {
if (errors === null || !('field' in errors)) {
return "";
}
const titleErr = errs.find((e) => e["field"] === fieldName);
if (typeof titleErr !== 'undefined') {
return titleErr.error;
} else {
return "";
}
}
export function extractGlobalFormError(errors) {
if (errors !== null && "error" in errors) {
return errors["error"];
} else {
return "";
}
}

21
front/src/auth.store.js Normal file
View File

@@ -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('/');
}
}
});

View File

@@ -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')

1
go.mod
View File

@@ -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

2
go.sum
View File

@@ -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=

View File

@@ -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"`
}

View File

@@ -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: "",

View File

@@ -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) {
var user userPostCreate
func PostSignupHandler(c *gin.Context, db *gorm.DB) {
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) {

22
internal/jwtauth/jwt.go Normal file
View File

@@ -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)
}

39
internal/jwtauth/key.go Normal file
View File

@@ -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
}

10
main.go
View File

@@ -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
}