Saltar a contenido

React Native Auth

Librería de autenticación multiprovider para React Native que permite autenticarte con diferentes proveedores.

Internamente utiliza react-native-auth-app como librería principal para llevar a cabo los diferentes interraciones de autenticación.

Pre requisitos

Necesita tener instaladas las siguientes dependencias:

{
    "react-native-app-auth": ">=6.4.3",
    "jwt-decode": ">=3.1.2",
    "@react-native-async-storage/async-storage": ">=1.21.0",
    "react": ">=18.2.0",
    "react-dom": ">=18.2.0",
    "react-native": ">=0.71.11",
}

Instalación

yarn add @architecture-it/react-native-auth

Features

Entre las funcionalidades que la librería proporciona se encuentran:

  • Login.
  • Logout.
  • Edición de perfil para provider Azure AD B2C.
  • Refresh token.
  • Sesión activa: si la sesión no fue cerrada al volver a ingresar a la aplicación ésta se mantiene abierta.

Configuración

Para poder utilizar la librería, es necesario declarar ciertas variables de entorno y agregar un archivo de configuración. Los pasos a seguir, se mencionan a continuación:

1. Variables de entorno

Para los providers disponibilizados (Azure B2C, Duende Software, Google), las variables de entorno principales son las mismas, la unica diferencia se presenta si se requiere utilizar B2C o Google, para lo cual va a ser necesario agregar variables extras como se muestra a continuación:

REACT_NATIVE_AUTH_CLIENT_ID: "interactive.public"
REACT_NATIVE_AUTH_DOMAIN: "https://demo.duendesoftware.com/"
REACT_NATIVE_AUTH_REDIRECT_URI: "io.identityserver.demo:/oauthredirect"
REACT_NATIVE_AUTH_SCOPES: "openid;profile;email;offline_access"
REACT_NATIVE_AUTH_PROVIDER: "IdentityServer"

REACT_NATIVE_AUTH_CLIENT_ID: client-id
REACT_NATIVE_AUTH_DOMAIN: "https://andreanib2cdev.b2clogin.com/andreanib2cdev.onmicrosoft.com/"
REACT_NATIVE_AUTH_REDIRECT_URI: "package-name://oauth/redirect/"
REACT_NATIVE_AUTH_SCOPES: "openid;profile;email;offline_access"
REACT_NATIVE_AUTH_PROVIDER: "B2C"

REACT_NATIVE_AUTH_SIGN_UP_SIGN_IN: "B2C_1A_SIGNUP_SIGNINAAD"
REACT_NATIVE_AUTH_FORGOT_PASSWORD: "B2C_1A_PASSWORDRESET"
REACT_NATIVE_AUTH_EDIT_PROFILE: "B2C_1A_PROFILEEDIT"

REACT_NATIVE_AUTH_CLIENT_ID: "client-id.apps.googleusercontent.com"
REACT_NATIVE_AUTH_DOMAIN: "https://accounts.google.com/"
REACT_NATIVE_AUTH_REDIRECT_URI: "com.googleusercontent.apps.client-id:/oauth2redirect/google"
REACT_NATIVE_AUTH_SCOPES: "openid;profile;email;offline_access" 
REACT_NATIVE_AUTH_PROVIDER: "Google"

REACT_NATIVE_AUTH_TOKEN: "https://oauth2.googleapis.com/token"
REACT_NATIVE_AUTH_REVOKE: "https://oauth2.googleapis.com/revoke"
REACT_NATIVE_AUTH_AUTH: "https://accounts.google.com/o/oauth2/v2/auth"

2. Account Context

Se deberá agregar en la aplicación un archivo AccountContext.tsx donde se conformará el objeto de variables que se utilizarán para configurar el provider de autenticación.

Con estas configuraciones, se creará una nueva instancia de autenticación que se usará para crear un nuevo contexto para el provider que está disponibilizado desde la librería.

El archivo que se deberá agregar contendrá el siguiente código:

AccountContext.tsx
import { createContext } from "react";
// La importación e implementación de las variables de entorno, se pueden utilizar con la metodología elegida (por ejemplo utilizar la librería react-native-dotenv o react-native-config)
import {
  REACT_NATIVE_AUTH_CLIENT_ID,
  REACT_NATIVE_AUTH_DOMAIN,
  REACT_NATIVE_AUTH_REDIRECT_URI,
  REACT_NATIVE_AUTH_SCOPES,
  REACT_NATIVE_AUTH_PROVIDER,
  REACT_NATIVE_AUTH_SIGN_UP_SIGN_IN,
  REACT_NATIVE_AUTH_FORGOT_PASSWORD,
  REACT_NATIVE_AUTH_EDIT_PROFILE,
} from "@env";

