-
Patrick Ade authored
Implement authentication store using Pinia; create auth store with login, logout, and user fetching functionalities. Update main entry point to reflect new store structure; change import path for auth store. Add TypeScript support for Vue components; create shims-vue.d.ts for .vue file declarations. Create Login and Register views with authentication logic; implement user login and registration forms with error handling. Refactor HomeView to utilize authentication store; display user information and logout functionality based on authentication state.
e6e9197f
import { defineStore } from 'pinia'export const useAuthStore = defineStore('auth', { state: () => { const storedState = localStorage.getItem('authState') return storedState ? JSON.parse(storedState) : { user: null, isAuthenticated: false, } }, actions: { async setCsrfToken() { await fetch('http://localhost:8000/api/set-csrf-token', { method: 'GET', credentials: 'include', }) }, async login(email, password, router = null) { const response = await fetch('http://localhost:8000/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRFToken': getCSRFToken(), }, body: JSON.stringify({ email, password, }), credentials: 'include', }) const data = await response.json() if (data.success) { this.isAuthenticated = true this.saveState() if (router) { await router.push({ name: 'home', }) } } else { this.user = null this.isAuthenticated = false this.saveState() } }, async logout(router = null) { try { const response = await fetch('http://localhost:8000/api/logout', { method: 'POST', headers: { 'X-CSRFToken': getCSRFToken(), }, credentials: 'include', }) if (response.ok) { this.user = null this.isAuthenticated = false this.saveState() if (router) { await router.push({ name: 'login', }) } } } catch (error) { console.error('Logout failed', error)
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
throw error
}
},
async fetchUser() {
try {
const response = await fetch('http://localhost:8000/api/user', {
credentials: 'include',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': getCSRFToken(),
},
})
if (response.ok) {
const data = await response.json()
this.user = data
this.isAuthenticated = true
} else {
this.user = null
this.isAuthenticated = false
}
} catch (error) {
console.error('Failed to fetch user', error)
this.user = null
this.isAuthenticated = false
}
this.saveState()
},
saveState() {
/*
We save state to local storage to keep the
state when the user reloads the page.
This is a simple way to persist state. For a more robust solution,
use pinia-persistent-state.
*/
localStorage.setItem(
'authState',
JSON.stringify({
user: this.user,
isAuthenticated: this.isAuthenticated,
}),
)
},
},
})
export function getCSRFToken() {
/*
We get the CSRF token from the cookie to include in our requests.
This is necessary for CSRF protection in Django.
*/
const name = 'csrftoken'
let cookieValue = null
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';')
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim()
if (cookie.substring(0, name.length + 1) === name + '=') {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1))
break
}
}
}
if (cookieValue === null) {
throw 'Missing CSRF cookie.'
}
return cookieValue
}