opnform-host-nginx/client/composables/useAuth.js

165 lines
4.5 KiB
JavaScript
Raw Normal View History

Re-login modal (#717) * Implement quick login/register flow with global event handling - Add QuickRegister component with improved modal management - Integrate quick login/register with app store state - Implement custom event handling for login/registration flow - Update OAuth callback to support quick login in popup windows - Refactor authentication-related components to use global events * Refactor authentication flow with centralized useAuth composable - Create new useAuth composable to centralize login, registration, and social login logic - Simplify authentication methods in LoginForm and RegisterForm - Add event-based login/registration flow with quick login support - Remove redundant API calls and consolidate authentication processes - Improve error handling and analytics tracking for authentication events * Enhance QuickRegister and RegisterForm components with unauthorized error handling - Add closeable functionality to modals based on unauthorized error state - Implement logout button in QuickRegister for unauthorized users - Reset unauthorized error state on component unmount - Update styling for "OR" text in RegisterForm for consistency - Set unauthorized error flag in app store upon 401 response in API calls * Refactor Authentication Flow and Remove Unused Callback Views - Deleted unused callback views for Notion and OAuth to streamline the codebase. - Updated QuickRegister and LoginForm components to remove the after-login event emission, replacing it with a window message system for better communication between components. - Enhanced the RegisterForm and other components to utilize the new window message system for handling login completion, improving reliability and maintainability. - Added a verifyAuthentication method in the useAuth composable to ensure user data is loaded correctly after social logins, including retry logic for fetching user data. These changes aim to simplify the authentication process and improve the overall user experience by ensuring a more robust handling of login events. * Add eslint-disable comment to useWindowMessage composable for linting control * Refactor QuickRegister.vue for improved template structure and clarity - Adjusted the rendering of horizontal dividers and the "or" text for better semantic HTML. - Added a compact-header prop to the modal for enhanced layout control. These changes aim to enhance the readability and maintainability of the QuickRegister component. --------- Co-authored-by: Julien Nahum <julien@nahum.net>
2025-03-25 10:41:11 +01:00
export const useAuth = () => {
const authStore = useAuthStore()
const workspaceStore = useWorkspacesStore()
const formsStore = useFormsStore()
const logEvent = useAmplitude().logEvent
/**
* Core authentication logic used by both social and direct login
*/
const authenticateUser = async ({ tokenData, source, isNewUser = false }) => {
// Set token first
authStore.setToken(tokenData.token, tokenData.expires_in)
// Fetch initial data
const [userData, workspaces] = await Promise.all([
opnFetch("user"),
fetchAllWorkspaces()
])
// Setup stores
authStore.setUser(userData)
workspaceStore.set(workspaces.data.value)
// Load forms for current workspace
await formsStore.loadAll(workspaceStore.currentId)
// Track analytics
const eventName = isNewUser ? 'register' : 'login'
logEvent(eventName, { source })
try {
// Check if GTM is available before using it
const gtm = typeof useGtm === 'function' ? useGtm() : null
if (gtm && typeof gtm.trackEvent === 'function') {
gtm.trackEvent({
event: eventName,
source
})
}
} catch (error) {
console.error(error)
}
return { userData, workspaces, isNewUser }
}
/**
* Verify that authentication is complete and user data is loaded
* Useful for social auth flows where token might be set but user data not loaded yet
*/
const verifyAuthentication = async () => {
// If we already have user data, no need to verify
if (authStore.check) {
return true
}
// If we have a token but no user data, fetch the user data
if (authStore.token && !authStore.check) {
// Create a promise with retry logic
return new Promise((resolve, reject) => {
const maxRetries = 3
let retryCount = 0
const attemptFetch = async () => {
try {
const userData = await opnFetch("user")
if (userData) {
authStore.setUser(userData)
resolve(true)
} else {
handleRetry("No user data returned")
}
} catch (error) {
handleRetry(`Auth verification failed: ${error.message}`)
}
}
const handleRetry = (reason) => {
retryCount++
if (retryCount < maxRetries) {
console.log(`Retrying auth verification (${retryCount}/${maxRetries}): ${reason}`)
// Exponential backoff
setTimeout(attemptFetch, 100 * Math.pow(2, retryCount))
} else {
console.error(`Auth verification failed after ${maxRetries} attempts`)
reject(new Error(`Auth verification failed after ${maxRetries} attempts`))
}
}
// Start the first attempt
attemptFetch()
})
}
return false
}
/**
* Handle direct login with form validation
*/
const loginWithCredentials = async (form, remember) => {
const tokenData = await form.submit('post', '/login', { data: { remember: remember } })
return authenticateUser({
tokenData,
source: 'credentials'
})
}
/**
* Handle social login callback
*/
const handleSocialCallback = async (provider, code, utmData) => {
const tokenData = await opnFetch(`/oauth/${provider}/callback`, {
method: 'POST',
body: { code, utm_data: utmData }
})
return authenticateUser({
tokenData,
source: provider,
isNewUser: tokenData.new_user
})
}
/**
* Handle user registration
*/
const registerUser = async (form) => {
// Register the user first
const data = await form.submit('post', '/register')
// Login the user
const tokenData = await form.submit('post', '/login')
const result = await authenticateUser({
tokenData,
source: form.hear_about_us,
isNewUser: true
})
// Handle AppSumo license if present
if (data.appsumo_license === false) {
useAlert().error(
"Invalid AppSumo license. This probably happened because this license was already" +
" attached to another OpnForm account. Please contact support."
)
} else if (data.appsumo_license === true) {
useAlert().success(
"Your AppSumo license was successfully activated! You now have access to all the" +
" features of the AppSumo deal."
)
}
return { ...result, data }
}
return {
loginWithCredentials,
handleSocialCallback,
registerUser,
verifyAuthentication
}
}