Administrar usuarios con correo electrónico y contraseña - SDK de React Native

Configurar proveedores de @realm/react

Los componentes encapsulados por AppProvider pueden acceder a los ganchos useApp y useAuth. Estos componentes solo se renderizan si AppProvider se conecta correctamente al backend de App Services.

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.

Para configurar la autenticación de usuario:

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

Iniciar sesión con un componente de respaldo

Los usuarios deben tener una cuenta de correo electrónico y contraseña registrada antes de poder iniciar sesión. Después de que un usuario inicia sesión, todos los componentes incluidos en UserProvider tienen acceso a una instancia de ese objeto de usuario a través del gancho useUser.

Para iniciar sesión como usuario con correo electrónico y contraseña:

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

2. Desestructurar logIn y result del gancho useEmailPasswordAuth.

3. Pase el correo electrónico y la contraseña del usuario a LogIn() como un objeto.

4. Manejar el 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.

Para reenviar un correo electrónico de confirmación:

1. Desestructurar resendConfirmationEmail y result del gancho useEmailPasswordAuth.

2. Pasar el correo electrónico del usuario a resendConfirmationEmail() como un objeto.

3. Manejar confirmación basada en result.

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

Reintentar una función de confirmación de usuario

Puede volver a ejecutar su función de confirmación personalizada si es necesario.

Para volver a intentar una función de confirmación de usuario:

1. Desestructurar retryCustomConfirmation y result del gancho useEmailPasswordAuth.

2. Pasar el correo electrónico del usuario a retryCustomConfirmation() como un objeto.

3. Manejar confirmación basada en result.

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

Restablecer contraseña con correo electrónico

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.

Los valores token y tokenId de los correos electrónicos de restablecimiento de contraseña son válidos durante 30 minutos. Si los usuarios no consultan el correo electrónico Password Reset URL durante ese tiempo, los valores caducan y deben solicitar otro correo electrónico de restablecimiento de contraseña.

Para restablecer una contraseña con correo electrónico:

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

2. En su código de cliente, desestructura sendResetPasswordEmail, resetPassword y result del gancho useEmailPasswordAuth.

3. Pasar el correo electrónico del usuario a sendResetPasswordEmail() como un objeto.

4. Extraiga los valores token y tokenId de la URL de restablecimiento de contraseña de correo electrónico.

5. Pase la nueva contraseña de usuario, token y tokenId a resetPassword() como un objeto.

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

Llamar a una función de restablecimiento de contraseña

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

Esta función puede aceptar un nombre de usuario, una contraseña y cualquier número de argumentos adicionales. Puede usar estos argumentos para especificar detalles como las respuestas a preguntas de seguridad u otros desafíos que el usuario debe superar para restablecer su 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

Un estado fail se considera un error. El método callResetPasswordFunction() del SDK no acepta valores de retorno, por lo que no devuelve un estado pending ni success al cliente.

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

1. En App Services, cree una función de restablecimiento de contraseña.

2. En App Services, asegúrese de que Password Reset Method esté configurado en Run a password reset function y apúntelo a su nueva función.

3. En su código de cliente, desestructura callResetPasswordFunction y result del gancho useEmailPasswordAuth.

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