DEV Community: Lucas Frazao

Melhorando o PowerShell 📟

Lucas Frazao — Mon, 25 Nov 2024 09:11:43 +0000

Olá, me chamo Lucas Frazão. Trabalho como desenvolvedor de software (SWE) há 5 anos.

Nesse artigo quero apresentar uma alternativa para customizar e melhorar o seu terminal PowerShell, mas antes, para quem é esse post?

Usuários de Windows;
Usuários de Windows que não têm interesse ou não gostam de WSL (Windows Subsystem for Linux);
Pessoas que querem conhecer um pouco mais das capacidades do PowerShell.

Vamos lá.

O que é PowerShell?

O PowerShell é uma CLI (command-line interface) cross-plataform, simplificando, é um aplicativo de terminal que roda em qualquer sistema operacional (OS), windows, linux ou macOS. Caso ainda não conheça o PowerShell, tudo bem. Você pode acessar a documentação oficial da microsoft através do link: https://learn.microsoft.com/en-gb/powershell/ ou conferir um vídeo postado no youtube no canal da Microsoft Developer: https://www.youtube.com/watch?v=nahtw_csB5w. O vídeo está em inglês, porém, por se tratar de um vídeo didático, a dinâmica da fala faz a tradução automática do youtube funcionar muito bem.

Toda máquina com sistema operacional Windows já vem com o PowerShell instalado, o qual você pode acessar através do menu do windows e pesquisar por "powershell".

Entretanto, como nosso foco é melhorar a experiência no uso de CLI no windows, vamos dividir em etapas essa melhoria, assim você consegue chegar em um resultado mais próximo do desejado entendendo o que está sendo feito.

Instalando NerdFonts

Em primeiro lugar, vamos instalar uma fonte com glifos porque mais tarde queremos utilizar essa feature.

Glifos referem-se a formas, designs, representações específicas de caracteres em uma fonte ou um caracter codificado. Na prática, são caracteres que conseguem representar letras, números, símbolos e até mesmo ícones.

Acesse nerdfonts.com, selecione uma fonte que te agrade mais e clique em "Download". Logo após finalizar o download, vá até a pasta onde o zip foi baixado, descompacte o mesmo e em seguida instale todas as fontes que foram baixadas.

fonte da imagem: https://support.microsoft.com/en-us/office/add-a-font-b7c5f17c-4426-4b53-967f-455339c564c1

Após baixar e instalar a fonte escolhida, pressione Ctrl + , -> perfis -> padrões -> aparência.

Após entrar no menu de aparência basta selecionar a fonte que você acabou de baixar e instalar. Lembre-se que para conseguir atingir os mesmos resultados mostrados ao fim desse artigo é importante que você utilize uma fonte com glifos, no nosso contexto, uma fonte baixada do NerdFont.

Disclaimer: Caso queira utilizar a mesma fonte que eu, escolha por JetBrainsMono Nerd Font.

Preparando CLI

Vamos iniciar baixando o Windows Terminal, que é uma aplicação que permite que você possa executar diferentes terminais em abas diferentes, simplificando bastante, você pode na aba 1 rodar o PowerShell e na aba 2 o windows cmd, por exemplo.
Para baixar, acesse o link Windows Terminal - apps microsoft ou através do menu do windows, pesquisar microsoft store, e então windows terminal. Após isso, basta clicar em download/baixar. Tanto o download quanto a instalação serão realizados.

Para confirmar a instalação, basta acessar o menu do windows e pesquisar por "terminal" e caso tudo tenha ocorrido bem, você verá algo assim:

Agora, vamos baixar uma versão mais atualizada do PowerShell. Você pode se perguntar nesse momento, "mas ele já não é nativo do windows?", sim, mas o PowerShell 7 é a versão mais recente e melhorada do Windows PowerShell. Abaixo, temos um comparativo entre eles e dois links de referência com mais informações.

	PowerShell (Desktop Edition)	PowerShell (Core Edition)
Iterações	Versões 1.0, 2.0, 3.0, 4.0, 5.0 e 5.1	Versões 6.0 e 7
Compatibilidade	Compativel somente com Windows	Multi plataforma, com suporte para Linux e macOS, distros como Ubuntu, Fedora e CentOS
Runtime	.Net Framework runtime $PSVersionTable.PSEdition definida para desktop.	.Net Core runtime $PSVersionTable.PSEdition definida como core
Atualização de políticas	Apenas correções de bugs critícos serão lançados.	Novas features e correções de bugs serão lançadas.
Pacote	Vem como componente pré instalado no Windows através do WMF.	Aplicação com código aberto, pode ser instalado via MSI, ZIP ou PKG no macOS.
Ambiente de script suportado	Windows PowerShell Integrated Scription Environment (ISE)	Visual Studio Code (VSCode) com extensão do PowerShell

Referências: Differences between Windows PowerShell 5.1 and PowerShell 7.x e # Difference Between Windows PowerShell And PowerShell Core.

Para download do PowerShell 7, seguimos as mesmas etapas do download anterior. Além do acesso via windows, é possível acessar a microsoft store via browser: https://apps.microsoft.com/detail/9mz1snwt0n5d.

Um breve disclaimer... a partir de agora sempre que você ler "PowerShell", estaremos falando do PowerShell 7.x.

Após a instalação do PowerShell, finalizamos a primeira etapa e você notará a diferença visual entre os dois.

Windows PowerShell v5.1 - PowerShell 7.x

Definindo CLI Default

