Breeze를 사용하는 React 앱용 Laravel Sanctum 인증

Laravel 백엔드 설정

# Create a laravel application
composer create-project laravel/laravel react-backend

cd react-backend
# Install Breeze

composer require laravel/breeze
php artisan breeze:install api

{
  "Laravel": "8.77.1"
}

React 앱 설정

npx create-react-app breeze-react

cd breeze-react

yarn start

Axios 구성

withCredentials 교차 사이트 쿠키 액세스를 활성화하려면 true로 설정하십시오. REACT_APP_BACKEND_URL은 이전에 만든 Laravel 백엔드 앱인 localhost:8000 파일에 .env 있습니다.

CSRF 요청

Laravel breeze는 인증을 위해 sanctum을 사용하므로 SPA를 인증합니다. /sanctum/csrf-cookie 끝점에 첫 번째 요청을 해야 합니다. 인증되지 않은 모든 경로에서 이 요청을 해야 합니다. 예를 들어 로그인, 등록, 비밀번호를 잊어버렸습니다.

hooks/auth.js 파일에 사용자 지정 후크를 생성하고 아래 코드를 추가하여 csrf 요청을 처리합니다.

로그인 API 통합

useAuth 후크에 아래 로그인 기능을 추가합니다

로그인 API 요청 시 먼저 CSRF API를 요청하고 성공 시 로그인 API를 요청합니다. 마찬가지로 등록, 비밀번호 분실, 비밀번호 재설정 API를 사용할 수 있습니다. 이제 React App을 Laravel Breeze API 스캐폴딩과 통합했습니다.

Laravel Breeze 반응

Laravel breeze react는 GitHub에서 사용할 수 있는 React용 Breeze 인증 상용구 구현입니다. TailwindCSS 및 CRA를 사용하는 모든 인증 API, 경로 및 기본 UI로 사전 구성됩니다.

특징

빠른 시작 가이드

laravel-breeze-react를 복제하고 yarn install를 사용하여 종속성을 설치한 다음 .env.example 파일을 .env에 복사하고 아래와 같이 백엔드의 URL을 추가합니다

REACT_APP_BACKEND_URL=http://localhost:8000

실행yarn start , 이제 브라우저에 아래 화면이 표시됩니다

laravel-breeze-react는 인증 레이어를 처리하므로 비즈니스 로직에만 집중할 수 있습니다.

자원

Laravel Breeze Docs

Laravel Breeze React repository

Sanctum Docs

결론

Laravel Breeze는 SPA 인증을 매우 간단하고 안전하게 만들고 Laravel Breeze React는 Laravel Breeze Backend 앱과 React 앱을 빠르게 통합합니다.

읽어주셔서 감사합니다.

에서 더 많은 업데이트를 받으세요.

무료 전자책

ReactJS Optimization Techniques and Development Resources

더 많은 블로그