Expo router with supabase auth sample

⚠️ 이 프로젝트는 현재 expo-router@1.0.0-rc7 을 기준으로 동작을 확인함

프로젝트 포인트

1. expo router 사용법
2. expo router를 사용한 인증 흐름 구현 방법
3. expo 환경에서 supabase를 통해 android, ios, web에서 동작하는 Oauth 인증 방법

---

프로젝트 세팅

환경 변수 값 얻는 법

• Supabase에서 프로젝트를 생성한 후, 프로젝트 대시보드로 이동
• 좌측 하단의 Project Settings를 클릭한 후, API 탭을 선택
• 해당 화면에서 SUPABASE_URL, SUPABASE_ANON_KEY를 얻을 수 있다.

1. env 파일 생성 후 환경 변수 입력

cp .env.sample .env

2. 프로젝트 시작

yarn start

*** 만약 Supabase 프로젝트로 소셜 로그인을 연동하지 않았다면, Email/Password 로그인만 가능하다.

---

Supabase를 통한 로그인 Overview

• expo router 환경에서 supabase를 통한 OAuth 인증을 연결하면서 발생하는 버그로 인해 몇 가지 대응 코드가 필요하다. PR 참고

모바일(Android, Ios)

모바일의 경우 expo-auth-session을 사용하여 web base 인증을 진행한다. expo-auth-session은 expo-web-broswer를 사용하여 supabase에 인증 요청을 보내고, 그 결과를 받아서 앱으로 전해준다.

웹

supabase에서 제공하는 API를 사용하여 로그인을 진행한다.

일반적인 OAuth 기반 인증 개발 흐름

1. 서비스 제공 업체 사이트(ex. google, facebook)에 가서 계정과 프로젝트를 생성
   • 서비스에 따라 앱 Url, 개인정보 처리 Url 등을 요구함
2. 생성한 프로젝트에 클라이언트로부터 OAuth 요청을 허용할 URL 을 입력 해준다. 보통 Authorized Redirection URI (승인된 리디렉션 URI) 등과 같은 명칭을 가지고 있다.
3. URI 등의 정보를 입력하면 CLIENT_ID 및 CLIENT_SECRET 를 얻을 수 있다. 이 값은 Oauth Provider에 요청을 보낼 때 사용된다. Supabase 와 같은 Saas 를 이용할 경우에는 해당 서비스에 CLIENT_ID 와 CLIENT_SECRET 을 입력해주고 OAuth 요청을 위임할 수 있다.

---

Supabase로 소셜 로그인 설정하는 방법

• 소셜 로그인을 위해서는 Supabase에 Social Provider를 추가해야한다.

펼치기

1. Supabase 로그인 후, 프로젝트를 생성한다.
2. 좌측 사이드바를 통해 Authentication -> URL Configuration 경로에서 Site URL과 Redirect URLs를 입력해준다. 개발 단계의 경우 localhost를 입력한다.
   • Redirect URLs에는 http:///auth/callback 값을 넣어준다.
   
   
3. Authentication 화면 좌측 Configuration 하단에 Providers탭이 있다. 여기서 사용할 Provider를 활성화하고 해당 Provider에서 얻은 key와 secret을 설정해준다. Provider마다 명칭을 조금씩 다를 수 있다.
4. Supabase Redirection URL: 연결을 원하는 Provider를 클릭하면 하단에 Redirect URL이 있다. Redirect URL은 모든 Provider에 같은 값이 적용된다.
   
   

소셜 로그인 제공업체 별 Credential 생성하는 방법

Google 로그인

펼치기