Agora vamos alterar as políticas de execução do PowerShell e defini-lo como CLI default. Portanto, alguns comandos serão executados com o terminal aberto como administrador, pois estamos lidando com configurações de "nível elevado", ou seja, configurações que um usuário rotineiro/convencional e não técnico normalmente não faria.

Assim, vamos iniciar verificando como estão as políticas de execução, abra o Windows Terminal como administrador, selecione o Powershell 7, no menu de opções (conforme print) e execute o comando:

Get-ExecutionPolicy

Caso o retorno seja diferente de RemoteSigned, execute o comando abaixo para definirmos a política como RemoteSigned:

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned

Link com explicação das políticas de execução: https://learn.microsoft.com/en-us/powershell/module/microsoft.powershell.security/set-executionpolicy?view=powershell-7.4#-executionpolicy

Excelente! Agora, reinicie o Windows Terminal para continuarmos com as configurações. Então, pressione Ctrl + , e depois, no canto inferior esquerdo, selecione "Open JSON file".

Feito isso, seu arquivo de configuração do windows terminal será aberto no seu editor de código padrão (ou notepad). Logo em seguida, vamos verificar qual o id do Powershell para definir como perfil padrão.
Para facilitar, você pode clicar Ctrl + F e pesquisar por Windows.Terminal.PowershellCore, o resultado esperado é algo próximo à:

Copie o guid do Windows.Terminal.PowershellCore e vamos procurar por "defaultProfile", esse campo define qual CLI é a padrão do seu terminal.

Substitua o valor defaultProfile pelo guid que acabamos de copiar do Powershell. Salve o arquivo, reinicie o terminal e será possível ver que o Windows Terminal irá iniciar já com o perfil do PowerShell selecionado.

Instalando o Oh My Posh

Para customização visual do PowerShell utilizaremos o Oh My Posh, que é um prompt customizado para qualquer shell e oferece temas pré "montados".

Execute o comando:

winget install JanDeDobbeleer.OhMyPosh -s winget

Concorde com os termos e esse comando irá instalar e executar o oh-my-posh.exe e adicionar seu tema mais recente.

Agora execute o comando :

// Para abrir com o notepad
notepad $PROFILE

// Para abrir com o Visual Studio Code (recomendo)
code $PROFILE

Você pode substituir o notepad e code também pelo seu editor. Esse comando irá abrir o seu arquivo de perfil do PowerShell.

==Caso você receba um erro relacionado ao caminho chamado, execute o comando:==

New-Item -Path $PROFILE -Type File -Force

Esse comando irá criar um arquivo vazio com o nome de $PROFILE.

Após abrir o seu arquivo de perfil, adicione a linha:

oh-my-posh init pwsh --config "$env:POSH_THEMES_PATH\jandedobbeleer.omp.json" | Invoke-Expression

Esse código define que, ao iniciar o PowerShell, o Oh My Posh será automaticamente carregado e o tema da sua linha de comando será configurado como jandedobbeleer.

==Caso você receba erro de script ao definir a nova regra para as instâncias do PowerShell, abra o terminal como administrador e execute o comando abaixo. Isso irá definir sua execução do PowerShell como irrestrita.==

Set-ExecutionPolicy -ExecutionPolicy Unrestricted

Link com explicação das políticas de execução: https://learn.microsoft.com/en-us/powershell/module/microsoft.powershell.security/set-executionpolicy?view=powershell-7.4#-executionpolicy

Feito isso, reinicie o seu Windows Terminal e ao abri-lo, você já irá sair do visual "padrão" para algo parecido com:

Caso você queria utilizar um tema diferente, você pode acessar o site do Oh My Posh Themes ou executar o comando:

Get-PoshThemes

Esse comando irá listar todos os temas disponíveis. Para alterar, basta acessar o arquivo de perfil, conforme ensinado anteriormente e substituir a palavra jandedobbeleer pelo nome do tema selecionado.

No exemplo abaixo alteramos o tema de jandedobbeleer para spaceship.

Antes:

oh-my-posh init pwsh --config "$env:POSH_THEMES_PATH\jandedobbeleer.omp.json" | Invoke-Expression

Depois:

oh-my-posh init pwsh --config "$env:POSH_THEMES_PATH\spaceship.omp.json" | Invoke-Expression

É possível fazer alterações em níveis mais granulares, mas é altamente recomendado que antes disso leia a documentação oficial https://ohmyposh.dev/docs/installation/customize.

Minha recomendação de customização é testar o background acrílico. Para isso, basta pressionar Ctrl + , em seguida Perfis -> Padrões -> Aparência, em seguide habilite a opção "Habilitar material acrílico", conforme abaixo:

Antes:

Depois:

Adicionando Terminal-Icons

O Terminal-Icons é um módulo do PowerShell que adiciona ícones aos arquivos e pastas ao trafegar pelo terminal.

Para instalar o Terminal-Icon execute o comando:

Install-Module -Name Terminal-Icons -Repository PSGallery

Adicione ao arquivo de perfil o código abaixo, que é responsável pela importação do módulo.

Import-Module -Name Terminal-Icons

Caso não se lembre como acessar o arquivo de perfil, basta executar code $PROFILE.

Você terá algo parecido com:

Após fazer isso, reinicie o seu terminal e execute o comando dir e será possível ver o Terminal-Icons em ação.

Para customizações e alterações mais específicas, acesse o link da documentação: https://github.com/devblackops/Terminal-Icons.

Obs.: Se ao invés dos ícones customizados, semelhantes ao print acima, você estiver visualizando um ícone 󰛋, basta alterar a fonte do seu Windows Terminal para uma fonte baixada do nerdfonts.com, conforme citado no início desse artigo.

