프로세스

1. Auth0 Dashboard 설정

• Tenants 생성
• Application 세팅

  • Application Type: Native

  • Settings > Application URIs > Allowed Callback URLs 설정

    https://{AUTH0_DOMAIN}/ios/{BUNDLE_ID}/callback,
    https://{AUTH0_DOMAIN}/android/{ANDROID_PACKAGE}/callback
    

  • Settings > Application URIs > Allowed Redirect URLs 설정

    https://{AUTH0_DOMAIN}/ios/{BUNDLE_ID}/callback,
    https://{AUTH0_DOMAIN}/android/{ANDROID_PACKAGE}/callback
    

2. Google Cloud 설정

• 프로젝트 생성

• 클라이언트 > 클라이언트 ID 만들기

  • 승인된 Redirection URI 추가

    https://{AUTH0_DOMAIN}/login/callback
    

• Client ID, Client Secret 저장

3. Auth0 Dashboard 내 구글 로그인 설정

• Authentication > Social > Create Connection > Google / Gmail 선택
• Client ID, Client Secret 저장
• Permissions 설정

4. 프로젝트 내 react-native-auth0@beta 설치

npm i react-native-auth@beta --save
npx expo prebuild --clean
npx expo run:ios
npx expo run:android

5. 앱 코드 반영

• 전역 Provider 래핑

  /app/_layout.tsx

  import { useFonts } from "expo-font";
  import { Stack } from "expo-router";
  import { Auth0Provider } from "react-native-auth0";
  import "react-native-reanimated";
  
  export default function RootLayout() {
    const [loaded] = useFonts({
      SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf")
    });
  
    if (!loaded) {
      return null;
    }
  
    return (
      <Auth0Provider
        domain={process.env.EXPO_PUBLIC_AUTH0_DOMAIN!}
        clientId={process.env.EXPO_PUBLIC_AUTH0_CLIENT_ID!}
      >
        <Stack>
          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
          <Stack.Screen name="+not-found" />
        </Stack>
      </Auth0Provider>
    );
  }
  
  

• 설정 탭 화면

  /app/(tabs)/setting/index.tsx

  import CustomButtons from "@/components/CustomButtons";
  import { colors } from "@/constants";
  import { ActivityIndicator, SafeAreaView, Text, View } from "react-native";
  import { useAuth0 } from "react-native-auth0";
  
  export default function SettingScreen() {
    const { authorize, clearSession, user, isLoading, error } = useAuth0();
  
    const onLogin = async () =>
      await authorize({ scope: "openid profile email" });
    const onLogout = async () => await clearSession();
  
    if (isLoading) {
      return (
        <SafeAreaView>
          <ActivityIndicator color={colors.ORANGE_600} />
        </SafeAreaView>
      );
    }
  
    return (
      <SafeAreaView>
        {error && <Text>{error.message}</Text>}
        {!user ? (
          <View>
            <CustomButtons label="Login" onPress={onLogin} />
          </View>
        ) : (
          <View>
            <Text>{user.name ?? user.email ?? "로그인 완료"}</Text>
            <CustomButtons label="Logout" onPress={onLogout} />
          </View>
        )}
      </SafeAreaView>
    );
  }
  
  

• Hooks