Lanzar\u00e1 un asistente que te preguntar\u00e1 el nombre del proyecto.<\/p>\n La siguiente pantalla le preguntar\u00e1 si desea habilitar el an\u00e1lisis. Desact\u00edvelo y haga clic en el bot\u00f3n Crear proyecto<\/strong>. Tomar\u00e1 un tiempo aprovisionar su proyecto y luego obtendr\u00e1 un bot\u00f3n para Continuar<\/strong> que lo llevar\u00e1 a la descripci\u00f3n general del proyecto.<\/p>\n Ahora debe agregar una aplicaci\u00f3n de Firebase al proyecto de Firebase. \u00bfTiene sentido? Un proyecto de Firebase le permite contener varias aplicaciones de Firebase para iOS, Android, Web y Unity. Por ahora, creemos una aplicaci\u00f3n web ya que usaremos React para crear nuestro inicio de sesi\u00f3n de Firebase.<\/p>\n Se le pedir\u00e1 que asigne un nombre a esta aplicaci\u00f3n y se le dar\u00e1n las claves que deber\u00e1 usar para conectarse con Firebase. Se ver\u00e1n algo como:<\/p>\n Usaremos estas claves en nuestra aplicaci\u00f3n React<\/a> para configurar un proveedor que nos permitir\u00e1 acceder a Firebase en cualquier componente del proveedor.<\/p>\n Finalmente, vaya a Autenticaci\u00f3n<\/strong> en la barra lateral izquierda, la pesta\u00f1a M\u00e9todo de inicio de sesi\u00f3n<\/strong> y habilite la autenticaci\u00f3n de correo electr\u00f3nico\/contrase\u00f1a .<\/strong><\/p>\n \u00a1Est\u00e1s listo!<\/p>\n Firebase est\u00e1 disponible para diferentes pilas, incluidas JavaScript<\/a> y Node.js<\/a>, que es lo que vamos a usar ahora. Vamos a instalar solo dos dependencias con npm:<\/p>\n Vamos a instalarlos con<\/p>\n La estructura de la aplicaci\u00f3n React<\/a> ser\u00e1 muy simple, de la siguiente manera:<\/p>\n y estar\u00e1n relacionados de la siguiente manera:<\/p>\n \u00a1Escribamos el primer archivo para el inicio de sesi\u00f3n y el registro de Firebase! En realidad, no necesitamos escribirlo, porque esto debe agregarse al archivo donde est\u00e1 emitiendo Esto importa \u00a1Excelente! \u00a1Ahora todos los componentes a continuaci\u00f3n podr\u00e1n acceder a Firebase!<\/p>\n Escribamos ahora el Crearemos un componente para esto. Primero necesitamos importar algunos m\u00f3dulos:<\/p>\n Veremos A continuaci\u00f3n, agregaremos un gancho r\u00e1pido para administrar nuestros campos de entrada:<\/p>\n Y, por \u00faltimo, el componente completo, que desglosaremos a continuaci\u00f3n para se\u00f1alar las partes m\u00e1s interesantes, las relacionadas con el inicio de sesi\u00f3n y el registro de Firebase.<\/p>\n Primero, nos conectamos a la instancia de Firebase:<\/p>\n Como se se\u00f1al\u00f3 anteriormente, esto es posible porque previamente empaquetamos el Cuando tenga \u00e9xito, establecer\u00e1 los datos devueltos y los campos del formulario se reemplazar\u00e1n con<\/p>\n Los datos devueltos son un objeto grande con propiedades muy interesantes, por lo que vale la pena agregar El proceso para crear un usuario es similar, excepto que usamos la funci\u00f3n Para probar nuestro inicio de sesi\u00f3n de Firebase y registrarse, puede intentar iniciar sesi\u00f3n con un usuario que no existe para que pueda ver los errores. Despu\u00e9s de eso, cree un usuario y luego inicie sesi\u00f3n como usuario.<\/p>\n Demostraci\u00f3n del inicio de sesi\u00f3n y registro de Firebase. Si ahora regresa a la aplicaci\u00f3n Firebase > Autenticaci\u00f3n > Usuarios, ver\u00e1 el nuevo usuario (es posible que deba usar el bot\u00f3n Actualizar junto a Agregar usuario).<\/p>\n En resumen, los pasos esenciales para integrar Firebase en nuestra aplicaci\u00f3n React son:<\/p>\n Consulte el repositorio de GitHub en https:\/\/github.com\/eliorivero\/firebase-login-sign-up<\/a>. La \u00fanica diferencia con este es que estoy cargando las claves para configurar Firebase desde un archivo .env para evitar exponerlas p\u00fablicamente.<\/p>\n Si tiene alguna pregunta, h\u00e1gamelo saber en los comentarios a continuaci\u00f3n.<\/p>\n![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6bffde950b.png\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6bfffb1eed.png\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c001c1120.png\")
<\/a><\/p>\nvar firebaseConfig = {\n apiKey: \"1A2B3C4D5E6F7G\",\n authDomain: \"appname-a123b.firebaseapp.com\",\n databaseURL: \"https:\/\/appname-a123b.firebaseio.com\",\n projectId: \"appname-a123b\",\n storageBucket: \"appname-a123b.appspot.com\",\n messagingSenderId: \"1234567890\",\n};<\/code><\/pre>\n![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c00385c64.png\")
<\/a><\/p>\nInstalar dependencias de Firebase<\/h2>\n
\n
firebase<\/code><\/a>, que nos permitir\u00e1 acceder a cosas como la auth<\/code>biblioteca, que usaremos para realizar el inicio de sesi\u00f3n y tambi\u00e9n crear un nuevo usuario<\/li>\nreactfire<\/code><\/a>, una colecci\u00f3n de herramientas \u00fatiles para trabajar con Firebase en React. Los usaremos useFirebaseApp<\/code>para conectarnos al contexto y acceder a Firebase.<\/li>\n<\/ul>\nnpm i firebase reactfire<\/code><\/pre>\n|-- index.js\n|-- App.js\n|-- FirebaseUser\n |-- index.js<\/code><\/pre>\nindex.js --import--> .\/App.js --import--> .\/FirebaseUser<\/code><\/pre>\nConfigurar el proveedor de Firebase<\/h2>\n
ReactDOM.render()<\/code>, en nuestro caso ser\u00e1 index.js<\/code>:<\/p>\nimport { FirebaseAppProvider } from 'reactfire';\n\nconst firebaseConfig = {\n apiKey: \"1A2B3C4D5E6F7G\",\n authDomain: \"appname-a123b.firebaseapp.com\",\n databaseURL: \"https:\/\/appname-a123b.firebaseio.com\",\n projectId: \"appname-a123b\",\n storageBucket: \"appname-a123b.appspot.com\",\n messagingSenderId: \"925199572988\",\n appId: \"1:123456789:web:12a34b56c78d90e\"\n};<\/code><\/pre>\nFirebaseAppProvider<\/code>y agrega las claves de configuraci\u00f3n que le pasar\u00e1s. Ahora puede envolver el componente ra\u00edz, que en nuestro caso es App<\/code>con el proveedor:<\/p>\nReactDOM.render(, document.getElementById('root')\n);<\/code><\/pre>\nUse el componente de inicio de sesi\u00f3n y registro de Firebase<\/h2>\n
App<\/code>componente donde importaremos y usaremos el FirebaseUser<\/code>componente para crear e iniciar sesi\u00f3n en un usuario. No hay nada realmente relacionado con Firebase<\/a> aqu\u00ed. Vamos a implementar un inicio de sesi\u00f3n y registro usando el mismo componente para que pueda ver c\u00f3mo podemos reutilizar el c\u00f3digo, por lo que en este componente implementaremos un par de botones que, al hacer clic, mostrar\u00e1n el FirebaseUser<\/code>modo de inicio de sesi\u00f3n o un modo de registro:<\/p>\nimport React, { useState } from 'react';\nimport FirebaseUser from '.\/FirebaseUser';\n\nfunction App() {\n const [ signInOrUp, setSignInOrUp ] = useState( '' );\n return (Firebase login\n {\n signInOrUp?(): (<>\n setSignInOrUp( 'signin') } >Log in with existing user\n setSignInOrUp( 'signup') } >Create a new user) }\n\n );\n}\n\nexport default App;\n<\/code><\/pre>\nConfigure el inicio de sesi\u00f3n de Firebase y reg\u00edstrese<\/h2>\n
import React, { useState } from 'react';\nimport { useFirebaseApp } from 'reactfire';\nimport 'firebase\/auth';<\/code><\/pre>\nuseState<\/code>algunas cosas, desde saber si el usuario est\u00e1 autenticado hasta establecer errores. Vamos a usar el useFirebaseApp<\/code>gancho para acceder a la conexi\u00f3n de Firebase. Esto solo es posible porque configuramos el proveedor de Firebase en el paso anterior y solo est\u00e1 disponible en la jerarqu\u00eda donde se agreg\u00f3. Finalmente, importaremos la auth<\/code>biblioteca para que podamos llamar a los m\u00e9todos de Firebase para crear usuarios e iniciar sesi\u00f3n. Esta es una forma eficiente porque solo estamos cargando esta biblioteca, y no otras como firestore<\/code>para la base de datos NoSQL o messaging<\/code>para mensajes y notificaciones.<\/p>\nconst useField =() => {\n const [ value, setValue ] = useState( '' );\n return { value, onChange: x => setValue( 'string' === typeof x? x: x.target.value) };\n};<\/code><\/pre>\nfunction FirebaseUser ({ action = 'signin' }) {\n const email = useField();\n const password = useField();\n const [ auth, setAuth ] = useState( null );\n const [ error, setError ] = useState( '' );\n const firebase = useFirebaseApp();\n const setReceivedData = data => setAuth( data );\n const setReceivedError = error => setError( error.message );\n\n const signIn = e => {\n e.preventDefault();\n setError( '' );\n firebase.auth()\n .signInWithEmailAndPassword( email.value, password.value) .then( setReceivedData) .catch( setReceivedError );\n };\n\n const signUp = e => {\n e.preventDefault();\n setError( '' );\n firebase.auth()\n .createUserWithEmailAndPassword( email.value, password.value) .then( setReceivedData) .catch( setReceivedError );\n };\n\n const manage = 'signin' === action? {\n success: `Logged in as ${ auth?.user.email ?? '' }`,\n method: signIn,\n label: 'Sign In'\n }: {\n success: `Signed up as ${ auth?.user.email ?? '' }`,\n method: signUp,\n label: 'Sign Up'\n };\n\n return ({\n auth? ({ manage.success }\n ): (<>\n\n { manage.label }\n {\n error && { error }\n }) }\n\n );\n}\n\nexport default FirebaseUser;\n<\/code><\/pre>\nconst firebase = useFirebaseApp();<\/code><\/pre>\nApp<\/code>componente con el proveedor de Firebase. Ahora que estamos conectados a Firebase, podemos usar la auth<\/code>funcionalidad y llamar a signInWithEmailAndPassword<\/code>:<\/p>\nconst signIn = e => {\n e.preventDefault();\n setError( '' );\n firebase.auth()\n .signInWithEmailAndPassword( email.value, password.value) .then( setReceivedData) .catch( setReceivedError );\n};<\/code><\/pre>\nLogged in as ${ auth?.user.email ?? '' }<\/code><\/pre>\nconsole.log()<\/code>a nuestra setReceivedData()<\/code>funci\u00f3n para ver qu\u00e9 m\u00e1s incluye.<\/p>\ncreateUserWithEmailAndPassword()<\/code>.<\/p>\nConclusi\u00f3n<\/h2>\n
![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c00594d08.gif\")
<\/a><\/p>\n
\nDato curioso: Chrome se queja de que la contrase\u00f1a 123456 que estoy usando para las pruebas est\u00e1 comprometida, lo cual es cierto.<\/p>\n![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c007b1816.png\")
<\/a><\/p>\n\n
useFirebaseApp<\/code><\/li>\n