Bônus - Adicionando o Posh-Git

O Posh-Git é um módulo que integra o Git com o PowerShell, provendo informações e funcionalidades adicionais relacionadas ao git. É interessante que leia a documentação oficial do Posh-Git para entender a melhor forma de aumentar a sua produtividade ao utilizá-lo. Link da documentação: https://github.com/dahlbyk/posh-git#overview.

Lembrando que, para utilizar o Posh-Git, antes é necessário que tenha instalado o git em sua máquina.

Abra o terminal como administrador e execute o comando abaixo para realizar a instalação:

PowerShellGet\Install-Module posh-git -Scope CurrentUser -Force

Adicione o trecho abaixo ao seu arquivo de perfil.

Import-Module posh-git

Por fim, caso queira customizar ainda mais a aparência do seu Windows Terminal, basta utilizar o menu aparência que vimos nesse artigo e deixar sua criatividade te conduzir. Lembre-se que algumas configurações podem afetar negativamente o seu uso da ferramenta.
Bom, passamos por etapas importantes para a customização do PowerShell, atualização e configuração. Agora o seu PowerShell está bem diferente de como ele começou, porém com seu toque. Explore as documentações e referências para customizar os comandos do Posh-Git, criar aliases e explorar mais funcionalidades dos módulos instalados.
Sinta-se livre para deixar um comentário ou me enviar um feedback do artigo.

Improving PowerShell 📟

Lucas Frazao — Mon, 25 Nov 2024 09:11:40 +0000

Hello, I'm Lucas Frazao. I've been working as a software engineer (SWE) for the past five years.

In this article, I want to present an alternative to customize and improve your PowerShell experience. But first, who is this post for?

First, for my darling, my love and my life;
Windows users;
Windows users who are not interested in or do not like WSL (Windows Subsystem for Linux);
People who want to learn more about the capabilities of PowerShell.

So, let's do it.

What is Powershell?

PowerShell is a cross-platform CLI (command-line interface), meaning it is a terminal application that can run on any operating system (OS), including Windows, Linux, and macOS. If you don't know PowerShell, it's okay. You can access the official documentation at this link or check out this video on the Microsoft Developer channel on YouTube: Introduction to PowerShell.

Every Windows operating system comes with PowerShell pre-installed, which you can access through the Windows menu by searching for "powershell".

Meantime, our goal is to improve the CLI experience on Windows. Let's do this in steps so you can achieve the main goal while understanding what is happening.

Install NerdFonts

First of all, we need to install a font with glyphs, because later we'll need this functionality.

Glyphs refer to shapes, designs, and specific representations of characters in a font or encoded character. In practice, they are characters that can represent letters, numbers, symbols, and even icons.

Access nerdfonts.com, select a font you like, and click "Download". Once the download is complete, navigate to the folder where the zip file was saved, unzip it, and install all the font styles.

image font: https://support.microsoft.com/en-us/office/add-a-font-b7c5f17c-4426-4b53-967f-455339c564c1

CLI Configuration

Let's start by downloading Windows Terminal, an application that allows you to run different terminals in separate tabs. This means you can open PowerShell in the first tab and cmd in the second tab.

To download, access the link Windows Terminal - apps microsoft or search for "Windows Terminal" in the Microsoft Store from your Windows menu. Click on "Download" to start the installation process. To confirm the installation, you can search for "terminal" in your Windows menu and you'll see something like this:

Now, let's download the latest version of PowerShell. You might ask yourself, "Isn't PowerShell already native on Windows?" The answer is "Yes" but PowerShell 7+ is the latest and improved version. Below, we have a comparison between both versions and some references where you can get more information.

	PowerShell (Desktop Edition)	PowerShell (Core Edition)
Interactions	Version 1.0, 2.0, 3.0, 4.0, 5.0 e 5.1	Version 6.0 and 7
Compatibility	Only for Windows	Cross-platform, with support for macOS and Linux distributions like Ubuntu, Fedora, and CentOS
Runtime	.Net Framework runtime $PSVersionTable.PSEdition defined by desktop.	.Net Core runtime $PSVersionTable.PSEdition defined by core
Policy Updates	Only critical bug fixes will be released.	New features and bug fixes will be released.
Package	Comes as a pre-installed component in Windows via WMF.	Open-source application, can be installed via MSI, ZIP, or PKG on macOS.
Supported Script Environment	Windows PowerShell Integrated Scripting Environment (ISE)	Visual Studio Code (VSCode) with PowerShell extension

References: Differences between Windows PowerShell 5.1 and PowerShell 7.x and Difference Between Windows PowerShell And PowerShell Core.

To download PowerShell 7, follow the steps similar to the previous step. Besides accessing it via Windows, you can also access the Microsoft Store via browser: PowerShell 7 - Microsoft Store.

A brief disclaimer... from now on, whenever you read "PowerShell", we will be referring to PowerShell 7.x.

After installing PowerShell, we have completed the first step, and you will notice the visual difference between the two versions.

Windows PowerShell v5.1 - PowerShell 7.x

Setting CLI Default

Let's change the PowerShell execution policies and set it as the default CLI. Therefore, some commands will need to be executed as Administrator because we are changing "high-level" configurations, which are settings that a typical or non-technical user usually doesn't modify.

To start, we need to verify the current execution policies. Open Windows Terminal as Administrator, select PowerShell from the menu options, and run:

Get-ExecutionPolicy

If you got something different from RemoteSigned, run the command below to set the policy to RemoteSigned:

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned

