Login Y Registro con AUTH0 en REACT

En este post vamos a enseñar como utilizar AUTH0 un proveedor de autenticación a REACT

Lo primero es registrarse en AUTH0

Elegimos other y pinchamos en el checkbox para cambiar de región nuestra cuenta

Elegimos el nombre del dominio que queramos y la regio EU

Pulsamos en el botón de crear aplicación

Pinchamos en single page applications ya que es para una aplicación de React y pulsamos crear

Le decimos que es para una aplicación de REACT

Pulsamos en el enlace de para conseguir la application keys

Pinchamos en My App que es la que acabamos de crear

Vamos para abajo de la aplicación e introducimos nuestra url en local para que nos deje hacerlo

También nos quedaremos con el domain y el Client ID para más tarde

Ya vamos al cmd y creamos una aplicación REACT

E instalamos el sdk de auth0

Abrimos la aplicación y vamos aprobarlo importando Auth0Provider

Copiamos auth0 a la app y auth0 tiene varios props el domain y el clientid que hemos guardado antes de nuestra aplicación y un redirectionUri, el proveedor de auth0 nos va almacenar el estado de autenticación de los usuarios y métodos para logear y deslogear a los usuarios.

iniciamos la aplicación con npm start y vemos que no tenemos ningún error

Vamos a crear un componente llamado Login.js

Importamos useAuth0.

Creamos el método login y devolvemos un botón que devuelva la función login

Vamos a App.js y importamos el componente y lo indicamos aquí

Vamos a la aplicación y vemos que nos aparece el botón pulsamos y ya nos redirige a el login

Creamos el component logout.js y vamos a crear el botón de logout e importamos de nuevo useAuth0 y creamos el método logout y que devuelva el botón con la función logout, creamos también la propiedad returnTo para que vuelve a la página de origen al hacer click