managed 이메일/비밀번호 사용자 - React Native SDK

@realm/react Providers 설정하기

AppProvider 에 의해 래핑된 컴포넌트는 useApp 및 useAuth 후크에 액세스할 수 있습니다. 이러한 구성 요소는 AppProvider 가 App Services 백엔드에 성공적으로 연결된 경우에만 렌더링됩니다.

UserProvider 에 의해 래핑된 컴포넌트는 useUser 훅을 사용하여 인증된 사용자에게 액세스할 수 있습니다. 이러한 구성 요소는 앱에 인증된 사용자가 있는 경우에만 렌더링됩니다.

사용자 인증을 구성하려면 다음을 실행하세요.

1. App Services에 액세스해야 하는 모든 컴포넌트를 AppProvider로 래핑하세요.

2. AppProvider 내에서 인증된 사용자가 액세스할 수 있도록 하려는 모든 컴포넌트를 UserProvider로 래핑합니다.

3. UserProvider에 사용자를 로그인하는 컴포넌트가 있는 fallback 속성을 포함하세요. 인증된 사용자가 없는 경우 앱은 이 컴포넌트를 렌더링합니다.

import React from 'react';
import {AppProvider, UserProvider} from '@realm/react';
// Fallback log in component that's defined in another file.
import {LogIn} from './Login';
export const LoginExample = () => {
  return (
    <ScrollView>
      <AppProvider id={APP_ID}>
        {/* If there is no authenticated user, mount the
         `fallback` component. When user successfully
          authenticates, the app unmounts the `fallback`
          component (in this case, the `LogIn` component). */}
        <UserProvider fallback={LogIn}>
          {/* Components inside UserProvider have access
            to the user. These components only mount if
            there's an authenticated user. */}
          <UserInformation />
        </UserProvider>
      </AppProvider>
    </ScrollView>
  );
};

폴백 구성 요소로 로그인

사용자는 등록된 이메일/비밀번호 계정이 있어야 로그인할 수 있습니다. 사용자가 로그인하면 UserProvider 로 래핑된 모든 컴포넌트가 useUser 후크를 통해 해당 사용자 객체의 인스턴스에 액세스할 수 있습니다.

이메일과 비밀번호로 사용자를 로그인하려면 다음을 수행하세요.

1. 아직 사용자를 등록하지 않은 경우 등록합니다.

2. logIn과 result을 useEmailPasswordAuth hook에서 구조 분해하세요.

3. 사용자의 이메일과 비밀번호를 LogIn()에 객체로서 전달합니다.

4. result을 처리합니다.

export const LoginWithEmail = () => {
  const {logIn, result} = useEmailPasswordAuth();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const performLogin = () => {
    logIn({email, password});
  };
  // Handle `result`...
};

확인 이메일 재전송

제공자가 확인 이메일을 보내도록 구성된 경우, 사용자가 등록하면 Atlas App Services에서 자동으로 확인 이메일을 보냅니다. 이메일에는 30 분 동안 유효한 토큰으로 구성된 Email Confirmation URL 에 대한 링크가 포함되어 있습니다. 사용자가 해당 기간 내에 링크를 따라 확인 및 확인을 하지 않을 경우, 새 확인 이메일을 요청해야 합니다.

확인 이메일을 재전송하려면 다음과 같이 하세요:

1. resendConfirmationEmail과 result을 useEmailPasswordAuth hook에서 구조 분해하세요.

2. 사용자의 이메일을 resendConfirmationEmail() 에 객체로 전달합니다.

3. result 을 기반으로 확인을 처리합니다.

const ResendUserConfirmationEmail = () => {
  const {resendConfirmationEmail, result} = useEmailPasswordAuth();
  const [email, setEmail] = useState('');
  const performResendConfirmationEmail = () => {
    resendConfirmationEmail({email});
  };
  // Handle `result`...
}

사용자 확인 함수 재시도

필요한 경우 사용자 지정 확인 함수 를 다시 실행할 수 있습니다.

사용자 확인 함수를 다시 시도하려면 다음을 수행합니다.

1. retryCustomConfirmation과 result을 useEmailPasswordAuth hook에서 구조 분해하세요.

2. 사용자의 이메일을 retryCustomConfirmation() 에 객체로 전달합니다.

3. result 을 기반으로 확인을 처리합니다.

const RetryCustomUserConfirmation = () => {
  const {retryCustomConfirmation, result} = useEmailPasswordAuth();
  const [email, setEmail] = useState('');
  const performRetryCustomConfirmation = () => {
    retryCustomConfirmation({email});
  };
  // Handle `result`...
}

