architecture-it/azure-b2c ¶

Deprecated

Esta librería se encuentra deprecada y ya no se debería utilizar en aplicaciones nuevas. En su lugar se debe consumir la librería @architecture-it/react-auth. Asimismo, en su respectiva documentación podrán encontrar los pasos a seguir para migrar desde azure-b2c a react-auth.

Biblioteca de componentes, configuraciones y utilidades referidas a AzureB2C Para React.

Prerequisitos¶

Necesita tener instaladas las siguientes dependencias

{
    "@architecture-it/stylesystem": "^2.7.0",
    "@architecture-it/react-env": "^1.1.0",
    "@azure/msal-browser": ">=2.32.1",
    "@azure/msal-react": ">=1.5.1",
    "@emotion/react": ">=11.4.1",
    "@emotion/styled": ">=11.3.0",
    "@mui/material": ">=5.0.4",
    "react": "^17.0.2 || ^18.0.0",
    "react-dom": "^17.0.2 || ^18.0.0"
}

Uso¶

Se recomienda agregar un archivo llamado msalInstance con todas las configuraciones y exportalo.

import { PublicClientApplication } from "@azure/msal-browser";
import {
  addDefaultCallbacks,
  addToStorageCallback,
  addApmEventCallback,
} from "@architecture-it/azure-b2c/eventCallbacks";
import { msalConfig } from "@architecture-it/azure-b2c/config";

import rum from "./monitor";

/**
 * Debe ser istanciado fuera del ciclo de vida de los componentes para evitar reisntanciar cuando rerenderice la app
 */
const instance = new PublicClientApplication(msalConfig);

addDefaultCallbacks(instance);

instance.addEventCallback(addToStorageCallback());

instance.addEventCallback(addApmEventCallback(rum));

export const msalInstance = instance;

Para utilizarlo de esta manera: (ejemplo con React 18)

//omitido por brevedad

import { msalInstance } from "./msalInstance";

root.render(
  <BrowserRouter>
    <Provider store={store}>
      <StyleSystemProvider>
        <CssBaseline />
        <App msalInstance={msalInstance} />
      </StyleSystemProvider>
    </Provider>
  </BrowserRouter>
);

Features¶

config¶

Expone la configuración estándar de las aplicaciones b2c, se genera y toma en cuenta las variables de entorno utilizando la librería interna para las variables de entorno @architecture-it/react-env.

Por lo que se deben tener las siguientes variables de entorno (solicitadas previamente)

REACT_APP_B2C_CLIENT_ID=<validClientId>
REACT_APP_B2C_AUTH_DOMAIN=<validClientId>

eventCallbacks¶

EventCallbacks comunes para las aplicaciones de React con AzureB2C.

Provee las siguientes utilidades

export { addToStorageCallback, addDefaultCallbacks as addCallbacks, editProfileCallback, forgotPasswordRequestCallback, setActiveAccountCallback, addApmEventCallback, } from "./eventCallbacks";

addCallbacks : Añade los callbacks comunes a todas las aplicaciones

Utiliza internamente setActiveAccountCallback, editProfileCallback y forgotPasswordRequestCallback.
addToStorageCallback : Añade un callback para guardar en el localStorage o en el sessionStorage el token
addApmEventCallback : Añade un callback para configurar el contexto del usuario en el apm

refreshToken¶

Añade la capacidad de pedir un token de vuelta en un status code 401.

Permite guardar el token de vuelta en el sessionStorage o en el localStorage

class _PersonService extends ServiceBase {
   constructor() {
     super(BASE_URL);
     addResponseInterceptorRefreshToken(this.client, msalInstance, axios);
   }
}

SidebarItems¶

Generadores para los items de autenticación. Login, editar y cerrar sessión, su uso es interno.

SidebarWrapper¶

Abstracción del Sidebar del Stylesystem, tiene dos propiedades aparte authenticateRoutes y unauthenticatedRoutes.

El objeto authenticatedRoutes tiene los mismos del SidebarItemProp ( el que recibe el Sidebar) pero se le agrega una propiedad más que es isAuthorized, obligatorio por si es necesario manejar roles y permisos especificos en el sidebar.

Uso Habitual

      <SidebarWrapper
        authenticatedRoutes={[
          {
            item: "Item que se ve autenticado",
            onClick: () => {
              if (pathname !== "/") {
                navigate("");
              }
              handleClose();
            },
            selected: pathname === "/",
            fontAwesomeProps: {
              icon: faHome,
            },
            className: styles.listItem,
            divider: true,
            isAuthorized: true,
          },
          {
            item: "Administración de Usuarios",
            onClick: () => {
              navigate("/person");

              handleClose();
            },
            fontAwesomeProps: {
              icon: faTable,
            },
            className: styles.listItem,
            //Aca se puede colocar un hook o funcion que determine si está autorizado o no
            isAuthorized: true,
          },
        ]}
        open={open}
        onClose={handleClose}
        onOpen={handleOpen}
      />

useUser¶

Hook que retorna las propiedades comunmente utilizadas en la aplicaciones frontend. Recibe un generico que vendría a ser el tipo que viene en la propiedad raw

//interfaces/permissions.ts
interface IPermission {
    rol: string;
}
const user = useUser<IPermission>();

//puede retornar null
const haveRol = user?.raw?.rol;

//Para saber si el usuario es interno o no.
const isFromAAD = user?.isFromAAD

UserAvatar¶

Component that show and handle login and logout.
Shows only an icon on determinate viewport (max-width:425px)

Componente que dispone internamente el login y el logout.

Esta hecho para ser usado en el navBar en principio pero nada limita utilizarlo en otro lugar.

En determinado viewport ( (max-width:425px)) solo muestra un icono

//layout

<Header onClickButton={handleOpen}>
    <UserAvatar />
</Header>

architecture-it/azure-b2c¶