supabase google 연결

https://supabase.com/docs/guides/auth/social-login/auth-google?queryGroups=environment&environment=client

Login with Google | Supabase Docs

 

프로젝트 ID : 프로젝트 -> Settings -> General -> ReferenceID를 넣어주면 된다

 

나중에 앱 게시할 때 여기서. url query의 프로젝트id는 자신에게 맞게 변경해주기.

https://console.cloud.google.com/apis/credentials/consent?project=프로젝트id

Google 클라우드 플랫폼

 

 

 

https://velog.io/@sdb016/OAuth-2.0-Client-%EB%93%B1%EB%A1%9D

OAuth 2.0 - Client 등록

여기에 구글 클라우드 관련 정리 잘되어있음.

 

https://supabase.com/docs/guides/auth/social-login/auth-google?queryGroups=environment&environment=client 

Login with Google | Supabase Docs

이 페이지에 있는 걸 보면서 따라해보겠다. 

모든 걸 하지는 않을거고, web 서비스에서 application code를 사용하는 방법을 해보겠다.

 

먼저 구글 클라우드로 이동하고 자신의 프로젝트를 선택한다.

https://console.cloud.google.com/home/dashboard?project=자신의프로젝트 아이디  

Google 클라우드 플랫폼

저 url뒤의 project=자신의 프로젝트 아이디 부분은 자신의 프로젝트 아이디를 넣어주자.

 

저기서 api 및 서비스를 선택해서 들어간다.

대시보드화면에서는 아래 이미지와 같은 곳을 클릭하면 된다.

 

사실 위 슈파베이스의

Application code configuration#

에 링크까지 친절하게 걸려있다. 

 

밑에 바로 주석을 달기에는 애매해서 아래에다가 설명하겠다.

 

To use your own application code:

 

1. In the Google Cloud console, go to the Consent Screen configuration page. The consent screen is the view shown to your users when they consent to signing in to your app.
   
   
2. Under Authorized domains, add your Supabase project's domain, which has the form <PROJECT_ID>.supabase.co.
3. Configure the following non-sensitive scopes:
   • .../auth/userinfo.email
   • ...auth/userinfo.profile
   • openid
4. Go to the API Credentials page.
5. Click Create credentials and choose OAuth Client ID.
6. For application type, choose Web application.
7. Under Authorized JavaScript origins, add your site URL.
8. Under Authorized redirect URLs, enter the callback URL from the Supabase dashboard. Expand the Google Auth Provider section to display it.
9. When you finish configuring your credentials, you will be shown your client ID and secret. Add these to the Google Auth Provider section of the Supabase Dashboard.

 

 

1. 링크가 걸려있는 곳으로 들어간다. 위에 앱 도메인 관련있는 것들을 다 채우고, (테스트 단계에서 localhost로 해줘도 된다.)

승인된 도메인을 넣으라고 할 텐데,

2번에서 보이다 시피 <PROJECT_ID>.supabase.co 를 넣어주라고 되어있다. 그런데 여기서 PROJECT_ID가 뭔지 알고싶은데, 

프로젝트 ID : 프로젝트 -> Settings -> General -> ReferenceID를 넣어주면 된다.

 

 

그리고 계속진행한다. 3번에서 non sensitive scope를 구성해달라고 했는데, `범위 추가 또는 삭제` 버튼을 누르면 해당항목들이 나온다. 전부 체크해주고 추가하고 넘어간다.

 

4번의 링크로 이동

 

OAuth 클라이언트 ID 선택. 

 

 

 

승인된 리디렉션 URI는 슈파베이스 프로젝트 => Authentication => Provider => Google Enable을 해주면 나온다. 복붙해준다.

사진의 제일 밑의 CallbackURL. 저장해주고 나오면 8번까지 끝. 

이러면 클라이언트 ID와 클라이언트 보안 비밀번호가 나온다.

이걸 바로위 스크린샷의 Client ID와 ClientSecret에 각각 복붙해주면 된다. 

혹시 모달을 바로꺼버렸다고 해도, 만들어진 Client ID를 클릭해서 들어가면

이렇게 잘 나와있다.

 

이제 구글 OAuth를 사용하기 위한 기본설정이 됬다.

이제는 코드로 이동해서 만들어주면 된다.

혹시 supabase 라이브러리가 안깔려있으면 깔아주고 npm install @supabase/supabase-js @supabase/ssr

기본 설정들을 해준다.

 

