[Auth0] Expo Quick Start

Expo 기준

Configure Auth0

Get Your Application Keys

• Domain
• Client ID

Install Dependencies

install the React Native Auth0 module.

npm install react-native-auth0 --save

Integrate Auth0 in Your Application

Setup Auth0 Config Plugin

app.json or app.config.js 파일에 추가

저희 STUNNING은 Trainer를 통해 학습 플랜을 설정하고, 올바른 공부 습관 형성을 위한 스케줄 관리를 지원하여 사용자가 집중케어 받을 수 있는 Application입니다.

Generate native source code

You must generate the native code for the above configuration to be set. To do this, run the following command.

expo prebuild

{
    ...
    "android": {
      "package": "YOUR_ANDROID_PACKAGE_NAME_IS_FOUND_HERE"
    },
    "ios": {
      "bundleIdentifier": "YOUR_IOS_BUNDLE_IDENTIFIER_IS_FOUND_HERE"
    }
  }
}

이 값들은 Expo config file app.json or app.config.js에서 찾을 수 있다. 이것은 logout URL에서 사용된다.

Configure Callback and Logout URLs

callback과 logout URLs는 Auth0가 application으로 redirect back을 불러 일으키는 URLs이다. Auth0는 user 인증 후에 callback URL을 불러 일으키고, session cookie를 삭제한 후에 logout URL을 불러 일으킨다.

만약 callback과 logout URLs가 set되지 않았다면, 유저는 log in, logout을 할 수 없고 에러를 얻게 될 것이다.

Go to the settings page of your Auth0 application and add the corresponding URL to Allowed Callback URLs and Allowed Logout URLs, according to the platform of your application
만약 custom domain을 사용한다면, Auth0 domain 대신 custom domain 값을 사용하면 된다.

iOS

BUNDLE_IDENTIFIER.auth0://{yourDomain}/ios/BUNDLE_IDENTIFIER/callback

Android

PACKAGE_NAME.auth0://{yourDomain}/android/PACKAGE_NAME/callback

Add login to your app

처음으로, useAuth0와 Auth0Provider component를 'react-native-auth0'로부터 import 한다.

import {useAuth0, Auth0Provider} from 'react-native-auth0';

다음으로, Auth0 domain과 Client ID values를 제공하여, Auth0Proider component 안에 application을 싼다.

const App = () => {
  return (
    <Auth0Provider domain={"{yourDomain}"} clientId={"{yourClientId}"}>
      {/* your application */}
    </Auth0Provider>
  );
};

마지막으로, useAuth0 hook의 authrize method를 사용해 hosted login screen을 제공한다.

const LoginButton = () => {
    const {authorize} = useAuth0();

    const onPress = async () => {
        try {
            await authorize();
        } catch (e) {
            console.log(e);
        }
    };

    return <Button onPress={onPress} title="Log in" />
}

Add logout to your app

logout 하기 위해, clearSession method를 useAuth0 hook으로부터 호출함으로써, Auth0 logout endpoint를 redirect(사용자가 처음 요청한 URL이 아닌, 다른 URL로 보내는 것)한다. 이것은 인증 서버로부터 세션을 삭제하게 한다.

const LogoutButton = () => {
    const {clearSession} = useAuth0();

    const onPress = async () => {
        try {
            await clearSession();
        } catch (e) {
            console.log(e);
        }
    };

    return <Button onPress={onPress} title="Log out" />
}

Show user profile information

useAuth0 hook은 인증된 유저에 대한 정보를 포함한 user 객체를 노출시킨다. 이것을 이용해 인증된 유저에 대한 유저 프로필에 접근할 수 있다.
만약 유저가 인증되지 않았다면, 속성이 null일 것이다.

const Profile = () => {
    const {user, error} = useAuth0();

    return (
        <>
            {user && <Text>Logged in as {user.name}</Text>}
            {!user && <Text>Not logged in</Text>}
            {error && <Text>{error.message}</Text>}
        </>
    )
}