Menu Docs

Autenticar usuários - React Native SDK

@realm/react tem hooks para autenticação de usuário. useAuth e useEmailPasswordAuth lidam com a autenticação com provedores de autenticação habilitados.

Para consulta rápida do useAuth , veja useAuth Hook nesta página. Para consulta rápida do useEmailPasswordAuth , veja useEmailPasswordAuth Hook na página Gerenciar usuários de e-mail/senha.

Você também pode usar as APIs do Realm.js diretamente. Crie uma instância de um objeto credenciais e passe-a para App.login() para autenticar e obter um objeto de usuário.

Antes de autenticar um usuário, você deve:

@realm/react tem provedores e hooks para autenticação de usuário. Para configurar a autenticação do usuário:

  1. Configure @realm/react provedores.

  2. Grave um componente de fallback para UserProvider.

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

Se seu aplicativo não tiver um usuário autenticado e conectado, o UserProvider e seus filhos não serão renderizados. Para lidar com este caso, passe um componente de fallback para UserProvider. Geralmente esta é a tela de conexão dos aplicativos.

O exemplo a seguir utiliza autenticação anônima, mas você pode utilizar qualquer um dos métodos do useAuth.

Para gravar um componente de fallback de autenticação para UserProvider:

  1. Crie um componente funcional.

  2. Desestruturar logInWithAnonymous e result do gancho useAuth.

  3. Chame a função logInWithAnonymous() dentro de um bloco useEffect que tem uma array de dependência vazia.

  4. Lide com result. Se a operação de autenticação não for bem-sucedida, você pode gravar o tratamento de erro com base no result.

export const LogIn = () => {
// `logInWithAnonymous` logs in a user using an
// anonymous Realm Credential.
// `result` gives us access to the result of the
// current operation. In this case, `logInWithAnonymous`.
const {logInWithAnonymous, result} = useAuth();
// Log in an anyonmous user on component render.
// On successful login, this fallback component unmounts.
useEffect(() => {
logInWithAnonymous();
}, [])
return (
<View >
{!result.error && <Text>Please log in</Text>}
<View>
{result.pending && <ActivityIndicator />}
{result.error && <ErrorComponent error={result.error} />}
</View>
</View>
);
};

O React Native SDK comunica-se com o Atlas App Services para gerenciar sessões com tokens de acesso e tokens de atualização.

Para saber mais sobre o gerenciamento de sessões, consulte Sessões de usuário na documentação do App Services.

Quando tiver configurado a autenticação do usuário em seu cliente e os fornecedores de autenticação em seu App Services App, você poderá conectar os usuários.

O provedor Anônimo permite que os usuários façam login em seu aplicativo com contas temporárias que não têm informações associadas.

Chamar um método de autenticação quando um usuário está conectado no momento, muda o usuário atual para o novo usuário.

Se chamar logInWithAnonymous() no fallback do UserProvider, os filhos de UserProvider serão renderizados assim que o anônimo for conetado.

Para conectar um usuário anônimo:

  1. Desestruturar logInWithAnonymous e result do gancho useAuth.

  2. Chame logInWithAnonymous() sem nenhum argumento.

  3. Lidar com o result.

export const LogInWithAnonymous = () => {
const {logInWithAnonymous, result} = useAuth();
const performAnonymousLogin = logInWithAnonymous;
// Handle `result`...
};

O provedor de autenticação por e-mail/senha permite que os usuários se conectem ao seu aplicativo com um endereço de e-mail e uma senha.

Você pode usar o hook useEmailPasswordAuth para lidar com a conexão do usuário em seu cliente. Para consulta rápida do useEmailPasswordAuth, veja useEmailPasswordAuth Hook na página de usuário Gerenciar e-mail/senha.

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

  1. Desestruturar logIn e result do gancho useEmailPasswordAuth.

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

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

O provedor de autenticação da chave de API permite que os processos de servidor acessem seu aplicativo diretamente ou em nome de um usuário.

Antes de conectar um usuário com uma chave de API, é necessário criar uma chave de API.

Para fazer login com uma chave de API:

  1. Desestruturar loginWithApiKey e result do gancho useAuth.

  2. Passe sua chave de API para loginWithApiKey().

const loginApiKeyUser = async (apiKey: ApiKey) => {
try {
logInWithApiKey(apiKey!.key);
} catch (error) {
console.log(error);
}
};

