@myiam.io/expo-sdk

MyIAM authentication SDK for Expo / React Native.

Install

npx expo install expo-auth-session expo-web-browser expo-secure-store
npm install @myiam.io/expo-sdk

app.json에 앱 스킴이 있어야 한다:

{ "expo": { "scheme": "myapp" } }

Quick Start

import { MyiamProvider, useMyiam } from "@myiam.io/expo-sdk"

export default function App() {
  return (
    <MyiamProvider
      config={{
        serviceUid: "YOUR_SERVICE_UID",
        oauth2ClientId: "YOUR_CLIENT_ID",
        apiKey: "YOUR_API_KEY",
        scheme: "myapp",
        path: "auth",
      }}
    >
      <Root />
    </MyiamProvider>
  )
}

function Root() {
  const { status, user, login, signup, logout } = useMyiam()

  if (status === "loading") return <ActivityIndicator />
  if (status === "unauthenticated") {
    return (
      <>
        <Button title="로그인" onPress={() => login()} />
        <Button title="가입" onPress={() => signup()} />
      </>
    )
  }
  return (
    <>
      <Text>{user!.username}</Text>
      <Button title="로그아웃" onPress={() => logout()} />
    </>
  )
}

login() / signup()은 사용자가 취소하면 null을 돌려준다.

MyIAM 콘솔의 OAuth2 클라이언트에 myapp://auth를 redirect URI로 등록해야 한다. 실제 값은 useMyiam().redirectUri로 확인할 수 있다.

WebView 모드

| 모드 | 구현 | 기본값 | |------|------|--------| | customTab | ASWebAuthenticationSession / Chrome Custom Tabs | 로그인·가입 | | inAppWebView | react-native-webview (전체화면 Modal) | 사용자 액션 |

passkey와 소셜 로그인은 customTab에서만 동작한다. 내장 WebView에는 WebAuthn이 없고, 구글 등은 embedded webview를 차단한다. 반대로 customTab은 iOS에서 "…앱이 myiam.io에 로그인하려고 합니다" 동의 알럿이 뜬다.

inAppWebView를 쓰려면 WebView 컴포넌트를 직접 넘긴다 — 쓰지 않는 앱이 네이티브 모듈을 설치할 필요가 없도록 주입 방식으로 둔 것이다:

npx expo install react-native-webview

import { WebView } from "react-native-webview"

<MyiamProvider config={...} webView={WebView}>

호출 단위로 override할 수 있다:

await login({ mode: "inAppWebView" })

사용자 액션

import { useMyiamAction } from "@myiam.io/expo-sdk"

const { editProfile, editEmail, setPassword, resetPassword, passkey, deregister } =
  useMyiamAction()

await editProfile({ fields: ["nickname", "mobile_number"] })
await passkey({ mode: "customTab" })  // passkey 등록은 Custom Tab 필수
await deregister()                    // 완료되면 로컬 세션도 정리된다

콜백 URI의 쿼리 파라미터를 그대로 돌려준다. 사용자가 닫으면 null. apiKey가 필요하다.

토큰

• logout()은 서버 토큰 무효화 → MyIAM 로그아웃 페이지 방문 → 로컬 세션 삭제를 모두 수행한다. 로그아웃 페이지를 건너뛰면({ web: false }) 브라우저 세션 쿠키가 남아 다음 로그인이 자동 통과된다.
• expo-secure-store에 토큰 + user를 키 하나로 저장한다 (부분 갱신 방지).
• access token 수명의 80% 지점에서 자동 갱신한다 (refreshPolicy로 조정, null이면 비활성화).
• 갱신 실패가 네트워크 오류면 세션을 유지하고 30/60/120/300초로 재시도한다. 서버가 grant를 거부하면(invalid_grant 등) 바로 로그아웃한다.
• 앱이 백그라운드에서 돌아오면 만료 시각 기준으로 타이머를 다시 건다.

API 키

apiKey는 앱 번들에서 추출할 수 있다. 노출을 피하려면 생략하고 자체 백엔드를 경유시켜라:

config={{
  serviceUid, oauth2ClientId, scheme: "myapp",
  resolveUser: async (tokens) => {
    const res = await fetch("https://api.example.com/me", {
      headers: { Authorization: `Bearer ${tokens.accessToken}` },
    })
    return res.json()
  },
}}

단 수동 가입 완료와 useMyiamAction은 apiKey가 있어야 한다.

REST API

useMyiam().api는 @myiam.io/web-sdk의 createMyiamApi와 같은 인스턴스다 (apiKey 미설정 시 null).

const { api, tokens } = useMyiam()
const info = await api!.getTokenInfo(tokens!.accessToken)

Documentation

• Expo Quickstart — 처음부터 동작하는 앱 만들기
• Expo Guide — Expo 개념, WebView 모드, 토큰 수명주기, EAS 빌드, 트러블슈팅
• expo-samples — 완성된 샘플 앱

License

MIT