1. 개요
현재 개발 중인 서비스는 ios 앱으로 배포될 예정입니다. ios 앱 배포 시에는 애플 로그인 구현이 필수적입니다.
애플 로그인 구현을 위해 관련 글들을 찾아보니 대부분이 프론트 혹은 백엔드 개발자의 입장에서 작성된 글이었습니다. 저는 풀스택 개발을 맡고 있기 때문에 두 분야의 내용을 조합하면서 애플 로그인, 더 나아가 Expo 에서의 로그인 시스템에 대해 알아가보도록 하겠습니다.
2. Expo에서 애플 로그인 하기
expo-apple-authentication 플러그인을 사용해서 애플 로그인을 구현할 수 있습니다.
우선 플러그인 설치를 진행합니다.
npx expo install expo-apple-authentication
Shell
복사
config plugin 을 사용하는 경우 app.json에 다음을 설정합니다.
{
"expo": {
"plugins": ["expo-apple-authentication"]
}
}
JSON
복사
❗️config plugin이란?
Spring 으로 치면 application.yml과 비슷한 개념입니다.
Expo 환경에서 네이티브 설정을 쉽게 관리하도록 도와주며, 런타임에 설정할 수 없는 네이티브 수준의 설정을 관리하는데 유용합니다.
config plugin은 EAS Build나 npx expo run 또는 npx expo run 같은 **네이티브 빌드 시스템을 사용할 때, config plugin을 통해 네이티브 설정을 자동으로 반영하는 것이 훨씬 효율적입니다.
Expo Managed Workflow 프로젝트에서는 config plugin을 사용하면 추가적인 네이티브 설정이나 권한 처리를 수동으로 하지 않아도 됩니다.
애플 로그인을 성공했다면 authorizationCode, email, identityToken 등이 옵니다. 이를 어떻게 처리해야 할까요?
{
"authorizationCode": "cd72ebbfbfdcd42f4b11164811fe0f433.0.rwqu.UfRR2lCEyGH5y6h-GoAAig",
"email": null,
"fullName": {
"familyName": null,
"givenName": null,
"middleName": null,
"namePrefix": null,
"nameSuffix": null,
"nickname": null
},
"identityToken": "eyJraWQiOiJGZnRPTlR4b0VnIiwiYWxnIjoiUlMyNTYifQ.eyJpc3MiOiJodHRwczovL2FwcGxlaWQuYXBwbGUuY29tIiwiYXVkIjoiaG9zdC5leHAuRXhwb25lbnQiLCJleHAiOjE3MzQ1NzYxOTgsImlhdCI6MTczNDQ4OTc5OCwic3ViIjoiMDAwNjA0Ljk4ZDdmNmJhOGE1MDQ1MmJhN2EzZmYyZTRhZDRjMDJjLjA2MzAiLCJjX2hhc2giOiJBbERTSDdJTkRsU1hvWWdudXlmVWdBIiwiZW1haWwiOiJweWd4amc1NTVwQHByaXZhdGVyZWxheS5hcHBsZWlkLmNvbSIsImVtYWlsX3ZlcmlmaWVkIjp0cnVlLCJpc19wcml2YXRlX2VtYWlsIjp0cnVlLCJhdXRoX3RpbWUiOjE3MzQ0ODk3OTgsIm5vbmNlX3N1cHBvcnRlZCI6dHJ1ZX0.K2KftDvuZZowvqLxSmzsyQme-J4BUkLB2Ru5X0Nfa0-qMgtQQb6Cii1J2cLqu80rEYRi4e4ZK4gLcU9phu5ZiqWGStlM3LKxiY_Bc2PZgCqNTbBaQh0SjxQuCjxtFquHt_RxOFbsJt_Fi0mK2Lu3f-Aki27eiTR55izhMxg4z-h4b6p2nufOB5CmvHoWy7woBD1sxuuVbICkRljS0KslfLUhXsAmVzYIqpUNSLvRUpV_apsAM0Xt4uXlhbFyBVmNMHhgPBQwmDIR_tmDAu3qh7wv5lzcPFqX7XtDyegA3w47CBzElR2I0L6y3zOb4_XTKOwVNVp8TD57msJvu2DTFQ",
"realUserStatus": 1,
"state": null,
"user": "000604.98d7f6ba8a50452ba7a3ff2e4ad4c02c.0630"
}
JSON
복사
Expo에서 애플 로그인을 통해 응답을 받았다고 하더라도, 백엔드에서 Apple OAuth 서버로 추가적인 검증을 거치는 것이 필요합니다.
3. Spring에서 해당 데이터를 처리하기
4. 로그인을 유지하는 방법
React Native(특히 Expo) 환경에서 로그인 여부를 확인하는 전형적인 흐름은 다음과 같습니다.
1.
앱 시작 시 Refresh Token 요청:
앱이 실행될 때(또는 백그라운드에서 포그라운드로 돌아올 때), 로컬 스토리지나 Secure Store 등에 저장되어 있는 Refresh Token을 이용해 Access Token을 재발급 받습니다. 이를 통해 유효한 인증 상태를 갱신하려고 합니다. 이 과정에서 refreshTokenQuery를 호출하는데, 이 쿼리가 진행 중이면 isLoading 상태가 됩니다.
2.
Refresh Token 성공 시 Access Token 확보:
Refresh Token으로 새로운 Access Token을 받아오는 데 성공하면, 이제 Access Token을 사용해서 실제로 사용자 프로필을 가져오거나(getProfileQuery) 인증이 필요한 API를 호출할 수 있습니다.
3.
getProfileQuery로 사용자 정보 확인:
getProfileQuery는 현재 유저 정보(프로필)를 요청하는 쿼리입니다. 이 쿼리가 성공(getProfileQuery.isSuccess)하면, 유효한 토큰을 바탕으로 사용자 정보를 정상적으로 불러왔다는 의미이고, 이는 곧 사용자가 "로그인된 상태"임을 의미합니다. 따라서 isAuthenticated = getProfileQuery.isSuccess로 표현할 수 있습니다.
4.
정리하면:
•
isLoading = refreshTokenQuery.isPending : 현재 토큰을 재발급 중이거나 인증 상태를 확인하기 위한 준비 과정이 진행 중일 때 true.
•
isAuthenticated = getProfileQuery.isSuccess : 프로필을 성공적으로 가져와서 사용자가 인증되었음을 확인할 수 있을 때 true.
즉, 이 로직은 앱 시작 시 Refresh Token을 이용해 Access Token을 재발급(또는 검증)하고, 성공 시 해당 Access Token으로 사용자 프로필을 요청함으로써 최종적으로 사용자가 로그인 상태인지 판별하는 흐름입니다. Refresh Token은 사용자가 앱을 다시 켜거나 토큰이 만료되었을 때 새로운 Access Token을 발급받기 위한 백엔드 로직과 연동되어, 사용자의 지속적인 로그인 상태 유지에 핵심 역할을 합니다.
