From 6d6b36bdd91f95b062aff7255364bf0a90e73fcb Mon Sep 17 00:00:00 2001 From: Johanna Kuehner Date: Mon, 11 Mar 2024 18:19:11 +0100 Subject: [PATCH] implemented authentication with sidebase/nuxt-auth --- app.vue | 22 +- axios.config.js | 20 +- backend/controller/users.js | 12 +- components/LoginForm.vue | 11 +- composables/UserObject.ts | 39 + layouts/PageHeader.vue | 42 +- middleware/auth.js | 12 - nuxt-app/.gitignore | 24 + nuxt-app/README.md | 75 + nuxt-app/app.vue | 5 + nuxt-app/nuxt.config.ts | 4 + nuxt-app/package-lock.json | 9593 +++++++++++++++++ nuxt-app/package.json | 17 + nuxt-app/public/favicon.ico | Bin 0 -> 4286 bytes nuxt-app/server/tsconfig.json | 3 + nuxt-app/tsconfig.json | 4 + nuxt.config.ts | 62 +- package-lock.json | 4557 ++++---- package.json | 12 +- pages/login.vue | 3 +- plugins/vuex.js | 30 + .../icons/actionbar-icons/Attachment-Icon.svg | 3 + .../actionbar-icons/Departments-Icon.svg | 3 + .../icons/actionbar-icons/Employees-Icon.svg | 7 + server/api/auth/login.ts | 95 + server/api/auth/refresh.ts | 50 + server/api/auth/session.ts | 36 + server/api/{ => auth}/signup.ts | 2 +- server/api/login.ts | 20 - server/main.ts | 2 +- server/middleware/auth.global.js | 63 - server/middleware/login.ts | 61 - store/auth.ts | 65 - store/index.ts | 4 +- 34 files changed, 12861 insertions(+), 2097 deletions(-) create mode 100644 composables/UserObject.ts delete mode 100644 middleware/auth.js create mode 100644 nuxt-app/.gitignore create mode 100644 nuxt-app/README.md create mode 100644 nuxt-app/app.vue create mode 100644 nuxt-app/nuxt.config.ts create mode 100644 nuxt-app/package-lock.json create mode 100644 nuxt-app/package.json create mode 100644 nuxt-app/public/favicon.ico create mode 100644 nuxt-app/server/tsconfig.json create mode 100644 nuxt-app/tsconfig.json create mode 100644 public/icons/actionbar-icons/Attachment-Icon.svg create mode 100644 public/icons/actionbar-icons/Departments-Icon.svg create mode 100644 public/icons/actionbar-icons/Employees-Icon.svg create mode 100644 server/api/auth/login.ts create mode 100644 server/api/auth/refresh.ts create mode 100644 server/api/auth/session.ts rename server/api/{ => auth}/signup.ts (83%) delete mode 100644 server/api/login.ts delete mode 100644 server/middleware/auth.global.js delete mode 100644 server/middleware/login.ts delete mode 100644 store/auth.ts diff --git a/app.vue b/app.vue index 54c3713..2dfae6a 100644 --- a/app.vue +++ b/app.vue @@ -7,21 +7,21 @@ diff --git a/axios.config.js b/axios.config.js index dd8d5b5..30d5271 100644 --- a/axios.config.js +++ b/axios.config.js @@ -1,14 +1,30 @@ -import axios from 'axios'; +import axios, {AxiosError} from 'axios'; +import clientsideConfig from './clientsideConfig' //create axios instance const Axios = axios.create({ - // baseURL: `https://${serversideConfig.url}:${serversideConfig.port}`, + //baseURL: `https://${serversideConfig.url}:${serversideConfig.port}/`, + baseURL: `https://${clientsideConfig.url}:${clientsideConfig.port}/`, headers: { // 'Accept': 'application/json', 'Content-Type': 'application/json', //Authorization: `Bearer`, Accept: "*", }, + withCredentials: true, + credentials: true, }) + +Axios.interceptors.response.use((response) => response, (error) => { + + if (error instanceof AxiosError) { + console.error('Status: ', error.response?.status, '\nHeaders: '. error.response?.headers, '\nMessage: '. error.response?.data.message) + } else { console.error('Error: ', error); }; + + if (error.response?.status === 403) { window.location.href = '/login'; }; + + return Promise.reject(error); +}); + export default Axios; diff --git a/backend/controller/users.js b/backend/controller/users.js index 26c568a..1bd09c4 100644 --- a/backend/controller/users.js +++ b/backend/controller/users.js @@ -93,7 +93,15 @@ export const login = async (req, res, next) => { } if (bResult) { // password match - const token = jwt.sign( + const authtoken = jwt.sign( + { + username: result[0].username, + userId: result[0].id, + }, + 'SECRETTUEITKEY', + { expiresIn: '300s' } // 5min + ); + const refreshtoken = jwt.sign( { username: result[0].username, userId: result[0].id, @@ -115,7 +123,7 @@ export const login = async (req, res, next) => { const results = await ownConn.query(sql1, [dateTimeString, result[0].id]); return res.status(200).send({ message: 'Logged in!', - token, + token: { authToken: authtoken, refreshToken: refreshtoken }, user: result[0], }); } diff --git a/components/LoginForm.vue b/components/LoginForm.vue index e1a28e9..18ed8b5 100644 --- a/components/LoginForm.vue +++ b/components/LoginForm.vue @@ -50,6 +50,7 @@ import { ref } from 'vue'; import Axios from '../axios.config.js'; import clientsideConfig from '../clientsideConfig.js'; +const { signIn } = useAuth() const router = useRouter(); const darkMode = ref(true); const isError = ref(false); @@ -62,13 +63,14 @@ const handleLogin = async () => { const username = document.getElementById('username-input').value; const password = document.getElementById('password-input').value; - const requestBody = { + //const requestBody = { + const credentials = { username: username, password: password, } try { - let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/login`, requestBody); + /*let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/login`, requestBody); const sessionToken = useCookie('token', {maxAge: 604800, sameSite: true}); sessionToken.value = res.data.token; @@ -80,7 +82,10 @@ const handleLogin = async () => { console.log(res.data.message) // sucessfully logged in - router.push('/home') + router.push('/home')*/ + let res = await signIn( credentials, { callbackUrl: '/home' }) + console.log("res", res) + } catch (err) { // handle the error console.log(err.response.statusText) diff --git a/composables/UserObject.ts b/composables/UserObject.ts new file mode 100644 index 0000000..5661ac8 --- /dev/null +++ b/composables/UserObject.ts @@ -0,0 +1,39 @@ +export var UserObjectDefinition: { + id: string; + username: string; + password: string; + registered: string; + lastLogin: string; + fullName: string; + email: string; + phonenumber: string; + address: string; + city: string; + postcode: string; + adminBool: boolean; + technician1Bool: boolean; + technician2Bool: boolean; + technicianMonitoringBool: boolean; + merchantBool: boolean; + internBool: boolean; +} + +export interface UserObject { + id: string; + username: string; + password: string; + registered: string; + lastLogin: string; + fullName: string; + email: string; + phonenumber: string; + address: string; + city: string; + postcode: string; + adminBool: boolean; + technician1Bool: boolean; + technician2Bool: boolean; + technicianMonitoringBool: boolean; + merchantBool: boolean; + internBool: boolean; +} \ No newline at end of file diff --git a/layouts/PageHeader.vue b/layouts/PageHeader.vue index 97470e1..30cb0d2 100644 --- a/layouts/PageHeader.vue +++ b/layouts/PageHeader.vue @@ -2,7 +2,7 @@
-
username
+ 

             

                 
             

@@ -12,19 +12,59 @@
 
 
 
 
+
 
 
 
+