Laravel Sanctum, Auth, Cookies

my application backend is running on Laravel (127.0.0.1) and frontend on Next js (localhost:3000). When working with authorization, the user has the opportunity to go to the profile page, but after reloading the page, all cookies are automatically deleted immediately. (when creating the token cookies token on the localhost:3000 on a yellow background), what is my problem? Everything works well in Postman.

.env:

APP_URL=http://localhost:3000
SANCTUM_STATEFUL_DOMAINS=localhost
SESSION_DRIVER=cookie


cors.php:

'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_methods' => ['*'],
'allowed_origins' => ['http://localhost:3000'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,


AuthController.php:

class AuthController extends Controller
{
public function register(RegisterRequest $request) {
$data = $request->validated();

$user = User::create([
'name' => $data['name'],
'email' => $data['email'],
'password' => Hash::make($data['password']),
]);

$token = $user->createToken('auth_token')->plainTextToken;
$cookie = cookie('token', $token, 60 * 24); // 1 day

return response()->json([
'user' => new UserResource($user),
])->withCookie($cookie);
}

public function login(LoginRequest $request) {
$data = $request->validated();
$user = User::where('email', $data['email'])->first();

if (!$user || !Hash::check($data['password'], $user->password)) {
return response()->json([
'message' => 'Email or password is incorrect!'
], 401);
}

$token = $user->createToken('auth_token')->plainTextToken;
$cookie = cookie('token', $token, 60 * 24); // 1 day

return response()->json([
'user' => new UserResource($user),
])->withCookie($cookie);
}

public function logout(Request $request) {
$request->user()->currentAccessToken()->delete();
$cookie = cookie()->forget('token');

return response()->json([
'message' => 'Logged out successfully!'
])->withCookie($cookie);
}

public function user(Request $request) {
return new UserResource($request->user());
}
}


FRONTED

AuthApi.js:

import http from "./http";

export async function login(data) {
return await http.post(`/login`, data)
}

export async function register(data) {
return await http.post('register', data)
}

export async function logout() {
return await http.post('/logout')
}

export async function user() {
return await http.get('/user')
}


http.js:

import axios from 'axios'

const axiosInstance = axios.create({
baseURL: `${process.env.NEXT_PUBLIC_BECK_APP_URL}`,
withCredentials: true,
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
})

export default axiosInstance


LoginPage.js:

'use client';

import Button from '@/components/UI/Button';
import AlertError from '@/components/UI/AlertError';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUser } from '@fortawesome/free-regular-svg-icons';
import Link from 'next/link';
import { useState } from 'react';
import { useAuth } from '@/context/AuthContext';
import { login } from '@/lib/AuthApi';
import { useRouter } from 'next/navigation';

const LoginPage = () => {
const { setUser, csrfToken } = useAuth();

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState(null);

const router = useRouter();

const handleSubmit = async e => {
e.preventDefault();
setError(null);

await csrfToken()

try {
const resp = await login({email, password});
if (resp.status === 200) {
setUser(resp.data.user);

router.push('/profile');
}
} catch (error) {
if (error.response.status === 422) {
setError(error.response.data.message);
}
if (error.response.status === 401) {
setError(error.response.data.message);
}

console.log(error)
}

}

return (
<div className='xs:w-[95%] md:w-1/2 lg:w-1/3 my-10 text-center mx-auto py-10 border-t-4 border-myYellow bg-gray-900'>
<form
onSubmit={handleSubmit}
className='max-w-md mx-auto text-myWhite px-5'
>
<h6 className='text-xl font-extrabold font-montserrat'>
Авторизація
</h6>
<div className='py-3'>
<FontAwesomeIcon
icon={faUser}
className='text-3xl bg-white p-5 rounded-full leading-none'
/>
</div>
<div className='mb-4'>
<input
type='email'
value={email}
onChange={e => setEmail(e.target.value)}
placeholder='Ваш логін'
className={`block w-full bg-myDark border rounded-md border-myWhite text-myWhite text-[16px] p-2`}
/>

<input
type='password'
value={password}
onChange={e => setPassword(e.target.value)}
placeholder='Ваш пароль'
className={`block w-full bg-myDark border rounded-md border-myWhite text-myWhite text-[16px] p-2 mt-4`}
/>
<div className='mt-2'>
<AlertError error={error} />
</div>
</div>

<div type='submit'>
<Button title='Увійти на сайт' className='w-full py-2' />
</div>

<div className='flex justify-between mt-4 text-gray-300 text-[14px] decoration-dotted'>
<div className='block'>
<Link href='/signup'>Реєстрація</Link>
</div>
<div className='block'>
<Link href='/forgot-password'>Забули пароль?</Link>
</div>
</div>
</form>
</div>
)
};

export default LoginPage;


The backend tried testing in Postman and everything was fine.

Continue reading...