---
title: "Configurar el cliente"
url: https://docs.catalyst.zoho.com/es/tutorials/hosted-login-app/nodejs/configure-client/
description: "Crea una aplicación sencilla Basic o React utilizando las funcionalidades de Catalyst Hosted Authentication que proporciona registro de usuarios, inicio de sesión, restablecimiento de contraseña e implementa el inicio de sesión mediante proveedores de identidad federados populares."
last_updated: 2026-08-28T07:59:38Z
service: All Services
type: tutorial
related_links:
  - name: "Client Directory Structure"
    url: /es/cli/v1/project-directory-structure/client-directory
---

# Configurar el cliente

Configuremos el componente del cliente.

**Aplicación web básica**

El [directorio del cliente](https://docs.catalyst.zoho.com/es/cli/v1/project-directory-structure/client-directory/) contiene:
* El archivo `index.html` que contiene el código HTML para la aplicación frontend
* El archivo `main.css` que contiene el código CSS para la aplicación frontend
* El archivo `main.js` que contiene el código JavaScript
* El archivo de configuración `client-package.json`

Codificaremos en `index.html` y `main.js`. También realizaremos un cambio en `client-package.json` para asegurar que la página de inicio de la aplicación sea la página autenticada.

Discutiremos el código al final de esta sección.

> **Nota:** Revisa el código proporcionado en esta sección para asegurarte de que lo comprendes completamente.

Copia el código a continuación y pégalo en los respectivos archivos ubicados en el directorio `client/` de tu proyecto usando un IDE y guarda los archivos.

**index.html**

```xml
<!DOCTYPE html>
<html>
<head>
 <title>Profile Information</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" >
 <script src="main.js"></script>
 <script src="https://static.zohocdn.com/catalyst/sdk/js/4.6.2/catalystWebSDK.js"> </script>
 <script src="/__catalyst/sdk/init.js"></script>
 <style>
  .card {
   max-width: 500px;
   margin: auto;
   text-align: center;
   font-family: arial;
   background-color: #a5a4a4;
  }

  .title {
   font-size: 23px;
   color: black;
  }

  button {
   border: none;
   outline: 0;
   display: inline-block;
   padding: 8px;
   color: white;
   background-color: #000;
   text-align: center;
   cursor: pointer;
   width: 50%;
   font-size: 18px;
   border-radius: 8px;
  }

  a {
   text-decoration: none;
   font-size: 22px;
   color: black;
  }

  button:hover,
  a:hover {
   opacity: 0.7;
  }

  body{
   background-color:#a5a4a4;
   font-size: 20px;
   visibility: hidden;
  }
  p{
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   font-size: 10px;
   font-weight: bold;
  }
 </style>
</head>
<body onload="showProfile()">
 <h1 style="text-align:center">User Profile Information</h1>
 <div class="card">
  <img width="200px" height="450px" src="https://cdn2.iconfinder.com/data/icons/user-management/512/profile_settings-512.png" alt="John" style="width:80px;height: 80px;" >
  <p class="title" id="fname"></p>
  <p class="title" id="lname"></p>
  <p class="title"id="mailid" ></p>
  <p class="title"id="tzone" ></p>
  <p class="title"id="ctime" ></p>
  <p><button onclick="logout()">Logout</button></p>
 </div>
</body>
</html>

```

**main.js**

```javascript
function showProfile() {
debugger;
    // El método catalyst.auth.isUserAuthenticated() permite solo a los usuarios autenticados, es decir, los usuarios que han iniciado sesión, acceder a las páginas
    // Puedes cargar este método en el body de tu página para permitir solo a usuarios autenticados acceder a una página en particular
    catalyst.auth.isUserAuthenticated().then(result => {

        // Si el usuario ha iniciado sesión, se mostrarán estos contenidos de la página al usuario
        document.body.style.visibility = "visible";
        const first_name = "First Name: " + result.content.first_name;
        document.getElementById("fname").innerHTML = first_name;
        const last_name = "Last Name: " + result.content.last_name;
        document.getElementById("lname").innerHTML = last_name;
        const mailid = "Email Address: " + result.content.email_id;
        document.getElementById("mailid").innerHTML = mailid;
        const tzone = "Time Zone: " + result.content.time_zone;
        document.getElementById("tzone").innerHTML = tzone;
        const created_time = " Joined On: " + result.content.created_time;
        document.getElementById("ctime").innerHTML = created_time;
    }).catch(err => {
        // Si el usuario no ha iniciado sesión, se mostrará esto al usuario y será redirigido a la página de inicio de sesión
        document.body.style.visibility = "visible";
        document.body.innerHTML = 'You are not logged in. Please log in to continue. Redirecting you to the login page..';
        setTimeout(function () {
           window.location.href = "/__catalyst/auth/login";
        }, 5000);
    });
}

function logout() {
    // El método signOut se usa para cerrar la sesión del usuario en la aplicación
    const redirectURL = location.protocol +"//"+ location.hostname + "/__catalyst/auth/login";
    catalyst.auth.signOut(redirectURL);
}

```

**client-package.json**

```json

    {
        "name" : "ZylkerTechnologies",
        "version" : "0.0.1",
        "homepage" : "/__catalyst/auth/login", 
        "login_redirect" : "index.html"
    }
```

> **Nota:** La URL de la página de inicio se puede copiar desde la `Access URL` generada por Catalyst en la sección [Authentication Types](https://docs.catalyst.zoho.com/es/cloud-scale/help/authentication/authentication-types/) de la consola.

El directorio del cliente ahora está configurado. 

Repasemos cómo funcionan la función y el código del cliente:

* El usuario final primero encontrará la **página de inicio de sesión** que configuraste y estilizaste en la consola.
* Para crear una cuenta, hará clic en la opción **Sign Up** y será dirigido a la página de *Sign Up*.

> **Nota:** Los usuarios finales pueden registrarse en tu aplicación usando sus [Social Logins](https://docs.catalyst.zoho.com/es/cloud-scale/help/authentication/social-logins/introduction/) o usar el método convencional de registro en la aplicación usando su correo electrónico.

* Una vez que se ingresen los datos y hagan clic en **Sign Up**, o si intentan registrarse usando un Social Login de su preferencia, sus detalles se proporcionarán como entrada JSON a la función de [Custom User Validation](https://docs.catalyst.zoho.com/es/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/) (`authorization_portal_function/index.js`).

* La función solo autenticará a los usuarios si se cumple la condición que has codificado. Para este tutorial, los usuarios solo serán autenticados si se registraron en la aplicación usando una dirección de correo electrónico registrada de Zylker.

* Tras una autenticación exitosa, se enviará un correo de [Email Verification](https://docs.catalyst.zoho.com/es/cloud-scale/help/authentication/email-templates/introduction/) a la cuenta que usaron para registrarse en la aplicación.

> **Nota:** Dado que estamos usando [Hosted Login](https://docs.catalyst.zoho.com/es/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/introduction/), un tipo de autenticación nativa de Catalyst, no se requiere lógica adicional para activar los correos electrónicos apropiados. Catalyst lo gestionará automáticamente.

* Una vez que el usuario verifique su dirección de correo electrónico haciendo clic en el enlace proporcionado en el correo, quedará registrado en la aplicación. Sus detalles se pueden ver en la sección [User Management](https://docs.catalyst.zoho.com/es/cloud-scale/help/authentication/user-management/introduction/) del componente *Authentication*.

* El usuario final ahora puede iniciar sesión en la aplicación usando sus credenciales autenticadas.

* El usuario final también puede restablecer su contraseña haciendo clic en la opción **Forgot Password**. En este caso, se enviará el correo de *Password Reset* a su correo electrónico registrado. Siguiendo los pasos mencionados en el correo, puede restablecer fácilmente sus credenciales.

**Aplicación web React**

Configuremos el componente del cliente.

El [directorio del cliente](https://docs.catalyst.zoho.com/es/cli/v1/project-directory-structure/client-directory) de la aplicación web React contiene los siguientes archivos:

- El directorio raíz del cliente contiene un archivo `client-package.json`, que es un archivo de configuración que define el nombre, versión, página de inicio predeterminada y página de redirección del componente del cliente.
- El directorio del cliente `zylkertechnologies` contiene dos subcarpetas, según la estructura de proyecto predeterminada de una aplicación React:
    - La carpeta `public` se utiliza generalmente para contener archivos que los navegadores pueden acceder abiertamente a través de URLs públicas, como archivos de iconos de la aplicación web, el archivo `index.html` y el archivo `404.html`.
    - La carpeta `src` contiene los archivos fuente de la aplicación que se incluirán en la carpeta de compilación cuando compilemos la aplicación React.
    - El directorio del cliente también contiene el archivo de dependencias [`package.json`](https://docs.npmjs.com/files/package.json) y un archivo oculto [`.gitignore`](https://docs.npmjs.com/files/package.json).
- Los archivos presentes en la carpeta `public` incluyen:
    - [Archivos nativos de React](https://reactjs.org/docs/getting-started.html?#try-react) como setup `Tests.js`, `index.js`, `reportWebVitals.js`, `logo.svg` y `App.test.js`.
    - `index.html` - Contiene el SDK web de Catalyst que te permite acceder a los componentes de Catalyst.
    - Crearemos un archivo adicional `404.html` que contendrá los elementos de manejo de errores.
- Los archivos presentes en la carpeta `src` incluyen:
    - Archivos nativos de React como `setupTests.js`, `reportWebVitals.js`, `logo.svg` y `App.test.js`.
    - `App.js` - Contiene las rutas hash de tu aplicación
    - `App.css` - Contiene los elementos de estilo generales de tu aplicación
    - `index.js` - El punto de entrada de la aplicación React.
    - `index.css` - Contiene el estilo de los elementos presentes en el archivo `index.js`.
    - Crearás los siguientes archivos en la carpeta `src`:
        - `Button.css` - Contiene los elementos de estilo para el botón *Logout* que estará presente en la aplicación.
        - `Button.js` - Contiene el componente React para el *Logout* presente en la aplicación.
        - `Layout.js` - Contiene el componente React para la lógica de la aplicación
        - `LoginPage.js` - Contiene el componente React para las páginas de inicio de sesión que generaste en la consola de Catalyst.
        - `UserProfile.css` - Contiene los elementos de estilo para la página de información del usuario que se mostrará una vez que inicies sesión en la aplicación.
        - `UserProfile.js` - Contiene el componente React para renderizar los detalles del usuario después de iniciar sesión.

Codificaremos en los archivos `index.html`, `404.html`, `App.js`, `App.css`, `index.css`, `index.js`, `Button.css`, `Button.js`, `Layout.js`, `LoginPage.js`, `UserProfile.css` y `UserProfile.js`. También realizaremos un cambio en `client-package.json` para asegurar que la página de inicio de la aplicación sea la página autenticada.

> **Nota:** Puedes eliminar los archivos nativos de React ya que no son necesarios para construir esta aplicación.

#### Instalar paquetes adicionales de React

El paquete `react-router-dom` necesita instalarse en el directorio del cliente `AuthorizationPortal/zylkertechnologies` usando el comando de la CLI que se indica a continuación:

```sh
npm install react-router-dom
```

Este comando instalará el módulo `react-router-dom`, guardará las dependencias y nos permitirá realizar el enrutamiento hash requerido en nuestra aplicación.

Este es el directorio del cliente después de haber creado los archivos necesarios y eliminado los archivos innecesarios.
![catalyst_hosted_login_react_directory_modified](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_hosted_login_react_directory_modified.webp)

> **Nota:** Revisa todo el código proporcionado en esta sección para asegurarte de que lo comprendes completamente.

Copia el código proporcionado a continuación y pégalo en `index.html` y `404.html`, respectivamente, ubicados en el directorio del cliente (`zylkertechnologies/public/`) usando un IDE y guarda el archivo.

**index.html**

```xml
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
    <script src="https://static.zohocdn.com/catalyst/sdk/js/4.6.2/catalystWebSDK.js"> </script>
    <script src="/__catalyst/sdk/init.js"></script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

```

**404.html**

```xml
<!DOCTYPE html>
<html lang="en">
  <head>
    <h2>You are viewing this 404 page since you tried to access a page which does not exist.</h2>
  </head>
</html>

```

Copia el código proporcionado a continuación y pégalo en `App.css`, `App.js`, `index.js`, `index.css`, `Button.css`, `Button.js`, `Layout.js`, `LoginPage.js`, `UserProfile.css` y `UserProfile.js`, respectivamente, ubicados en el directorio del cliente (`zylkertechnologies/src/`) usando un IDE y guarda el archivo.

**App.css**

```css
.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.inputs {
  width: 90%;
  padding: 15px;
  margin: 15px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
  border-radius: 8px;
}
#root {
  background-color: #c0c0c0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 1;
}

```

**App.js**

```javascript
import "./App.css";
import { HashRouter, Navigate, Route, Routes } from "react-router-dom";
import Layout from "./Layout";

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<Layout />} />
        <Route path="" element={<Navigate to="/" replace />} />
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </HashRouter>
  );
}

export default App;

```

**index.css**

```css
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #c0c0c0;
}

```

**index.js**

```javascript
import React from "react";
import "./index.css";
import App from "./App";
import * as ReactDOM from "react-dom/client";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

```

**Button.css**

```css
button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 20%;
  font-size: 18px;
  border-radius: 8px;
}

button:hover,
.forgetPassword-btn:hover,
a:hover {
  opacity: 0.7;
}
a {
  text-decoration: none;
  font-size: 22px;
  color: black;
}

```

**Button.js**

```javascript
import { useCallback } from "react";
import "./Button.css";

function Button({ title }) {
  const logout = useCallback(() => {
    const redirectURL = "/__catalyst/auth/login";
    window.catalyst.auth.signOut(redirectURL);
  }, []);
  return (
    <div id="logoutbtn" style={{ textAlign: "inline-block" }}>
      <button onClick={logout} id="logout" style={{ display: "inline-block" }}>
        {title}
      </button>
    </div>
  );
}

export default Button;

```

**Layout.js**

```javascript
import UserProfile from "./UserProfile";
import LoginPage from "./LoginPage.js";
import { useEffect, useState } from "react";

function Layout() {
  const [isUserAuthenticated, setIsUserAuthenticated] = useState(false);
  const [isFetching, setIsFetching] = useState(true);
  const [userDetails, setUserDetails] = useState({
    firstName: "",
    lastName: "",
    mailid: "",
    timeZone: "",
    createdTime: "",
  });

  useEffect(() => {
    window.catalyst.auth
      .isUserAuthenticated()
      .then((result) => {
        let userDetails = {
          firstName: result.content.first_name,
          lastName: result.content.last_name,
          mailid: result.content.email_id,
          timeZone: result.content.time_zone,
          createdTime: result.content.created_time,
        };
        setUserDetails(userDetails);
        setIsUserAuthenticated(true);
      })
      .catch((err) => {})
      .finally(() => {
        setIsFetching(false);
      });
  }, []);
  return (
    <>
      {isFetching ? (
        <p>Loading ....</p>
      ) : isUserAuthenticated ? (
        <UserProfile userDetails={userDetails} />
      ) : (
        <LoginPage />
      )}
    </>
  );
}

export default Layout;

```

**LoginPage.js**

```javascript
import { useEffect } from "react";

function Login() {
  useEffect(() => {
    window.location.href = window.origin + "/__catalyst/auth/login";
  }, []);
  return null;
}

export default Login;

```

**UserProfile.css**

```css
.card {
  margin: auto;
  text-align: center;
  font-family: arial;
  text-align: center;
  font-weight: bold;
}

.title {
  font-size: 23px;
  color: black;
}
#userimg {
  height: 20%;
  width: 15%;
}

div.login {
  padding-top: 10px;
  height: 260px;
  width: 500px;
  margin: 0 auto;
}

div.signup {
  display: none;
}

div.forgotpwd {
  display: none;
}

/* Full-width input fields */
input[type="text"] {
  width: 90%;
  padding: 15px;
  margin: 15px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
  border-radius: 8px;
}

/* Add a background color when the inputs get focus */
input[type="text"]:focus,
input[type="password"]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for all buttons */

/* Float cancel and signup buttons and add an equal width */
.seperatebtn {
  width: 10%;
  padding: 8px;
  border-radius: 8px;
}

.signupbtn {
  width: 10%;
  padding: 8px;
  border-radius: 8px;
}

.signupfnbtn {
  width: 20%;
  padding: 8px;
  border-radius: 8px;
}

.pwdfnbtn {
  width: 40%;
  padding: 8px;
  border-radius: 8px;
}

/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: #474e5d;
}

/* Modal Content/Box */
.modal-content {
  background-color: #c0c0c0;
  margin: 5% auto 15% auto;
  /* 5% from the top, 15% from the bottom and centered */
  width: 25%;
  /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 35px;
  top: 15px;
  font-size: 40px;
  font-weight: bold;
  color: #f1f1f1;
}

.close:hover,
.close:focus {
  color: #f44336;
  cursor: pointer;
}

/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

p.homepage {
  font-size: 23px;
}

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 100px) {
  .signupbtn {
    width: 100%;
  }
}

```

**UserProfile.js**

```javascript
import Button from "./Button";
import "./UserProfile.css";
function UserProfile({ userDetails }) {
  return (
    <div className="card">
      <br> </br>
      <h1 className="title">User Profile Information</h1>
      <img
        alt="usericon"
        id="userimg"
        width="200px"
        height="450px"
        src="https://cdn2.iconfinder.com/data/icons/user-management/512/profile_settings-512.png"
      />
      <p className="title">First Name : {userDetails.firstName}</p>
      <p className="title">Last Name: {userDetails.lastName}</p>
      <p className="title">Email Address: {userDetails.mailid}</p>
      <p className="title">Time Zone: {userDetails.timeZone}</p>
      <p className="title">Joined On: {userDetails.createdTime}</p>
      <Button title="Logout"> </Button>
    </div>
  );
}
export default UserProfile;

```

**client-package.json**

```json

    {
        "name": "zylkertechnologies",
        "version": "0.0.1",
        "homepage": "/__catalyst/auth/login",
        "login_redirect": "index.html"
    }
```

> **Nota:** La URL de la página de inicio se puede copiar desde la `Access URL` generada por Catalyst en la sección [Authentication Types](https://docs.catalyst.zoho.com/es/cloud-scale/help/authentication/authentication-types/) de la consola.

El directorio del cliente ahora está configurado.

Repasemos el funcionamiento de la función y el código del cliente:

* El usuario final primero encontrará la *página de inicio de sesión* que configuraste y estilizaste en la consola.
* Para crear una cuenta, hará clic en la opción **Sign Up** y será dirigido a la página de *Sign Up*.

> **Nota:** Los usuarios finales pueden registrarse en tu aplicación usando sus [Social Logins](https://docs.catalyst.zoho.com/es/cloud-scale/help/authentication/social-logins/introduction/) o usar el método convencional de registro en la aplicación usando su correo electrónico.

* Una vez que se ingresen los datos y hagan clic en **Sign Up**, o si intentan registrarse usando un Social Login de su preferencia, sus detalles se proporcionarán como entrada JSON a la función de [Custom User Validation](https://docs.catalyst.zoho.com/es/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/) (`authorization_portal_function/index.js`).

* La función solo autenticará a los usuarios si se cumple la condición que has codificado. Para este tutorial, los usuarios solo serán autenticados si se registraron en la aplicación usando una dirección de correo electrónico registrada de Zylker.

* Tras una autenticación exitosa, se enviará un correo de [Email Verification](https://docs.catalyst.zoho.com/es/cloud-scale/help/authentication/email-templates/introduction/) a la cuenta que usaron para registrarse en la aplicación.

> **Nota:** Dado que estamos usando [Hosted Login](https://docs.catalyst.zoho.com/es/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/introduction/), un tipo de autenticación nativa de Catalyst, no se requiere lógica adicional para activar los correos electrónicos apropiados. Catalyst lo gestionará automáticamente.

* Una vez que el usuario verifique su dirección de correo electrónico haciendo clic en el enlace proporcionado en el correo, quedará registrado en la aplicación. Sus detalles se pueden ver en la sección [User Management](https://docs.catalyst.zoho.com/es/cloud-scale/help/authentication/user-management/introduction/) del componente *Authentication*.

* El usuario final ahora puede iniciar sesión en la aplicación usando sus credenciales autenticadas.

* El usuario final también puede restablecer su contraseña haciendo clic en la opción **Forgot Password**. En este caso, se enviará el correo de *Password Reset* a su correo electrónico registrado. Siguiendo los pasos mencionados en el correo, puede restablecer fácilmente sus credenciales.

**Aplicación web Angular**

Configuremos el componente del cliente.

El [directorio del cliente](https://docs.catalyst.zoho.com/es/cli/v1/project-directory-structure/client-directory/) de la aplicación web Angular contiene: 

* El directorio raíz del cliente contiene un archivo `client-package.json`, que es un archivo de configuración que define el nombre, versión, página de inicio predeterminada y página de redirección del componente del cliente. Modificaremos este archivo después de haber codificado el componente del cliente.
* [Archivos nativos de Angular](https://angular.io/docs) como `angular.json`, `tsconfig.app.json`, `tsconfig.json` y `tsconfig.spec.json`.
* El directorio raíz del cliente también contiene el archivo de dependencias `package.json` y un archivo `.gitignore`.
* La carpeta `src` contiene los siguientes archivos y directorios según la estructura de proyecto predeterminada de la aplicación Angular:
  - Archivos nativos de Angular como `favicon.ico`, `main.ts`, `polyfills.ts` y `test.ts` junto con los directorios `assets` y environment.
  - `index.html`: El punto de entrada predeterminado de la aplicación.
  - `style.css`: Contendrá cualquier elemento de estilo requerido por la aplicación general.
* Los archivos presentes en el directorio `src/app/` son:
  - Archivos nativos de Angular como `app.component.css` y `app.component.spec.ts`.
  - `app.component.html`: Contiene el componente HTML que renderiza el enrutamiento que ocurre en la aplicación.
  - `app.component.ts`: Contiene la interfaz global de la aplicación donde se declara una variable de Catalyst para usar los métodos del SDK web de Catalyst.
  - `app.module.ts`: Contiene la lógica de enrutamiento involucrada en la aplicación

Codificaremos en los archivos `index.html`, `app.component.html`, `app.component.ts` y `app.module.ts`.

#### Crear un componente Layout

Necesitas crear un componente layout en la ruta del directorio `src/app/`. Este componente contendrá los elementos de estilo, la lógica del cliente y la lógica de redirección para proporcionar respuestas apropiadas a los usuarios autenticados y no autenticados.

Ejecuta el siguiente comando en el directorio `src/app/` usando la CLI de Catalyst:

```sh
ng generate component layout
```

![catalyst_authentication_client_layout_generate_angular](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_client_layout_generate_angular.webp)

Esto creará una carpeta llamada `layout` en el directorio `src/app/`. 

Esta carpeta `layout` contendrá:
* Un archivo nativo de Angular llamado `layout.component.pec.ts`.
* `layout.component.html`: Contendrá el componente HTML requerido durante la validación de usuario.
* `layout.component.css`: Contendrá los elementos de estilo requeridos.
* `layout.component.ts`: Contendrá la lógica de enrutamiento y redirección.

Codificaremos en los archivos `layout.component.html`, `layout.component.css` y `layout.component.ts`.

#### Crear un componente Login

Necesitas crear un componente login en la ruta del directorio `src/app/`. Este componente contendrá la lógica de redirección para proporcionar respuestas apropiadas a los usuarios autenticados y no autenticados.

Ejecuta el siguiente comando en el directorio `src/app/` usando la CLI de Catalyst:

```sh
ng generate component login
```

![catalyst_authentication_client_login_generate_angular](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_client_login_generate_angular.webp)

Esto creará una carpeta llamada `login` en el directorio `src/app/`. 

Esta carpeta `login` contendrá:
* Un archivo nativo de Angular llamado `login.component.pec.ts`.
* `login.component.html`: Contendrá el componente HTML requerido durante la validación de usuario.
* `login.component.css`: Contendrá los elementos de estilo requeridos.
* `login.component.ts`: Contendrá la lógica de enrutamiento y redirección.

Codificaremos en los archivos `login.component.css` y `login.component.ts`.

El directorio del cliente debería verse ahora como el que se muestra en la siguiente imagen.
![catalyst_authentication_hosted_node_client_angular_type_last_directory](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_node_client_angular_type_last_directory.webp)

Ahora puedes comenzar a codificar tu cliente.

> **Nota:** Revisa el código proporcionado en esta sección para asegurarte de que lo comprendes completamente.

Copia el código a continuación y pégalo en el archivo `index.html` presente en el directorio `src/`.

**index.html**

```xml

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Zylker Technologies</title>
    <base href="/app/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://static.zohocdn.com/catalyst/sdk/js/4.6.2/catalystWebSDK.js"> </script>
    <script src="/__catalyst/sdk/init.js"> </script>
  </head>
  <body>
    <app-root> </app-root>
  </body>
</html>

```

Pega el siguiente código en los archivos `app.component.html`, `app.component.ts` y `app.module.ts` presentes en el directorio `src/app/`.

**app.component.html**

```xml

<router-outlet> </router-outlet>

```

**app.component.ts**

```javascript

import { Component } from '@angular/core';

declare global {
  interface Window {
    catalyst: any;     // Esta es una variable de Catalyst que se requiere para acceder a los métodos del SDK web de Catalyst.
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

}

```

> **Nota:** La variable `any` es una variable de Catalyst que hemos declarado globalmente. Esta variable es necesaria para acceder a los [métodos del SDK web de Catalyst](https://docs.catalyst.zoho.com/es/sdk/web/v4/cloud-scale/authentication/get-auth-instance/).

**app.module.ts**

```javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { LayoutComponent } from './layout/layout.component';
import { LoginComponent } from './login/login.component';

const approutes: Routes = [
  { path: '', component: LayoutComponent },
  { path: 'login', component: LoginComponent },
  { path: '**', redirectTo: '' },
];

@NgModule({
  declarations: [AppComponent, LayoutComponent, LoginComponent],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    RouterModule.forRoot(approutes, { useHash: true }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

```

Copia el siguiente código y pégalo en los archivos `layout.component.html`, `layout.component.css` y `layout.component.ts` presentes en el directorio `src/app/layout`.

**layout.component.html**

```xml

<div class="card" *ngIf="isAuthenticated">
  <div class="titleDiv">
    <h1 class="title">User Profile Information</h1>
  </div>
  <div class="imgDiv">
    <img
      id="userimg"
      width="200px"
      height="450px"
      src="https://cdn2.iconfinder.com/data/icons/user-management/512/profile_settings-512.png"
    />
  </div>
  <div class="textDiv">
    <p class="title" id="fname">First Name: {{ firstName }}</p>
    <p class="title" id="lname">Last Name: {{ lastName }}</p>
    <p class="title" id="mailid">Email ID: {{ mailID }}</p>
    <p class="title" id="tzone">Time Zone: {{ timezone }}</p>
    <p class="title" id="ctime">CreatedTime: {{ createdTime }}</p>
  </div>
  <div className="logoutDiv">
    <button (click)="logout()" id="logoutBtn">Logout</button>
  </div>
</div>

<div *ngIf="isFetching" class="loading-div">
  <p class="loading">Loading...</p>
</div>

```

**layout.component.css**

```css

.card {
  margin: auto;
  text-align: center;
  font-family: arial;
  text-align: center;
  font-weight: bold;
}
.title {
  font-size: 23px;
  color: black;
  margin-top: 30px;
  margin-bottom: 30px;
  font-weight: bold;
}
#userimg {
  height: 20%;
  width: 15%;
}

#logoutBtn {
  background-color: rgb(2, 136, 2);
  color: white;
  border: none;
  border-radius: 8px;
  width: 100px;
  height: 40px;
  margin-bottom: 30px;
  cursor: pointer;
}

#logoutBtn:hover {
  background-color: rgb(2, 165, 2);
  color: white;
  border: none;
  border-radius: 8px;
  width: 100px;
  height: 40px;
  margin-bottom: 30px;
  cursor: pointer;
}

body {
  width: 100%;
}

.loading-div {
  margin-left: 45%;
}

.loading {
  font-weight: bolder;
  font-size: large;
}

#logoutBtn:active {
  background-color: rgb(2, 172, 2);
  color: white;
  border: none;
  border-radius: 8px;
  width: 100px;
  height: 40px;
  margin-bottom: 30px;
  cursor: pointer;
}

```

**layout.component.ts**

```javascript

import { Component, OnInit } from '@angular/core'; // decorador que indica que esto es un componente
import { Router } from '@angular/router';

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.css'],
})
export class LayoutComponent implements OnInit {
  constructor(private router: Router) {}

  firstName: any;
  lastName: any;
  mailID: any;
  timezone: any;
  createdTime: any;
  isAuthenticated: boolean = false;
  isFetching: boolean = true;

  ngOnInit(): void {
    window.catalyst.auth
      .isUserAuthenticated()
      .then((result: any) => {
        console.log(result);
        console.log(result.content.email_id);
        this.isAuthenticated = true;
        this.mailID = result.content.email_id;
        this.firstName = result.content.first_name;
        this.lastName = result.content.last_name;
        this.timezone = result.content.time_zone;
        this.createdTime = result.content.created_time;
      })

      .catch((err: any) => {
        console.log(err);
      })
      .finally(() => {
        console.log('finally');
        this.isFetching = false;

        this.isAuthenticated
          ? this.router.navigate([''])
          : this.router.navigate(['login']);
      });
  }

  logout() {
    const redirectURL = '/__catalyst/auth/login';
    console.log(redirectURL);

    var auth = window.catalyst.auth;
    auth.signOut(redirectURL);
  }
}

```

Copia el siguiente código y pégalo en los archivos `login.component.css` y `login.component.ts` presentes en el directorio `src/app/login`. 

**layout.component.css**

```css

h1 {
 color: red;
}

```

**login.component.ts**

```javascript

import { Component, OnInit } from '@angular/core'; // decorador que indica que esto es un componente

@Component({
 selector: 'app-login',
 templateUrl: './login.component.html',
 styleUrls: ['./login.component.css'],
})
export class LoginComponent {
 ngOnInit(): void {
 window.location.href = window.origin + '/__catalyst/auth/login'; // Gestionará las redirecciones de inicio de sesión 
 }
}

```

Ahora modificaremos el archivo `client-package.json` presente en el directorio raíz del cliente.

**client-package.json**

```json

    {
        "name": "zylkertechnologies",
        "version": "0.0.1",
        "homepage": "/__catalyst/auth/login",
        "login_redirect": "index.html"
    }
```

> **Nota:** La `URL de la página de inicio` se puede copiar desde la [`Access URL`](https://docs.catalyst.zoho.com/es/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/configure-hosted-authentication/) generada por Catalyst en la sección [Authentication Types](https://docs.catalyst.zoho.com/es/cloud-scale/help/authentication/authentication-types/) de la consola.

El directorio del cliente ahora está configurado.

Repasemos el funcionamiento de la función y el código del cliente.

* El usuario final primero encontrará la página de inicio de sesión que configuraste y estilizaste en la consola.

* Para crear una cuenta, hará clic en la opción Sign Up y será dirigido a la página de Sign Up.

> **Nota:** Los usuarios finales pueden registrarse en tu aplicación usando los *Social Logins* o usar el método convencional de registro en la aplicación usando su dirección de correo electrónico.

* Después de ingresar la información y hacer clic en **Sign Up**, o si intentan registrarse usando un *Social Login* de su preferencia, sus detalles se completarán y proporcionarán como entrada JSON a la función de Custom User Validation: `authorization_portal_function/index.js`. 

* La función solo autenticará a los usuarios que se hayan registrado en la aplicación usando una dirección de correo electrónico de Zylker.

* Tras una autenticación exitosa, se enviará un correo de *Email Verification* a la cuenta que usaron para registrarse en la aplicación.

> **Nota:** Dado que estamos usando **Hosted Login**, no se requiere lógica adicional para activar los correos electrónicos apropiados. Catalyst lo gestionará automáticamente.

* Después de que el usuario verifique su dirección de correo electrónico haciendo clic en el enlace proporcionado en el correo, quedará registrado en la aplicación. Sus detalles se pueden ver en la sección *User Management* del componente Authentication.

* El usuario final ahora puede iniciar sesión en la aplicación usando sus credenciales autenticadas.

* El usuario final también puede restablecer su contraseña haciendo clic en la opción **Forgot Password**.

* En este caso, se enviará el correo de *Password Reset* a su correo electrónico registrado. Siguiendo los pasos mencionados en el correo, puede restablecer fácilmente sus credenciales.