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), las variables de entorno son las mismas, la unica diferencia se presenta si se requiere utilizar B2C para lo cual va a ser necesario agregar tres variables extras con los flujos de autenticación como se muestra a continuación:

Duende SoftwareAzure AD B2C

REACT_NATIVE_AUTH_CLIENT_ID: "example"
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: "exampleclientid"
REACT_NATIVE_AUTH_DOMAIN: "example.authdomain"
REACT_NATIVE_AUTH_REDIRECT_URI: "com.myapp://oauth/redirect/"
REACT_NATIVE_AUTH_SCOPES: "openid"
REACT_NATIVE_AUTH_PROVIDER: "B2C"

REACT_NATIVE_AUTH_SIGN_UP_SIGN_IN: "B2C_1A_SIGNUP_SIGNINAD"
REACT_NATIVE_AUTH_FORGOT_PASSWORD: "B2C_1A_PASSWORDRESET"
REACT_NATIVE_AUTH_EDIT_PROFILE: "B2C_1A_PROFILEEDIT/"

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";
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,
  // Propiedad opcional, sólo de debe agregar si se desea configurar Azure AD B2C.
  customPolicies: {
    signUpSignIn: REACT_NATIVE_AUTH_SIGN_UP_SIGN_IN,
    forgotPassword: REACT_NATIVE_AUTH_FORGOT_PASSWORD,
    editProfile: REACT_NATIVE_AUTH_EDIT_PROFILE,
  },
};

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.

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;

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.

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()