Expo 에서 네이버 로그인하기

2026.08.27 · 2분 읽기 · 조회 0

라이브러리 라이브러리 설치 및 설정 네이버 디벨로퍼스 앱 등록 SDK 초기화 로그인하기 프로필 정보 가져오기

외주개발 클라이언트 측에서 네이버 로그인을 갑자기 추가하고 싶다고 해서, 급하게 추가해본다. 일단 해보자.

라이브러리

해당 프로젝트에서는
@react-native-seoul/naver-login 라이브러리를 사용할 예정이다.

라이브러리 설치 및 설정

npx expo install @react-native-seoul/naver-login

라이브러리를 설치한다.

// app.json
{
  "expo": {
    "plugins": [
      [
        "@react-native-seoul/naver-login",
        {
          "urlScheme": "네이버_개발자콘솔에_등록한_URL_SCHEME"
        }
      ]
    ]
  }
}

app.json에 플러그인 등록을 해준다.
urlScheme은 android.package, ios.bundleIdentifier와 동일한 값으로 설정했다. 후에 initialize()에 들어갈 serviceUrlSchemeIOS 과도 같게 해주어야 한다.

네이버 디벨로퍼스 앱 등록

네이버 개발자 센터 에 들어가서 로그인 한 후, API 이용 신청을 위해 애플리케이션 등록을 진행한다.

서비스 환경 설정에서 다운로드 URL과, URL Scheme 을 등록한다. 테스트환경이라면 임의의 다운로드 URL을 등록해도 무관하다.

[애플리케이션 정보]에서 보이는 Client ID와 Client Secret을 잘 보관해두어야 한다.

SDK 초기화

import NaverLogin from '@react-native-seoul/naver-login';
 
NaverLogin.initialize({
  appName,
  consumerKey,
  consumerSecret,
  serviceUrlSchemeIOS,
  disableNaverAppAuthIOS: true,
});

카카오 로그인과 마찬가지로 API에 요청을 보내기 전에 무조건 해당 함수를 실행해 SDK를 초기화 해주어야 한다.
역시 로그인 랜딩 시의 _layout.tsx에 등록해주면 될 것이다.

//_layout.tsx
import NaverLogin from '@react-native-seoul/naver-login';
 
const consumerKey = '네이버 콘솔에서 발급받은 키';
const consumerSecret = '네이버 콘솔에서 발급받은 시크릿';
const appName = 'testapp';
const serviceUrlSchemeIOS = 'navertest'; // app.json의 urlScheme과 동일하게
 
// SDK 초기화
useEffect(() => {
  NaverLogin.initialize({
    appName,
    consumerKey,
    consumerSecret,
    serviceUrlSchemeIOS,
    disableNaverAppAuthIOS: true,
  });
}, []);

로그인하기

// index.tsx
import NaverLogin from '@react-native-seoul/naver-login';
 
// 성공, 실패 응답값 저장
const [success, setSuccessResponse] =
  useState<NaverLoginResponse["successResponse"]>();
 
const [failure, setFailureResponse] =
  useState<NaverLoginResponse["failureResponse"]>();
 
// 로그인
const handleLogin = async () => {
  const { failureResponse, successResponse } = await NaverLogin.login();
  setSuccessResponse(successResponse);
  setFailureResponse(failureResponse);
};

login() 메서드를 통해서 로그인 가능하다.

반환값은 다음과 같다.

export interface NaverLoginResponse {
    isSuccess: boolean;
    /** isSuccess가 true일 때 존재합니다. */
    successResponse?: {
        accessToken: string;
        refreshToken: string;
        expiresAtUnixSecondString: string;
        tokenType: string;
    };
    /** isSuccess가 false일 때 존재합니다. */
    failureResponse?: {
        message: string;
        isCancel: boolean;
        /** Android Only */
        lastErrorCodeFromNaverSDK?: string;
        /** Android Only */
        lastErrorDescriptionFromNaverSDK?: string;
    };
}

해당 accessToken을 백엔드 쪽에 보내서 로직을 맡기면 된다.

프로필 정보 가져오기

const profileResult = await NaverLogin.getProfile(success!.accessToken);

해당 함수를 통해 프로필을 불러오는 것도 가능하다.

반환값은 다음과 같다.

export interface GetProfileResponse {
    resultcode: string;
    message: string;
    response: {
        id: string;
        profile_image: string | null;
        email: string;
        name: string;
        birthday: string | null;
        age: string | null;
        birthyear: number | null;
        gender: string | null;
        mobile: string | null;
        mobile_e164: string | null;
        nickname: string | null;
    };
}

