소셜로그인 + 일반로그인 React-Native, Nestjs Boilerplate

소셜로그인과 일반로그인 기능이 구현되어있는
React-Native, Nestjs 풀스택 보일러플레이트입니다. Android 및 iOS에서 구동 가능합니다.

주요 기능

이름	설명
카카오, 네이버로그인	react-native-seoul 에서 제공하는 라이브러리를 사용하여 구현했습니다. react-native-kakao-login react-native-naver-login
일반로그인	ID, Password로 회원가입 및 로그인을 할 수 있습니다.
Toast Message	서버에러 혹은 아이디,패스워드 불일치 시 토스트 메시지가 표시됩니다. 아래 라이브러리를 사용하여 구현했습니다. react-native-toast-message
JWT	AccessToken & Refresh Token 인증방식으로 로그인 기능을 구현했습니다.
AuthGuard	Nestjs에서 제공하는 AuthGuard 라이브러리로 토큰을 검증하여 유저정보를 가져옵니다.
RTK Query	RTK Query 라이브러리를 사용하여 에러 핸들링 및 캐싱을 구현했으며 서버에 데이터를 요청할 때마다 아래 검증 프로세스를 처리합니다. 1. 액세스 토큰이 만료되었을 경우 리프레시 토큰으로 액세스 토큰을 다시 생성한다. 2. 리프레시 토큰이 만료되었을 경우 로그인 화면으로 강제이동 시킨다.

로그인 프로세스

소셜 로그인 & 회원가입

일반 로그인 & 회원가입

DB 구조

실행방법

/client/Properties.js 파일 에서 API_URL 및 AUTH_COOKIE_DOMAIN를 본인의 서버 IP로 수정하세요.

Android

cd client
npm install
npx react-native-asset
npm run android

IOS

cd client
npm install
bundle install
npx pod-install
npx react-native-asset
npm run ios

Server

cd server
npm run start:dev

API KEY 설정

본인의 소셜로그인 API KEY로 변경하고 싶다면 아래 레포지토리에 있는 설명을 참고해주세요.
참고로 네이버 로그인 API KEY에 대한 설정은 /client/Properties.js에서 관리하고 있습니다.
카카오 로그인 API 설정
네이버 로그인 API 설정

로드맵

• Android 작동 테스트
• iOS 작동 테스트
• 화면 디자인
• Tistory에 클라이언트에 대한 아티클 작성
• Tistory에 서버에 대한 아티클 작성
• API Swagger 사용하여 API 문서화

프로젝트 기여

오류, 건의

오류나 건의사항이 있다면 이슈트래커에 등록해주세요.

풀 리퀘스트

코드 수정이나 추가는 풀 리퀘스트(PR)를 보내주세요.