Laravel Passport аутентификация API в Reactjs

Вопрос или проблема

  const [password, setPassword] = useState("");
  const [phoneNumber, setPhoneNumber] = useState("");
  const navigate = useNavigate();

// обработка входа
  const handleSubmit = async (event) => {
    event.preventDefault();
    const submitData = { phoneNumber, password };

    try {
      const response = await axios.post("http://localhost:8000/api/login", submitData, {
        headers: {
          "Content-Type": "application/json",
          "Custom-Header": "value",
        },
      });
      localStorage.setItem("token", response.data.token);
      navigate('/home');
    } catch (error) {
      console.log("Ошибка: ", error);
    }
  };


<form
        className="pt-8 flex flex-col gap-4 px-6"
        onSubmit={(e) => handleSubmit(e)}
      >
<input
              type="text"
              name="phoneNumber"
              value={phoneNumber}
              onChange={(e) => setPhoneNumber(e.target.value)}
              className="bg-transparent placeholder:text-g50 text-g60 outline-none text-sm placeholder:text-sm"
              placeholder="0123456789"
            />

<input
              type={type}
              name="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="bg-transparent placeholder:text-g50 text-g60 outline-none text-sm placeholder:text-sm passwordField w-full pr-3"
            />

<button className="primaryButton w-full" type="submit">
            Войти
          </button>

Ответ или решение

Чтобы настроить аутентификацию API в ReactJS с использованием Laravel Passport, вам необходимо выполнить несколько шагов как на стороне Laravel, так и на стороне React. Я объясню, как это сделать, и предложу возможные решения ошибок, с которыми вы столкнулись.

Шаг 1: Настройка Laravel Passport

1. Установка Passport:
   Убедитесь, что у вас установлен Laravel Passport. Если он не установлен, вы можете установить его с помощью Composer:

   composer require laravel/passport

2. Настройка Passport:
   После установки вы должны опубликовать конфигурационные файлы Passport:

   php artisan migrate
   php artisan passport:install

3. Добавьте Passport в config/auth.php:
   В файле config/auth.php измените драйвер API на Passport:

   'api' => [
      'driver' => 'passport',
      'provider' => 'users',
   ],

4. Настройка модели User:
   В вашей модели User добавьте HasApiTokens:

   use Laravel\Passport\HasApiTokens;
   
   class User extends Authenticatable
   {
      use HasApiTokens, Notifiable;
   
      // Остальной код модели
   }

5. Создание маршрута для аутентификации:
   В вашем routes/api.php создайте маршрут:

   Route::post('login', 'AuthController@login');

6. Создание контроллера аутентификации:
   Создайте AuthController и реализуйте метод login:

   use Illuminate\Http\Request;
   use App\Models\User;
   use Illuminate\Support\Facades\Auth;
   
   class AuthController extends Controller
   {
      public function login(Request $request)
      {
          $credentials = $request->only('phoneNumber', 'password');
   
          if (Auth::attempt($credentials)) {
              $user = Auth::user();
              $token = $user->createToken('YourAppName')->accessToken;
   
              return response()->json(['token' => $token]);
          }
   
          return response()->json(['error' => 'Unauthorized'], 401);
      }
   }

Шаг 2: Настройка ReactJS

1. Установка Axios:
   Убедитесь, что у вас установлен Axios:

   npm install axios

2. Изменение кода логина:
   Убедитесь, что ваш код правильно настраивает запрос на логин. Сначала проверьте, что ваш маршрут на сервере Laravel настроен правильно. Посмотрите, правильно ли настроен ваш API, и используйте правильные заголовки.

   Здесь ваш код имеет разумное решение. Однако стоит убедиться, что phoneNumber правильно передается на сервер и что маршрут /api/login правильно настроен. Проверьте следующие моменты:

   • Убедитесь, что phoneNumber указан именно так, как вы его обрабатываете в Laravel.
   • Проверьте, можете ли вы выполнить POST-запрос на /api/login с помощью Postman или другой утилиты для тестирования API.
   • Если у вас включен CORS, убедитесь, что у вас правильно настроены CORS-заголовки на сервере.

Исправление ошибок

Если вы получаете 404 ошибку, проверьте:

• Корректность URL в запросе.
• Наличие маршрута в routes/api.php.
• Если вы используете middleware, убедитесь, что вы их правильно настроили.
• Проверьте, что сервер Laravel запущен и доступен по указанному адресу.

Заключение

Если вы выполните все вышеперечисленные шаги, у вас должна быть возможность успешно аутентифицироваться с помощью Laravel Passport в вашем приложении React. Если у вас останутся проблемы, дополнительно проверьте сообщения об ошибках и отладочную информацию.