Libreria Seguridad Okta-Test-React

Implementacion de cliente para proteger las rutas de tu aplicacion SAC con OKTA.

Instalación

Ejecuta el siguiente script en tu microfront React

npm install @antonio-tomas/libreria-seguridad-okta-test

Uso

Para proteger la aplicacion, es necesario realizar dos pasos.

Paso 1: Configurar el punto de entrada del SAC

Despues de que se inicio la sesion en OKTA, este regresa la informacion a el microservicio que ejecuto el entrypoint (Pagina de Inicio de Sesion de Okta)

Posteriormente, ese microservicio crea el JWT y lo envia a el SAC.

El SAC necesita una ruta que sea el punto de entrada que reciba el JWT y lo guarde en el Session Storage y esa es la finalidad de este componente.

Si ya se tiene un componente similar que este almacenando el JWT, unicamente es necesario colocar el item del Session Storage en la variable de entorno correspondiente.

Para crear ese punto de entrada es necesario realizar lo siguiente:

• Importar el componente ManageRedirect, en el archivo de rutas, solo es necesario declararlo una vez en el Single SPA.

  import { ManageRedirectPage } from '@antonio-tomas/libreria-seguridad-okta-test';

• Declarar un componente Route en donde el path servira como punto de entrada del SAC, ese path debe estar configurado en el micro servicio.

  <Switch>
    <Route exact path={'/manage-redirect'} component={ManageRedirectPage} />
  </Switch>

Despues de implementar el componente anterior, ya se almacenara correctamente el JWT.

Importante

Este componente permite ingresar a la ruta solicitada despues de iniciar sesion, en caso de la sesion anterior no sea valida

Ejemplo de comportamiento:

• Se solicito la ruta /sac/comercio/paso1.
• En caso de que la sesion no sea valida, se redirige al login.
• Despues de iniciar sesion nuevamente, me mostrara la ruta /sac/comercio/paso1.

Este comporamiento es para mostrar la ruta solicitada y no redirigir siempre a la ruta de inicio despues de iniciar sesion.

Paso 2: Proteger cada una de las rutas

Para este componente, unicamente es necesario que el JWT ya se maneje correctamente en el session storage, por que se utiliza para la validación y al no ser valido o no existir, se redirige al login.

Importar el componente ProtectedRoute en el archivo en donde se encuentran las rutas del proyecto.

import { ProtectedRoute } from '@antonio-tomas/libreria-seguridad-okta-test';

Despues de importar el componente, sustituir el Route por ProtectedRoute en cada ruta.

/* Rutas desprotegidas */
<Switch>
    <Route exact path={'/comercio'}
        render={() => <InicioComponente
        />}
    />
    <Route exact path={'/comercio/paso1'} component={Paso1Componente} />
</Switch>

/* Rutas protegidas */
<Switch>
    <ProtectedRoute exact path={'/comercio'}
        render={() => <InicioComponente
        />}
    />
    <ProtectedRoute exact path={'/comercio/paso1'} component={Paso1Componente} />
</Switch>

Es importante que el nombre del componente se mantenga como ProtectedRoute

Variables de entorno

// Ruta del Login del SAC
REACT_APP_AUTH_WITH_OKTA_PATH_LOGIN_SAC

// Nombre del item de session storage donde se guarda la url solicitada
REACT_APP_AUTH_WITH_OKTA_PATH_NAME_URL 

// Nombre del item de session storage donde se guarda el JWT
REACT_APP_AUTH_WITH_OKTA_JWT_NAME 

// Url para validar el JWT
REACT_APP_AUTH_WITH_OKTA_URL_TO_VALIDATE_JWT 

// Ruta de la pagina de Inicio del SAC 
REACT_APP_AUTH_WITH_OKTA_PATH_DASHBOARD_SAC 

// Param recibido del servidor que proporciona el token
REACT_APP_AUTH_WITH_OKTA_TOKEN_PARAM 

// Headers para la peticion que valida el JWT
REACT_APP_AUTH_WITH_OKTA_HEADERS_TO_AUTHORIZATION

Ejemplo de uso

REACT_APP_AUTH_WITH_OKTA_PATH_LOGIN_SAC=/login
REACT_APP_AUTH_WITH_OKTA_PATH_NAME_URL=url
REACT_APP_AUTH_WITH_OKTA_JWT_NAME=tokenJSW
REACT_APP_AUTH_WITH_OKTA_URL_TO_VALIDATE_JWT=http://localhost:1337/is-valid-session
REACT_APP_AUTH_WITH_OKTA_PATH_DASHBOARD_SAC=/
REACT_APP_AUTH_WITH_OKTA_TOKEN_PARAM=token
REACT_APP_AUTH_WITH_OKTA_HEADERS_TO_AUTHORIZATION="{'x-auth': 'YIP6W9Uv','x-gen': 'SMC'}"

Licence

ISC ©