Como adicionar autenticação ao React Native em três etapas usando o Firebase

A autenticação nos permite proteger nossos aplicativos ou limitar o acesso dos membros não usuários. a autenticação também pode ser usada, por exemplo, para limitar o acesso a um serviço pago ou serviço específico. esse é apenas um exemplo de como a autenticação pode estar no seu aplicativo. hoje adicionaremos autenticação ao aplicativo React Native usando o Firebase…

1 Instalando o react-native-firebase

A primeira coisa que fazemos é instalar e inicializar o Firebase dentro do nosso aplicativo. no React Native, precisamos usar um Firebase Container para o React Native. vamos usar react-native-firebase.

Se você está prestes a iniciar um novo React Native do zero e gostaria de usar o firebase, você tem sorte de poder instalar o react-native-firebase pré-integrado usando o React Native CLI.

//npx @react-native-community/cli init --template=@react-native-firebase/template authenticationFirebase//** source: https://invertase.io/oss/react-native-firebase/quick-start/new-project

Em seguida, basta instalar o pod para ios executando o seguinte comando no diretório raiz do seu aplicativo.

cd ios && pod install

Se você estiver com problemas para instalar um novo projeto com o firebase, consulte docs react-native-firebase

Adicionando react-native-firebase a um projeto existente

Instalar react-native-firebase pacote usando fio ou npm

 yarn add @react-native-firebase/app

ou:

 npm install @react-native-firebase/app

Em seguida, instale os pods para o ios.

shell cd ios && pod install

Executando o aplicativo

Para o iOS, há duas maneiras de usar pessoalmente o Xcode, isso me dá uma ideia clara se algo der errado e a compilação falhar.

Sempre verifique se o pacote está sendo executado, pressione yarn start para iniciar o aplicativo.

2 – A segunda maneira de executar o aplicativo no ios é executar o comando react-native run-ios e é isso.

Adicionando credenciais da base do firebase

Esta etapa requer a criação de um novo projeto no o console do Firebase .

Depois de criar um novo projeto na página do painel, selecione Adicionar Firebase ao aplicativo para iOS. Isso mostrará as etapas para adicionar credenciais aos ios, como abaixo.

Consiste em algumas etapas:

Para Android

O Android tem uma configuração diferente para o firebase. Na configuração do projeto, no console do Firebase, selecione adicionar Firebase ao android.

Você pode colocar qualquer nome que desejar na entrada de nome do aplicativo, apenas certifique-se de que esteja em conformidade com os requisitos da base de incêndio. então clique Registro.

Depois disso, você precisa baixar google-services.jsone coloque-o na pasta android / app.

O próximo passo é inicializar o Android SDK.

E mais um último passo é aplicar o plugin firebase dentro android/app/build.gradle .

apply plugin: 'com.google.gms.google-services'

Se você tiver algum problema ao executar as etapas acima, sempre poderá consultar o Documentos do Firebase ou react-native-firebase local na rede Internet.

Agora que terminamos a integração, a próxima etapa é implementar as funções do Firebase para criar usuários, entre no React Native.

Adicionando login, login

Essa fase é simples, apenas alguns códigos React e javascript para chamar as funções do Firebase. Vou criar uma interface simples para login e inscrição, isso não é necessário para este tutorial, mas você pode pular esta etapa.

Vou colocar o código fonte completo no final do artigo *

Nós vamos usar createUserWithEmailAndPassword função para se inscrever para um novo usuário. Eu já implementei toda a validação no formulário, só precisamos chamar essa função para criar um usuário.

Quando o usuário pressiona o botão Continuar, __doSignUp será chamado e o código será exibido abaixo.

const __doSignUp = () => {  if (!email) {    setError("Email required *")    setValid(false)    return  } else if (!password && password.trim() && password.length > 6) {    setError("Weak password, minimum 5 chars")    setValid(false)    return  } else if (!__isValidEmail(email)) {    setError("Invalid Email")    setValid(false)    return  }  __doCreateUser(email, password)}const __doCreateUser = async (email, password) => {  try {    let response = await auth().createUserWithEmailAndPassword(email, password)    if (response) {      console.log(tag, "🍎", response)    }  } catch (e) {    console.error(e.message)  }}