O fornecedor de autenticação JWT personalizado lida com a autenticação do usuário com qualquer sistema de autenticação que retorne um JSON web token.

Para conectar um usuário JWT personalizado:

  1. Configure o fornecedor de autenticação JWT no backend do App Services.

  2. Obtenha um JWT de um sistema externo.

  3. Desestruturar logInWithJWT e result do gancho useAuth.

  4. Passe o JWT para logInWithJWT().

  5. Lidar com o result.

export const LogInWithJWT = () => {
const {logInWithJWT, result} = useAuth();
// Get the current anonymous user so we can call
// an App Services Function later.
const anonymousUser = useUser();
const performJWTLogin = async () => {
// Get a JWT from a provider. In this case, from
// an App Services Function called "generateJWT".
const token = (await anonymousUser.functions.generateJWT()) as string;
logInWithJWT(token);
};
// Handle `result`...
};

O provedor de autenticação função personalizada permite lidar com a autenticação do usuário executando uma função que recebe uma carga de informações arbitrárias sobre um usuário. Consulte Autenticação de funções personalizadas para ver detalhes.

Para conectar um usuário com o provedor de função personalizada:

  1. Crie uma função do App Services para lidar com suas necessidades de autenticação.

  2. Habilite o provedor de função personalizada para seu App Services App e configure-o para usar a função criada anteriormente.

  3. Desestruturar logInWithFunction e result do gancho useAuth.

  4. Transfira quaisquer dados de usuário relevantes (como nome de usuário) para logInWithFunction().

  5. Lidar com o result.

export const LogInWithFunction = () => {
const {logInWithFunction, result} = useAuth();
const performFunctionLogin = async (email: string, password: string) => {
// Pass arbitrary information to the Atlas function configured
// for your App's Custom Function provider.
logInWithFunction({email, password});
};
// Handle `result`...
};

O provedor de autenticação do Facebook permite que você autentique usuários por meio de um aplicativo do Facebook usando sua conta existente do Facebook.

Para conectar um usuário com uma conta do Facebook existente, configure e habilite o provedor de autenticação do Facebook para o seu App Services App.

Importante

Não armazene URLs de fotos de perfil do Facebook

Os URLs da imagem de perfil do Facebook incluem o token de acesso do usuário para conceder permissão à imagem. Para garantir a segurança, não armazene um URL que inclua um token de acesso do usuário. Em vez disso, acesse o URL diretamente dos campos de metadados do usuário quando precisar buscar a imagem.

Você pode usar o SDK oficial do Facebook para lidar com a autenticação do usuário e redirecionar o fluxo de um aplicativo de cliente. Quando autenticado, o SDK do Facebook retorna um token de acesso que você pode enviar para seu aplicativo React Native e usar para completar a conexão do usuário ao seu aplicativo.

export const LogInWithFacebook = () => {
const {logInWithFacebook, result} = useAuth();
const performLogin = () => {
// Get an access token using the Facebook SDK.
// You must define this function.
const token = getFacebookToken();
logInWithFacebook(token);
};
// Handle `result`...
};

O provedor de autenticação do Google permite que você autentique os usuários com sua conta do Google existente.

Para autenticar um usuário do Google, você deve configurar o provedor de autenticação do Google para o seu App Services App.

Não há integração oficial do recurso Fazer Login com o Google para o React Native. A abordagem mais simples para integrar o recurso Fazer Login com o Google ao seu aplicativo React Native com autenticação do Realm é usar uma biblioteca de terceiros. Você pode também construir sua própria solução usando o Google Identity Services para lidar com a autenticação do usuário e redirecionar o fluxo de um aplicativo de cliente.

Independentemente da implementação, você deve recuperar um token de ID do servidor de autorização do Google. Use esse token de ID para conectar ao Realm.

export const LogInWithGoogle = () => {
const {logInWithGoogle, result} = useAuth();
const performLogin = () => {
// Get an access token using a third-party library
// or build your own solution. You must define this function.
const token = getGoogleToken();
logInWithGoogle(token);
};
// Handle `result`...
};

O provedor de autenticação Apple permite que você autentique usuários por meio do Sign-in With Apple.

Para autenticar um usuário da Apple, você deve configurar o provedor de autenticação da Apple para seu App Services App.

