Toss appLogin() 로그인 오류

개발
,
1

안녕하세요. 토스 로그인 연동하려고 하는데, 웹뷰 프론트에서 appLogin()이 되지 않아 확인 요청드립니다.

한 번 성공 후, 안 되는데, 무엇 때문인지 어떻게 디버깅해야 할지 난감해 도움 요청 드립니다. 먼저, 테스트해 보려고 하기 코드처럼 작성해 두었는데, const { authorizationCode, referrer } = await appLogin(); 이곳에서 아예 콘솔 오류가 출력되며 더이상 진행되지 않는 상황입니다.


import { appLogin } from "@apps-in-toss/web-framework";

...
  const login = useCallback(async () => {
    try {
      setLoading(true);
      setError(null);
      console.log("Starting login process...");
      // 1. 토스 앱 로그인 호출
      const { authorizationCode, referrer } = await appLogin();
      console.log("Authorization Code:", authorizationCode);
      console.log("Referrer:", referrer);
      // 2. 인증 코드로 AccessToken 발급
      const tokenResponse = await api.public.post<TokenResponse>(
        "/auth/login",
        {
          authorizationCode,
          referrer,
        }
      );

      const accessTokenValue = tokenResponse?.accessToken;
      const refreshTokenValue = tokenResponse?.refreshToken;

      console.log("Access Token:", accessTokenValue);
      console.log("Refresh Token:", refreshTokenValue);

      if (!accessTokenValue) {
        throw new Error("AccessToken을 받지 못했습니다");
      }

      setAccessToken(accessTokenValue);
      if (refreshTokenValue) {
        setRefreshToken(refreshTokenValue);
      }

      // 클라이언트에 토큰 설정
      api.setToken(accessTokenValue);

      // 3. 사용자 정보 조회
      await getUserInfo();
    } catch (err) {
      const errorMessage =
        err instanceof Error ? err.message : "로그인 중 오류가 발생했습니다";
      setError(errorMessage);
      console.error("Login error:", err);
    } finally {
      setLoading(false);
    }
  }, []);

image
image770×735 14.6 KB

처음 toss 앱 로그인 화면으로 넘어간 후엔, 로그인 화면이 따로 보이지 않았고, 현재는 아예 로그인 화면으로 넘어가지도 않고, 그냥 오류만 나는 상황입니다.
app scheme도 등록된 바와 같고, 개발 서버와 프론트 서버 둘 다 실행했습니다.
테스트앱 구동 시 yarn 4.x 버전이 필요하기에 yarn도 4.x으로 설정해 놓은 상황입니다.

사용 중인 버전 첨부합니다.


  "dependencies": {
    "@apps-in-toss/web-framework": "^1.2.1",
    "@emotion/react": "11",
    "@granite-js/plugin-router": "0.1.21",
    "@toss/tds-colors": "^0.1.0",
    "@toss/tds-mobile": "^2.1.2",
    "@toss/tds-mobile-ait": "^2.1.2",
    "next": "^15.5.2",
    "react": "18",
    "react-dom": "18"
  },
2

추가로 app-login 예제 관련해서 문의 드리고 싶습니다.

with-app-login 예제에서 사용하려고 했는데, README에서

3-3. app/bedrock.config.ts 파일 안에 있는 env 설정에 로컬 서버 주소를 입력해 주세요.

import { env } from '@react-native-bedrock/plugin-env';

export default defineConfig({
  appName: 'with-app-login',
  plugins: [
    // ...
    env({
      // 로컬 서버 주소를 입력해 주세요.
      SERVER_BASE_URL: 'http://localhost:4000',
    }),
  ],
});

코드에는 granite.config.ts만 있어서 우선 여기서 설정했습니다. 잘못된 부분이 있다면 고쳐 놓으면 좋을 것 같아 댓글로 남깁니다.

3

예제 앱에서도 appLogin() 오류가 나서 이것저것 시도해 봤는데, Sandbox 앱을 다시 로그인하니 괜찮아졌습니다. (그런 걸로 보여요)

여태까지 Apps In Toss Sandbox 202509291610 이런 식으로 상단에 보이면, 로그인 처리가 됐고, 이어진다고 생각해서 어플 종료 후 재시작해도 딱히 재로그인을 하지 않았는데, 상단에 저 표시가 보이는 것과 별개로 로그인을 매번 해 주어야 하는 것인지 궁금합니다.
(제 샌드박스 화면에서는 로그인 후에도 왼쪽 상단에 로그인 버튼이 그대로 보여서 로그인 된 건지 헷갈리는데, 로그인된 건지는 확인할 수 있는 방법이 없을까요?)

추가로, 이런 경우, 로그인 버튼을 눌러도 따로 토스 로그인하라는 창이 뜨지 않고, 바로 code, referrer을 받아오는데, 이게 의도한 정상 동작인지 궁금합니다. (제가 뭘 잘못한 건지 확인 차 질문드립니다.)

감사합니다.

4

@anyoung 님 안녕하세요

샌드박스에서 로그인 테스트를 진행하시려면 샌드박스 환경에서 개발자 계정으로 로그인을 하셔야 합니다.

샌드박스에서 로그인 하신 후에는 정상적으로 로그인되실까요?

5

넵! 잘 됩니다! 답변 감사합니다. 혹시 위에서 질문 드렸던

  • 샌드박스 앱을 껐다 켜면 무조건 로그인해야 하는지

에 대해 여쭤도 될까요?

그리고, 가능하다면 한 번 로그인했더니, 그 다음부터는 로그인하라는 창이 안 뜨는데, 로그인하라는 창을 다시 테스트해 보고 싶으면 어떻게 해야 하는지도 여쭤도 될까요?

답변 감사합니다!!