import { AuthHandler, IVariables, config, IAccountContext } from "@architecture-it/react-native-auth";

export const variables: IVariables = {
  clientId: REACT_NATIVE_AUTH_CLIENT_ID,
  authorityDomain: REACT_NATIVE_AUTH_DOMAIN,
  redirectUri: REACT_NATIVE_AUTH_REDIRECT_URI,
  scopes: REACT_NATIVE_AUTH_SCOPES,
  provider: REACT_NATIVE_AUTH_PROVIDER,

  // El siguiente objeto se debe agregar SÓLO SÍ el provider a utilizar es B2C
  customPolicies: {
    signUpSignIn: REACT_NATIVE_AUTH_SIGN_UP_SIGN_IN,
    forgotPassword: REACT_NATIVE_AUTH_FORGOT_PASSWORD,
    editProfile: REACT_NATIVE_AUTH_EDIT_PROFILE,
  },

  // El siguiente objeto se debe agregar SÓLO SÍ el provider a utilizar es Google
  serviceConfiguration: {
    authorizationEndpoint: REACT_NATIVE_AUTH_ENDPOINT,
    tokenEndpoint: REACT_NATIVE_AUTH_TOKEN,
    revocationEndpoint: REACT_NATIVE_AUTH_REVOKE,
  },
};

export const configurations = config(variables);

export const authInstance = AuthHandler.createInstance(configurations);

/**
 * Context to keep and share account info inside app
 */
export const AccountContext = createContext<IAccountContext>({
  instance: authInstance,
  handleSignOut: () => {},
});

Warning

La propiedad customPolicies del objeto de variables es opcional y sólo deberá agregarse de forma obligatoria si se desea configurar Azure AD B2C como provider de autenticación, caso contrario no se debe agregar. Lo mismo para la propiedad serviceConfiguration, que sólo será obligatoria si el provider de autenticación es Google.

3. Provider

Para poder terminar de configurar la librería de autenticación, es necesario agregar el provider que permitirá extender el contexto y la instancia previamente creada a lo largo de toda la aplicación.

A nivel root de la aplicación App.tsx se deberá agregar el provider cómo se muestra a continuación:

App.tsx
// ... other imports

import { AccountProvider } from "@architecture-it/react-native-auth";
import { AccountContext, authInstance } from "./AccountContext";

function App(): JSX.Element {
  return (
    <AccountProvider AccountContext={AccountContext} instance={authInstance}>
        {/* rest of the code */}
    </AccountProvider>
  );
}

export default App;

appAuthRedirectScheme

En la aplicación Android, se deberá configurar el redirect schema correspondiente.

En el archivo build.gradle que se encuentra en android/app/build.gradle, dentro de la sección de defaultConfig, agregar lo siguiente:

manifestPlaceholders = [
  appAuthRedirectScheme: 'mi-redirect-uri',
]

Uso

Una vez realizadas las configuraciones mencionadas previamentes, ya debería ser posible consumir y utilizar las diferentes funcionalidades que proporciona la librería.

useAccountContext

Se disponibiliza el hook useAccountContext que permite acceder a la instancia de autenticación creada.

Algunos de los métodos disponibles para utilizar son los siguientes:

  • getAuthState: información de la sesión del usuario.
  • getIsLogged: indica si la sesión del usuario está activa o no.
  • handleAuthorize: permite iniciar el flujo de inicio de sesión.
  • handleLogout: cierra la sesión.
  • handleProfileEdit: permite editar los datos del perfil, para usuarios de Azure AD B2C.
  • handleRefresh: refresca el token de la sesión.
  • handleRevoke: revoca el token de la sesión, se debe utilizar como cierre de sesión si el provier es Google.

A continuación un ejemplo de uso:

// ... other imports

import { AccountContext } from "../../AccountContext";
import { useAccountContext } from "@architecture-it/react-native-auth";

const Login = () => {
  const { instance } = useAccountContext(AccountContext);

  return (
    <View>
      <Button title="Login" onPress={() => instance.handleAuthorize()} />
    </View>
  );
};

export default Login;

Session hooks

La librería automáticamente setea y limpia la instancia de autenticación y la sesión del usuario en el storage al iniciar y cerrar sesión respectivamente.

Se otorga acceso a los tres métodos utilizados que permiten administrar la sesión del usuario en el storage, la cual se encuentra configurada bajo la key "session".

  • setSession()
  • getSession()
  • clearSession()