[Flutter] Supabase docker 환경에서 kakako login 하기

 supabase docker?

전에 로그인들은 local 환경에서 했었는데 docker를 많이 사용하는 회사면
supabase 역시 docker로 환경을 맞춰서 하는데 이때 auth 부분은 로컬에서 했을 때와 다르기 때문에
설정을 바꿔줘야 하는 부분들이 있는데 알아보면서 kakao login 하는 방법까지 알아보겠습니다

 

supabase를 docker로 하면 뭐가 다른가?

왼쪽이 로컬에서 supabase를 실행시킨 것이고 오른쪽이  docker에서 supabase를 실행시킨 화면입니다
로컬에서 실행에서 보이는 여러 옵션들이 docker에 supabase에서는 보이지가 않는데 
찾아보니 아직 지원을 안 하는 것으로 보이는데 만약 아시는 분 있으시면 댓글 부탁드립니다 😂

왼쪽 - 로컬환경 supabase / 오른쪽 - docker 환경 supabase

 

supabase docker 환경에서 Kakao 로그인하기

로컬에서 kakao 로그인하는 방법과 docker 환경에서 kakao 로그인을 진행하는 것은 차이점이 있는데
어떤 설정을 해줘야 하는지 천천히 알아보겠습니다

 

 supabase를 docker로 실행하기

아래의 공식 사이트에서 먼저 docker로 supabase를 어떻게 실행시키는지 잘 설명되어 있으니 따라 하시면 됩니다

 

 

Self-Hosting with Docker | Supabase Docs

정상적으로 수행한 후에 docker ps | grep supabase/ 를 입력하면 아래 사진과 같이 나올 것입니다

 

 docker에서 설정해줘야 하는 부분

cd ~/supabase/docker 들어간 뒤에 ls -al로 어떤 파일이 있는지 확인합니다
여기서 설정해줘야 하는 파일은. env와 docker-compose.yml입니다

 

 . env 파일

파일을 cat으로 보게 되면 여러 서비스를 이용하기 위해서 값을 넣어놨을 텐데
#Auth > #General에서 SITE_URL, ADDITIONAL_REDIRECT_URLS, API_EXTERNAL_URL 값을 변경해 주면 된다
✍ SITE_URL > 카카오의 경우 packageName://oauth를 기입하면 됩니다
✍ ADDITIONAL_REDIRECT_URLS > 카카오의 경우 [packageName://oauth]를 기입하면 됩니다
✍ API_EXTERNAL_URL > supabase 웹 주소를 기입해 주면 됩니다 (ex > https://supastudio.nuridal.co.kr)

 

 docker-compose.yml 파일

마찬가지로 cat으로 보고 내리다 보면 auth: 부분이 보일 것인데 여기에서 GOTRUE를 추가해주어야 합니다
여기에서는 총 4가지를 추가해줘야 하는데 이 부분은 다른 소셜 부분도 일치합니다
(KAKAO 부분을 구글이면 GOOGLE 이렇게 바꿔서 사용하면 됩니다)
GOTRUE_EXTERNAL_KAKAO_ENABLED: 사용할 것인지 bool로 활성화 여부
GOTRUE_EXTERNAL_KAKAO_CLIENT_ID: 외부 공급자에 등록된 OAuth2 Clinet id (카카오는 REST API 키)
GOTRUE_EXTERNAL_KAKAO_SECRET: 등록 시 외부 공급자가 제공한 OAuth2 Cline pw (카카오는 Admin 키)
GOTRUE_EXTERNAL_KAKAO_REDIRECT_URI: OAuth2 제공자가 코드 및 상태 값을 사용하여 REDIRECT 할 URI
(위에 공식문서에서 알 수 있듯이 https://설정한 도메인/auth/v1/callback을 기입)

💡 물론 client_id나 secret는 민감한 정보이기 때문에. env 파일에 변수로 저장해 두면 좋습니다

그 뒤에는 docker-compose down > docker-compose up -d로 다시 재 실행해 주시면 준비는 거의 끝났습니다

 

 카카오 개발자 설정

카카오와 같이 데이터를 주고받으려면 개발자 사이트에서 Redirect URI를 추가해줘야 하는데
이때 GOTRUE_EXTERNAL_KAKAO_REDIRECT_URI 값을 넣어줍니다

 

 Flutter code 설정

flutter와 연동을 해주기만 하면 끝이 나는데 예전에 만들었던 프로젝트를 가져와서 진행하겠습니다 
아래의 프로젝트를 사용해서. env 파일만 추가해 줘서 연결해 주면 됩니다

GitHub - Jeoungeunseok/supabase: supabase connection and postgreSQL use

✍ SERVER_PROJECT_URL : 본인이 설정한 도메인을 기입
✍ SERVER_API_KEY : 공식문서를 따라가면 API를 JWT 생성 버튼으로 만들었을 텐데 그 토큰을 기입합니다

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await dotenv.load();
  await Supabase.initialize(
  
    //📲 기입해줘야 하는 부분
    url: dotenv.get("SERVER_PROJECT_URL"),
    anonKey: dotenv.get("SERVER_API_KEY"),
  );

그 뒤에 실행하고 테스트를 진행해 보면 됩니다
결과는 예전 포스팅과 같은 결과이기 때문에 생략했습니다

---

이번에는 supabase docker환경에서 소셜로그인을 하는 방법에

대해서 알아보았습니다 도움이 되었으면 좋겠습니다

그럼! 코딩이 쉬워지는 그날까지!!