Ele lan\u00e7ar\u00e1 um assistente que perguntar\u00e1 o nome do projeto.<\/p>\n A pr\u00f3xima tela perguntar\u00e1 se voc\u00ea deseja ativar a an\u00e1lise. Desative-o e clique no bot\u00e3o Criar projeto<\/strong>. Levar\u00e1 um tempo para provisionar seu projeto e, depois disso, voc\u00ea receber\u00e1 um bot\u00e3o para Continuar<\/strong>, que o levar\u00e1 \u00e0 vis\u00e3o geral do projeto.<\/p>\n Agora voc\u00ea precisa adicionar um aplicativo do Firebase ao projeto do Firebase. Faz sentido? Um projeto do Firebase permite que voc\u00ea contenha v\u00e1rios aplicativos do Firebase para iOS, Android, Web e Unity. Por enquanto, vamos criar um aplicativo da Web, pois usaremos o React para criar nosso login do Firebase.<\/p>\n Voc\u00ea ser\u00e1 solicitado a nomear este aplicativo e receber\u00e1 as chaves que precisar\u00e1 usar para se conectar ao Firebase. Eles ser\u00e3o algo como:<\/p>\n Usaremos essas chaves em nosso aplicativo React<\/a> para configurar um provedor que nos permitir\u00e1 acessar o Firebase em qualquer componente do provedor.<\/p>\n Por fim, v\u00e1 para Autentica\u00e7\u00e3o<\/strong> na barra lateral esquerda, na guia M\u00e9todo de login<\/strong> e ative a autentica\u00e7\u00e3o de e- mail\/senha .<\/strong><\/p>\n Voc\u00ea est\u00e1 pronto!<\/p>\n O Firebase est\u00e1 dispon\u00edvel para diferentes pilhas, incluindo JavaScript<\/a> e Node.js<\/a>, que \u00e9 o que vamos usar agora. Vamos instalar apenas duas depend\u00eancias com npm:<\/p>\n Vamos instal\u00e1-los com<\/p>\n A estrutura do app React<\/a> ser\u00e1 bem simples, como segue:<\/p>\n e eles ser\u00e3o relacionados da seguinte forma:<\/p>\n Vamos escrever o primeiro arquivo para login e inscri\u00e7\u00e3o do Firebase! Na verdade, n\u00e3o precisamos escrev\u00ea-lo, pois isso deve ser adicionado ao arquivo em que voc\u00ea est\u00e1 emitindo Isso importa Excelente! Agora todos os componentes abaixo poder\u00e3o acessar o Firebase!<\/p>\n Vamos escrever agora o Vamos criar um componente para isso. Primeiro precisamos importar alguns m\u00f3dulos:<\/p>\n Vamos Em seguida, adicionaremos um gancho r\u00e1pido para gerenciar nossos campos de entrada:<\/p>\n E finalmente o componente completo, que vamos detalhar abaixo para apontar as partes mais interessantes, aquelas relacionadas ao login e inscri\u00e7\u00e3o do Firebase.<\/p>\n Primeiro, conectamos \u00e0 inst\u00e2ncia do Firebase:<\/p>\n Como apontado anteriormente, isso \u00e9 poss\u00edvel porque anteriormente agrupamos o Quando for bem-sucedido, ele definir\u00e1 os dados retornados e os campos do formul\u00e1rio ser\u00e3o substitu\u00eddos por<\/p>\n Os dados retornados s\u00e3o um objeto grande com propriedades muito interessantes, ent\u00e3o vale a pena adicionar um O processo para criar um usu\u00e1rio \u00e9 semelhante, exceto que usamos a fun\u00e7\u00e3o Para testar nosso login do Firebase e se inscrever, voc\u00ea pode tentar fazer login para um usu\u00e1rio que n\u00e3o existe para ver os erros. Depois disso, crie um usu\u00e1rio e fa\u00e7a login como o usu\u00e1rio.<\/p>\n Demonstra\u00e7\u00e3o do login e inscri\u00e7\u00e3o do Firebase. Se agora voc\u00ea voltar para o aplicativo Firebase > Autentica\u00e7\u00e3o > Usu\u00e1rios, ver\u00e1 o novo usu\u00e1rio (talvez seja necess\u00e1rio usar o bot\u00e3o de atualiza\u00e7\u00e3o ao lado de Adicionar usu\u00e1rio).<\/p>\n Para recapitular, as etapas essenciais para integrar o Firebase em nosso aplicativo React s\u00e3o:<\/p>\n Verifique o reposit\u00f3rio do GitHub em https:\/\/github.com\/eliorivero\/firebase-login-sign-up<\/a>. A \u00fanica diferen\u00e7a com este \u00e9 que estou carregando as chaves para configurar o Firebase a partir de um arquivo .env para evitar exp\u00f4-los publicamente.<\/p>\n Se voc\u00ea tiver alguma d\u00favida, deixe-me saber nos coment\u00e1rios abaixo!<\/p>\n![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6bffde950b.png\")
<\/a><\/p>\n![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6bfffb1eed.png\")
<\/a><\/p>\n![\"Como](\"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![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c00385c64.png\")
<\/a><\/p>\nInstalar depend\u00eancias do Firebase<\/h2>\n
\n
firebase<\/code><\/a>, que nos permitir\u00e1 acessar coisas como a auth<\/code>biblioteca, que usaremos para realizar o login e tamb\u00e9m criar um novo usu\u00e1rio<\/li>\nreactfire<\/code><\/a>, uma cole\u00e7\u00e3o de ferramentas \u00fateis para trabalhar com o Firebase no React. Usaremos seu useFirebaseApp<\/code>para se conectar ao contexto e acessar o 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 o provedor Firebase<\/h2>\n
ReactDOM.render()<\/code>, no nosso 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>e adiciona as chaves de configura\u00e7\u00e3o que voc\u00ea passar\u00e1 para ele. Agora voc\u00ea pode encapsular o componente raiz, que no nosso caso est\u00e1 App<\/code>com o provedor:<\/p>\nReactDOM.render(, document.getElementById('root')\n);<\/code><\/pre>\nUse o componente de login e inscri\u00e7\u00e3o do Firebase<\/h2>\n
App<\/code>componente onde vamos importar e usar o FirebaseUser<\/code>componente para criar e logar um usu\u00e1rio. N\u00e3o h\u00e1 nada realmente relacionado ao Firebase<\/a> aqui. Vamos implementar um login e uma inscri\u00e7\u00e3o usando o mesmo componente para que voc\u00ea possa ver como podemos reutilizar o c\u00f3digo, ent\u00e3o neste componente implementaremos um par de bot\u00f5es que, quando clicados, renderizar\u00e3o o FirebaseUser<\/code>modo de login ou modo de inscri\u00e7\u00e3o:<\/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 o login do Firebase e inscreva-se<\/h2>\n
import React, { useState } from 'react';\nimport { useFirebaseApp } from 'reactfire';\nimport 'firebase\/auth';<\/code><\/pre>\nuseState<\/code>por algumas coisas, desde saber se o usu\u00e1rio est\u00e1 autenticado at\u00e9 definir erros. Vamos usar o useFirebaseApp<\/code>gancho para acessar a conex\u00e3o do Firebase. Isso s\u00f3 \u00e9 poss\u00edvel porque configuramos o provedor Firebase na etapa anterior e ele s\u00f3 est\u00e1 dispon\u00edvel na hierarquia em que foi adicionado. Por fim, importaremos a auth<\/code>biblioteca para que possamos chamar os m\u00e9todos do Firebase para criar usu\u00e1rios e fazer login. Esta \u00e9 uma maneira eficiente porque estamos carregando apenas esta biblioteca, e n\u00e3o outras como firestore<\/code>para o banco de dados NoSQL ou messaging<\/code>para mensagens e notifica\u00e7\u00f5es.<\/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 com o provedor Firebase. Agora que estamos conectados ao Firebase, podemos usar a auth<\/code>funcionalidade e chamar 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>\u00e0 nossa setReceivedData()<\/code>fun\u00e7\u00e3o para ver o que mais ele inclui.<\/p>\ncreateUserWithEmailAndPassword()<\/code>.<\/p>\nConclus\u00e3o<\/h2>\n
![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c00594d08.gif\")
<\/a><\/p>\n
\nCuriosidade: o Chrome reclama que a senha 123456 que estou usando para teste est\u00e1 comprometida, o que \u00e9 verdade.<\/p>\n![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c007b1816.png\")
<\/a><\/p>\n\n
useFirebaseApp<\/code><\/li>\n