https://xhwogusxh.tistory.com/entry/NextJS-Supabase-%EC%B1%84%ED%8C%85-%EC%95%B1-%EB%A7%8C%EB%93%A4%EA%B8%B0-2-Supabase-%EA%B8%B0%EB%B3%B8%EC%84%A4%EC%A0%95-Github-Oauth-%EB%A1%9C%EA%B7%B8%EC%9D%B8-1

NextJS + Supabase 채팅 앱 만들기 - 2. Supabase 기본설정 + Github Oauth 로그인 1

이 글을 참조하면 좋을듯. 위 글에서 client side, server side, middle ware 설정을 해주는 부분까지.

 

그리고 

이와 같은 형식으로 버튼과 펑션을 만들어주면 된다. 저기 위에서 supabase 객체를 만들 때, 클라이언트용으로 할지 서버용으로 할지는 자신에게 맞춰서 한다. 나는 클라이언트 컴포넌트여서 클라이언트용으로 했다. 서버 컴포넌트로 했다면, 서버컴포넌트용 설명도 잘 되어있다.

 

이제 supabase project의 Authentication => URL Configuration으로 가서, Site URL과 Redirect URL을 설정해준다.

OAuth사이트에서 supabase로 리다이렉트하면서 인증을 하고, 인증이 되면 다시 우리의 사이트로 리다이렉트시켜준다.

 

이제 로그인을 해본다. 잘 될 것이다.

 

해당 프로젝트 => Table Editor => Auth 선택 => users 테이블 선택 해서 보면 유저가 잘 생성된 걸 볼 수 있다.

 

 

 

After a successful code exchange, the user's session will be saved to cookies.

코드 교환이 성공적으로 완료되면 사용자의 세션이 쿠키에 저장됩니다.

 

이렇게 해서 로그인을 한번 해보면

 

도메인이 이렇게 나오는데, 이걸 내 서비스의 도메인으로 바꾸려면 

https://github.com/supabase/supabase/issues/1798

Sign in with Google shows "continue to Supabase.co" · Issue #1798 · supabase/supabase

https://github.com/orgs/supabase/discussions/2532

Google Auth say app name · supabase · Discussion #2532

이런 방법들이 있다고 하는데 위에꺼는 프록시 이용하라는 거고, 두번째꺼는 도메인 url두개 등록하고 구글에 문의하라는 거다. 

그리고 마지막

https://supabase.com/docs/guides/platform/custom-domains

Custom Domains | Supabase Docs

가 있는데, 이건 유료구독 + 도메인당 월 10달러가 더 든다.  

 

그래서 방법을 생각해봤는데, 아무래도 커스텀 도메인을 쓰는 수밖에 없는 것 같다.

먼저 첫번째 방식으로 프록시를 이용해보려 했는데, 프록시를 쓰려면 도메인을 하나 더파고, 서버도 새로 올려야한다. 구글에서 리다이렉트 url을 최상위 도메인에서만 받기 때문이다.

그런데 저 도메인에서 다시 supabase로 이동하게끔 해야하는데 supabase에서 구글외에 다 막아버렸으면 저것도 막힐것이다.

두번째 방법(도메인 두개 등록하고 구글에 요청)은 시도해볼만 한 것 같긴한데, 답글들을 보면 2주 정도 걸렸다는 글도 있고, 먼저 구글에서 도메인 두개를 등록한걸 알아차려줘야한다?는 것도 있고 하는 걸 봐서, 시간이 많이 있을 때 시도해볼만하다 정도인 것 같다.

 

마지막 남은 방법이 커스텀 도메인이다. 유료구독자에게 플러스로 돈을 더 받아간다. 그것도 구독제로. 악랄한 놈들. 이걸 써서 돈을 더많이 벌어야한다.

 

이거 방법 알아내려고 거의 오늘 하루를 다썼다...

 

 

뭔가 글을 잘못읽어서

Google pre-built configuration

이거 하면 커스텀 도메인이 될 줄 알고 이것도 계속 시도하기도 했고.

pre-built configuration도 되면 좋을 것 같은데, 이건 나중에 하겠다. 

그래도 이것도 몇번 시도해봤는데, 시간을 너무 잡아먹어서. 되면 나중에 다시 글을 쓰겠다.

그런데 이거랑 관련있는지는 모르겠지만,

무슨 문서만 들어가면 서드파티 쿠키 지원중단한다는 경고가 계속 떠서  차차 살펴봐야겠다.