[Flutter] 슈파베이스 연동하기 – ❷ 시작하기

슈파베이스(Supabase)는 모바일 및 웹 애플리케이션 개발 플랫폼을 빠르게 개발할 수 있는 백엔드 서비스입니다. 파이어베이스와 마찬가지로 백엔드를 직접 설계하지 않고 슈파베이스 SDK로 다양한 백엔드 기능을 사용할 수 있습니다. 이번 프로젝트는 슈파베이스와 플러터를 사용해서 일정 관리 앱을 구현해보도록 하겠습니다.

슈파베이스 연동하기는 총 3편입니다.

슈파베이스 연동하기 – ❷ 시작하기

2. 사전 준비

2.1 템플릿 프로젝트 다운로드

이번 프로젝트는 <[MustHave 코드팩토리의 플러터 프로그래밍(2판)> 22장 ‘소셜 로그인과 파이어베이스 인증하기’에서 구현했던 로직을 그대로 슈파베이스로 변경해서 구현하는 방식으로 진행하겠습니다. 프로젝트를 진행하면서 슈파베이스의 어떤 부분이 파이어베이스와 비슷하고 어떤 부분이 다른지 관찰하면서 공부하면 큰 도움이 될 겁니다. 다음 링크에서 프로젝트를 다운로드하여 실습을 준비하세요.

• https://github.com/codefactory-co/flutter-golden-rabbit-novice-v2/tree/main/ch23/calendar_scheduler_template

2.2 슈파베이스 회원가입

슈파베이스를 프로젝트에 적용하기 위해 슈파베이스 사이트에서 회원가입하고 대시보드 페이지로 이동하는 방법을 배워보겠습니다.

[To Do]

1. https://supabase.com에 접속해서 오른쪽 위의 [Sign In] 버튼을 누르고 [Sign Up Now] 버튼을 누르고 회원가입을 진행합니다. 깃허브 계정이 있으면 [Continue with GitHub] 버튼을 누르면 빠르게 회원가입을 할 수 있습니다.

2. 회원가입을 하면 이동되는 화면이 대시보드입니다. 앞으로 이 화면을 슈파베이스 대시보드라고 칭하겠습니다. 슈파베이스 대시보드에서 중앙의 [New project] 버튼을 누릅니다.

3. 프로젝트 이름을 calendar_scheduler로 설정하고 데이터베이스 비밀번호를 입력합니다. Region은 Northeast Asia(Seoul)을 선택합니다. 마지막으로 [Create new project] 버튼을 누르면 프로젝트 생성이 진행됩니다.

4. 프로젝트가 생성될 때까지 대기한 후 아래로 스크롤해서 ‘Connecting to your new project’ 섹션을 찾습니다. Project URL과 API Key의 [Copy] 버튼을 누른 후 Project URL과 API Key를 안전한 곳에 저장해둡니다.

💡Note: 혹시 화면이 똑같이 보이지 않으면 새로고침을 눌러보세요. ‘Setting Up Your Project’라는 알림과 함께 로딩이 진행된다면 프로젝트가 생성될 때까지 대기해야 합니다.

2.3 슈파베이스 인증 설정하기

슈파베이스 인증(Supabase Auth) 또한 파이어베이스 인증과 같이 다양한 인증 방법을 제공합니다. 이번 프로젝트도 파이어베이스를 사용할 때 했던 방법처럼 구글 로그인을 사용할 계획이니 구글 로그인 설정을 진행하겠습니다. 이메일 회원가입/로그인은 기본으로 활성화되어 있고 다른 소셜 로그인을 사용하고 싶다면 입력이 필요한 값은 다르지만 구글 로그인 설정과 같은 방식으로 슈파베이스에 활성화를 해주면 됩니다.

[To Do]

1. 슈파베이스 대시보드로 이동한 후 [Authentication] > [Providers]를 클릭합니다. 아래로 스크롤해서 구글 프로바이더를 찾은 후 클릭해서 옵션을 펼칩니다. 그다음 [Enable Sign in with Google] 버튼을 눌러서 활성화한 후 맨 아래의 Callback URL을 복사합니다.

2. 1.3.1 OAuth 설정하기에서 진행했던 것처럼 파이어베이스 프로젝트와 연결된 구글 클 라우드 콘솔로 이동한 후 [메뉴] > [API 및 서비스] > [사용자 인증 정보]로 이동합니다. 1.3.1 OAuth 설정하기를 잘 진행했다면 [OAuth 2.0 클라이언트 ID]에 Android Client, iOS Client, Web Client 세 개의 클라이언트 ID를 찾을 수 있습니다. Web client의 Client ID만 복사합니다.

3. 다시 슈파베이스 [Authentication] > [Providers] 창으로 돌아와서 복사해둔 Web 클라이언트 ID와 클라이언트 Secret을 입력해줍니다. 클라이언트 Secret은 Web client를 누르면 상세 페이지에서 볼 수 있습니다. 그리고 [Skip nonce checks] 버튼을 클릭해서 활성화해줍니다. Nonce Check는 보안을 강화하는 기능이지만 iOS의 경우 Nonce Check가 불가능하기 때문에 활성화가 필요합니다. 모두 입력이 끝나면 [Save] 버튼을 눌러서 저장합니다.

💡Note: iOS 클라이언트 ID는 나중에 플러터 코드를 작성할 때 사용합니다. ‘Setting Up Your Project’라는 알림과 함께 로딩이 진행된다면 프로젝트가 생성될 때까지 대기해야 합니다.

4. 구글 로그인이 Enabled 상태가 되면 활성화 완료입니다.

2.4 pubspec.yaml 파일 설정하기

[To Do]

1. 슈파베이스 플러그인을 pubspsec.yaml에 추가하겠습니다. 추가 후에는 반드시 pub get을 눌러 업데이트하기 바랍니다.

dependencies:
 flutter:
   sdk: flutter

cupertino_icons: ^1.0.2
table_calendar: 3.0.9
intl: 0.18.1
drift: 2.13.0
sqlite3_flutter_libs: 0.5.17
path_provider: 2.1.1
path: 1.8.3
get_it: 7.6.4
dio: 5.3.3
provider: 6.0.5
uuid: 4.1.0
firebase_core: 2.20.0
cloud_firestore: 4.12.0
google_sign_in: 6.1.5
firebase_auth: 4.12.0
supabase_flutter: 1.10.24

2.5 파이어베이스 연동하기

안드로이드에서 구글 로그인을 진행하려면 플러터 프로젝트와 파이어베이스 프로젝트를 연동해야 합니다. 20.2.3 ‘파이어베이스 CLI 설치 및 연동하기’에서 진행했던 것처럼 CLI 설치를 진행합니다. 그리고 나서 20.2.4 ‘프로젝트에 파이어베이스 설정하기’에서 진행했던 것처럼 플러터 프로젝트를 파이어베이스 프로젝트와 연동해주면 됩니다. <[MustHave 코드팩토리의 플러터 프로그래밍(2판)> 20장 전체를 모두 잘 따라했다면 플러터 프로젝트 위치에서 ‘flutterfire configure’를 터미널에서 실행한 후 플러터 프로젝트와 파이어베이스 프로젝트를 연동한 다음 ‘22.2.8 iOS 네이티브 설정하기’ 진행을 완료하세요.

3. 레이아웃 구상하기

모든 UI는 <[MustHave 코드팩토리의 플러터 프로그래밍(2판)> 22장 ‘소셜 로그인과 파이어베이스 인증하기’와 동일하게 진행하도록 하겠습니다. 필요한 스크린은 [구글로 로그인] 버튼이 있는 간단한 로그인 스크린을 추가로 만들겠습니다.

3.1 로그인 화면 구상하기

로고와 [구글로 로그인] 버튼이 중앙에 배치되어 있는 간단한 로그인 화면을 제작해보겠습니다.