Gestionar usuarios de correo electrónico/contraseña - SDK de React Native

Configurar proveedores de @realm/react

Components wrapped by AppProvider can access the useApp and useAuth hooks. These components only render if AppProvider successfully connects to your App Services backend.

Los componentes encapsulados por UserProvider pueden acceder a usuarios autenticados con el gancho useUser. Estos componentes solo se renderizan si la aplicación tiene un usuario autenticado.

To configure user authentication:

1. Envuelva todos los componentes que necesitan acceder a App Services en AppProvider.

2. Dentro de AppProvider, envuelva todos los componentes a los que desea que tenga acceso un usuario autenticado con UserProvider.

3. En UserProvider, incluya una propiedad fallback con un componente que inicie sesión a un usuario. La aplicación representa este componente si no hay ningún usuario autenticado.

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>
  );
};

Log In with a Fallback Component

Los usuarios deben tener una cuenta de correo electrónico/contraseña registrada antes de poder iniciar sesión. Después de que un usuario inicie sesión, todos los componentes envueltos en UserProvider tienen acceso a una instancia de ese objeto de usuario mediante el hook useUser.

To log a user in with email and password:

1. Registrar usuario si aún no lo está.

2. Destructure logIn and result from the useEmailPasswordAuth hook.

3. Pass the user's email and password to LogIn() as an object.

4. Handle the result.

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

Reenviar un correo electrónico de confirmación

Si el proveedor está configurado para enviar un correo electrónico de confirmación, Atlas App Services enviará automáticamente un correo electrónico de confirmación cuando un usuario se registre. El correo electrónico contiene un enlace a la configuración Email Confirmation URL con un token válido durante 30 minutos. Si un usuario no sigue el enlace y lo confirma dentro de ese periodo, debe solicitar un nuevo correo electrónico de confirmación.

To resend a confirmation email:

1. Destructure resendConfirmationEmail and result from the useEmailPasswordAuth hook.

2. Pass the user's email to resendConfirmationEmail() as an object.

3. Gestione la confirmación según result.

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

Retry a User Confirmation Function

Puedes volver a ejecutar tu función de confirmación personalizada si es necesario.

To retry a user confirmation function:

1. Destructure retryCustomConfirmation and result from the useEmailPasswordAuth hook.

2. Pass the user's email to retryCustomConfirmation() as an object.

3. Gestione la confirmación según result.

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

Reset Password with Email

Puedes enviar correos electrónicos de restablecimiento de contraseña para confirmar la identidad de los usuarios. Debes configurar tu aplicación de Servicios de Apps para que envíe un correo electrónico de restablecimiento de contraseña. Las aplicaciones móviles pueden gestionar el restablecimiento de contraseña directamente en la aplicación. Configura enlaces profundos en Android o enlaces universales en iOS.

The token and tokenId values from password reset emails are valid for 30 minutes. If users don't visit the email's Password Reset URL in that time, the values expire and users must request another password reset email.

To reset a password with email:

1. En App Services, asegúrese de que Password Reset Method esté configurado en Send a password reset email.

2. In your client code, destructure sendResetPasswordEmail, resetPassword, and result from the useEmailPasswordAuth hook.

3. Pass the user's email to sendResetPasswordEmail() as an object.

4. Extract the token and tokenId values from the reset email password URL.

5. Pass the new user password, token, and tokenId to resetPassword() as an object.

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`...
};

Call a Password Reset Function

Puedes llamar a una función de aplicación Services que definas para gestionar restablecimientos de contraseñas. Debes configurar tu App Services App para ejecutar una función de restablecimiento de contraseña.

Esta función puede tomar un nombre de usuario, una contraseña y cualquier número de argumentos adicionales. Puedes utilizar estos argumentos para especificar detalles como las respuestas a las preguntas de seguridad u otros desafíos que el usuario debe superar para completar con éxito el restablecimiento de contraseña.

En App Services, define la función de restablecimiento de contraseña personalizada que se ejecuta al llamar a este método. Esta función debe devolver uno de tres estados posibles:

• fail

• pending

• success

A fail status is treated as an error. The SDK method callResetPasswordFunction() does not take return values, so it does not return a pending or success status to the client.

Para llamar a una función de restablecimiento de contraseña:

1. In App Services, create a password reset function.

2. In App Services, make sure Password Reset Method is set to Run a password reset function and point it to your new function.

3. In your client code, destructure callResetPasswordFunction and result from the useEmailPasswordAuth hook.

4. Pase el correo electrónico y la contraseña del usuario a callResetPasswordFunction() como un objeto, seguido de cualquier otro argumento que haya definido para su función personalizada.

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`...
};