이때 반환되는 email값은 사용자가 개인적으로 설정한 이메일이라 반드시 @naver.com으로 끝나는 것이 아니니, 이에 주의해야 한다.

초록

앱과 웹을 만들고, 직접 운영하며 기록합니다.

giscus로 동작하며 GitHub Discussions에 저장됩니다.

포에이 회고록React Nativeexpoapp회고

Expo 에서 네이버 로그인하기

2026.08.27 · 2분 읽기 · 조회 0

라이브러리 라이브러리 설치 및 설정 네이버 디벨로퍼스 앱 등록 SDK 초기화 로그인하기 프로필 정보 가져오기

외주개발 클라이언트 측에서 네이버 로그인을 갑자기 추가하고 싶다고 해서, 급하게 추가해본다. 일단 해보자.

라이브러리

해당 프로젝트에서는
@react-native-seoul/naver-login 라이브러리를 사용할 예정이다.

라이브러리 설치 및 설정

npx expo install @react-native-seoul/naver-login

라이브러리를 설치한다.

// app.json
{
  "expo": {
    "plugins": [
      [
        "@react-native-seoul/naver-login",
        {
          "urlScheme": "네이버_개발자콘솔에_등록한_URL_SCHEME"
        }
      ]
    ]
  }
}

네이버 디벨로퍼스 앱 등록

네이버 개발자 센터 에 들어가서 로그인 한 후, API 이용 신청을 위해 애플리케이션 등록을 진행한다.

서비스 환경 설정에서 다운로드 URL과, URL Scheme 을 등록한다. 테스트환경이라면 임의의 다운로드 URL을 등록해도 무관하다.

[애플리케이션 정보]에서 보이는 Client ID와 Client Secret을 잘 보관해두어야 한다.

SDK 초기화

import NaverLogin from '@react-native-seoul/naver-login';
 
NaverLogin.initialize({
  appName,
  consumerKey,
  consumerSecret,
  serviceUrlSchemeIOS,
  disableNaverAppAuthIOS: true,
});

//_layout.tsx
import NaverLogin from '@react-native-seoul/naver-login';
 
const consumerKey = '네이버 콘솔에서 발급받은 키';
const consumerSecret = '네이버 콘솔에서 발급받은 시크릿';
const appName = 'testapp';
const serviceUrlSchemeIOS = 'navertest'; // app.json의 urlScheme과 동일하게
 
// SDK 초기화
useEffect(() => {
  NaverLogin.initialize({
    appName,
    consumerKey,
    consumerSecret,
    serviceUrlSchemeIOS,
    disableNaverAppAuthIOS: true,
  });
}, []);

로그인하기

// index.tsx
import NaverLogin from '@react-native-seoul/naver-login';
 
// 성공, 실패 응답값 저장
const [success, setSuccessResponse] =
  useState<NaverLoginResponse["successResponse"]>();
 
const [failure, setFailureResponse] =
  useState<NaverLoginResponse["failureResponse"]>();
 
// 로그인
const handleLogin = async () => {
  const { failureResponse, successResponse } = await NaverLogin.login();
  setSuccessResponse(successResponse);
  setFailureResponse(failureResponse);
};

login() 메서드를 통해서 로그인 가능하다.

반환값은 다음과 같다.

export interface NaverLoginResponse {
    isSuccess: boolean;
    /** isSuccess가 true일 때 존재합니다. */
    successResponse?: {
        accessToken: string;
        refreshToken: string;
        expiresAtUnixSecondString: string;
        tokenType: string;
    };
    /** isSuccess가 false일 때 존재합니다. */
    failureResponse?: {
        message: string;
        isCancel: boolean;
        /** Android Only */
        lastErrorCodeFromNaverSDK?: string;
        /** Android Only */
        lastErrorDescriptionFromNaverSDK?: string;
    };
}

해당 accessToken을 백엔드 쪽에 보내서 로직을 맡기면 된다.

프로필 정보 가져오기

const profileResult = await NaverLogin.getProfile(success!.accessToken);

해당 함수를 통해 프로필을 불러오는 것도 가능하다.

반환값은 다음과 같다.

export interface GetProfileResponse {
    resultcode: string;
    message: string;
    response: {
        id: string;
        profile_image: string | null;
        email: string;
        name: string;
        birthday: string | null;
        age: string | null;
        birthyear: number | null;
        gender: string | null;
        mobile: string | null;
        mobile_e164: string | null;
        nickname: string | null;
    };
}