Link to learn more about execution policies: https://learn.microsoft.com/en-us/powershell/module/microsoft.powershell.security/set-executionpolicy?view=powershell-7.4#-executionpolicy

Great! Now, let's reload Windows Terminal to continue the settings. Press Ctrl + , and then click on "Open JSON file" at the bottom left corner.

Now, your Windows Terminal configuration file will open in your code editor (or notepad). After this, let's verify the PowerShell ID to set it as the default profile. To make it easier, you can press Ctrl + F and search for Windows.Terminal.PowershellCore. The expected result should look something like this:

Let's find "defaultProfile", this field stores the default terminal CLI profile.

Copy the guid, then replace the defaultProfile with the copied value from the PowerShell guid. Save the file, reload Windows Terminal, and you will see that it starts with the PowerShell profile selected.

Installing Oh My Posh

To customize the PowerShell visual, we'll use Oh My Posh, a custom prompt for any shell that offers many pre-built themes.

Run the command:

winget install JanDeDobbeleer.OhMyPosh -s winget

This command will install and run the oh-my-posh.exe and add the latest theme by default. Now run:

// To open it in Notepad
notepad $PROFILE

// To open it in Visual Studio Code (recommended)
code $PROFILE

You can run the commands using your favorite editor instead of Notepad (first command) or VS Code (second command). This command will open your PowerShell profile file.

If you got an error similar to Cannot find the ...$PROFILE file. Do you want to create a new file?, run the command:

New-Item -Path $PROFILE -Type File -Force

This command will open a blank file named $PROFILE. After opening the profile file, add the line below:

oh-my-posh init pwsh --config "$env:POSH_THEMES_PATH\jandedobbeleer.omp.json" | Invoke-Expression

This code creates a configuration that, when PowerShell starts, Oh My Posh will be opened, and the theme used will be jandedobbeleer as set up in the previous command.
If you encounter a script error while setting up a new rule for PowerShell instances, open the Windows Terminal as an administrator and run the command below. This will set your PowerShell execution policy to unrestricted.

Set-ExecutionPolicy -ExecutionPolicy Unrestricted

Link with explanation about execution policy: https://learn.microsoft.com/en-us/powershell/module/microsoft.powershell.security/set-executionpolicy?view=powershell-7.4#-executionpolicy

Then, reload your Windows Terminal, and when it opens, you can check the new "default" visual. It will look something like this:

If you want to use a different theme, you can check out Oh My Posh Themes or run the command below to list themes:

Get-PoshThemes

To change the theme, simply access the profile file and replace the word jandedobbeleer with the name of the new theme chosen from the previous list. The example below shows how to change the theme from jandedobbeleer to spaceship.

Before:

oh-my-posh init pwsh --config "$env:POSH_THEMES_PATH\jandedobbeleer.omp.json" | Invoke-Expression

After:

oh-my-posh init pwsh --config "$env:POSH_THEMES_PATH\spaceship.omp.json" | Invoke-Expression

You can make more granular changes, but it is highly recommended to read the official documentation first: Oh My Posh Documentation.

My recommendation for customization is to try the acrylic material. If you want it, press Ctrl + ,, follow up with Profiles -> Defaults -> Appearance, then enable the option "Enable acrylic material", like this:

After:

Before:

Adding Terminal-Icons

The Terminal-Icons is a PowerShell module that adds icons to folders and files when you navigate in the terminal.To install Terminal-Icon run the command:

Install-Module -Name Terminal-Icons -Repository PSGallery

Add to profile the line below that manages the module import.

Import-Module -Name Terminal-Icons

If you don't remember how to access the profile file, run the command code $PROFILE. Then, you'll get something like this:

After doing this, reload the Windows Terminal and run the command dir. You will then be able to see the Terminal-Icons in action.

To dive deeper into more customizations and changes, access the official documentation: Terminal-Icons Documentation.

Note: If instead of the custom icons shown above, you see an icon like 󰛋, you need to change your default font in Windows Terminal to one of the fonts downloaded from nerdfonts.com, as mentioned earlier in this article.

Bonus - Adding the Posh-Git

Posh-Git is a module that integrates Git with PowerShell, providing additional information and functionalities related to Git. It is recommended to read the Posh-Git official documentation to understand the best ways to enhance your productivity when using it.

Remember, to use Posh-Git, you must have installed git previously on your machine beforehand.

Open the Windows Terminal as administrator and run the command bellow to install:

PowerShellGet\Install-Module posh-git -Scope CurrentUser -Force

Add the line below on you profile file.

Import-Module posh-git

Finally, if you want to further customize the appearance of your Windows Terminal, just use the appearance menu we saw in this article and let your creativity guide you. Remember that some settings may negatively affect your use of the tool.
So, you've run through important steps to customize PowerShell, update, and configure it. Now, your PowerShell looks much better than when we started, but it still has your unique flair. Explore the documentation and references to get more customizations, learn more about the power of Posh-Git, create aliases, and explore other functionalities in all installed modules. Feel free to send me feedback or share your opinion down below. See you.

Login com supabase

Lucas Frazao — Tue, 16 Jul 2024 18:55:07 +0000

Olá, me chamo Lucas Frazão. Trabalho como desenvolvedor de software (SWE) há 5 anos.

Nesse post nós iremos construir um fluxo simples de autenticação utilizando ReactJS (v.18.3) e Supabase. Durante a construção de aplicações pessoais, é comum precisarmos adicionar uma autenticação. Então, eu gostaria de te mostrar como você pode fazer isso utilizando supabase auth.

O que é supabase?

