Managed usuários de e-mail/senha - React Native SDK

Configurar fornecedores @realm/react

Os componentes envolvidos pelo AppProvider podem acessar os hooks useApp e useAuth . Esses componentes só serão renderizados se AppProvider se conectar com êxito ao backend do Atlas App Services .

Os componentes agrupados pelo UserProvider podem acessar usuários autenticados com o gancho useUser. Esses componentes só serão renderizados se o seu aplicativo tiver um usuário autenticado

Para configurar a autenticação do usuário:

1. Encerre todos os componentes que precisam acessar o App Services em AppProvider.

2. Dentro do AppProvider, encerre todos os componentes que você deseja ter acesso como usuário autenticado com UserProvider.

3. Em UserProvider, inclua um acessório de fallback com um componente que registra um usuário. O aplicativo renderiza este componente se não houver nenhum usuário 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>
  );
};

Conecte-se com um componente de contingência

Os usuários devem ter uma conta de e-mail/senha registrada antes de poderem fazer login. Depois que um usuário faz login, todos os componentes envoltos em UserProvider têm acesso a uma instância desse objeto de usuário por meio do hook useUser .

Para fazer login de um usuário com e-mail e senha:

1. Registre o usuário se ele ainda não for.

2. Desestruturar logIn e result do gancho useEmailPasswordAuth.

3. Passe o e-mail e a senha do usuário para LogIn() como um objeto.

4. Lidar com o result.

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

Reenviar um e-mail de confirmação

Se o provedor estiver configurado para enviar um e-mail de confirmação, o Atlas App Services enviará automaticamente um e-mail de confirmação quando um usuário se registrar. O e-mail contém um link para o Email Confirmation URL configurado com um token válido por 30 minutos. Se um usuário não seguir o link e confirmar dentro desse período, ele deverá solicitar um novo e-mail de confirmação.

Para reenviar um e-mail de confirmação:

1. Desestruturar resendConfirmationEmail e result do gancho useEmailPasswordAuth.

2. Passe o e-mail do usuário para resendConfirmationEmail() como um objeto.

3. Lidar com a confirmação com base em result.

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

Tentar novamente uma função de confirmação do usuário

Você pode executar novamente sua função de confirmação personalizada, se necessário.

Para tentar novamente uma função de confirmação do usuário:

1. Desestruturar retryCustomConfirmation e result do gancho useEmailPasswordAuth.

2. Passe o e-mail do usuário para retryCustomConfirmation() como um objeto.

3. Lidar com a confirmação com base em result.

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

Redefinir senha com e-mail

Você pode enviar e-mails de redefinição de senha para confirmar as identidades dos usuários. Você deve configurar seu aplicativo do App Services App para enviar um e-mail de redefinição de senha. Os aplicativos móveis podem lidar com redefinições de senha diretamente na aplicação. Configure links diretos no Android ou links universais no iOS.

Os valores token e tokenId dos e-mails de redefinição de senha são válidos por 30 minutos. Se os usuários não acessarem o Password Reset URL do e-mail nesse período, os valores expirarão e os usuários deverão solicitar outro e-mail de redefinição de senha.

Para redefinir uma senha com e-mail:

1. No App Services, certifique-se de que Password Reset Method esteja definido como Send a password reset email.

2. No código do cliente, desestruturar sendResetPasswordEmail , resetPassword e result do gancho useEmailPasswordAuth .

3. Passe o e-mail do usuário para sendResetPasswordEmail() como um objeto.

4. Extraia os valores token e tokenId da URL de redefinição de senha do e-mail.

5. Passe a nova senha de usuário, token, e tokenId para resetPassword() como um 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`...
};

Ligar para uma função de redefinição de senha

Você pode chamar uma Atlas App Services Function que você define para lidar com redefinições de senha. Você deve configurar seu App Services App para executar uma função de redefinição de senha.

Esta função pode receber um nome de usuário, uma senha e qualquer número de argumentos adicionais. Você pode usar esses argumentos para especificar detalhes como respostas a perguntas de segurança ou outros desafios que o usuário deve passar para concluir com êxito uma redefinição de senha.

No lado do App Services, você define a função personalizada de redefinição de senha que é executada quando você chama esse método. Essa função deve retornar um dos três status possíveis:

• fail

• pending

• success

Um status fail é tratado como um erro. O método callResetPasswordFunction() do SDK não recebe valores de retorno, portanto, não retorna um status pending ou success ao cliente.

Para chamar uma função de redefinição de senha:

1. No App Services, crie uma função de redefinição de senha.

2. No App Services, certifique-se de que Password Reset Method está definido para Run a password reset function e ponto-o para a sua nova função.

3. No código do cliente, desestruturar callResetPasswordFunction e result do gancho useEmailPasswordAuth .

4. Passe o e-mail e a senha do usuário para callResetPasswordFunction() como um objeto, seguido por quaisquer outros argumentos que você definiu para sua função 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`...
};