feat: add basis of auth
This commit is contained in:
parent
67f98735ee
commit
893b3726bb
GPG key ID:
270B096EF6E9A462
4 changed files with 313 additions and 0 deletions
56
layouts/auth.vue
Normal file
56
layouts/auth.vue
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<div id="main-container">
|
||||
<div id="auth-form-container">
|
||||
<slot />
|
||||
</div>
|
||||
<div v-if="accessToken">
|
||||
You're logged in!
|
||||
<button @click="logout">Log out</button>
|
||||
</div>
|
||||
<div v-if="res">
|
||||
Response:
|
||||
<p>
|
||||
{{ res }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
const apiVersion = useRuntimeConfig().public.apiVersion;
|
||||
|
||||
const accessToken = useCookie("access_token");
|
||||
|
||||
const res = ref();
|
||||
|
||||
async function logout(e: Event) {
|
||||
e.preventDefault();
|
||||
accessToken.value = null;
|
||||
useCookie("refresh_token").value = null;
|
||||
res.value = await $fetch(`/api/v${apiVersion}/auth/revoke`, { credentials: "include" });
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#main-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#auth-form-container,
|
||||
#auth-form-container form {
|
||||
display: flex;
|
||||
width: 50dvw;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
#auth-form-container form {
|
||||
text-align: left;
|
||||
margin-top: 10dvh;
|
||||
}
|
||||
</style>
|
||||
84
pages/login.vue
Normal file
84
pages/login.vue
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<template>
|
||||
<NuxtLayout>
|
||||
<form @submit="login">
|
||||
<div>
|
||||
<label for="username">Username/Email</label>
|
||||
<br>
|
||||
<input type="text" name="username" id="username" v-model="form.username">
|
||||
</div>
|
||||
<div>
|
||||
<label for="password">Password</label>
|
||||
<br>
|
||||
<input type="password" name="password" id="password" v-model="form.password">
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit">Login</button>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
Don't have an account? <NuxtLink href="/register">Register</NuxtLink> one!
|
||||
</div>
|
||||
<div v-if="response">
|
||||
Response:
|
||||
<p>
|
||||
{{ response }}
|
||||
</p>
|
||||
</div>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
definePageMeta({
|
||||
layout: "auth"
|
||||
})
|
||||
|
||||
const form = reactive({
|
||||
username: "",
|
||||
password: "",
|
||||
});
|
||||
|
||||
const response = ref();
|
||||
|
||||
//const authStore = useAuthStore();
|
||||
const accessToken = useCookie("access_token");
|
||||
const refreshToken = useCookie("refresh_token");
|
||||
const redirectTo = useRoute().query.redirect_to;
|
||||
|
||||
console.log("access token:", accessToken.value);
|
||||
console.log("refresh token:", refreshToken.value);
|
||||
|
||||
onMounted(() => {
|
||||
console.log("accessToken:", accessToken.value);
|
||||
console.log("refreshToken:", refreshToken.value);
|
||||
|
||||
if (accessToken.value) {
|
||||
//return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
|
||||
}
|
||||
});
|
||||
|
||||
const apiVersion = useRuntimeConfig().public.apiVersion;
|
||||
|
||||
async function login(e: Event) {
|
||||
e.preventDefault();
|
||||
console.log("Sending login data");
|
||||
const hashedPass = await hashPassword(form.password);
|
||||
console.log("hashedPass:", hashedPass);
|
||||
//authStore.setAccessToken(accessToken);
|
||||
const res = await $fetch(`/api/v${apiVersion}/auth/login`, {
|
||||
method: "POST", body:
|
||||
{
|
||||
username: form.username, password: hashedPass
|
||||
}
|
||||
}) as { access_token: string, refresh_token: string };
|
||||
response.value = res;
|
||||
accessToken.value = res.access_token;
|
||||
console.log("set access token:", accessToken.value);
|
||||
const refreshToken = useCookie("refresh_token", { secure: true, httpOnly: false });
|
||||
refreshToken.value = res.refresh_token;
|
||||
//return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
156
pages/register.vue
Normal file
156
pages/register.vue
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<template>
|
||||
<NuxtLayout>
|
||||
<form @submit="register">
|
||||
<div>
|
||||
<!--
|
||||
<span class="form-error" v-if="errors.username.length > 0">
|
||||
<p v-for="error of errors.username">
|
||||
{{ error }}
|
||||
</p>
|
||||
</span>
|
||||
-->
|
||||
<label for="username">Username</label>
|
||||
<br>
|
||||
<input type="text" name="username" id="username" v-model="form.username">
|
||||
</div>
|
||||
<div>
|
||||
<label for="email">Email</label>
|
||||
<br>
|
||||
<input type="email" name="email" id="email" v-model="form.email">
|
||||
</div>
|
||||
<div>
|
||||
<label for="password">Password</label>
|
||||
<br>
|
||||
<input type="password" name="password" id="password" v-model="form.password">
|
||||
</div>
|
||||
<div>
|
||||
<label for="repeat-password">Password</label>
|
||||
<br>
|
||||
<input type="password" name="repeat-password" id="repeat-password" v-model="form.repeatPassword">
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit">Register</button>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
Already have an account? <NuxtLink href="/login">Log in</NuxtLink>!
|
||||
</div>
|
||||
<div v-if="response">
|
||||
Response:
|
||||
<p>
|
||||
{{ response }}
|
||||
</p>
|
||||
</div>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
definePageMeta({
|
||||
layout: "auth"
|
||||
})
|
||||
|
||||
const form = reactive({
|
||||
username: "",
|
||||
email: "",
|
||||
password: "",
|
||||
repeatPassword: ""
|
||||
});
|
||||
|
||||
const response = ref();
|
||||
|
||||
/*
|
||||
const errorMessages = reactive({
|
||||
username: {
|
||||
invalidChars: "Username contains invalid characters!",
|
||||
tooShort: "Username must be at least 2 characters long!",
|
||||
tooLong: "Username must be at most 32 characters long!",
|
||||
empty: "Username must not be empty!"
|
||||
},
|
||||
email: {
|
||||
invalidChars: "Email contains invalid characters!",
|
||||
empty: "Email must not be empty!"
|
||||
},
|
||||
password: {
|
||||
tooShort: "Password must be at least 8 characters long!",
|
||||
missingSpecialChars: "Password must contain at least 1 special character!",
|
||||
empty: "Password must not be empty!"
|
||||
},
|
||||
repeatPassword: [] as { id: string, message: string }[],
|
||||
});
|
||||
*/
|
||||
|
||||
//const authStore = useAuthStore();
|
||||
const accessToken = useCookie("access_token");
|
||||
const refreshToken = useCookie("refresh_token");
|
||||
const redirectTo = useRoute().query.redirect_to;
|
||||
|
||||
console.log("access token:", accessToken.value);
|
||||
console.log("refresh token:", refreshToken.value);
|
||||
|
||||
onMounted(() => {
|
||||
console.log("accessToken:", accessToken.value);
|
||||
console.log("refreshToken:", refreshToken.value);
|
||||
|
||||
if (accessToken.value) {
|
||||
//return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
watch(() => form.username, (newValue) => {
|
||||
console.log("username change:", newValue);
|
||||
if (!validateUsername(newValue)) {
|
||||
errors.username.push({ id: "invalidCharacters", message: "!" });
|
||||
}
|
||||
if (newValue.length < 2) {
|
||||
errors.username.push({ id: "tooShort", message: "" });
|
||||
} else if (newValue.length > 32) {
|
||||
errors.username.push({ id: "tooLong", message: "" });
|
||||
} else {
|
||||
for (const error of Object.entries(errors.username)) {
|
||||
console.log("error:", error);
|
||||
if (["tooShort", "tooLong"].includes(error[1].id)) {
|
||||
errors.username.splice(parseInt(error[0]), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
*/
|
||||
|
||||
watch(() => form.email, (newValue) => {
|
||||
console.log("email change:", newValue);
|
||||
});
|
||||
|
||||
watch(() => form.password, (newValue) => {
|
||||
console.log("password change:", newValue);
|
||||
})
|
||||
|
||||
watch(() => form.repeatPassword, (newValue) => {
|
||||
console.log("repeat password change:", newValue);
|
||||
})
|
||||
|
||||
const apiVersion = useRuntimeConfig().public.apiVersion;
|
||||
|
||||
async function register(e: Event) {
|
||||
e.preventDefault();
|
||||
console.log("Sending registration data");
|
||||
const hashedPass = await hashPassword(form.password);
|
||||
const res = await $fetch(`/api/v${apiVersion}/auth/register`, {
|
||||
method: "POST", body:
|
||||
{
|
||||
email: form.email, username: form.username, password: hashedPass
|
||||
}
|
||||
}) as { access_token: string, refresh_token: string };
|
||||
response.value = res;
|
||||
//authStore.setAccessToken(accessToken);
|
||||
accessToken.value = res.access_token;
|
||||
console.log("set access token:", accessToken.value);
|
||||
const refreshToken = useCookie("refresh_token", { secure: true, httpOnly: false });
|
||||
refreshToken.value = res.refresh_token;
|
||||
//return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
17
stores/auth.ts
Normal file
17
stores/auth.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useAuthStore = defineStore("auth", {
|
||||
state: () => ({
|
||||
accessToken: null as string | null
|
||||
}),
|
||||
getters: {
|
||||
getAccessToken: (state) => {
|
||||
return state.accessToken;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
setAccessToken(value: string) {
|
||||
this.accessToken = value;
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue