[FastAPI + React] 소셜 로그인 구현하기 - 기본 환경 구축

---

들어가기 전에

React는 CRA(Create React App)를 통해 생성한 어플리케이션을 사용하며, 여기서는 5.0.1 버전을 사용했다. 나머지 모듈들은 package.json에서 확인할 수 있다.

FastAPI는 0.83.0 버전을 사용했고, 그 외에 필요한 패키지들과 버전은 requirements.txt에 적혀있다.

이 글에서는 백엔드로는 RESTful한 API 서버를 FastAPI로 구축하고, 프론트는 React를 별도로 실행한다.

두 프레임워크 모두 기본적인 내용만 다루어도 글이 너무 길어지므로, 각 프레임워크의 기본 예제를 모두 사용했다는 것을 가정하고 글을 작성할 예정이다.

• React 한국어 튜토리얼 - https://ko.reactjs.org/tutorial/tutorial.html
• FastAPI 공식 한국어 문서 - https://fastapi.tiangolo.com/ko/tutorial/
• FastAPI 비공식 한국어 번역 통합 문서 - https://www.joonas.io/fastapi/ko/tutorial/

(선택) 이 프로젝트에서는 MongoDB를 사용하지만, SQLAlchemy도 사용 가능하다. 예제에서는 별도로 DB 모델까지는 다루지 않기 때문에 로컬에 DBMS를 설치할 필요는 없을 것이라 생각하지만, 전체 코드에서는 사용하므로 주의 바람.

목표

JWT(JSON Web Token)를 사용한 이메일 로그인과 OAuth 2.0(구글 로그인 등)까지 구현하는 것이다.

준비

구조는 아래와 같이 가져간다.

 📁 root/
├ 📁 fastapi/    # backend
└ 📁 react-app/  # frontend

둘 다 localhost에서 실행될거지만, 포트가 다르므로 접속할 때 유의하자.

---

백엔드 준비

FastAPI 튜토리얼 중 OAuth2 로그인을 다루는 부분이 있다.

Simple OAuth2 with Password and Bearer - FastAPI

기본적인 Request, Response, 그리고 CRUD Methods 까지만 알았다면, 이 문서를 읽는 데는 어려움이 없을 것이라 생각된다.
여기까지 마쳤다면 Interactive Docs를 사용하면서 로그인과 관련한 API가 어떻게 동작하는 지 감을 잡을 수 있을 것이다.

Fast API Swagger UI docs

스크래치부터 시작하려면 수고가 많이 든다. 여러 구조로 해봤지만, 외부 패키지를 사용하는 게 덜 피곤하게 우리의 목표에 빠르게 도달할 수 있었다.

필요한 패키지 설치

먼저, FastAPI Users 라는 이름의 패키지를 설치한다. 역시나 여기도 문서화가 잘 되어있기 때문에, 몇 페이지만 읽는다면 이메일 로그인까지는 수월하게 구현할 수 있다.

GitHub - fastapi-users/fastapi-users: Ready-to-use and customizable users management for FastAPI

이 글에서는 10.1.5 버전을 설치했는데, 9.x 버전에서는 MongoDB를 직접 사용했지만 10.x 버전부터는 Beanie 라는 ODM을 사용하면서 코드가 더 간결해졌다. 이것도 Pydantic 만큼 이해하기 쉽고, pydantic 기반이다.

이 패키지를 사용하는 이유는 User 스키마 정의와 기본적인 CRUD, 그리고 로그인 관련 API를 구현하지 않고 가져다 쓰기 위해서이다.

아래의 문서를 보면서 이메일로 회원 가입과 로그인이 되는 것 까지만 확인하면 기본 세팅은 끝났다.

Users router - FastAPI Users

FastAPI-Users에서 제공하는 기능을 사용하기 위해서 몇 가지 작업이 필요하다.

적당한 곳에 아래와 같이 JWT 토큰을 사용하는 인증 백엔드를 세팅해준다. 여기서 사용되는 Configs는 별도로 작성한 클래스이고, 환경 변수와 같은 설정을 모아놓은 상수 클래스이다.

from app.configs import Configs

from fastapi_users import BaseUserManager, FastAPIUsers
from fastapi_users.authentication import (AuthenticationBackend,
                                          BearerTransport, JWTStrategy)

def get_jwt_strategy() -> JWTStrategy:
    return JWTStrategy(secret=Configs.SECRET_KEY,
                       lifetime_seconds=Configs.ACCESS_TOKEN_EXPIRE_MINUTES * 60)

bearer_transport = BearerTransport(tokenUrl="auth/jwt/login")

auth_backend = AuthenticationBackend(
    name="jwt",
    transport=bearer_transport,
    get_strategy=get_jwt_strategy,
)

fastapi_users = FastAPIUsers[User, PydanticObjectId](get_user_manager, [auth_backend])

current_active_user = fastapi_users.current_user(active=True)

fastapi_users 에는 로그인과 관련한 여러개의 라우터가 들어있다. 이것을 앱에 어떻게 추가하는 지는 다음 글에서 다룰 예정이다.

current_active_user 는 로그인 상태의 유저만 접근할 수 있도록 하는 의존성이다. 다음 글에서 라우터에 어떻게 추가되는 지 확인해보자.

JWTStrategy의 lifetime_seconds는 토큰이 얼마만큼의 시간동안 유효할 것인지를 설정한다. 발행되고부터 해당 시간이 지난 토크는 인증에 실패한다. 이것 역시 다음 글에서 테스트와 함께 알아보도록 하자.

---

프론트엔드 준비

로컬에 전역으로 CRA(Create React App)을 설치한다. 여기서 설치된 버전은 5.0.1 이었다.

npm install -g create-react-app

이제 CRA로 React 앱을 생성하자.

create-react-app react-app

프론트 엔드에서는 API 서버랑 연동만 잘 하면 되긴 하지만, UI가 있으면 좋으니까 UI Framework로 MUI를 사용할 것이다.

npm start

react-app 디렉토리로 이동하고 위 커맨드로 웹 앱이 실행되는 것까지 확인했다면 준비는 끝났다.

---

코드

전체 코드는 아래의 GitHub repository에서 확인할 수 있다.

GitHub - joonas-yoon/fastapi-react-oauth2: FastAPI + MongoDB with Beanie + React Login Example