I have nextJS application with Laravel backend, and I am trying to use Laravel-NextJS
All login and backend functions work fine.
Here is some login
export const useAuthLaravel = ({ middleware } = {}) => {
const router = useRouter()
const { data: user, error, mutate } = useSWR('/api/user', () =>
axios
.get('/api/user')
.then(res => res.data)
.catch(error => {
if (error.response.status != 409) throw error
router.push('/verify-email')
}),
)
const csrf = () => axios.get('/sanctum/csrf-cookie')
const login_laravel = async ({ setErrors, setStatus, ...props }) => {
await csrf()
setErrors([])
setStatus(null)
axios
.post('/login', props)
.then(() => mutate())
.catch(error => {
if (error.response.status != 422) throw error
setErrors(Object.values(error.response.data.errors).flat())
})
}
useEffect(() => {
if (middleware == 'guest' && user) return user
if (middleware == 'auth' && error && !user) logout_laravel()
}, [user, error])
return {
user,
csrf,
login_laravel,
}
}
Now above returned values of user I am trying to put in AuthContext,
import { createContext, useEffect, useReducer, useState } from 'react';
import { authApi } from 'src/mocks/auth';
const initialState = {
isAuthenticated: false,
isInitialized: false,
user: null
};
export const AuthProvider = (props) => {
const { login_laravel, logout_laravel, user } = useAuthLaravel()
const [state, dispatch] = useReducer(reducer, initialAuthState);
useEffect(() => {
const initialize = async () => {
try {
if (user) {
console.log('user exist')
dispatch({
type: 'INITIALIZE',
payload: {
isAuthenticated: true,
user
}
});
} else {
console.log('user not exist')
dispatch({
type: 'INITIALIZE',
payload: {
isAuthenticated: false,
user: null
}
});
}
} catch (err) {
console.error(err);
dispatch({
type: 'INITIALIZE',
payload: {
isAuthenticated: false,
user: null
}
});
}
};
initialize();
}, []);
const login = async (email, password) => {
try {
const user = await login_laravel({ email, password, setErrors, setStatus });
dispatch({
type: 'LOGIN',
isAuthenticated: true,
payload: {
user
}
});
} catch (err) {
dispatch({
type: 'LOGIN',
payload: {
isAuthenticated: false,
user: null
}
});
}
};
return (
<AuthContext.Provider
value={{
...state,
method: 'LARAVEL',
login,
}}
>
{children}
</AuthContext.Provider>
);
};
Now, when login function is run, it runs SWR validations, but when login finished, it does not return muted user back to AuthProvider function,
Does useAuthLaravel will run again after mutate and login function?
Thank you,
Not sure what sequence is getting wrong, any hints?