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

Escriba un componente de respaldo para UserProvider

Si tu aplicación no tiene un usuario autenticado ni conectado, UserProvider y sus elementos secundarios no se renderizarán. Para solucionar este caso, puedes pasar un componente de respaldo a UserProvider. Esta suele ser la pantalla de inicio de sesión de las aplicaciones.

El siguiente ejemplo utiliza autenticación anónima, pero puede utilizar cualquiera de los métodos useAuth.

Para escribir un componente de respaldo de autenticación para UserProvider:

1. Crear un componente funcional.

2. Desestructurar logInWithAnonymous y result del gancho useAuth.

3. Llamar a logInWithAnonymous() dentro de un bloque useEffect que tiene una matriz de dependencia vacía.

4. Manejar result. Si la autenticación no se realiza correctamente, puede escribir un manejo de errores basado en 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>
  );
};

Usuario anónimo

El proveedor anónimo permite a los usuarios iniciar sesión en su aplicación con cuentas temporales que no tienen información asociada.

Al llamar a un método de autenticación cuando un usuario está conectado actualmente, cambia el usuario actual al nuevo usuario.

Si llama a logInWithAnonymous() en la reserva de UserProvider, los hijos de UserProvider se procesan tan pronto como el inicio de sesión anónimo se realiza correctamente.

Para iniciar sesión como usuario anónimo:

1. Desestructurar logInWithAnonymous y result del gancho useAuth.

2. Llama a logInWithAnonymous() sin ningún argumento.

3. Manejar el result.

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

Correo electrónico/Contraseña Usuario

El proveedor de autenticación de correo electrónico/contraseña permite a los usuarios iniciar sesión en su aplicación con una dirección de correo electrónico y una contraseña.

Puedes usar el useEmailPasswordAuth enlace para gestionar el inicio de sesión de los usuarios en tu cliente. Para una useEmailPasswordAuth referencia rápida a, consulta el enlace useEmailPasswordAuth en la página "Administrar usuarios de correo electrónico/contraseña".

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

1. Desestructurar logIn y result del gancho useEmailPasswordAuth.

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

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

Usuario de clave API

El proveedor de autenticación de clave API permite que los procesos del servidor accedan a su aplicación directamente o en nombre de un usuario.

Antes de poder iniciar sesión como usuario con una clave API, debe crear una clave API.

Para iniciar sesión con una clave API:

1. Desestructurar loginWithApiKey y result del gancho useAuth.

2. Pase su clave API a loginWithApiKey().

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

Usuario JWT personalizado

El proveedor de autenticación JWT personalizado maneja la autenticación del usuario con cualquier sistema de autenticación que devuelva un token web JSON.

Para iniciar sesión con un usuario JWT personalizado:

1. Configure el proveedor de autenticación JWT en su backend de App Services.

2. Obtenga un JWT de un sistema externo.

3. Desestructurar logInWithJWT y result del gancho useAuth.

4. Pase el JWT a logInWithJWT().

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

Usuario de función personalizada

El proveedor de autenticación de funciones personalizadas permite gestionar la autenticación de usuarios mediante la ejecución de una función que recibe una carga útil con información arbitraria sobre el usuario.Consulte Autenticación de funciones personalizadas para obtener más información.

Para iniciar sesión como usuario con el proveedor de funciones personalizadas:

1. Cree una función de App Services para gestionar sus necesidades de autenticación.

2. Habilite el proveedor de funciones personalizadas para su aplicación de servicios de aplicaciones y configúrelo para usar la función que creó anteriormente.

3. Desestructurar logInWithFunction y result del gancho useAuth.

4. Pase cualquier dato de usuario relevante (como un nombre de usuario) a logInWithFunction().

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

Usuario de Facebook

El proveedor de autenticación de Facebook le permite autenticar usuarios a través de una aplicación de Facebook utilizando su cuenta de Facebook existente.

Para iniciar sesión un usuario con una cuenta de Facebook existente, debe configurar y habilitar el proveedor de autenticación de Facebook para su aplicación de Servicios de aplicaciones.

Puedes utilizar el SDK oficial de Facebook Para gestionar la autenticación del usuario y redirigir el flujo desde una aplicación cliente. Una vez autenticado, el SDK de Facebook devuelve un token de acceso que puedes enviar a tu aplicación React Native y usar para finalizar el inicio de sesión del usuario.

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

Usuario de Google

El proveedor de autenticación de Google le permite autenticar a los usuarios con su cuenta de Google existente.

Para autenticar a un usuario de Google, debes configurar el proveedor de autenticación de Google para tu aplicación de Servicios de aplicaciones.

No existe una integración oficial de Iniciar sesión con Google para React Native. La forma más sencilla de integrar Iniciar sesión con Google en tu aplicación React Native con autenticación Realm es usar una biblioteca de terceros. También puedes crear tu propia solución con los Servicios de Identidad de Google para gestionar la autenticación de usuarios y redirigir el flujo desde una aplicación cliente.

Independientemente de la implementación, debes recuperar un token de ID del servidor de autorización de Google. Úsalo para iniciar sesión en 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`...
};

Usuario de Apple

El proveedor de autenticación de Apple le permite autenticar usuarios a través de Iniciar sesión con Apple.

Para autenticar a un usuario de Apple, debes configurar el proveedor de autenticación de Apple para tu aplicación App Services.

Puedes usar el SDK oficial de Iniciar sesión con Apple JS para gestionar la autenticación del usuario y redirigir el flujo desde una aplicación cliente. Una vez autenticado, el SDK de Apple JS devuelve un token de ID que puedes enviar a tu app React Native y usar para finalizar el inicio de sesión del usuario.

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