React Native 앱-웹뷰 토큰 연동: postMessage로 accessToken 주고받기

hyoon·2026년 3월 30일

accesstoken postMessage()react native webview 로그인 세션종료 인증 토큰만료

App

목록 보기

15/16

앱에서 웹뷰를 사용할 때 가장 고민되는 부분 중 하나가 바로 로그인 인증 처리에요.

앱은 AsyncStorage로 토큰을 관리하고, 웹은 쿠키로 토큰을 관리하는데 이 둘을 어떻게 연결할까?

이 글에서는 postMessage를 활용해 앱↔웹뷰 간 토큰을 주고받는 방법과, 토큰 만료 처리까지 어떻게 구현했는지 공유해 볼게요.

전체 흐름 한눈에 보기

[앱 로그인] → accessToken 발급
     ↓
[WebView 로드] → onLoadEnd로 웹에 postMessage로 토큰 전달
     ↓
[웹 AuthProvider] → 받은 토큰을 쿠키에 저장
     ↓
[accessToken 만료] → 웹이 앱에 getRefreshToken 요청
     ↓
[앱] → 리프레시 API 호출 후 새 토큰을 웹으로 전달

앱은 토큰을 갖고 있고, 웹은 앱에 의존해서 토큰을 받아 사용하는 구조예요.

이 프로젝트에서는 서버에서 refreshToken 쿠키를 Max-Age=30일로 설정했기에, iOS가 이를 영구 쿠키로 인식해 디스크에 보관합니다. 앱을 재 실행해도 쿠키가 그대로 남아있어서 별도의 Cookie 복원 로직이 필요 없어요. (관련 포스트: React Native 앱-웹뷰 로그인 연동: iOS Cookie 유실 문제 해결하기)

로그인 처리

앱 측 (React Native)

로그인 API 응답으로 받은 accessToken은 AsyncStorage에 저장합니다.

웹뷰 페이지 로드 후 토큰 전달

웹뷰가 로드되면(onLoadEnd) 앱이 먼저 웹으로 accessToken을 보내줘요.

const { value: accessToken } = useAppAsyncStorage('accessToken');

const handleOnLoadEnd = async () => {
  try {
    const cookies =
      Platform.OS === 'ios'
        ? await CookieManager.get('https://myapp.com', true)
        : {};

    const webviewInitData = {
      type: 'webviewInit',
      data: {
        cookies: { accessToken: cookies?.accessToken?.value || accessToken },
      },
    };
    webviewRef.current?.postMessage(JSON.stringify(webviewInitData));
  } catch (error) {
    console.error('Failed to webviewInitData:', error);
  }
};

<WebView onLoadEnd={handleOnLoadEnd} ... />

iOS는 CookieManager로 쿠키에서 토큰을 읽고, Android는 AsyncStorage에 저장한 accessToken을 사용해요.

웹 측에서 토큰 수신 (Next.js)

웹의 AuthProvider에서 message 이벤트를 리스닝하다가 webviewInit 타입 메시지를 받으면 토큰을 쿠키에 세팅해요.

// src/app/_components/AuthProvider.tsx
import { setCookie } from 'cookies-next/client';

useEffect(() => {
	const handleWebViewMessage = (event: Event) => {
		const rawData = (event as MessageEvent).data;
		const { type, data } = typeof rawData === 'string' ? JSON.parse(rawData) : rawData;

		if (type === 'webviewInit') {
			const { cookies: receivedCookies } = data;

			if (receivedCookies) {
				setCookie('accessToken', receivedCookies?.accessToken, { maxAge });
			}
		}
	};

	// Android는 document, iOS는 window에 이벤트 등록
	const messageTarget = window.ReactNativeWebView ? (/android/i.test(navigator.userAgent) ? document : window) : null;

	if (messageTarget) {
		messageTarget.addEventListener('message', handleWebViewMessage);
	}
	return () => {
		if (messageTarget) {
			messageTarget.removeEventListener('message', handleWebViewMessage);
		}
	};
}, []);

참고로 Android와 iOS에서 message 이벤트를 등록하는 대상이 달라요.

Android: document에 이벤트 등록
iOS: window에 이벤트 등록

accessToken 만료 처리

accessToken은 만료되면 401을 반환해요.

웹은 리프레시 토큰을 갖고 있지 않기 때문에, 앱에 토큰 재발급을 요청합니다.

웹 → 앱: 리프레시 요청

공통 API 훅에서 401을 감지하면 앱으로 getRefreshToken 메시지를 보내고, 앱이 응답할 때까지 Promise로 대기해요.

// 토큰 재발급 요청
const requestRefreshToken = (): Promise<string> =>
	new Promise((resolve, reject) => {
		const timeout = setTimeout(() => {
			window.removeEventListener('message', handler);
			reject(new Error('토큰 요청 타임아웃'));
		}, 10000);

		const handler = (e: MessageEvent) => {
			if (e.data.type !== 'accessToken') return;
			clearTimeout(timeout);
			window.removeEventListener('message', handler);
			resolve(e.data.data);
		};

		window.addEventListener('message', handler);
		rnwPost({ targetFunc: 'getRefreshToken' }); // 앱에 요청
	});

// 재발급 토큰 받아서 처리
const newToken = await requestRefreshToken();
setCookie('accessToken', newToken, { maxAge });

10초 내에 응답이 없으면 타임아웃 처리해요.

앱 → 웹: 새 토큰 전달

앱에서 getRefreshToken 메시지를 받으면 리프레시 API를 호출하고, 받은 토큰을 injectJavaScript로 웹에 전달합니다.

case 'getRefreshToken': {
  const newToken = await getRefreshToken();
  const script = `
    window.postMessage({ type: 'accessToken', data: '${newToken}' }, '*');
  `;
  webviewRef.current?.injectJavaScript(script);
  break;
}