O supabase é uma alternativa open source ao Firebase que utiliza PostgreSQL. Isso significa que ele pode ser usado para diversos fins além de autenticação, como armazenar e organizar imagens e dados, construir aplicativos de chat em tempo real, gerenciar autenticação de usuário e muito mais. Você pode encontrar mais informações na documentação oficial: https://supabase.com/docs

Vamos comecar

Para manter as coisas simples eu escolhi o vitejs como ferramenta para montar o ambiente, npm como gerenciador de pacotes node e o typescript por gostar bastante da stack.

Disclaimer: Esse tutorial pode ser seguido utilizando tanto TypeScript quanto JavaScript.

Primeiro passo é construir nossa aplicação para conectar com o supabase, vamos lá.

Execute o comando:

npm create vite@latest

Vou utilizar "auth-supabase" como nome do meu projeto mas voce pode escolher livremente outro nome.

npm create vite@latest
? Project name: › auth-supabase

Selecione React como framework:

✔ Project name: … auth-supabase
? Select a framework: › - Use arrow-keys. Return to submit.
   Vanilla
   Vue
❯  React
   Preact
   Lit
   Svelte
   Solid
   Qwik
   Others

Selecione TypeScript (ou JavaScript) como variante:

✔ Project name: … auth-supabase
✔ Select a framework: › React
? Select a variant: › - Use arrow-keys. Return to submit.
❯  TypeScript
   TypeScript + SWC
   JavaScript
   JavaScript + SWC
   Remix ↗

Agora vamos navegar até a pasta do nosso projeto e limpar algumas coisas que o vite deixa pronto.
Execute o comando:

cd auth-supabase && code .

Você deve ver algo assim:

Agora, para simplificar a estrutura do projeto, vamos seguir algumas etapas. Começando com:
-> Delete a pasta src/assets.
-> Substitua todo o conteúdo do arquivo src/index.css pelo código abaixo:

*,
:after,
:before {
    box-sizing: border-box;

}

body {
    margin: 0;
    min-height: 100vh;
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

a, button {
    color: inherit;
    cursor: pointer;
}

-> Substitua todo o conteúdo do arquivo src/App.tsx pelo código abaixo:

import { FormEvent } from "react";
import "./App.css";

export default function App() {
    function handleSubmit(event: FormEvent<HTMLFormElement>) {
        event.preventDefault();

        const data = new FormData(event.currentTarget);
        const email = data.get("email")?.toString();
        const password = data.get("password")?.toString();

        console.log({ email, password });
    }

    return (
        <main>
            <h1>Sign in with supabase</h1>
            <form onSubmit={handleSubmit}>

                <label htmlFor="email">E-mail</label>
                <input 
                    type="text" 
                    name="email" 
                    placeholder="email@email.com" 
                    required 
                />

                <label htmlFor="password">Password</label>
                <input
                    type="password"
                    name="password"
                    placeholder="********"
                    required
                /> 

                <button type="submit">Login</button>
            </form>
        </main>
    );
}

Precisamos instalar as dependências, então execute:

npm install

Excelente! Se você não teve nenhum erro durante as etapas anteriories, nós podemos seguir com as configurações do supabase para nosso projeto.
Durante esse tutorial nosso foco será um fluxo tradicional de login, com username e senha mas, o supabase tem supor para login social. Se você se interessar por essa opção, pode conferir a documentação oficial que tem mais detalhes:
https://supabase.com/docs/guides/auth/social-login

Para instalar o supabase, execute o comando:

npm install @supabase/supabase-js

Podemos verificar se tudo deu certo através do package.json

Uma vez que completamos essa etapa, execute o comando abaixo para executar um servidor local da aplicação:

npm run dev

Então, você conseguir acessar a aplicação no browser através da urlÇ http://localhost:5173/ .
Você irá ver algo assim:

Vamos configurar nossa autenticação. Lembre se, é necessário criar uma conta no supabase para continuar com essas configurações.

-> Selecione "New organization"

-> Clique em "Create organization" e preencha todos os campos

-> Para criar um novo projeto, é necessário preencha todos os campos abaixo. Na parte de database password, você pode clicar em "Generate a password" e depois em "copy" para gerar uma senha automática, certifique se de manter essa senha guardada.

Você não precisar alterar nenhuma configuração no meun "security options", basta clicar em "Create new project" para continuar.
Agora o supabase está configurando nosso projeto.

-> No menu lateral, localize a opção "Authentication" e clique nela.

-> No meu de opções "Add user" selecione a opção "Create New User" para adicionar um novo usuário.

Observação: Durante esse tutorial vou demonstrar uma criação "direta" de um novo usuário, mas geralmente é recomendado priorizar a segurança em aplicações reais. Pensando nisso, caso deseja aplicar em uma aplicação pública, considere selecionar a opção "send invitation", que irá permitir o usuário confirmar seu cadastro, verificando a conta e trocando sua senha. Além disso, explore metódos diferentes de autenticação que o supabase oferece para encontrar aquele que se encaixa melhor com o seu cenário.

-> Preencha com email e senha. Então, selecione "Create user" e deixe marcado a opção "Auto Confirm User?"

O resultado esperado:

Agora nós temos um usuário para testar a conexão entre o supabase e a nossa aplicação. Vamos navegar até a página home e selecionar a opção "Connect".

-> Clique em "Connect", no lado direito da página.

-> Copie todo o conteúdo da aba .env

-> Na nossa aplicação, crie um arquivo .env e adicione os valores copiados anteriormente:

No Vite.js, as variáveis de ambiente são prefixadas com VITE_ por padrão. Você pode encontrar mais detalhes sobre as variáveis de ambiente na documentação oficial do Vite:
https://vitejs.dev/guide/env-and-mode

Agora, vamos criar uma função utilitária para o supabase. Vamos seguir os passos abaixo.

Criar uma nova pasta: Dentro do diretório src crie uma pasta com o nome utils.
Crie um arquivo TypeScript: Dentro da basta utils adicione um arquivo chamado supabase.ts.
Adicionando código: Cole o código abaixo dentro do seu arquivo supabase.ts.

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);

