En este artículo, nos gustaría presentarle la forma más popular y moderna de proteger o asegurar su aplicación web React Typescript mediante el uso de Autenticación JWT. Entonces, ¿qué es esta seguridad o protección y por qué la necesitamos?
Bueno, discutiremos todas estas cosas en nuestro blog. Vamos a empezar:
¿Qué es la Seguridad y Protección en el Software?
Para proteger o guardar los datos y la información del usuario de una biblioteca de terceros desconocida, Ataques XSS, web scraping o un hacker profesional, puede usar ciertos protocolos de seguridad como HTTPS Más de HTTP o realizar la autenticación en su aplicación o tal vez puede usar cualquier otro método de encriptación de seguridad o métodos de suma de verificación para que los datos y la integridad de su aplicación permanezcan seguros.
¿Por qué necesitamos seguridad?
Bueno, para proteger sus aplicaciones de ciertos ataques y piratas informáticos, como hemos mencionado anteriormente, algunas razones por las que lo necesitamos. Déjame explicarte lo mismo con un ejemplo:
Ejemplo 1:
Si planea ir a una estación de montaña para hacer un picnic con toda la familia, ¿por qué mantiene las puertas y ventanas cerradas con llave cuando sale de su casa?
Porque alguien puede entrar a tu casa si tus puertas y ventanas no están cerradas, ¿verdad? Los ladrones pueden tomar objetos preciosos; cualquier animal puede rehabilitarse como una serpiente. Y no puedes hacer nada porque lo que se fue se fue, porque no tenías la seguridad. ¿Derecha? Lock protege su casa de la misma manera que lo hace la seguridad en sus aplicaciones de software.
Casi todas las empresas hoy en día usan seguridad o autenticación como JWT (Token web JSON). Si no se implementa JWT, cualquier pirata informático puede piratear una gran cantidad de cuentas de usuario.
¿Qué es el token web JWT o JSON?
Token web JSON es un estándar moderno de nivel de Internet para generar los datos con un firma voluntaria y cifrado voluntario cuya carga útil lleva JSON que declara una cierta cantidad de reclamos. Los tokens se han firmado utilizando un secreto privado o una clave pública/privada.
También, lea: Interfaces en Typescript: ¿Qué son y cómo usarlas?
Cómo implementar JWT en la aplicación React TypeScript (proceso paso a paso)
Pasos 1: Créar un Aplicación React TypeScript en su sistema siguiendo el siguiente comando:
npx create-react-app <Any-name-you want> --template typescriptPasos 2:
Ir a tu Reaccionar aplicación mecanografiada Directorio e instalar un bootstrap, axios, reaccionar-forma-gancho, reaccionar-tostar & reaccionar-router-dom paquete con el siguiente comando:
npm install axios bootstrap [email protected] react-hook-form react-toastifyPasos 3:
En su Aplicación.tsx archivo, borre todo el código y pastas la siguiente. Básicamente, lo que estamos tratando de hacer aquí es importar todo el componente que crearemos en el futuro y agregar reaccionar-router-dom funcionalidad para el enrutamiento a las páginas con enlaces diferentes-diferentes:
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js";
import SignUp from "./Components/SignUp";
import Login from "./Components/Login";
import PrivateRoute from "./Auth/PrivateRoute";
import Home from "./Components/Home";
import {BrowserRouter, Route, Switch} from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Switch>
<PrivateRoute exact path="/login" component={Login}/>
<Route exact path="/register" component={SignUp} />
</Switch>
</BrowserRouter>
);
}
export default App;
Pasos 4:
Ahora crearemos una ruta privada para nuestra aplicación. Cree una carpeta llamada “Auth” y en esta carpeta cree un nuevo archivo conocido como RutaPrivada.tsx copie todo el código y pegue lo siguiente, básicamente lo que estamos tratando de hacer aquí es sacar nuestro token JWT del Almacenamiento local.
Y comprobar si no tenemos un token JWT en nuestro Almacenamiento local luego iremos a la ruta de inicio de sesión, de lo contrario, si tiene un token, permanecerá en la página de inicio.
import React from "react";
import { Redirect, Route } from "react-router-dom";
const PrivateRoute = (props) => {
const token = localStorage.getItem("auth");
return <>{token ? <Route {...props} /> : <Redirect to="/login" />}</>;
};
export default PrivateRoute;
Pasos 5:
Ahora crearemos una interfaz de usuario para esto. Primero ve a la src carpeta, luego dentro de la src carpeta crea una nueva carpeta llamada "Componentes.
Y dentro de la carpeta de componentes, haga 3 archivos como:
- Inicio de sesión.tsx
- Registrarse.tsx
- Inicio.tsx
- casa.css
Antes de continuar, asegúrese de tener su propio API de nodo de autenticación JWT que proporciona token JWT. Porque estamos usando el creado en nuestra máquina local. Por favor cambie el http://localhost:4000 URL en código según su Código URL de la API.
En Login.tsx
import React, { FC } from "react";
import { Link } from "react-router-dom";
import { useForm } from "react-hook-form";
import axios from "axios";
import { ToastContainer, toast, Flip } from "react-toastify";
import "react-toastify/dist/ReactToastify.min.css";
import { RouteComponentProps } from "react-router";
type SomeComponentProps = RouteComponentProps;
const Login: FC<SomeComponentProps> = ({ history }): JSX.Element => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
const login = (data: any) => {
let params = {
email: data.email,
password: data.password,
};
axios
.post("http://localhost:4000/api/login", params)
.then(function (response) {
// IF EMAIL ALREADY EXISTS
if (response.data.success === false) {
toast.error(response.data.error, {
position: "top-right",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: false,
progress: 0,
toastId: "my_toast",
});
} else {
toast.success(response.data.message, {
position: "top-right",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: false,
progress: 0,
toastId: "my_toast",
});
localStorage.setItem("auth", response.data.token);
setTimeout(() => {
history.push("/");
}, 3000);
}
})
.catch(function (error) {
console.log(error);
});
};
return (
<>
<div className="container">
<div
className="row d-flex justify-content-center align-items-center"
style={{ height: "100vh" }}
>
<div className="card mb-3" style={{ maxWidth: "320px" }}>
<div className="col-md-12">
<div className="card-body">
<h3 className="card-title text-center text-secondary mt-3">
Login Form
</h3>
<form autoComplete="off" onSubmit={handleSubmit(login)}>
<div className="mb-3 mt-4">
<label className="form-label">Email</label>
<input
type="email"
className="form-control shadow-none"
id="exampleFormControlInput1"
{...register("email", { required: "Email is required!" })}
/>
{errors.email && (
<p className="text-danger" style={{ fontSize: 14 }}>
{errors.email.message}
</p>
)}
</div>
<div className="mb-3">
<label className="form-label">Password</label>
<input
type="password"
className="form-control shadow-none"
id="exampleFormControlInput2"
{...register("password", {
required: "Password is required!",
})}
/>
{errors.password && (
<p className="text-danger" style={{ fontSize: 14 }}>
{errors.password.message}
</p>
)}
</div>
<div className="text-center mt-4 ">
<button
className="btn btn-outline-primary text-center shadow-none mb-3"
type="submit"
>
Submit
</button>
<p className="card-text pb-2">
Have an Account?{" "}
<Link style={{ textDecoration: "none" }} to={"/register"}>
Sign Up
</Link>
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<ToastContainer
position="top-right"
autoClose={5000}
hideProgressBar
closeOnClick
rtl={false}
pauseOnFocusLoss={false}
draggable={false}
pauseOnHover
limit={1}
transition={Flip}
/>
</>
);
};
export default Login;
En SignUp.tsx
import React, { FC } from "react";
import { Link, RouteComponentProps } from "react-router-dom";
import { useForm } from "react-hook-form";
import axios from "axios";
import { ToastContainer, toast, Flip } from "react-toastify";
import "react-toastify/dist/ReactToastify.min.css";
type SomeComponentProps = RouteComponentProps;
const SignUp: FC<SomeComponentProps> = ({ history }) => {
const {
register,
handleSubmit,
watch,
reset,
formState: { errors },
} = useForm();
const submitData = (data: any) => {
let params = {
firstname: data.firstname,
lastname: data.lastname,
email: data.email,
password: data.password,
confirmpassword: data.cpassword,
};
console.log(data);
axios
.post("http://localhost:4000/api/signup", params)
.then(function (response) {
toast.success(response.data.message, {
position: "top-right",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: false,
progress: 0,
toastId: "my_toast",
});
reset();
setTimeout(() => {
history.push("/login");
}, 3000);
})
.catch(function (error) {
console.log(error);
});
};
return (
<>
<div className="container">
<div
className="row d-flex justify-content-center align-items-center"
style={{ height: "100vh" }}
>
<div className="card mb-3 mt-3 rounded" style={{ maxWidth: "500px" }}>
<div className="col-md-12">
<div className="card-body">
<h3 className="card-title text-center text-secondary mt-3 mb-3">
Sign Up Form
</h3>
<form
className="row"
autoComplete="off"
onSubmit={handleSubmit(submitData)}
>
<div className="col-md-6">
<div className="">
<label className="form-label">Firstname</label>
<input
type="text"
className="form-control form-control-sm"
id="exampleFormControlInput1"
{...register("firstname", {
required: "Firstname is required!",
})}
/>
{errors.firstname && (
<p className="text-danger" style={{ fontSize: 14 }}>
{errors.firstname.message}
</p>
)}
</div>
</div>
<div className="col-md-6">
<div className="">
<label className="form-label">Lastname</label>
<input
type="text"
className="form-control form-control-sm"
id="exampleFormControlInput2"
{...register("lastname", {
required: "Lastname is required!",
})}
/>
{errors.lastname && (
<p className="text-danger" style={{ fontSize: 14 }}>
{errors.lastname.message}
</p>
)}
</div>
</div>
<div className="">
<label className="form-label">Email</label>
<input
type="email"
className="form-control form-control-sm"
id="exampleFormControlInput3"
{...register("email", { required: "Email is required!" })}
/>
{errors.email && (
<p className="text-danger" style={{ fontSize: 14 }}>
{errors.email.message}
</p>
)}
</div>
<div className="">
<label className="form-label">Password</label>
<input
type="password"
className="form-control form-control-sm"
id="exampleFormControlInput5"
{...register("password", {
required: "Password is required!",
})}
/>
{errors.password && (
<p className="text-danger" style={{ fontSize: 14 }}>
{errors.password.message}
</p>
)}
</div>
<div>
<label className="form-label">Confirm Password</label>
<input
type="password"
className="form-control form-control-sm"
id="exampleFormControlInput6"
{...register("cpassword", {
required: "Confirm Password is required",
validate: (value) =>
value === watch("password") ||
"Passwords don't match.",
})}
/>
{errors.cpassword && (
<p className="text-danger" style={{ fontSize: 14 }}>
{errors.cpassword.message}
</p>
)}
</div>
<div className="text-center mt-4 ">
<button
className="btn btn-outline-primary text-center shadow-none mb-3"
type="submit"
>
Submit
</button>
<p className="card-text">
Already have an account?{" "}
<Link style={{ textDecoration: "none" }} to={"/login"}>
Log In
</Link>
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<ToastContainer
position="top-right"
autoClose={5000}
hideProgressBar
closeOnClick
rtl={false}
pauseOnFocusLoss={false}
draggable={false}
pauseOnHover
limit={1}
transition={Flip}
/>
</>
);
};
export default SignUp;
En Inicio.tsx
import React, { FC } from "react";
import { RouteComponentProps } from "react-router-dom";
import "./home.css";
type SomeComponentProps = RouteComponentProps;
const Home: FC<SomeComponentProps> = ({ history }) => {
const logout = () => {
localStorage.clear();
history.push("/login");
};
return (
<>
<div
style={{
display: "flex",
justifyContent: "space-between",
paddingLeft: 50,
paddingRight: 50,
}}
>
<div>
<h3 className="m-3">Home</h3>
</div>
<div>
<button type="submit" className="buttons" onClick={logout}>
Logout
</button>
</div>
</div>
<div className="container">
<div
className="row d-flex justify-content-center align-items-center text-center"
style={{ height: "100vh" }}
>
<p className="muted display-6">Hello User👋</p>
</div>
</div>
</>
);
};
export default Home;
En casa.css
.buttons
{
color: white;
background: cornflowerblue;
padding: 10px 40px;
margin: 10px;
border: none;
border-radius: 30px;
cursor: pointer;
}
También, lea: ¿Cómo llamar a la API web con el gancho useEffect en React TypeScript?
Pasos 6:
Ahora ejecute el código con el siguiente comando:
npm startPasos 7:
Ahora verás tu salida así:
Página de registro:
Página de inicio de sesión:
Después de ingresar un detalle de inicio de sesión válido, inspeccione el navegador si hay algún token JWT o no. Si es un inicio de sesión válido, la pantalla se verá así; de lo contrario, le mostrará un mensaje de contraseña incorrecta de su API.
Ahora, si nota que se genera un token de autenticación extraño en la aplicación 'Tab audio' Bajo Almacenamiento local área de autenticación. Esto está firmado o es una clave privada que requiere la autenticación JWT de una API que ha utilizado.
En caso de que elimine este token del navegador, será redirigido nuevamente a la página de inicio de sesión ya que no hay ningún token disponible y la ruta privada desempeñará su papel aquí.
Fragmento corto de lógica:
- Acceder: En Iniciar sesión, solo está pasando los datos json de un usuario y obteniendo un token de un API RESTful.
- Regístrese: En Registrarse, nuevamente está pasando los datos json de un usuario y guardándolo en la base de datos.
- Inicio: En Inicio, está iniciando sesión en nuestro usuario con la credencial correcta que ingresa y configura nuestro token JWT en el navegador. Almacenamiento local que proviene de la API de inicio de sesión.
- Cerrar Sesión: Al cerrar la sesión, borra el token JWT de su Almacenamiento local.
También, lea: Principales desafíos y soluciones de desarrollo web
Conclusión:
Autenticaciones JWT son ampliamente utilizados hoy en día, utilícelos solo donde sea necesario en sus proyectos. No los use si solo está utilizando el inicio de sesión de registro para su uso personal. Debido a que sus datos son locales y solo estarán disponibles para usted, por lo que no tiene sentido usarlos para uso personal. Pero sí, es un método muy poderoso, robusto y seguro para transmitir tus datos.
Disponibilidad de código:
https://github.com/Akshay80/React-TS-login-using-jwt/tree/main/src/Auth
Muchas gracias por leer este blog con tanta paciencia 😊,
Que tengas un buen día 👋.
Servicios de Desarrollo Web
¿Está buscando una empresa de desarrollo web confiable? Nuestros desarrolladores web altamente calificados nos permiten ofrecer servicios de desarrollo web orientados a resultados. Póngase en contacto con nuestro equipo para comprender cómo podemos ayudarlo a lograr sus objetivos comerciales.
