Jetpack Compose 구글 로그인 구현

Jetpack Compose 환경에서의 문제점

Jetpack Compose로 구글 소셜 로그인을 구현하려고 했지만, 관련 정보가 충분히 제공되지 않았다. (대부분의 자료는 Firebase 인증 기반의 로그인 구현 방식에 집중되어 있었다.)

구글 소셜 로그인은 로그인의 기본이나 다름없는데.. 왜 그런걸까? 이유를 알아보기 위해 여러 자료를 찾아본 결과, Google OAuth를 Firebase 없이 구현하려면 기존의 XML 기반으로 설계된 Intent 방식을 사용해야 한다는 점을 알게 되었다.

이 방식은 다음과 같은 특징과 한계를 가지고 있다:

1. XML 기반 구조
   Google OAuth는 Jetpack Compose를 고려하지 않은 XML 중심의 설계 방식을 따른다. 따라서 Compose 환경에서 그대로 활용하기 어렵다.
2. 로그인 흐름의 비효율성
   Intent를 이용해 Activity를 이동하는 전통적인 방식은 최신 Compose의 State-driven UI 구조와 어울리지 않는다. 결과적으로 코드가 복잡해지고 관리가 어려워진다.
3. Compose와의 호환성 문제
   Jetpack Compose는 선언형 UI를 기반으로 동작하지만, Google OAuth는 명령형 UI에 적합하게 설계되었다. 이로 인해 Compose 환경에서 이질감이 발생하며, 자연스럽지 않은 사용자 흐름이 만들어질 수 있다.

결론적으로, Firebase를 사용하지 않는 Google OAuth 구현은 Jetpack Compose와의 완벽한 호환이 어렵다는 문제가 있다. 최신 UI 기술과 연동하려면 상당한 수준의 추가 작업과 커스터마이징이 필요하다.

그러나 코딩계의 빛... Jetpack Compose 고수님이 올려주신 유튜브를 통해 코드를 작성할 수 있었다. (내가 찾아본 블로그에서도 이분 유튜브를 참고했었다! 역시...)

---

구글 소셜 로그인 구현 가이드 (Firebase 미사용)

1. 구글 클라우드 세팅

1) Google Cloud Console에 접속한다.

 

2) API 및 서비스 > 사용자 인증 정보 메뉴로 이동해 OAuth 클라이언트 ID를 생성한다.

• 애플리케이션 유형에서 Android를 선택한다.
• 프로젝트 패키지명: Android Studio 상단에 표시된 패키지명을 입력한다.
• SHA-1 디지털 지문: Android Studio 터미널에서 명령어를 실행해 추출할 수 있다.

  keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

• 디지털 지문 추출 방법은 Google Cloud Console에서도 친절하게 명령어를 제공해주고 있다.

3) 설정이 완료되면, OAuth 클라이언트 ID가 생성된다.

---

2. OAuth 동의 화면 설정

1) OAuth 동의 화면 메뉴로 이동해 필요한 정보를 채운다.

• 앱 이름, 지원 이메일 등 기본 정보를 입력한다.
• 앱이 아직 배포되지 않은 디버그 상태라면, 테스트 사용자로 로그인할 수 있도록 이메일을 추가해야 한다.

2) 테스트 사용자는 최대 100명까지 추가할 수 있다.

---

3. Jetpack Compose에서 Google Sign-In 구현

Jetpack Compose 환경에서 Google Sign-In을 구현하기 위해 ActivityResultContract를 활용하여 Intent를 실행하고 결과를 처리하는 구조를 설계한다. 이를 통해 Compose와 Google OAuth를 자연스럽게 통합할 수 있다.

 

1) ActivityResultContract 구현

class GoogleApiContract : ActivityResultContract<Int, Task<GoogleSignInAccount>?>() {
    override fun createIntent(context: Context, input: Int): Intent {
        val gso = GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
            .requestIdToken(BuildConfig.GOOGLE_OAUTH_CLIENT_ID)
            .requestId()
            .build()

        val intent = GoogleSignIn.getClient(context, gso)
        return intent.signInIntent
    }

    override fun parseResult(resultCode: Int, intent: Intent?): Task<GoogleSignInAccount>? {
        return when (resultCode) {
            Activity.RESULT_OK -> GoogleSignIn.getSignedInAccountFromIntent(intent)
            else -> null
        }
    }
}

 

2) LoginScreen에서 사용

@Composable
fun LoginScreen(viewModel: LoginViewModel) {
    val authResultLauncher = rememberLauncherForActivityResult(
        contract = GoogleApiContract()
    ) { task ->
        viewModel.handleGoogleSignInResult(task)
    }

    Button(onClick = { authResultLauncher.launch(1) }) {
        Text("Google로 로그인")
    }

    when (viewModel.loginApiState) {
        is ApiState.Loading -> Text("로그인 중...")
        is ApiState.Success -> Text("로그인 성공!")
        is ApiState.Error -> Text("로그인 실패: ${(viewModel.loginApiState as ApiState.Error).message}")
        else -> {}
    }
}

 

3) ViewModel에서 Google Sign-In 결과 처리

class LoginViewModel : ViewModel() {
    private val _loginApiState = MutableStateFlow<ApiState>(ApiState.Idle)
    val loginApiState: StateFlow<ApiState> = _loginApiState

    fun handleGoogleSignInResult(task: Task<GoogleSignInAccount>?) {
        _loginApiState.value = ApiState.Loading

        if (task == null) {
            _loginApiState.value = ApiState.Error("Google 로그인 실패")
            return
        }

        try {
            val account = task.getResult(ApiException::class.java)
            account?.let {
                Log.d("LoginViewModel", "Google sign in success: ${account.id}")
                _loginApiState.value = ApiState.Success("Google 로그인 성공")
            } ?: run {
                _loginApiState.value = ApiState.Error("Google 로그인 실패")
            }
        } catch (e: ApiException) {
            Log.e("LoginViewModel", "Google sign in failed: ${e.statusCode}")
            _loginApiState.value = ApiState.Error("Google 로그인 실패")
        }
    }
}

 

4) ApiState 정의

sealed class ApiState {
    object Idle : ApiState()
    object Loading : ApiState()
    data class Success(val message: String) : ApiState()
    data class Error(val message: String) : ApiState()
}

 

---

참고 자료

• Velog 블로그: Jetpack Compose에서 구글/카카오 로그인을 구현해보자
• YouTube: 구글 로그인 구현 가이드

https://velog.io/@jjwm10625/Jetpack-Compose-%EA%B5%AC%EA%B8%80-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84