[RN] expo 카카오 로그인 구현

나에게 지옥을 보여줬던 expo sns 로그인..
애초에 정보도 너무 없을 뿐만 아니라 있어도 상황이 너무 달라서 적용하기가 어려웠다. 일단 다른 블로그 글에서는 거의 다 백엔드가 아닌 프론트단에서 키 발급부터 시작해서 로그인 구현까지 모든 과정을 다 맡는 게 대부분이었다. 하지만 내 상황은 다음과 같았다.

1. 백엔드 측에서 주는 카카오 로그인 url로 연결
2. 앱에서 카카오 로그인 웹 페이지 이동
3. 로그인 성공
4. kakao 서버에서 입력해둔 redirect uri로(백엔드에게) code를 보냄
5. 백엔드 서버에서 인가 code를 받아 카카오에 token 요청
6. accessToken을 받고 이를 이용해 회원 정보를 받음
7. 사용자 정보를 받게된 백엔드는 JWT를 생성
8. 토큰을 프론트엔드 측에 redirect
9. 프론트에서 토큰을 받게 됨
10. 토큰을 스토리지에 저장해서 로그인 처리 완료

사실상 백엔드가 처리를 다해주고 우리는 토큰만 잘 받아서 사용하면 됐던 상황이다. 근데 여기서 문제는 바로 프론트 쪽 redirect_uri 였다
그냥 React거나 React Native였다면 이 uri를 건드리는데 제한이 없는데 Expo는 이 얼탱없는 자식은 URI 건드리기가 굉장히 복잡했고, 카카오 로그인하려고 앱을 벗어나 웹으로 갔다가 로그인 후에 다시 앱으로 돌아오는 과정에서 redirect를 하지 못하는 문제로 엄청 헤맸다 ㅠㅠ

Expo 공식문서를 몇십번씩 읽어보면서 이것저것 해봤는데 도저히 되지 않는 것이었다.. ㅠㅠ 그래서 카카오 오픈채팅에 rn 커뮤니티가 있길래 거기서도 도움을 요청해봤는데 다들 이 과정에서 많이들 expo를 걷어내는 것 같았다.. ㅋㅋ
하지만 이제 종강을 앞두고 있는 이 상황에서 expo를 걷어내는 건 도저히 못하겠고, 어떻게든 방법을 찾아야했다.

그리고 참고로 아래 과정은 로그인을 '구현' 한다기보단 'redirect'에 대한 내용이다!

이때 너무 힘들고 답답했어서 서론이 길었네.. ㅎㅎ 아무튼

결론은 해결함

일단 해결방법의 핵심부터 정리하고 가자면..
1. authsession
2. linking
3. app.json 설정
4. expo tunnel ✨ (이거 때문에 개고생함)

AuthSession

Expo 라이브러리로 AuthSession을 사용하면 외부로 나갔다가 앱으로 들어올 때 redirect되도록 알아서 처리해준다. 또한 외부서버에서 로컬로 접속가능한 주소를 찾을 수 있어서 이를 바탕으로 서버측에서 redirectURI를 설정해주면 된다.

console.log(AuthSession.makeRedirectUri({ useProxy: true, path:'LoginScreen' }))

이렇게 외부에서 지금 나의 로컬서버를 어떤 uri로 접근할 수 있는지 알아낼 수 있고, 아마 아래 처럼 뜨게 될 것이다.

https://auth.expo.io/@본인_expo_Id/본인_앱_slug

Linking

따로 설정하지 않으면 url이란 개념이 존재하지 않는 expo에서는 Linking을 사용해서 원하는 컴포넌트에 url을 부여해줄 수 있다. 나의 경우는 LoginPage에 /login이라는 url을 적용시키고 싶었고 다음과 같이 적용시켰다.

const Navigation = () => {

    const prefix = Linking.createURL('/');

    const linking = {
      prefixes: [prefix],
      config: {
          initialRouteName: "LoginScreen",  
          screens: {
              LoginScreen: 'login'
      	  },
   	  }
	}

   return (
    <NavigationContainer linking={linking}>
      <AuthStack/>
    </NavigationContainer>
  );
};
  
export default Navigation;

그리고 다시 authsession을 통해 redirect가 잘 되도록 아래처럼 코드를 구성했다.
로그인 버튼 클릭시 토큰 받아오도록 구현하는 함수

import * as AuthSession from 'expo-auth-session';

export const getTokens = async (navigation) => {
   const result = await AuthSession.startAsync({
       authUrl: 'http://어쩌구:8080/auth/authorize/kakao',
       path: 'login'
     });

     if (result.type === 'success') {
       AsyncStorage.setItem('Tokens', JSON.stringify({
           'accessToken': token,
         }))
     }
     else{
       console.log(result.type)
     }
   }
 

app.json

Linking과 redirect가 잘되도록 아래 설정도 잘 바꿔줘야한다.

 "expo": {
    "name": "앱이름",
    "scheme" : "앱이름",
    "slug": "앱이름",
    ...
 }

expo tunnel

그리고 지금까지 계속 npx expo start로 expo를 실행하고 있었는데 죽어도 안되는 것이었다.. 알아본 결과 expo tunnel로 앱을 실행시켜야 외부에서 접근이 가능하다고 한다 ㅠㅠ 이걸 몰라서 엄청 오래 헤맸다..

---

암튼.. 이런 요런 방법을 통해 로그인을 성공적으로 이뤄냈다 !!!