Agora finalizamos toda a configuração do supabase, vamos para integração.

Etapa final

Nós já temos os valores do email e senha armazenados em variáveis na função handleSubmit(), mas só utilizamos no console.log, então vamos fazer algumas alterações. Vamos refatorar essa função tornado ela assíncrona e adiciona um bloco try-catch.

async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const data = new FormData(event.currentTarget);
    const email = data.get("email")?.toString();
    const password = data.get("password")?.toString();

    try {
        console.log({ email, password });
    } catch (error) {
        console.error(error);
    }
}

Alguns benefícios ao utilizar try-catch em funções de submit e chamadas para api:

Prevenir fluxos inesperados: Capturando possíveis erros na submissão ou chamada da api, você pode manipular fluxos para melhorar a experiência do usuário.
Customização de erros: O bloco try-catch permite você prover mensages de erro ou feedbacks ao usuários dependendo do erro durante a submissão ou chamada à api.

Excelentes melhorias! Construindo essa manipulação de erros, podemos adicionar mais uma validação báisca antes do try-catch para evitar que valores undefined sejam passadas para a chamada da api.

if (!email || !password) return;

Agora, vamos importar a função supabase do nosso supabase.ts para dentro do arquivo src/App.tsx. Assim, nós podemos utiliza la dentro da função handleSubmit().

import { supabase } from "./utils/supabase";

/* code ... **/
async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const data = new FormData(event.currentTarget);
    const email = data.get("email")?.toString();
    const password = data.get("password")?.toString(); 

    if (!email || !password) return;

    try {
        const {} = await supabase.auth.signInWithPassword({ email, password });
    } catch (error) {
        console.error(error);
    }
}

É possível acessar duas propriedades através da função signInWithPassword(), error e data, nós iremos utilizar data para capturar o token na aplicação e error para retornar um erro para o usuário. Observer, nós alteramos o nome da variável data para response, pois já utilizamos uma variável chamada data dentro desse escopo.

const { error, data: response } = await supabase.auth.signInWithPassword({
    email,
    password,
});

Agora que já incorporamos um bloco try-catch e temos acesso ao objeto de erro, vamos adicionar uma validação condicional. Essa condicional irá determinar se iremos manipular o erro através de um throw new Error ou armazenar o token em local storage.

async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const data = new FormData(event.currentTarget);
    const email = data.get("email")?.toString();
    const password = data.get("password")?.toString();

    if (!email || !password) return;

    try {
        const { error, data: response } = await supabase.auth.signInWithPassword({
            email,
            password,
        });

        if (error) {
            throw new Error(error.message);
        } else {
            const accessToken = response.session?.access_token;
            localStorage.setItem("access_token", accessToken);
        }
    } catch (error) {
        console.error("occured an error:", error);
    }
}

Para verificar se tivemos sucesso no login, podemos verificar o local storage do navegador. Seguindo os após:

Abrir o developer tools:
- Windows: Pressione Ctrl + Shift + J simultaneamente.
- macOS: Pressione Command (⌘) + Option (⌥) + J simultaneamente.
Navegue até a aba "Aplicação".
No menu sidebar, à esquerda, selecione a seção "Local Storage".
Veja se encontra uma key chamada "access_token". A presença dessa chave e seu valor indica que tivemos sucesso no login. Você deve ver algo assim:

Bônus

Agora que nós estabelecemos um fluxo de login, vamos explorar como implementar a funcionalidade de deslogar.
O processo de deslogar é bem semelhante ao utilizado na função handleSubmit(). Basicamente, seguiremos o mesmo padrão e chamada. Observe o código de exemplo abaixo para mais detalhes da implementação.

async function handleSignOut() {
    try {
    const { error } = await supabase.auth.signOut();

    if (error) {
        throw new Error(error.message);
    }

    } catch (error) {
        console.error(error);
    }
}

É importante adicionar um botão que executa a função signOut().

<button type="button" onClick={handleSignOut}>
    sign out
</button>

Após clicar no botão de signOut(), você pode verificar que o fluxo de deslogar funcionou verificando novamente o local storage no seu navegador. O supabase utiliza local storage para armazenada objetos de autenticação, conforme o print, um fluxo de deslogar com sucesso irá deletar esse objeto criado pelo supabase.

Lembre se, a chava chamada access_token foi criada por nós anteriormente. Após deslogar, podemos remover essa chave para garantir que a sessão do usuário seja encerrada. Abaixo temos um exemplo de adicionar essa funcionalidade dentro do handleSubmit().

// Add this if you want to clear all localStorage
if (error) {
    throw new Error(error.message);
} else {
    localStorage.clear()
}

// Add this if you want to delete an especific key
if (error) {
    throw new Error(error.message);
} else {
    localStorage.removeItem('access_token')
}

Conclusão

Nós construimmos um fluxo de autenticação do usuário utilizando supabase na nossa aplicação. Esse tutorial cobriu algumas etapas importantes como inicialização e configuração do supabase, sign in, sign out e gereciamento do local storage. Agora nós temos um conhecimento sólido sobre como funcionar uma autenticação com o supabase.
Sinta se livre para customizar esse fluxo e explorar mais funcionalidades do supabase, além de deixar seu comentário ou me enviar um feedback!

