---
title: "Configurar el client"
url: https://docs.catalyst.zoho.com/es/tutorials/hosted-login-app/java/configure-client/
description: "Crea una aplicación Basic o React con Catalyst Hosted Authentication que ofrece registro, inicio de sesión, restablecimiento de contraseña e inicio federado."
last_updated: 2026-11-04T10:10:44Z
service: All Services
type: tutorial
related_links:
  - name: "Client Directory Structure"
    url: /es/cli/v1/project-directory-structure/client-directory
---

# Configurar el client

Configuremos el componente client.

**Aplicación web básica**

El [directorio client](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 `index.html` y `main.js`. También realizaremos un cambio en el `client-package.json` para asegurar que la página de inicio de la aplicación sea la página autenticada.

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

> **Nota:** Por favor, 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 archivos respectivos 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 que solo los usuarios autenticados accedan a una página específica
    catalyst.auth.isUserAuthenticated().then(result => {

        //Si el usuario ha iniciado sesión, estos contenidos de la página se mostrarán 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, esto se mostrará 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 del `Access URL` generado 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 client ahora está configurado. 

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

* El usuario final primero verá 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 *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 dirección de correo electrónico.

* Una vez que se ingresa la información y hacen 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/CustomUserValidationFunc.java`).

* 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 en Zylker.

* Tras una autenticación exitosa, se enviará un correo electrónico 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 correspondientes. Catalyst lo gestionará automáticamente.

* Una vez que el usuario verifica 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 electrónico de *Password Reset* a su correo registrado. Siguiendo los pasos mencionados en el correo, pueden restablecer fácilmente sus credenciales.

**Aplicación web React**

Configuremos el componente client.

El [directorio client](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 client 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 client.
- El directorio client `zylkertechnologies` contiene dos subcarpetas, según la estructura de proyecto predeterminada de una aplicación React:
    - La carpeta `public` se usa generalmente para contener archivos que pueden ser accedidos abiertamente por los navegadores mediante URLs públicas, como archivos de íconos 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 client 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 `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 botón *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 el `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

Es necesario instalar el paquete `react-router-dom` en el directorio client `AuthorizationPortal/zylkertechnologies` usando el comando de CLI indicado 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 client después de haber creado los archivos necesarios y eliminado los archivos innecesarios.
![catalyst_hosted_login_java_react_mod_directory](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_hosted_login_java_react_mod_directory.webp)

> **Nota:** Por favor, 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 client (`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 client (`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 del `Access URL` generado 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 client ahora está configurado.

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

* El usuario final primero verá 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 *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 dirección de correo electrónico.

* Una vez que se ingresa la información y hacen 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/CustomUserValidationFunc.java`).

* 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 en Zylker.

* Tras una autenticación exitosa, se enviará un correo electrónico 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 correspondientes. Catalyst lo gestionará automáticamente.

* Una vez que el usuario verifica 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 electrónico de *Password Reset* a su correo registrado. Siguiendo los pasos mencionados en el correo, pueden restablecer fácilmente sus credenciales.

**Aplicación web Angular**

Configuremos el componente client.

El [directorio client](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 client 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 client. Modificaremos este archivo después de haber codificado el componente client.
* [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 client 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 en 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 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 client y la lógica de redirección para proporcionar respuestas apropiadas a 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 del usuario.
* `layout.component.css`: Contendrá los elementos de estilo necesarios.
* `layout.component.ts`: Contendrá la lógica de enrutamiento y redirección.

Codificaremos 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 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 del usuario.
* `login.component.css`: Contendrá los elementos de estilo necesarios.
* `login.component.ts`: Contendrá la lógica de enrutamiento y redirección.

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

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

Ahora puedes comenzar a codificar tu client.

> **Nota:** Por favor, 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 necesaria 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'; // Gestiona las redirecciones de inicio de sesión 
 }
}

```

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

**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 del [`Access URL`](https://docs.catalyst.zoho.com/es/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/configure-hosted-authentication/) generado 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 client ahora está configurado.

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

* El usuario final primero verá 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 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 electrónico 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 correspondientes. Catalyst lo gestionará automáticamente.

* Después de que el usuario verifica 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 electrónico de *Password Reset* a su correo registrado. Siguiendo los pasos mencionados en el correo, pueden restablecer fácilmente sus credenciales.