Você pode usar o SDK oficial do JavaScript do recurso Entrar com a Apple para lidar com a autenticação do usuário e redirecionar o fluxo de um aplicativo de cliente. Quando autenticado, o SDK do JavaScript da Apple retorna um token de ID que você pode enviar para seu aplicativo React Native e usar para completar a conexão do usuário ao seu aplicativo.

export const LogInWithApple = () => {
const {logInWithApple, result} = useAuth();
const performLogin = () => {
// Get an access token using the Apple SDK.
// You must define this function.
const token = getAppleToken();
logInWithApple(token);
};
// Handle `result`...
};

Dica

Se você receber uma mensagem de erro Login failed dizendo que o token contains an invalid number of segments, verifique se está passando uma versão de string codificada em UTF-8 do JWT.

Quando seu aplicativo Realm autentica um usuário, armazena em cache as credenciais do usuário. Você pode verificar as credenciais de usuário existentes para ignorar o fluxo de login e acessar o usuário em cache. Use isto para abrir um realm offline.

Observação

O login inicial exige uma conexão de rede

Quando um usuário se inscreve em seu aplicativo ou faz login pela primeira vez com uma conta existente em um cliente, o cliente deve ter uma conexão de rede. A verificação de credenciais de usuário em cache permite que você abra um domínio offline, mas somente se o usuário já tiver feito login enquanto estiver online.

// Log user into your App Services App.
// On first login, the user must have a network connection.
const getUser = async () => {
// If the device has no cached user credentials, log in.
if (!app.currentUser) {
const credentials = Realm.Credentials.anonymous();
await app.logIn(credentials);
}
// If the app is offline, but credentials are
// cached, return existing user.
return app.currentUser!;
};

Para saber como usar o usuário em cache na Configuração Sincronizada e acessar um domínio enquanto estiver off-line, leia a documentação Open a Synced Realm While Offline (Abrir um domínio sincronizado enquanto estiver off-line ).

Quando um usuário se conecta, o Atlas App Services cria um token de acesso para o usuário que lhe concede acesso à sua aplicação. O Realm SDK gerencia automaticamente os tokens de acesso, atualiza-os quando expiram e inclui um token de acesso válido para o usuário atual em cada solicitação. O Realm não atualiza automaticamente o token de atualização. Quando o token de atualização expira, o usuário deve se conectar novamente.

Se você enviar solicitações fora do SDK, precisará incluir o token de acesso do usuário em cada solicitação e atualizar manualmente o token quando ele expirar.

Você pode acessar e atualizar um token de acesso de usuário conectado ao SDK a partir de seu objeto Realm.User, como no seguinte exemplo:

const RefreshUserAcessToken = () => {
const user = useUser();
const [accessToken, setAccessToken] = useState<string | null>();
// Gets a valid user access token to authenticate requests
const refreshAccessToken = async () => {
// An already logged in user's access token might be stale. To
// guarantee that the token is valid, refresh it if necessary.
await user.refreshCustomData();
setAccessToken(user.accessToken);
};
// Use access token...
};

A atualização dos tokens expira após um período de tempo definido. Quando o token de atualização expira, o token de acesso não pode mais ser atualizado e o usuário deve se conectar novamente.

Se o token de atualização expirar após a abertura do domínio, o dispositivo não poderá sincronizar até que o usuário faça login novamente. Seu manipulador de erros de sincronização deve implementar uma lógica que capture um erro de token expirado ao tentar sincronizar e, em seguida, redirecionar os usuários para um fluxo de login.

Para obter informações sobre como configurar a expiração do token de atualização, consulte Gerencie sessões de usuário na documentação do App Services.

Para desconectar qualquer usuário, chame o método User.logOut() em sua instância de usuário.

Aviso

Se o usuário se desconectar, você não poderá mais ler ou gravar dados em nenhum domínio sincronizado que o usuário tenha aberto. Consequentemente, qualquer operação que ainda não tenha sido concluída antes de o usuário iniciar o logout não poderá ser concluída com êxito e provavelmente resultará em erro. Todos os dados de uma operação de gravação que falhar dessa forma serão perdidos.

function UserInformation() {
const user = useUser();
const {logOut} = useAuth();
const performLogout = () => {
logOut();
};
// Add UI for logging out...
}

O hook useAuth tem um método de autenticação para cada provedor de autenticação do App Services. Possui também um estado relacionado à autenticação. Consulte a referência useAuth para mais detalhes.

Você pode também consultar a documentação da API @realm/react do useAuth.