Sign in with supabase

Lucas Frazao — Tue, 16 Jul 2024 18:55:04 +0000

Hello, I'm Lucas Frazao. I've been working as a software engineer (SWE) for the past five years.

In this post, we'll build a simple authentication flow using ReactJS (v.18.3) and Supabase. Building authentication flows is a common task in personal projects. So, I'd like to show you how to achieve this using supabase authentication.

What is supabase?

Supabase is an open source Firebase alternative that uses PostgreSQL. This means it can be used for various purposes beyond authentication, such as storing and organizing images and data, building real-time chat applications, managing user authentication, and more. You can find more information in the official documentation: https://supabase.com/docs

Let's start

To keep things simple, we will be using vitejs for our development enviroment, npm as the package manager, and typescript because... well, I like TS!

Disclaimer: This tutorial can be followed using either TypeScript or JavaScript.

So, first of all, we need a web application to connect with supabase, so let's do this.

Run command:

npm create vite@latest

The project was named as ''auth-supabase'' but you can choose another name.
Let's give a name to project:

npm create vite@latest
? Project name: › auth-supabase

Select react on framework options:

✔ Project name: … auth-supabase
? Select a framework: › - Use arrow-keys. Return to submit.
   Vanilla
   Vue
❯  React
   Preact
   Lit
   Svelte
   Solid
   Qwik
   Others

Select TypeScript (or JavaScript) from the variant options.

✔ Project name: … auth-supabase
✔ Select a framework: › React
? Select a variant: › - Use arrow-keys. Return to submit.
❯  TypeScript
   TypeScript + SWC
   JavaScript
   JavaScript + SWC
   Remix ↗

Let's navigate to the project folder and clean things up a bit.
Run the following command:

cd auth-supabase && code .

You should see something like this:

Now, to streamline the project structure, we'll perform some cleanup steps. Here's what to do:
-> Delete the src/assets folder.
-> Clear the content of index.css and paste the following code:

*,
:after,
:before {
    box-sizing: border-box;

}

body {
    margin: 0;
    min-height: 100vh;
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

a, button {
    color: inherit;
    cursor: pointer;
}

-> Clear the contents of App.tsx then past the following code:

import { FormEvent } from "react";
import "./App.css";

export default function App() {
    function handleSubmit(event: FormEvent<HTMLFormElement>) {
        event.preventDefault();

        const data = new FormData(event.currentTarget);
        const email = data.get("email")?.toString();
        const password = data.get("password")?.toString();

        console.log({ email, password });
    }

    return (
        <main>
            <h1>Sign in with supabase</h1>
            <form onSubmit={handleSubmit}>

                <label htmlFor="email">E-mail</label>
                <input 
                    type="text" 
                    name="email" 
                    placeholder="email@email.com" 
                    required 
                />

                <label htmlFor="password">Password</label>
                <input
                    type="password"
                    name="password"
                    placeholder="********"
                    required
                /> 

                <button type="submit">Login</button>
            </form>
        </main>
    );
}

It's necessary install the dependencies running:

npm install

Great! If you didn't encounter any errors during the previous steps, we can move on to configuring supabase in our project. While this tutorial will focus on a traditional username and password login, supabase also supports social logins. If you'd like to explore that option, you can refer to the official documentation here:
https://supabase.com/docs/guides/auth/social-login

To install supabase, run command:

npm install @supabase/supabase-js

We can verify if our project is set up correctly by checking package.json

Once we've completed these steps, run the following command to start the development server:

npm run dev

Then, you can access your application in the browser by visiting http://localhost:5173/ . You should see something like this:

Let's configure our auth. Remember, it's necessary to create an account on supabase to follow up this post.

-> Select new organization

-> Click "Create organization" after filling out the form.

-> To create a new project, fill out all the fields in this form. For the database password, you can click "Generate a Password" and then "Copy" to securely store the generated password. This password is critical for managing your project, so be sure to keep it safe.

You don't need to change the security options for now. Just click "Create new project" to proceed.
Now, the project is setting up.

-> In the sidebar menu, locate the "Authentication" option and click on it.

-> From the user management options, select "Create New User" to add a new user.

Disclaimer: While this tutorial demonstrates creating a new user directly, it's generally recommended to prioritize security in real-world applications. For increased security, consider using the "send invitation" option, which allows users to self-register and verify their email addresses before gaining access. Additionally, explore alternative authentication methods like social logins or passwordless authentication to best suit your specific security needs.

-> Enter your email address and password. Then, select "Create user" and make sure to check "Auto Confirm User?" .

The expected result:

So, now we have an user to test the connection between supabase and our application. Let's navigate back to the home page and select the "Connect" option.

-> Click on "Connect", on right side.

-> Copy all content in this code block

-> In our application, create a .env file, then paste the code on it:

In Vite.js, environment variables are prefixed with VITE_ by default. You can find more details about environment variables and modes in the official Vite documentation:
https://vitejs.dev/guide/env-and-mode

Now, let's create a utility function to connect with Supabase. Here's what to do:

Create a new folder: Inside the src directory, create a new folder named utils.
Create a TypeScript file: Inside the newly created utils folder, create a new file named supabase.ts.
Add the following code: Paste the code snippet you want to add to supabase.ts below.

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);

Now that we've finished configuring everything, let's move on to final stage.

Final stage