1. GCP(https://cloud.google.com) 로 가서 로그인 후, 프로젝트를 생성한다.
   • 프로젝트를 생성하거나 선택하면, 해당 프로젝트의 대시보드로 이동될 것이다.
   • 만약 이동하지 않을 시에는 상단 좌측의 토글 박스에서 원하는 프로젝트를 선택한다.
2. 프로젝트 대시보드 상단의 검색창에서 `OAuth` 라고 검색한다. 입력 후 나타나는 리스트 중 `Oauth 동의 화면` 을 클릭한다.
   
3. 동의 화면에서 외부를 선택하고 만들기를 클릭한다.
   
4. 이후 필요한 정보를 입력하고 하단의 `저장 후 계속` 버튼을 클릭한다.
   
   • * 표시가 있는 필드만 우선 입력하고 나머지 필드는 생략할 수 있다.
   • 이후 나타나는 화면들도 우선 `저장 후 계속` 버튼을 통해 생략한다.
5. 위 과정을 끝낸 후, 좌측 사이드바를 통해 사용자 인증 정보화면으로 이동한다.
6. 페이지 상단의 `사용자 인증 정보 만들기` 버튼을 누르고 `OAuth 클라이언트 ID` 를 클릭 한다.
   
7. expo-auth-session을 통한 Web base 인증을 이용하기 때문에, 애플리케이션 유형은 `웹 애플리케이션` 을 선택한다.
8. 위 과정을 끝낸 후, 좌측 사이드바를 통해 사용자 인증 정보화면으로 이동한다.
9. `승인된 자바스크립트 원본` 과 `승인된 리디렉션 URI` 에 `URI` 추가 버튼을 누르고, [Supabase Redirection URL](#Supabase로 소셜 로그인 설정하는 방법)을 입력 해준다.
10. 필요정보를 입력한 후, 만들기를 누르면 클라이언트 ID와 클라이언트 보안 비밀번호 정보가 표시된 모달을 확인할 수 있다.
    
    • 만약 실수로 모달을 꺼버렸다면, `Oauth 2.0 클라이언트 ID` 테이블에서 앱이름을 찾은 후, 오른쪽 끝에 다운로드 버튼을 누르면 된다.
11. 복사한 클라이언트 ID와 클라이언트 보안 비밀번호는 `Supabase 소셜 로그인 설정하는 방법`을 참고하여 값을 설정해주면 된다.

Facebook 로그인

펼치기

1. 페이스북 개발자 사이트(https://developers.facebook.com/)로 가서 로그인을 한다.
2. 우측 상단의 `My Apps` 를 선택한다.
3. 상단의 `앱 만들기` 버튼을 클릭한다.
   
   • 앱 유형 선택은 앱의 성격에 따라 선택할 수 있다. 일반적인 앱에서 페이스북 로그인을 이용하고자 한다면 소비자를 선택하면 된다.
   • 하단의 `다음` 버튼을 클릭한 후, 앱 이름과 연락처 등을 입력한 후, `앱 만들기` 버튼을 누른다.
4. 생성 후 나타나는 앱에 제품 추가 화면에서 `Facebook 로그인` 의 설정을 클릭 한다.
5. 이후 나타나는 빠른 시작 화면을 무시하고, 좌측 사이드바에서 설정 버튼을 클릭 한다.
   
6. Supabase Redirection URL을 유효한 OAuth 리디렉션 URI 항목에 추가해준다.
7. 하단의 변경 내용 저장 버튼을 눌러 준다.
8. 페이스북 로그인에서 `Supabase` 로그인에 필요한 정보를 넘겨주는지 확인하기 위해 좌측 사이드바에서 `앱 검수 -> 권한 및 기능` 을 클릭한다.
   
   • 권한 리스트 중, `email` 과 `public_profile` 이 사용할 수 있음 상태인지 확인한다. 프로덕션에서 사용할 경우에는, 고급 엑세스 기능을 사용해야 한다. 이를 위해서는 개인정보 처리 방침 등 페이스북 측에서 요구하는 요건을 갖추어야 한다. 정보 접근에 관한 자세한 사항은 여기(https://developers.facebook.com/docs/graph-api/overview/access-levels )를 참고
9. 좌측 사이드바에서 설정 -> 기본 설정을 클릭하면, 앱 ID와 앱 시크릿 코드를 얻을 수 있다. `Supabase 소셜 로그인 설정하는 방법`을 참고하여 값을 설정해주면 된다.

Github 로그인

펼치기

1. 깃허브 사이트(https://github.com) 로 이동한다.
2. 로그인 후, 우측 상단의 프로필을 누르고, 설정을 클릭한다.
   
3. 설정 페이지의 좌측 사이드바 하단에 Developer settings 탭을 클릭한다.
   
4. 화면 좌측 사이드 바에서 Oauth Apps 탭을 클릭한다.
5. 우측의 New OAuth App 을 클릭한다.
   
   • 앱 이름과 URL 등의 정보를 입력한다. URL 은 우선 localhost 를 입력해도 된다.
   • Supabase Redirection URL을 Authorization callback URL 에 입력하고 Resister application 버튼을 클릭한다.
6. 생성된 프로젝트에서 Client ID와 Client secrets를 얻을 수 있다.
   • Client secrets은 Generate a new client secret을 통해 얻을 수 있다.
   • 깃허브는 한번 생성된 Client secrets 을 다시 보여주지 않으므로, 따로 잘 저장해야 한다.
7. Supabase 소셜 로그인 설정하는 방법을 참고하여 값을 설정해주면 된다.

Apple 로그인

• ⚠️ 애플로그인은 애플 프로그램에 가입되어 있지 않다면 진행할 수 없음
• 참고 블로그

참고 사항

• Apple 로그인은 과정이 가장 복잡하기 때문에 순서대로 하나씩 따라가는 것을 추천함.
• 3번 과정에서 얻은 serviceId와 마지막 5번 과정에서 얻은 client_secret을 Supabase 소셜 로그인 설정하는 방법을 참고하여 값을 설정해주면 된다.

1. 로그인 및 계정 확인

1. 애플 개발자 사이트(https://developer.apple.com/ )로 이동한다.
2. 우측 상단에 Account 를 클릭해서 로그인을 한다.
   
   • 애플 프로그램에 가입하지 않았다면 로그인 후에 위와 같은 화면이 보이지 않을 것이다.

2. App Id 얻기

1. Account 화면의 Rrogram resources 영역에서 Certificates, Identifiers & Profiles 하단의 Identifiers 를 클릭한다.
2. Identifiers 타이틀 오른쪽에 + 버튼을 클릭한다.
3. Register a new identifier 에서 App IDs 를 선택하고 continue 를 클릭한다.
   
4. App 타입을 선택하고 continue 를 클릭한다.
5. 앱에 대한 설명과 Bundle ID를 설정한다.
   
6. Capabilities 테이블 하단에서 Sign in with Apple 을 선택한다.
   
7. 우측의 continue 와 register 버튼을 연달아 클릭한다.

3. Service Id 얻기

1. App Id 얻기 의 1~2번을 반복한 후, 이번엔 Services IDs를 선택하고 continue를 클릭한다.
2. 앱 설명을 쓰고, Bundle ID를 설정한다. App Id 얻기 에서 사용했던 아이디와 유사하게 설정하려면 앞에 prefix를 붙일 수 있다. (ex. app.com.supabaseexample)
3. 우측의 continue 와 register 버튼을 연달아 클릭한다.
4. `Identifiers` 화면에서 생성된 `Service ID` 를 클릭한다.
5. `Sign in with Apple` 을 체크하고 `Configure` 버튼을 클릭한다.
6. 나타난 모달에서 필요한 정보를 입력한다.
   
   1. Primary App ID 는 [App Id 얻기]에서 생성한 번들 아이디를 선택한다.
   2. Domains and Subdomains에 홈페이지 url을 입력한다. 이때 'https://' 와 같은 scheme은 빼고 입력한다.
   1. 애플은 localhost를 허용하지 않는다. 만약 배포된 url이 없다면 host 파일 설정을 통해 로컬 주소를 등록할 수 있다.
      참고 사이트: https://www.hostinger.com/tutorials/how-to-edit-hosts-file
   3. Returns URLs에 Supabase Redirection URL을 입력한다.
   4. Done 을 클릭해 설정을 종료한다.
7. continue 및 save 를 연달아 클릭한다.

4. SecretKey 다운 받기

1. Certificates, Identifiers & Profiles 화면 좌측 사이드바에서 Keys 탭을 클릭한다.
   
2. Keys 타이틀 오른쪽의 + 버튼을 클릭한다.
3. 키 이름을 입력한 후, 하단의 Sign in with apple을 선택하고 Configure를 클릭한다.


• Primary App ID에 이전에 생성한 Service Id를 선택해준다.
4. continue 및 save 를 연달아 클릭한 후, Download 버튼을 눌러준다.
   • 다운로드한 Secret Key의 파일명은 [Authkey_xxxxxx.p8]의 형태이다.

5. client_secret 생성하기

1. 앞 단계에서 다운받은 secret key 파일을 사용하여 client_secret을 생성한다.
   • client_secret은 Apple(https://developer.apple.com/documentation/sign_in_with_apple/generate_and_validate_tokens)에서 요구하는 알고리즘으로 생성된 토큰이어야 한다.
   • 요건을 충족하는 토큰을 만들기 위해, Ruby를 사용한다. Ruby가 다운로드되어 있지 않은 경우, https://www.ruby-lang.org/en/downloads/ 에서 다운로드를 선행한다.
2. 먼저 토큰 생성을 위해 필요한 [ruby-jwt] 패키지를 설치한다. => [sudo gem installl jwt]

3. 앞 단계에서 다운로드 받은 secret key 파일과 같은 경로에 secret_gen.rb 파일을 생성하고 아래 스크립트를 입력한다.
   

   require "jwt"
   
   key_file = "secret key 경로 ex. ./AuthKey_xxxxxxxxx.p8"
   team_id = "애플 팀 아이디"
   client_id = "Service ID 얻기 과정에서 얻은 ID 값 ex. app.supabaseexample"
   key_id = "다운받은 secret key 파일명에서 AuthKey 다음에 있는 값 ex. xxxxxxxxx"
   
   validity_period = 180 # In days. Max 180 (6 months) according to Apple docs.
   
   private_key = OpenSSL::PKey::EC.new IO.read key_file
   
   token = JWT.encode(
     {
       iss: team_id,
       iat: Time.now.to_i,
       exp: Time.now.to_i + 86400 * validity_period,
       aud: "https://appleid.apple.com",
       sub: client_id
     },
     private_key,
     "ES256",
     header_fields=
     {
       kid: key_id
     }
   )
   puts token

4. 스크립트를 작성했다면 아래 명령어로 토큰을 생성 해준다.

ruby secret_gen.rb > client_secret.txt