Neste artigo você verá como criar um projeto Vue.js e fazer a autenticação através do sistema de autenticação Firebase.

Veremos:

• O que é o Vue.js
• O que é o Firebase
• Como criar um projeto Vue.js
• Como instalar e utilizar o Vue CLI
• Usar o Vue Router
• Usar router-link
• Usar a diretiva v-on e v-model
• Criar um projeto Firebase
• Instalar Firebase no Vue.js
• Integrar o Firebase no Vue.js
• Funções do Firebase, como createUserWithEmailAndPassword e signInWithEmailAndPassword
• Registrar um novo usuário
• Habilitar a autenticação no console do Firebase
• Logar na aplicação com o usuário criado

O que é Vue.js?

O Vue.js é um Framework Progressivo, mas até pouco tempo se considerava apenas uma Lib. (isso porque não é engessado como, por exemplo, o Angular. Então, basicamente com o Vue você vai agregar libs e, com isso, transformar em um “framework completo”.

Ele, por si só, resolve apenas a camada visual, usando o Virtual DOM. Muita gente não sabe, mas ele nasceu dentro da Google – foi criado pelo Evan You.

Evan queria uma ferramenta para prototipar mais rápido, e achava que o Angular não atendia, então começou a desenvolver o Vue. Atualmente Evan saiu da Google e hoje é mantenedor do Vue.

Muitos desenvolvedores concordam que o Vue é uma junção de boas ideias do Angular e React, mas com uma flexibilidade maior. Um exemplo disso é o uso do JSX – se o desenvolvedor tem a opção de usar ou não o JSX. Se não quiser, pode colocar diretamente no HTML  importando via CDN.

Você também pode preferir o empacotamento webpack com os componentes Single File, que juntam as três camadas: HTML, JS e CSS de uma forma organizada.

Vue como projeto chegou na amplitude de um framework, mas como código é uma Lib pequena, simples e leve. Conta com três bibliotecas de apoio oficiais: Vue Router, Vuex e Vue Server Renderer. Além, de contar com mais três ferramentas de apoio também oficiais: DevTools, Vue CLI e Vue Loader.

Se ficou curioso com a opção Vue.js, na documentação há um tópico fazendo uma comparação entre os Frameworks – dê uma olhada.

Além de tudo isso, os desenvolvedores Vue destacam que a curva de aprendizado é rápida e a documentação de fácil entendimento, inclusive tem disponível sua documentação traduzida para o português mantida pela comunidade.

O que é Firebase?

Basicamente é serviço em nuvem do Google para desenvolvedores móveis. É um back-end inteiro para aplicativos Android, iOS e aplicações web, com aparência limpa e de uso descomplicado.

O Firebase é uma plataforma dedicada e SDK para a produção de aplicativos. E para fazer o uso desse serviço, os desenvolvedores precisam apenas adicionar algumas linhas de código em seus aplicativos. Saiba mais aqui.

Vamos ao projeto!

Etapa 1 – Criando o projeto

Começaremos usando a ferramenta Vue CLI.

• Vue.js oferece um CLI oficial para rapidamente construir ambiciosas Single Page Applications. Ele possui um conjunto de configurações de build prontas para um processo de trabalho de front-end moderno. Leva apenas alguns minutos para estar pronto e executando com hot-reload, lint ao salvar e empacotamento pronto para distribuição em produção. Dê uma olhada na documentação do Vue CLI para mais detalhes

Para isso, usamos o comando:

npm install -g @vue/cli

Agora que instalamos o Vue CLI, criamos o projeto:

vue create vue-auth-firebase

Você receberá em seu terminal essa mensagem, perguntando se deseja selecionar o preset “Default” ou “Manually select features”.

O preset default que conta com configuração básica, Babel + ESLint e o preset “Manually select features ”, possibilita personalizar os recursos.

Para nosso projeto, optaremos pelo preset “Manually select features”, pois precisaremos da opção vue-router.

• Vue Router é o roteador oficial para Vue.js. Ele se integra ao núcleo do Vue.js para facilitar a criação de aplicativos de página única com o Vue.js.

Depois de criar o projeto, execute o comando para que sua aplicação seja servida:

npm run serve

Agora você pode acessar em http://localhost:8080/.

Etapa 2 – Login e SignUp

Para fazer a etapa do Login, criaremos um componente chamado Login em src/views,  ficando assim:

Nesse momento, o nosso componente Login terá título e dois campos – um para e-mail e outro para senha, ficando assim:

Feito isso precisamos navegar para esse componente. Para isso, vamos utilizar o vue-router. Acesse o caminho src/router.js.

E no router.js importe o componente login:

import Login from './views/Login';

E configure sua rota, adicionando esse simples código:

{
path: '/login',
name: 'login',
component: Login
}

Ficando assim:

Em seguida, você pode acessar http://localhost:8080/login e terá sua tela de login:

Vamos criar o componente SignUp. Para isso, seguimos a mesma fórmula. Em src/views/ crie o componente SignUp, ficando assim:

Adicione também a rota para que consiga acessar esse componente, ficando da seguinte forma:

Agora acesse http://localhost:8080/registrar.

Etapa 3 – Navegando pela aplicação

Para que se consiga navegar entre os componentes, vamos implementar o router-link. Para isso, basta adicionar <router-link to=” ”> — onde o to=” ”. Passamos o caminho da rota que queremos que ele direcione, ficando assim no login:

E assim em SignUp:

Com o router-link, a navegação é na parte html do componente, mas precisamos navegar entre as rotas.

Para fazer isso, precisamos atrelar um evento ao clicar no botão login e, para isso, temos duas opções: usar @alias da diretiva v-on ou fazer isso com a v-on diretiva.

Em nosso exemplo, vamos usar a função replace, porque quando o usuário estiver logado, queremos que a visualização Home direcione para rota inicial. Para isso, basta adicionar:

Abrindo o arquivo main.js, veremos que o objeto roteador foi injetado no app Vue. Dessa forma, podemos acessá-lo facilmente em todos os componentes do aplicativo. Por esse motivo estamos acessando o router com o this:

Agora você pode testar a alteração. Clique no botão login e será direcionado para home:

Etapa 4 – Integração com Firebase

Chegamos na etapa de integrar nosso front-end com o Firebase. Para começar, precisamos criar um novo projeto.

Vamos aos passos!

• 1 . Você precisa ter uma conta Google
• 2 . Acesse: https://console.firebase.google.com

Para criar seu projeto, siga os passos abaixo:

Agora, com seu projeto criado, você precisa adicionar o Firebase ao seu aplicativo web. Copie o código do pop-up.

Agora voltamos ao nosso projeto Vue – vamos instalar o Firebase no projeto. Para isso, use a linha de comando:

npm install ——save firebase

Depois de concluir a instalação, você irá até o arquivo main.js para importar o módulo Firebase e colar seu código copiado anteriormente:

Criando usuário no Firebase usando componente SignUp

Voltando ao componente SignUp faremos os passos para implementar o que precisamos para criar usuários no Firebase.

Para criar um novo usuário precisamos recuperar o e-mail e a senha digitados em nosso formulário dentro de nosso componente. Para fazer isso, vamos usar a diretiva v-model.

• Por padrão, v-model em um componente usa value como prop e input como o evento, mas alguns tipos de entrada, como caixas de seleção e botões de opção, podem usar o value atributo para uma finalidade diferente

Quando recuperar o e-mail e a senha do novo usuário que queremos criar, vamos usar a função createUserWithEmailAndPassword do Firebase.

Essa função do Firebase é auto-explicativa, ela cria um novo usuário com e-mail e senha.

Agora precisamos adicionar tudo isso em nosso componente SignUp:

Se você tentar registrar um novo usuário nesse momento, receberá um erro:

Isso porque a função createUserWithEmailAndPassword retorna uma promise do Firebase com um onResolve e um onReject retorno da chamada. Para conseguir criar um novo usuário, precisamos ativar o provedor de login do Firebase.

Vamos voltar ao console do Firebase e acessar o projeto que criamos:

Feito isso, crie um novo usuário:

Recebemos a mensagem de sucesso e fomos direcionados para a home, conforme programamos!

Para ter a certeza de que tudo deu certo, podemos dar uma olhada no console do Firebase, em Authentication e ver a lista de usuários. Você verá o usuário que você acabou de registrar na lista.

Logando com o novo usuário

Agora que temos um novo usuário criado, vamos tentar entrar com este usuário – quando você cria um novo usuário no Firebase, ele faz login automaticamente no aplicativo, mas para este exemplo faremos login novamente em Login.

Voltando ao nosso componente de Login, precisamos recuperar o e-mail e a senha do usuário que está tentando fazer login nesse usuário no Firebase. Esse componente será semelhante ao componente SignUp, mas a mudança será a função que chamaremos.

Para fazer login em um usuário no Firebase, usaremos a função signInWithEmailAndPassword, fornecida também pelo Firebase. O e-mail e senha como parâmetros e retornar uma promise Firebase.

Ficando assim:

Primeiro tentaremos logar com um usuário não cadastrado. Perceba que recebemos um erro dizendo que “Não há registro de usuário correspondente a esse identificador. O usuário pode ter sido excluído.”

Beleza, agora vamos colocar com o usuário que criamos e veremos que não temos erro e somos direcionados para a pagina Home:

Etapa 5 – Acessando a aplicação apenas com autenticação

Precisamos redirecionar o usuário para a área da aplicação que pode ser acessada somente se o usuário for autenticado.

Para implementar isso podemos usar o campo meta do router vue. Meta campo é uma informação adicional que você pode definir para o seu percurso.

• Cada objeto de rota em routes configuração é chamado de registro de rota. Os registros de rota podem ser aninhados. Portanto, quando uma rota é correspondida, ela pode corresponder a mais de um registro de rota

Vamos adicionar um meta campo à visão inicial que usaremos para este exemplo. Essa meta será chamada requiresAuth e nos informará que essa visão precisa de autenticação.

Além disso, agora que teremos todas as nossas rotas, devemos definir uma rota padrão para o aplicativo, já que alteramos o componente Home que estava antes da página de destino padrão.

Colocamos o path: '*'. Isso quer dizer que redirecionamos todos os caminhos que não existem para a visualização Login.

Se o usuário for autenticado, como a página de login não estará acessível quando o usuário estiver conectado, ele redirecionará automaticamente a exibição para a visualização Home.

Agora vamos inserir uma URL incorreta e veremos que ele será redirecionado para a visualização de login.

Redirecionando as rotas se o usuário for autenticado

Chegamos na etapa em que precisamos saber se o usuário está autenticado no Firebase. O Firebase fornece uma função para recuperar o usuário atual: firebase.auth().CurrentUser.

Essa função envia de volta o usuário atualmente conectado usando a currentUser propriedade. Se um usuário não estiver conectado, currentUser será nulo.

Na parte anterior definimos meta campos para nossas rotas, para sabermos qual visualização precisa de autenticação para ser acessível.

Agora precisamos verificar antes de acessar cada visualização se o usuário for autenticado e se a página que desejamos acessar precisa de autenticação ou não.

Para isso vamos usar os navigation guards. Os navigation guards fornecidos vue-router são usados ​​principalmente para proteger as navegações, redirecionando ou cancelando.

Há maneiras de conectar-se ao processo de navegação de rota: globalmente, por rota ou no componente.

No nosso exemplo vamos usar o navigation guards global beforeEach.

Na beforeEach função recuperamos o currentUser Firebase e verificamos se a rota pela qual desejamos navegar precisa de autenticação, verificando se o objeto de rota tem a meta requiresAuth.

Para entender a forma como recuperamos a meta requiresAuth, primeiro precisamos saber que cada objeto de rota na routes configuração é chamada de registro de rota.

Em nosso artigo não temos rotas aninhadas, mas os registros de rota podem ser aninhados. Portanto, quando uma rota é correspondida, ela pode corresponder a mais de um registro de rota.

Todos os registros de rota correspondidos por uma rota são expostos no $route objeto – e também rotear objetos em navigation guards, como a $route.matchedMatriz. Portanto, precisamos fazer uma iteração $route.matched.

Então, em nossa função global de navigation guards, dentro do to objeto route, nós procuramos se o matched Array possui algum registro.

Se a rota para a qual navegamos requer autenticação e não houver usuário logado, redirecionamos para a visualização Login.

Se a rota para a qual navegamos não exigir autenticação e houver um usuário logado, redirecionaremos para a visualização inicial.

Agora só poderemos acessar o aplicativo quando o usuário for autenticado.

Como já fizemos o login na etapa anterior, se você recarregar a página, com base em nossa implementação de navigation guards você deverá redirecionar para a visualização Home.

Vamos recarregar a página:

Ainda estamos na visualização Login . Isso acontece porque no ciclo de vida da nossa aplicação, a execução de nosso navegation guards beforeEach ocorre antes do término da inicialização do Firebase.

Então, quando carregamos o aplicativo pela primeira vez, como o módulo do Firebase ainda não concluiu sua inicialização, firebase.auth (). CurrentUser retorna null.

Após o primeiro carregamento, se você tentar ir para visão Registrar uma nova conta, verá que o redirecionamento ocorre e você acaba na visão da Home.

O Firebase nos possibilita definir um observador no objeto Auth. Esse observador é chamado de onAuthStateChanged, definindo assim um retorno de chamada no observador onAuthStateChanged.

Podemos inicializar o aplicativo Vue somente quando tivermos certeza de que o Firebase está inicializado.

Vamos mudar nosso src/main.js arquivo assim:

Agora inicializamos o aplicativo somente quando tiver certeza de que o objeto Firebase Auth está pronto para uso. Se você atualizar a página ou tentar acessar Login ou SignUp, você verá o redirecionamento em ação.

Redirecionamento após Login/SignUp ou Log Out do aplicativo

Agora que temos nosso sistema de autenticação, ainda precisamos redirecionar o usuário após o login ou quando um novo usuário é criado. Além disso, queremos ser capazes de sair do Firebase.

Para sair, vamos apenas adicionar um botão “sair” em nosso componente Home.

Como signInWithEmailAndPassword e createUserWithEmailAndPassword, o Firebase fornece uma função para efetuar logout chamada signOut que retorna uma promise.

Uma vez que a função SignOut estiver concluída, redirecionaremos o aplicativo para a visão Login.

Ficando assim:

Agora, quando clicamos no botão, saímos do Firebase e voltamos para tela Login.

Para ter certeza de que você está fazendo logout no Firebase, atualize a página ou tente acessar a tela inicial.

Conclusão

Temos uma aplicação Vue usando o sistema de autenticação do Firebase. Com ele, você poderá criar novos usuários e usar sua autenticação!

Esse exemplo completo você encontra no meu Git – acesse neste link.

Se esse artigo foi útil, compartilhe e ajude mais pessoas!