SDK

React Native SDK

@authon/react-native — 네이티브 OAuth 흐름, 보안 토큰 저장소, 사전 빌드된 인증 화면이 포함된 React Native SDK.

설치

bash

npm install @authon/react-native expo-secure-store expo-web-browser

bash

# iOS
npx pod-install

# Expo
npx expo install expo-secure-store expo-web-browser

설정

App.tsx

import { AuthonProvider } from "@authon/react-native";

export default function App() {
  return (
    <AuthonProvider
      publishableKey="pk_live_your_key"
      // Deep link scheme for OAuth callbacks
      redirectScheme="myapp"
    >
      <Navigation />
    </AuthonProvider>
  );
}

딥 링크 설정

app.json

{
  "expo": {
    "scheme": "myapp",
    "android": {
      "intentFilters": [
        {
          "action": "VIEW",
          "data": [{ "scheme": "myapp" }],
          "category": ["BROWSABLE", "DEFAULT"]
        }
      ]
    }
  }
}

사용법

screens/HomeScreen.tsx

import { useUser, useAuthon, SignedIn, SignedOut } from "@authon/react-native";
import { View, Text, Button } from "react-native";

export default function HomeScreen() {
  const { user, isLoaded } = useUser();
  const { openSignIn, signOut } = useAuthon();

  if (!isLoaded) return null;

  return (
    <View>
      <SignedIn>
        <Text>Welcome, {user?.displayName}</Text>
        <Button title="Sign out" onPress={signOut} />
      </SignedIn>
      <SignedOut>
        <Button title="Sign in" onPress={() => openSignIn()} />
      </SignedOut>
    </View>
  );
}

OAuth 로그인

tsx

import { useOAuth } from "@authon/react-native";

function GoogleSignIn() {
  const { startOAuth, isLoading } = useOAuth("google");

  return (
    <Button
      title={isLoading ? "Loading..." : "Continue with Google"}
      onPress={startOAuth}
      disabled={isLoading}
    />
  );
}

토큰 저장소

토큰은 안전한 암호화 저장을 위해 expo-secure-store(iOS Keychain / Android Keystore)를 사용하여 저장됩니다.