We already have the email and password values stored in variables, and they're currently being used for logging and potentially within the handleSubmit(), but let's make some changes. Let's refactor this function to be asynchronous and incorporate a try-catch block.

async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const data = new FormData(event.currentTarget);
    const email = data.get("email")?.toString();
    const password = data.get("password")?.toString();

    try {
        console.log({ email, password });
    } catch (error) {
        console.error(error);
    }
}

Benefits of using try-catch with form submissions and API calls:

Prevents unexpected crashes: By catching potential errors, you can gracefully handle them and avoid disrupting the user experience.
Custom error handling: The try-catch block allows you to provide informative error messages to the user in case of issues during form submission or API interaction.

Great improvement! Building on error handling, let's add some basic validation before the try-catch block to prevent undefined values from causing errors.

if (!email || !password) return;

Now, let's import supabase function from our supabase.ts into the src/App.tsx file. Then, we can utilize it within the try-catch block of the handleSubmit function.

import { supabase } from "./utils/supabase";

/* code ... **/
async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const data = new FormData(event.currentTarget);
    const email = data.get("email")?.toString();
    const password = data.get("password")?.toString(); 

    if (!email || !password) return;

    try {
        const {} = await supabase.auth.signInWithPassword({ email, password });
    } catch (error) {
        console.error(error);
    }
}

It's possible to use two properties from signInWithPassword(), error and data, we'll use both, data to set token on application and error to return an error to user. Look, we changed the name of data to response, because we already use a variable called data.

const { error, data: response } = await supabase.auth.signInWithPassword({
    email,
    password,
});

Now that we've incorporated a try-catch block and have access to the error object, let's add a conditional statement. This statement will determine whether to throw the error or set the token in local storage based on the outcome of the signInWithPassword function.

async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const data = new FormData(event.currentTarget);
    const email = data.get("email")?.toString();
    const password = data.get("password")?.toString();

    if (!email || !password) return;

    try {
        const { error, data: response } = await supabase.auth.signInWithPassword({
            email,
            password,
        });

        if (error) {
            throw new Error(error.message);
        } else {
            const accessToken = response.session?.access_token;
            localStorage.setItem("access_token", accessToken);
        }
    } catch (error) {
        console.error("occured an error:", error);
    }
}

To verify a successful login, we can check your browser's local storage. Here's how:

Open the developer tools:
- Windows: Press Ctrl + Shift + J simultaneously.
- macOS: Press Command (⌘) + Option (⌥) + J simultaneously.
Navigate to the "Application" tab.
In the left sidebar, locate the "Local Storage" section.
Look for a key named "access_token". The presence of this key and its corresponding value indicate a successful login. You should see something like this:

Bonus

Now that we've established the sign-in workflow, let's explore how to implement sign-out functionality.
The sign-out process shares a lot in common with handleSubmit(). In essence, they follow a similar pattern or approach. Check the code example below for a detailed implementation.

async function handleSignOut() {
    try {
    const { error } = await supabase.auth.signOut();

    if (error) {
        throw new Error(error.message);
    }

    } catch (error) {
        console.error(error);
    }
}

It's important to built a button to call signOut function.

<button type="button" onClick={handleSignOut}>
    sign out
</button>

After clicking the sign-out button, you can verify that the sign-out process was successful by checking your browser's local storage. Since Supabase uses local storage to store authentication tokens, a successful sign-out will result in the deletion of the corresponding token object.

Remember, the key named access_token was created by us to store token. After signing out, we could to remove this key to ensure a clean and secure session termination. Here's a validate you can add within the handleSignOut() function to achieve this:

// Add this if you want to clear all localStorage
if (error) {
    throw new Error(error.message);
} else {
    localStorage.clear()
}

// Add this if you want to delete an especific key
if (error) {
    throw new Error(error.message);
} else {
    localStorage.removeItem('access_token')
}

Conclusion

We've built a secure user authentication flow using Supabase in our application. This guide covered essential steps like supabase initialization, sign-in, and sign-out with local storage management. Now you have a solid foundation for user authentication - feel free to customize it for your project's needs and explore more supabase functionalities!

[PT-BR] Os atalhos mais utilizados no Visual Studio Code

Lucas Frazao — Mon, 23 Jan 2023 15:55:12 +0000

Photo by Fernando Hernandez on Unsplash

O Visual Studio Code é um editor de texto open source, leve, bastante completo e um dos mais utilizados em 2020 na construção e manutenção de aplicações web.
Decidi então fazer esse post com o objetivo de trazer para vocês alguns atalhos que me ajudam e mais utilizo no meu dia a dia e se caso quiser conhecer mais atalhos aqui está a documentação oficial.

Criar um novo arquivo: Ctrl + N
Abrir arquivo: Ctrl + N
Salvar arquivo: Ctrl + S
Fechar editor/instância: Ctrl + W
Pesquisar por palavras: Ctrl + F
Abrir o terminal integrado: Ctrl + '
Abrir um novo terminal: Ctrl + Shift + '
Pesquisar por arquivos: Ctrl + Shift + P
Selecionar todas as palavras iguais para edição: Ctrl + Shift + L
Replicar linha que está o cursor para cima ou para baixo: Shift + Alt + ↑/ ↓
Comentar um bloco selecionado: Shift + Alt + A
Formatar documento: Shift + Alt + F
Mostrar paleta de comandos: F1
Procurar por um arquivo: Ctrl + P e digitar o nome do arquivo

Espero que esses comandos possam te ajudar também. Para baixar o Visual Studio Code, basta clicar aqui e será redirecionado para a página oficial.