Verifique se você instalou @react-native-firebase/authpoder ligar auth().createUserWithEmailAndPassword(email, password)

// import authimport auth from "@react-native-firebase/auth"

A função que cria um novo usuário no Firebase é semelhante à seguinte:

const __doCreateUser = async (email, password) =>{    try {     let response =  await auth().createUserWithEmailAndPassword(email, password);      if(response){        console.log(tag,"🍎",response)      }    } catch (e) {      console.error(e.message);    }

Se a função gerar um erro, ative o método de email / senha na seção de autenticação no console do Firebase.

Se tudo der certo, os dados inseridos (email, senha) são válidos, um alerta será exibido e, se você verificar a seção Autenticação no console do Firebase, notará que um novo usuário foi criado.

Aqui está o código fonte de SignInComponent.

const SigInComponent = () => {  const [email, setEmail] = useState("")  const [password, setPassword] = useState("")  const [fetching, setFetching] = useState(false)  const [error, setError] = useState("")  const [isValid, setValid] = useState(true)  const __doSignUp = () => {    if (!email) {      setError("Email required *")      setValid(false)      return    } else if (!password && password.trim() && password.length > 6) {      setError("Weak password, minimum 5 chars")      setValid(false)      return    } else if (!__isValidEmail(email)) {      setError("Invalid Email")      setValid(false)      return    }    __doCreateUser(email, password)  }  const __doCreateUser = async (email, password) => {    try {      let response = await auth().createUserWithEmailAndPassword(        email,        password      )      if (response && response.user) {        Alert.alert("Success ✅", "Account created successfully")      }    } catch (e) {      console.error(e.message)    }  }  return (                  {!!fetching && }                     Sign Up                      {            setError            setEmail(text)          }}          error={isValid}        />         setPassword(text)}        />            {error ? (                  {error}              ) : null}                                    Continue                              )}

Para LoginComponent é basicamente o mesmo, a única coisa que precisamos mudar é que usamos signInWithEmailAndPassword método em vez disso.

const __doSingIn = async (email, password) => {  try {    let response = await auth().signInWithEmailAndPassword(email, password)    if (response && response.user) {      Alert.alert("Success ✅", "Authenticated successfully")    }  } catch (e) {    console.error(e.message)  }}

![loginSuccess](loginSuccess.gif

E a autenticação foi implementada com sucesso em nosso aplicativo 😃🙌)

Apenas uma última coisa, se precisarmos verificar se o usuário já está logado, precisamos exibir outra coisa em vez das telas de Logon e Logon, por exemplo, exibimos a tela inicial.

Podemos usar o módulo firebase para verificar uma sessão, ela pode ser importada do módulo de autenticação.

import auth, { firebase } from "@react-native-firebase/auth"

 componentDidMount() {    //  this.register("[email protected]", "123456");    this.__isTheUserAuthenticated();  }  __isTheUserAuthenticated = () => {    let user = firebase.auth().currentUser.uid;    if (user) {      console.log(tag,  user);      this.setState({ authenticated: true });    } else {      this.setState({ authenticated: false });    }  };

E podemos alterar a interface do usuário com base em se o usuário está autenticado ou não, e podemos exibir as informações do usuário usando o mesmo método.

firebase.auth().currentUser.email // [email protected]

E para sair, você pode simplesmente ligar await firebase.auth().signOut();

Tenho certeza de que se integramos a navegação como navegação de reação será incrível, mas não é nosso foco neste artigo. Portanto, fique à vontade para adicionar navegação, para que você possa navegar com base no status do usuário.

Sinta-se livre para verificar o código fonte completo GitHub

Obrigado pela leitura

Publicado originalmente em saidhayani.com

Saiba mais sobre o React native.