이메일로 비밀번호 재설정

사용자의 신원을 확인하기 위해 비밀번호 재설정 이메일을 보낼 수 있습니다. 비밀번호 재설정 이메일을 보내도록 App Services 앱을 구성해야 합니다. 모바일 애플리케이션은 앱에서 직접 비밀번호 재설정을 처리할 수 있습니다. Android에서 딥링킹을 구성하거나 iOS에서 유니버설 링크를 구성합니다.

비밀번호 재설정 이메일의 token 및 tokenId 값은 30분 동안 유효합니다. 사용자가 해당 시간 내에 이메일의 Password Reset URL 을(를) 방문하지 않으면 값이 만료되고 사용자는 다른 비밀번호 재설정 이메일을 요청해야 합니다.

이메일로 비밀번호를 재설정하려면 다음과 같이 하세요:

1. App Services에서 Password Reset Method 이(가) Send a password reset email(으)로 설정되어 있는지 확인합니다.

2. 클라이언트 코드에서 useEmailPasswordAuth 후크에서 sendResetPasswordEmail, resetPassword 및 result 를 구조화합니다.

3. 사용자의 이메일을 sendResetPasswordEmail() 에 객체로 전달합니다.

4. 이메일 비밀번호 재설정 URL에서 token 및 tokenId 값을 추출합니다.

5. 새 사용자 비밀번호 token 및 tokenId 를 resetPassword() 에 객체로 전달합니다.

const SendResetPasswordEmailButton = ({email}: {email: string}) => {
  const [errorMessage, setErrorMessage] = useState('');
  const {sendResetPasswordEmail, result} = useEmailPasswordAuth();
  const performSendResetPasswordEmail = () => {
    sendResetPasswordEmail({email: email});
  };
  // Handle `result`...
};

interface ResetPasswordButtonProps {
  password: string;
  token: string;
  tokenId: string;
}
const ResetPasswordButton = ({
  password,
  token,
  tokenId,
}: ResetPasswordButtonProps) => {
  const [errorMessage, setErrorMessage] = useState('');
  const {resetPassword, result} = useEmailPasswordAuth();
  const performPasswordReset = () => {
    resetPassword({token, tokenId, password});
  };
  // Handle `result`...
};

비밀번호 재설정 함수 실행

비밀번호 재설정을 처리하도록 정의한 App Services 함수를 호출할 수 있습니다. 비밀번호 재설정 기능을 실행하려면 App Services 앱을 구성해야 합니다.

이 함수는 사용자 이름, 비밀번호 및 여러 추가 인수를 사용할 수 있습니다. 이러한 인수를 사용하여 보안 질문 답변이나 사용자가 비밀번호 재설정을 성공적으로 완료하기 위해 전달해야 하는 기타 과제와 같은 세부 정보를 지정할 수 있습니다.

App Services 측에서 이 메서드를 호출할 때 실행되는 사용자 지정 비밀번호 재설정 함수를 정의합니다. 해당 함수는 세 가지 가능한 상태 중 하나를 반환해야 합니다.

• fail

• pending

• success

fail 상태는 오류로 처리됩니다. SDK 메서드 callResetPasswordFunction() 는 반환 값을 받지 않으므로 pending 또는 success 상태를 클라이언트에 반환하지 않습니다.

비밀번호 재설정 함수를 호출하려면 다음을 수행합니다.

1. App Services에서 비밀번호 재설정 함수를 만듭니다.

2. Atlas App Services에서 Password Reset Method 가 Run a password reset function 로 설정되어 있는지 확인하고 새 함수를 점하도록 합니다.

3. 클라이언트 코드에서 useEmailPasswordAuth 후크에서 callResetPasswordFunction 및 result 을 구조화합니다.

4. 사용자의 이메일과 비밀번호를 callResetPasswordFunction() 에 객체로 전달한 다음 사용자 지정 함수에 대해 정의한 다른 인수를 전달합니다.

const ResetPasswordWithFunction = () => {
  const {callResetPasswordFunction, result} = useEmailPasswordAuth();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const performResetPassword = () => {
    callResetPasswordFunction({email, password}, "extraArg1", "extraArg2");
  };
}

interface ResetPasswordButtonProps {
  password: string;
  token: string;
  tokenId: string;
}
const ResetPasswordButton = ({
  password,
  token,
  tokenId,
}: ResetPasswordButtonProps) => {
  const [errorMessage, setErrorMessage] = useState('');
  const {resetPassword, result} = useEmailPasswordAuth();
  const performPasswordReset = () => {
    resetPassword({token, tokenId, password});
  };
  // Handle `result`...
};