Hotwire Native 앱 인증: 간소화된 접근 방식

Hotwire Native deep dive: Authentication - by Joe Masilotti

작성자
발행일
2025년 10월 23일

핵심 요약

  • 1 Hotwire Native 앱에서 웹, iOS, Android 간 공유 쿠키를 활용하여 인증 흐름을 간소화하는 방법을 제시합니다.
  • 2 인증 로직을 Rails 코드베이스에 통합하고, <meta> 태그를 통해 인증 상태를 모바일 앱에 전달합니다.
  • 3 Bridge 컴포넌트를 사용하여 인증 상태 변경에 따라 네이티브 탭 바를 동적으로 제어하는 구현 전략을 설명합니다.

도입

Hotwire Native는 모바일 친화적인 Rails 앱을 iOS 및 Android로 쉽게 확장할 수 있게 해주지만, 인증 처리는 기본적으로 제공되지 않아 개발자들이 종종 과도하게 복잡하게 구현하는 경향이 있습니다. 본 글은 공유 쿠키를 활용하여 웹, iOS, Android 전반에 걸쳐 인증 흐름을 단순화하고, 모든 로직을 Rails 코드베이스 내에 유지하는 효율적인 접근 방식을 제안합니다. 이 방법은 앱 실행 시 로그인 화면을 표시하고, 로그인 성공 후 네이티브 탭 바를 제공하는 사용자 경험을 구현하는 데 중점을 둡니다.

Hotwire Native 앱에서 인증을 간소화하는 핵심 전략은 다음과 같습니다.

1. 장기 지속 쿠키를 통한 플랫폼 간 인증

  • cookies.signed.permanent[:session_id] = session.id를 사용하여 모든 플랫폼에서 사용자의 세션을 유지하는 장기 지속 쿠키를 활용합니다. 이는 웹과 네이티브 앱 모두에서 동일한 인증 상태를 공유하는 기반이 됩니다.

2. 메타 태그를 통한 인증 상태 노출

  • 모든 페이지에 사용자의 인증 상태를 나타내는 <meta> 태그를 렌더링합니다. ```html

    ``` authenticated? 헬퍼 메서드를 통해 현재 사용자의 로그인 여부를 불리언 값으로 전달합니다.

3. Bridge 컴포넌트를 통한 네이티브 연동

  • <meta> 태그와 연동되는 BridgeComponent를 구현합니다. 이 컴포넌트는 authentication이라는 이름으로 작동하며, signIn 또는 signOut 이벤트 메시지를 수신합니다. swift class AuthenticationComponent: BridgeComponent { override class var name: String { "authentication" } override func onReceive(message: Message) { if message.event == "signIn" { signIn() } else if message.event == "signOut" { signOut() } } } 이 컴포넌트는 웹에서 발생한 인증 관련 이벤트를 네이티브 앱으로 전달하는 역할을 합니다.

4. 인증 상태에 따른 탭 바 제어

  • 사용자가 로그인하거나 로그아웃할 때 네이티브 탭 바의 가시성과 내용을 동적으로 전환합니다. swift func signIn() { tabBarController.tabBar.isHidden = true // 로그인 전 탭 바 숨김 tabBarController.load(tabs) // 로그인 후 탭 로드 및 탭 바 표시 } func signOut() { tabBarController.tabBar.isHidden = false // 로그아웃 후 탭 바 표시 tabBarController.load([newSessionTab]) // 로그인 페이지 탭 로드 } 초기 앱 실행 시 로그인 화면이 먼저 표시되도록 탭 바를 숨기고, 로그인 성공 시 실제 앱 콘텐츠 탭을 로드하여 탭 바를 보이게 합니다. 로그아웃 시에는 다시 로그인 화면으로 돌아가도록 합니다.

결론

이 접근 방식은 Hotwire Native 앱에서 인증을 처리하는 데 있어 불필요한 복잡성을 제거하고, 웹과 모바일 플랫폼 간의 일관된 사용자 경험을 제공합니다. 모든 인증 로직을 Rails 코드베이스 내에서 관리함으로써 개발 및 유지보수 효율성을 높일 수 있습니다. 또한, 공유 쿠키와 메타 태그를 활용한 간단한 연동으로 네이티브 앱의 탭 바를 동적으로 제어하여, 사용자가 로그인해야만 앱 콘텐츠에 접근할 수 있는 일반적인 모바일 앱 패턴을 효과적으로 구현합니다. 이 글은 이러한 접근 방식의 모든 세부 사항과 잠재적 문제점을 다루며, Rails, iOS, Android 앱의 전체 소스 코드를 포함한 자료를 제공합니다.

댓글 0

댓글 작성

0/1000
정중하고 건설적인 댓글을 작성해 주세요.

아직 댓글이 없습니다

첫 번째 댓글을 작성해보세요!