O guia definitivo para autenticação em Vue.js com Supabase

Introdução

A autenticação é um recurso importante em aplicativos da web hoje, mas muitos desenvolvedores têm dificuldade em configurá-la. Felizmente, existem serviços e bibliotecas que ajudam a tirar esse fardo pesado de nossas mãos.

Hoje, veremos como usar o Supabase para lidar com a autenticação do usuário em um aplicativo Vue.js. Supabase servirá como back-end para autenticação em um aplicativo com funcionalidade de login e inscrição, junto com uma rota privada que só pode ser acessada com credenciais válidas.

O que é Supabase?

Supabase costuma ser melhor descrito como um código aberto alternativa ao Firebase. Ele oferece alguns dos principais recursos do Firebase, um dos quais inclui autenticação e gerenciamento de usuário.

O Supabase oferece suporte para diferentes provedores de autenticação externos, como senhas, números de telefone e provedores de identidade, como Google, Twitter, Facebook e Github.

Configurando o Vue.js

Para começar, usaremos Vue CLI para criar rapidamente um novo projeto. A CLI pode ser instalada globalmente executando o seguinte comando:

npm install-g @ vue/cli # OU yarn global add @ vue/cli

​​Em seguida, execute o seguinte comando para criar um projeto Vue:

vue create supabase-auth

Você será solicitado a escolher uma predefinição; escolha a opção de selecionar manualmente os recursos.
Uma vez lá, selecione Roteador e Vuex , clique em Enter e escolha Vue versão 3.x , pois usaremos a nova API de composição. Finalmente, clique em Enter em todas as outras seleções para preparar seu aplicativo Vue.

Configurando o Supabase

Para começar, primeiro você terá que criar uma conta visitando a página de login do Supabase e prossiga para fazer login usando sua conta do Github.

Depois de entrar no painel, clique no botão novo projeto para criar seu primeiro projeto. Você deve ver o seguinte pop-up modal:

Escolha um nome para seu projeto, uma senha de banco de dados e uma região próxima a você. Levará algum tempo para que o projeto seja totalmente criado.

Depois de concluído, vá para Configurações , depois para API , copie o URL e chave de API pública anônima:

Crie um arquivo.env.local na raiz do seu projeto e salve as credenciais nele como:

VUE_APP_SUPABASE_URL=YOUR_SUPABSE_URL VUE_APP_SUPABASE_PUBLIC_KEY=YOUR_SUPABSE_PUBLIC_KEY

Setting a biblioteca cliente Supabase

Execute o seguinte comando para instalar a biblioteca cliente Supabase:

yarn add @ supabase/supabase-js

Em seguida, teremos que inicializar o Supabase criando um supabase arquivo.js em nosso diretório src e colando o seguinte código:

import {createClient} from’@ supabase/supabase-js’const supabaseUrl=process.env.VUE_APP_SUPABASE_URL const supabaseAnonKey=process.env.VUE_APP_SUPABASE_KEY export supabase=criar Cliente (supabaseUrl, supabaseAnonKey)

Criando nossas páginas

Agora vamos criar algumas páginas de componentes Vue para lidar com as funcionalidades de inscrição e login de nosso projeto, junto com uma página de painel.

Neste tutorial, não iremos definir o estilo de nosso aplicativo para evitar a confusão de nossa marcação HTML, mas você sempre pode escolher estilizar a sua como quiser.

Aqui está a marcação para nosso SignIn página:

Agora vamos fazer a marcação para nossa página de inscrição:

E, finalmente, nossa página do Painel: