Open bpkennedy opened 1 month ago
Here is a minimal example. Create a user with email test7@example.com
and password pass
. Then try this (ensure you've cleared your browser cache):
import { useAuth, useLogin } from '@faustwp/core'
import { useEffect, useState } from 'react'
const Example = () => {
const { login } = useLogin()
const { viewer, isAuthenticated } = useAuth()
const [isLoggingIn, setIsLoggingIn] = useState(false)
useEffect(() => {
console.log('Auth state changed - isAuthenticated:', isAuthenticated, 'viewer:', viewer)
}, [isAuthenticated, viewer])
useEffect(() => {
let checkAuthInterval
if (isLoggingIn) {
checkAuthInterval = setInterval(() => {
console.log('Checking authentication status...')
console.log('isAuthenticated:', isAuthenticated)
console.log('viewer:', viewer)
if (isAuthenticated) {
console.log('User is now authenticated')
setIsLoggingIn(false)
clearInterval(checkAuthInterval)
}
}, 1000) // Check every second
}
return () => {
if (checkAuthInterval) clearInterval(checkAuthInterval)
}
}, [isLoggingIn, isAuthenticated, viewer])
const handleLogin = async () => {
try {
setIsLoggingIn(true)
console.log('Attempting login...')
await login('test7@example.com', 'pass')
console.log('Login function called')
} catch (error) {
console.error('Login error:', error)
setIsLoggingIn(false)
}
}
return (
<div>
<button onClick={handleLogin}>
{isLoggingIn ? 'Logging in...' : 'Click Me to Login'}
</button>
<p>Authentication status: {isAuthenticated ? 'Authenticated' : 'Not authenticated'}</p>
{viewer && <p>Logged in as: {viewer.username}</p>}
</div>
)
}
export default Example
This useEffect
is never triggered:
useEffect(() => {
console.log('Auth state changed - isAuthenticated:', isAuthenticated, 'viewer:', viewer)
}, [isAuthenticated, viewer])
Description
In this example code I'm trying to login the user with
useLogin
and then wait to see them become authenticated by usinguseAuth
. I can confirm after login that a cookie is created in the browser and I see a GET request completed to urlhttp://localhost:3000/api/faust/auth/token?code=1PrSDHzvYuNSANI47ZiP%2BvyRwEbQ8eihr7rq5gI3fpok%2FXY%2FP%2BwsJovxj4aW3tYHmE1PFLx%2FC%2BjnxwJo8TiUvg%3D%3D
with output like this:Furthermore, I can soft refresh the browser page and if I were to console.log
viewer
fromuseAuth
on the next page load then it would recognize the logged in user. So I know that it's successfully logging me in as the user.The issue is that
useAuth
is never updating eitherisAuthenticated
orviewer
right after a successfullogin()
withuseLogin
. Here is the Next.js component that demonstrates how I'm trying to get access toisAuthenticated
after successful login:What happens instead is that it will wait forever for
isAuthenticated
(orviewer
) to change, logging 'Checking authentication status...' to the console every second, but it never changes.Steps to reproduce
See description
Additional context
No response
@faustwp/core Version
^3.0.1
@faustwp/cli Version
^3.0.2
FaustWP Plugin Version
1.3.2
WordPress Version
6.6.1
Additional environment details
No response
Please confirm that you have searched existing issues in the repo.