> For the complete documentation index, see [llms.txt](https://medellin-js.gitbook.io/workshop-fullstack-js-developer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://medellin-js.gitbook.io/workshop-fullstack-js-developer/frontend/reactjs/authenticacion.md).

# Authenticación 🔑

Hasta este punto solo hemos estado en comunicación con nuestra API por medio de **GET**, en esta sección vamos a utilizar el metodo **POST** para crear nuevos usuarios.

### Componente de Registro

Lo primero que vamos hacer es crear un nuevo componente llamado `Register.jsx` en nuestra carpeta `components`

{% code title="src/components/Register.jsx" %}

```jsx
import React from 'react';

const Register = () => (
  <form className="user">
    <div className="form-group row">
      <div className="col-sm-6 mb-3 mb-sm-0">
        <input type="text" className="form-control form-control-user" id="exampleFirstName" placeholder="First Name" />
      </div>
      <div className="col-sm-6">
        <input type="text" className="form-control form-control-user" id="exampleLastName" placeholder="Last Name" />
      </div>
    </div>
    <div className="form-group">
      <input type="email" className="form-control form-control-user" id="exampleInputEmail" placeholder="Email Address" />
    </div>
    <div className="form-group row">
      <div className="col-sm-6 mb-3 mb-sm-0">
        <input type="password" className="form-control form-control-user" id="exampleInputPassword" placeholder="Password" />
      </div>
      <div className="col-sm-6">
        <input type="password" className="form-control form-control-user" id="exampleRepeatPassword" placeholder="Repeat Password" />
      </div>
    </div>
    <button type="submit" className="btn btn-primary btn-user btn-block">
      Register Account
    </button>
  </form>
);

export default Register;
```

{% endcode %}

### Actualizar la pagina de Registro

Luego de esto, vamos actualizar la pagina de registro para usar este componente que acabamos de crear y remover todo el html del formulario que allí tenemos.

{% code title="src/pages/Register.jsx" %}

```jsx
import React from 'react';
import { Link } from 'react-router-dom';

// Agregamos el componente que acabamos de crear
import FormRegister from '../components/Register';

const Register = () => (
  <div className="container">
    <div className="card o-hidden border-0 shadow-lg my-5">
      <div className="card-body p-0">
        <div className="row">
          <div className="col-lg-5 d-none d-lg-block bg-register-image" />
          <div className="col-lg-7">
            <div className="p-5">
              <div className="text-center">
                <h1 className="h4 text-gray-900 mb-4">Create an Account!</h1>
              </div>
              {/* Remplazamos todo el html del formulario por el componente */}
              <FormRegister />
              <hr />
              <div className="text-center">
                <Link className="small" to="/login">Already have an account? Login!</Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

export default Register;
```

{% endcode %}

**Nota**: *Comprobar que tu pagina se ve igual con este cambio, ve a tu navegador a la url* [*http://localhost:3000/register*](http://localhost:3000/register)

### Obtener los datos del formulario

Ahora vamos a conectar los datos de nuestro formulario para enviarlos a la API y crear un nuevo usuario en el sistema.

La primero será capturar los datos de nuestros `input`, para eso vamos a utilizar el hook useState:

{% code title="src/components/Register.jsx" %}

```jsx
// Agregar useState
import React, { useState } from 'react';

const Register = () => {
  // Inicializar nuestro estado interno
  const [form, setForm] = useState({});
  
  return (
    <form className="user">
      {/* ... Codigo del formulario */}
    </form>
  );
}

export default Register;
```

{% endcode %}

Continuaremos ahora con la función que se encargará de actualizar nuestro estado interno, cada que el input tenga un cambio.

{% code title="src/components/Register.jsx" %}

```jsx
import React, { useState } from 'react';

const Register = ({ handleSumbit }) => {
  const [form, setForm] = useState({});
  
  
  // Funcion para actualizar cada uno de los input 
  const handleInputChange = (evt) => {
    const { target: { name, value } } = evt;

    setForm({ [name]: value, ...form });
  }

  return (
    <form className="user" onSubmit={sendForm}>
      <div className="form-group row">
        <div className="col-sm-6 mb-3 mb-sm-0">
          {/* Vamos agregar la funcion handleInputChange con callback del onChange */}
          <input
            type="text"
            className="form-control form-control-user"
            id="firstName"
            placeholder="First Name"
            name="name"
            onChange={handleInputChange}
            required
          />
        </div>
        <div className="col-sm-6">
          {/* Vamos agregar la funcion handleInputChange con callback del onChange */}
          <input
            type="text"
            className="form-control form-control-user"
            id="lastName"
            placeholder="Last Name"
            name="lastName"
            onChange={handleInputChange}
            required
          />
        </div>
      </div>
      <div className="form-group">
        {/* Vamos agregar la funcion handleInputChange con callback del onChange */}
        <input
          type="email"
          className="form-control form-control-user"
          id="email"
          placeholder="Email Address"
          name="email"
          onChange={handleInputChange}
          required
        />
      </div>
      <div className="form-group row">
        <div className="col-sm-6 mb-3 mb-sm-0">
          {/* Vamos agregar la funcion handleInputChange con callback del onChange */}
          <input
            type="password"
            className="form-control form-control-user"
            id="password"
            placeholder="Password"
            name="password"
            onChange={handleInputChange}
            required
          />
        </div>
        <div className="col-sm-6">
          {/* Vamos agregar la funcion handleInputChange con callback del onChange */}
          <input
            type="password"
            className="form-control form-control-user"
            id="confirmPassword"
            placeholder="Repeat Password"
            name="confirmPassword"
            onChange={handleInputChange}
            required
          />
        </div>
      </div>
      <button type="submit" className="btn btn-primary btn-user btn-block">
        Register Account
      </button>
    </form>
  );
}

export default Register;

```

{% endcode %}

Ahora solo nos falta tener la función que se ejecutara cuando le demos clic en el boton tipo submit, vamos a crear la siguiente función, justo debajo **handleInputChange.**&#x20;

{% code title="src/components/Register.jsx" %}

```javascript
const sendForm = (evt) => {
  evt.preventDefault();
  // Vamos a ejecutar un callback que nos llegará como prop.
  console.log(form);
}
```

{% endcode %}

Finalmente todo el componente `Register.jsx` debe verse de la siguiente forma:

{% code title="src/components/Register.jsx" %}

```jsx
import React, { useState } from 'react';

const Register = ({ handleSumbit }) => {
  const [form, setForm] = useState({});

  const handleInputChange = (evt) => {
    const { target: { name, value } } = evt;

    setForm({ [name]: value, ...form });
  }

  const sendForm = (evt) => {
    evt.preventDefault();
    handleSumbit(form);
  }

  return (
    <form className="user" onSubmit={sendForm}>
      <div className="form-group row">
        <div className="col-sm-6 mb-3 mb-sm-0">
          {/*  */}
          <input
            type="text"
            className="form-control form-control-user"
            id="firstName"
            placeholder="First Name"
            name="name"
            onChange={handleInputChange}
            required
          />
        </div>
        <div className="col-sm-6">
          <input
            type="text"
            className="form-control form-control-user"
            id="lastName"
            placeholder="Last Name"
            name="lastName"
            onChange={handleInputChange}
            required
          />
        </div>
      </div>
      <div className="form-group">
        <input
          type="email"
          className="form-control form-control-user"
          id="email"
          placeholder="Email Address"
          name="email"
          onChange={handleInputChange}
          required
        />
      </div>
      <div className="form-group row">
        <div className="col-sm-6 mb-3 mb-sm-0">
          <input
            type="password"
            className="form-control form-control-user"
            id="password"
            placeholder="Password"
            name="password"
            onChange={handleInputChange}
            required
          />
        </div>
        <div className="col-sm-6">
          <input
            type="password"
            className="form-control form-control-user"
            id="confirmPassword"
            placeholder="Repeat Password"
            name="confirmPassword"
            onChange={handleInputChange}
            required
          />
        </div>
      </div>
      <button type="submit" className="btn btn-primary btn-user btn-block">
        Register Account
      </button>
    </form>
  );
}

export default Register;

```

{% endcode %}

### Registrar Usuario

En nuestra pagina de registro vamos ahora agregar el código necesario para llamar a nuestro endpoint `api/users` y crear un nuevo usuario.

{% code title="src/pages/Register.jsx" %}

```javascript
const API = 'https://shopping-cart-api.khriztianmoreno.now.sh/api/users';

const createUser = async(form) => {
  const payload = {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(form),
  };

  try {
    const result = await fetch(API, payload);
    const user = await result.json();
    if (user && user.token) {
      localStorage.setItem('userEco', JSON.stringify(user))
    }
  } catch (error) {
    console.error('Error :(', error);
  }
}
```

{% endcode %}

Finalmente vamos a pasar esta función como prop a nuestro componente FormRegister. Finalmente veremos la pagina de registro con el siguiente código:

{% code title="src/pages/Register.jsx" %}

```jsx
import React from 'react';
import { Link, withRouter } from 'react-router-dom';

import FormRegister from '../components/Register';

const API = 'https://shopping-cart-api.khriztianmoreno.now.sh/api/users';

const createUser = async(form) => {
  const payload = {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(form),
  };

  try {
    const result = await fetch(API, payload);
    const user = await result.json();
    if (user && user.token) {
      localStorage.setItem('userEco', JSON.stringify(user))
    }
  } catch (error) {
    console.error('Error :(', error);
  }
}

const Register = () => (
  <div className="container">
    <div className="card o-hidden border-0 shadow-lg my-5">
      <div className="card-body p-0">
        <div className="row">
          <div className="col-lg-5 d-none d-lg-block bg-register-image" />
          <div className="col-lg-7">
            <div className="p-5">
              <div className="text-center">
                <h1 className="h4 text-gray-900 mb-4">Create an Account!</h1>
              </div>
              <FormRegister handleSumbit={createUser} />
              <hr />
              <div className="text-center">
                <Link className="small" to="/login">Already have an account? Login!</Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

export default withRouter(Register);

```

{% endcode %}

En este punto si vamos a nuestro navegador y registrar un usuario por medio de la url <http://localhost:3000/register> deberas ver por medio de las developer tools de tu navegador el token del usuario almacenado en el localstorage.&#x20;

![Usario registrado](/files/-Lohu-DZW1mpgz-LKDeh)

{% hint style="info" %}
**Código de referencia**: En  este enlace puedes ver el commit correspondiente a este punto [Github](https://github.com/mafesernaarboleda/workshop-medjs-fullstack-front/commit/3e2020c3b0c928bc625aea975bcbc3eb78379ab7).
{% endhint %}

### Retos

1. Actualizar el codigo de la pagina de registro para redireccionar al usuario a la pagina principal luego de ser registrado en el sistema.
2. Crear la funcionalidad para hacer login en el sistema.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://medellin-js.gitbook.io/workshop-fullstack-js-developer/frontend/reactjs/authenticacion.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.