Criar sistema de autenticação profissional com React Native e Supabase

o nosso projeto como ter cadastro de usuários com Expo router usando aí um banco de dados com post grass Kell então cadastrar um usuário fazer o login do usuário fazer o fluxo se o usuário tá logado persistência de autenticação do usuário e também usando o supabase Então se prepara que o vídeo de hoje tá sensacional fala Turma Então seja muito bem-vindo a mais um vídeo aqui no canal e se prepara que o que o conteúdo que eu separei aqui hoje a gente vai fazer muita coisa legal tanto com o Expo router o Expo aqui com

o typescript e também com supa base como que a gente consegue criar um fluxo dentro do aplicativo ter parte de login cadastro de usuário com banco de dados ali usando o supa base e também tratar essas rotas né exibir quando usuário tá logado como salvar e persistir a sessão do usuário Então bora lá se prepara aí que tem muito conteúdo legal já pega aqui curte esse vídeo aqui embaixo deixa seu gostei compartilha com seu amigo que ajuda a gente a continuar né trazendo mais conteúdo para você curte aí e se inscreve que eu sei que

você fica acompanhando e ainda tem preguiça de se inscrever Então bora lá bora começar o vídeo aqui a primeira coisa que a gente vai fazer aqui eu vou criar o projeto do zero a gente vai fazer a primeira parte estrutural visual ou seja o layout a parte de login de cadastro depois a parte funcional que é de fato comunicar com o serviço cadastrar o usuário logar o usuário a funcionalidade né pra gente dividir em etapas e ficar bem legal então primeiro eu vou criar o nosso projeto tá com Expo aqui então vou vir aqui dentro

abre aí na pasta que você quer lembrando não abre dentro de pastas com acento Então coloca aqui o npx Create Expo app eu vou dar um espaço menos t T PR ele criar aqui um template já pra gente tá então menus T aqui ele vai sugerir deixa eu dar aqui um Y para permitir a instalação é alguns templates que ele já vem a gente vai usar aqui tá o navigation que é Basicamente já com o Expo router configurado Então vou dar aqui um enter é e o nome do meu App o nome do meu App

vai ser supabase tá pode ser o nome que você quiser tá então esse vai ser o nome do meu aplicativo e a gente vai aguardar um pouquinho aqui enquanto ele tá instalando aqui vai lá mais uma vez conferir se você se inscreveu hein show de bola já criou aqui então agora vou acessar aqui o CD sup base certo e aí a gente vai dar um code espaço ponto só para mim n abre aí a pasta do seu projeto que você criou dentro do seu vs code Deixa eu só puxar aqui um pouquinho pra gente deixar

no jeito eu vou usar o emulador você pode usar o emulador ou rodar direto no seu celular com o Expo sem nenhum problema então agora a gente criou aqui se a gente olhar um pouquinho a estrutura de pasta que ele vem ele vem com a pasta app ou seja ele vem com o nosso file System rotting né que o que o Expo holder propõe pra gente que é criar as pastas aqui dentro dessa pasta app que vão ser rotas na nossa aplicação Então a gente tem uma aula só sobre Expo router aqui no nosso canal

se você não conhece vou deixar passando no card pra gente não reexplicar tudo desde o zero tá então Além disso ele tren aqui os assets onde ele tem algumas imagens dentro aqui ele tem a pasta components que onde a gente vem alguns componentes que ele vem pré-criado já e a gente vai apagar tudo isso aqui tá Então dentro de components ó seleciona tudo isso aqui ó todos esses componentes que vem dentro aqui do components até a passa testes pode vir aqui e deletar tá vou deletar tudo isso aqui então Ó só ficou a pastinha componentes

vazia dentro de constantes ele vai ter aqui uma constante com algumas cores já pro seu aplicativo aqui a gente pode manter só vou renomear aqui ó tá para Colors minúsculo beleza e aí vou até renomear aqui vou deixar aqui ó nesse Export default aqui e eu vou colocar para vocês aqui só pra gente não e perder tempo tá então a gente vai colocar algumas cores zinc Black White e Green e Grey né de Cinza ali então coloquei algumas cores aqui pra gente criar o nosso aplicativo em cima dessas cores Beleza então criamos aqui nossas corzinha

do tema para ficar mais fácil pra gente utilizar dentro de constantes são algo que não vai mudar na Nossa aplicação tá então são variáveis constantes aí legal Além disso né a gente pode vir aqui dentro do app ele vem já com alguma estrutura em Tab né a gente não quer então Tab aqui ó vou deletar toda essa Tab bar dentro aqui esse mais HTML mais notf modal delet isso aqui também que não faz muito sentido pra gente ficou só o arquivo layout aqui dentro tá o arquivo layout pode dar um cont control a delete Vamos

criar do zero isso aqui não tem nenhum problema então Export default default Vamos dar um function aqui vou chamar aqui então de layout ou vou chamar de Main Main layout tá return e aqui a gente vai retornar de fato o nosso layout que é Nossa stack que eu vou criar aqui um um tipo em navegação em stack que a gente vai e utilizar do Expo router então Import from Expo router aqui e você traz do Expo router aqui o stack beleza é esse cara que a gente vai utilizar aqui dentro do stack a gente vai

ter de fato as nossas páginas E aí como é que a gente vai ter né primeiro aqui dentro do app eu vou pegar aqui ó vou só Salvar esse arquivo aqui salva o nosso layout eu gosto de pegar aqui criar uma uma pasta dentro aqui na raiz chamada src e mover a nossa pasta app lá para dentro ó vou dar um move Então agora temos src dentro a nossa app e dentro do nosso layout tá aqui dentro agora então dentro desse app a gente vai criar um New file que vai ser o nosso index.tsx que

vai ser o nosso primeiro componente componente principal componente por enquanto de login então Export RN funk aqui só pra gente criar um componente vou chamar aqui de login Vou importar aqui também o nosso text Vou importar aqui o Style sheets também a gente pode criar aqui uma View colocar aqui um text página login beleza Tá e depois aqui já vou dar um con Styles iG Style sheet P Create a gente abre aqui pra gente criar os nossos estilos Beleza então colocamos aqui salvamos aqui a nossa primeira página chamada login agora dentro do nosso layout a

gente vai ter Então as nossas rotas aqui né então dentro do nosso layout eu posso estipular quais serão as nossas rotas então eu vou ter aqui o nosso stack P screen vou dar um Tab aqui já para el já que ele me sugeriu pra gente completar eu não quero que tenha um reader Então vou dar um header sh falso dentro das options e o name dela é o nome do arquivo né que a gente chamo de index aqui para ele mapear essa rota aí eu vou salvar aqui o nosso layout Maravilha salva aqui o nosso

componente com a primeira maiúscula e a gente pode rodar o projeto Então agora que eu tô dentro da pasta do meu projeto no cmd a gente roda o nosso famoso npx Expo start para startar o nosso projeto aqui então aqui o que a gente fez por enquanto foi só zerar e a estrutura padrão que vem o Expo ó apareceu o QR Code como eu tô no no Android ó aperte a tecla a para abrir no Android Então abre no Android né então agora ele vai carregar no Android a gente Zerou a estrutura pra gente começar

do zero com uma estrutura limpa né e não com aqueles componentes lixo que ele vem criado ali por padrão a gente criar a estrutura Nossa do zero Então deixa ele carregar aí maravilha se a gente voltar ó página login então a gente já tem a nossa primeira página mapeada legal uma coisa que a gente pode começar a fazer aqui é estruturar um pouquinho as nossas grupos de rotas que a gente vai ter então por exemplo dentro da nossa aplicação aqui eu vou ter dentro uma nova pasta dentro desse app abre e fecha parênteses para ser

apenas um grupo de rotas onde vai ser por exemplo as rotas do vou chamar de panel tá vai ser as rotas de quando o usuário tá logado então aqui dentro eu vou criar mais uma pasta dentro dela chamado por exemplo profile e dentro de profile New file page.ts por exemplo tá E aí aqui dentro vou dar aqui um RN funk vou até copiar né copiar aqui do nosso index ó criar aqui só um estilo ó container beleza V dar aqui um Flex e vou alinhar no centro e vou dar aqui um Style Styles container vou

copiar nossa página de login Vou salvar e lá na nosso profile page eu vou colar aqui só que eu vou mudar aqui o nome para profile né E aqui vai ser página perfil Beleza então a gente criou agora a nossa página profile salvei posso fechar salva aqui o nosso login também posso fechar e agora aqui dentro do nosso e projeto a gente tem um app dentro a gente tem um grupo de Rot onde Dentro dessa pasta panel a gente vai ter todas as rostas de usuário logado por enquanto a gente só tem uma profile e

uma page beleza que vai ser o componente dele legal e eu posso criar também ó dentro do app uma New Folder abre e fecho parêntese também né dentro do app chamado al que vão ser as rotas de usuário que não tá autenticado por exemplo Ah você aqui é uma rota de login se aqui é uma rota de cadastro uma rota de recuperar senha que seja foi ficariam aqui dentro para ficar organizado tá então dentro do panel seria as rotas de usuário logado dashboard sei lá qualquer rota do seu aplicativo né Agora dentro do Alf seri

o grupo de rotas de usuário só para ficar separado então aqui dentro do Alf eu vou criar aqui mais uma pasta seguindo o mesmo padrão chamar de sign up né de cadastro dentro do al al signup dentro do signup New file page.ts né vou colar aqui o componente e vou chamar aqui de sign up beleza e aí vai ser página cadastro né só pra gente ver isso aqui salvamos isso aqui agora agora a gente criou o componente do signup tá e criamos O componente também do profile primeiro eu preciso lá dentro do nosso estrutura de

layout da nossa aplicação falar que a gente tem essas rotas para ele mapear então eu vou copiar aqui nosso stack screen vou colocar a próxima aqui que a gente vai ter que é o nosso off aqui signup barra page que é a página ó a gente criou al sign up do jeito que tá escrito e dentro temos o page Então mapeamos dessa forma vou duplicar de novo e a gente tem o profile né agora vai ser o nosso P panel que eu escrevi dessa forma tá depois do panel a gente tem o nosso barra profile

e depois o profile dentro do profile a gente tem o nosso page Então dentro do profile a gente tem o nosso page aqui vou salvar isso aqui agora salvei uma coisa que pode acontecer tá vou dar um cont control M aqui ó e um Reload Deixa eu só verificar é que é importante acontecer isso para você olhar tá Eh vamos esperar que ele atualizar Ah já atualizou mas caso aconteça dele não reconhecer a rota o nome que a gente colocou é você pode parar de rodar o seu projeto e só rodar de novo porque às

vezes o Expo hter não encontra já que a gente criou novas rotas aqui dentro e grupo de rotas tá então já no meu caso ele reconheceu normal sem problema no Cuidado que eu chamei de painel dentro de parênteses Então tem que ser da mesma forma aqui eu chamei de al dentro de parênteses aqui tem que ser da mesma forma Beleza então criamos as rotas que eu vou ter na minha aplicação começa com o nosso index que é a página de login temos a página de cadastro e temos também a nossa página de profile que vai

ser depois usada quando o usuário logar perfeito então maravilha vamos começar então primeiro a parte visual agora entendendo né criando a nossa página aqui de login então pra gente começar Bora lá primeira coisa que a gente vai fazer vamos criar os campos aqui o input daquela forma que a gente viu e deixou para vocês lá no início do vídeo aqui então esse nosso contêiner aqui que a gente colocou eu vou deixar apenas aqui para ele Ó vou deixar apenas que ele vai ter aqui um Flex um vou dar aqui um pading top de uns 34

Vou colocar aqui um background para ele de Colors vou dar um Tab aqui ó no Colors deixa eu ver se ele já importou para mim ó hã importou aqui para mim eh deixa eu ir lá no nosso constantes novamente Colors aqui ó temos nosso Colors só que vamos chamar aqui de Colors né Colors aqui tudo minúsculo Colors ponto E aí vamos mandar aqui vamos dar o fundo aqui de zync salvei aqui ó já pegou o zinc do nosso fundo beleza e dentro agora do nosso layout inteiro aqui a gente vai ter o reader na nossa

aplicação Então vou dar aqui uma View vou dar aqui um Style vamos dar aqui um Style Styles P reader e dentro do reader da nossa aplicação eu quero ter aquele logo do projeto que vai ser praticamente o título dele a gente chamou de Dev app tá só que a gente vai ter um dois duas cores diferentes Então vai ser Dev E aí aqui dentro eu vou colocar outro text que vai se chamar app então Style Styles P logot Text e aqui dentro desse outro text a gente vai ter um Style abro duas Chaves e vou

colocar aqui direto mesmo color Colors P Green só para separar isso aqui então vamos primeiro começar no nosso reader vírgula reader aqui o reader eu quero apenas dar um espaçamento para esse cara então vou dar aqui um espaçamento pading left de 14 um pad right de 14 para garantir que nada fique grudado vírgula logo text aqui que a gente criou cuidado com o nome que você deu para ser exatamente o nome tá Style aqui e aí o logo text vou dar aqui um fon size para ele uns 20 fontes como bold para ficar e vamos

deixar aqui o padrão vai ser a cor branca né então bold vírgula color Colors PW pra gente acessar lá nossa grupo constante de Colors cor brancoa já tá ali ó Dev App legal perfeito né Além disso margem bottom para caso ten alguma coisa embaixo então margem Bottom de oito aqui e embaixo do nosso logo ainda dentro do heer aqui eu quero ter um slogan que a gente chama né Vou colocar aqui um text puro mesmo e e esse text por exemplo pode ser colocar uma frase impactante o futuro da programação beleza e aí a gente

pode dar aqui também um estilo para ele então Style Styles slogan Maravilha e vamos lá estilizar rapidão esse slogan só deixar branco né e maior slogan Font size aqui vamos dar aqui para ele uns 34 color Colors P White e a gente pode pegar aqui também um margem botton colocar aqui para ele uns 34 tá então lá o futuro da programação agora embaixo Vamos colocar o nosso formulário para pro usuário poder fazer de fato o login então depois do nosso reader depois você pode até separar isso aqui em um componente claro né mas depois do

nosso reader aqui a gente pode ter Ultra View ou seja Outra área na minha aplicação no layout que vai ser vou dar um Style para ele styles.of por exemplo e dentro do formulário O que que a gente vai ter a gente vai ter os campos para usuário preencher então eu vou criar aqui mais uma View que vai ser como se fosse um Field set né para agrupar cada formulário então cada item do meu formulário vai ter um um um Label que vai ser por exemplo e-mail né pro cara saber o que que ele tem precher

embaixo um text input deixa eu dar um Tab aqui ó ele importa o text input aqui para mim beleza o text input a gente fecha ele direto eu vou passar a propriedade Place holder que vai ser digite seu e-mail três pontinhos o Style Styles P input e aqui vou copiar até esse nome aqui ó Style e a gente pode dar também o estilo pro texto aqui de cima Styles P Label aqui no e-mail tá então a gente criou ó form dentro do form agora a gente criou uma View com um texto e um text input

vou copiar esse viio aqui embaixo ó e eu vou colar de novo o de baixo vai ser senha e aí Digite sua senha três pontinhos mesmo estilo a gente vai aplicar pro text input depois a gente quer um botão né pro cara alogar eu vou importar aqui do um pressable que é um item clicável então depois disso aqui ó depois da View depois outra View dentro do form ainda a gente vai ter de fato o nosso pressable que vai ter um text ali dentro que vai ser aqui por exemplo vou dar um Style Styles pbon

text que vai ser entrar né ou acessar tanto faz né e a gente pode também dar um Style aqui pro nosso botão chamado Styles pbon então agora vamos criar esses estilos se a gente salvar isso aqui agora vai aparecer tudo aqui sem nenhum estilo Então vamos começar por quem tá em volta de de tudo né é a nosso form vamos lá vírgula form o form eu quero fazer o qu eu quero que ele pegue o resto da tela e que seja um fundo branco então Flex 1 background color Colors P White pra gente acessar nossas

cores ó se a gente salvar isso aqui agora salvei aqui Opa background background color né senão não vai aplicar Agora sim eu quero arredondar em cima na direita e na esquerda para ter um efeito legal então border top left radi Olha que legal a iak já sugeriu para mim então vou colocar aqui ó eh uns 16 para arredondar na esquerda em cima e 16 para arredondar na esquerda na direita em cima um pad em top de 34 pra gente distanciar um pouquinho né mas aqui não precisa ser tão grande Vamos colocar uns 24 um pading

left de 14 e um pading right de 14 Então vou salvar isso aqui agora e ó na esquerda ficou arredondado na direita também e a gente criou já um espaçamento na esquerda também interno ó que é o pading left e é internal elemento para não grudar os le né os campos aqui e na direita também Caso chegue no final beleza próximo passo é a gente fazer o nosso Label que basicamente esse textinho em cima do input então vírgula que vai ser um Label a gente pode dar aqui para ele um color Colors ponto vamos dar

aqui um Zin acho que vai ficar legal vírgula mar Margin Bottom Vou colocar aqui de quatro para dar um distanciamento aqui embaixo e aí a gente pode criar agora pro nosso input vamos lá e vírgula o nosso famoso input né o input a gente pode dar uma bord um só para deixar aqui uma bordinha legal posso diminuir um pouquinho essa cor colocar uma cor aqui cinza uma borda radius de 8 um margem bottom para distanciar de 16 um pad interno ao elemento aqui a gente pode dar aqui um pouquinho mais a gente pode dar um

pading horizontal quer dizer na esquerda e na direita de oito e um pading top de 14 e um pading bottom de 14 também que é em cima e embaixo para ficar um pouquinho maior aqui o nosso campo ó olha que legal tá então perfeito aqui como é o nosso campo de password se quiser né na senha para não ficar mostrando a senha você pode vir no seu text input e passar a propriedade Secret text entry aqui dentro como uma propriedade isso aqui apenas deixa a visível aqui pro usuário quando tá digitando como uma bolinha tá

então só para ficar bonito mesmo então agora que mais que falta o botão acessar né então o nosso Button vírgula Button aqui background Color Green pra gente ter aquele efeito vou pegar o mesmo espaçamento que a gente tem é no nosso input pra gente seguir um padrão né para ficar legal então o que eu vou fazer vou dar um espaçamento aqui um pading left top de 14 e um pading bottom Opa de 14 também pra gente ter um distanciamento igual podemos centralizar os itens no centro né centralizar no centro é Então vamos dar aqui uma

Aline items como Center pra gente centralizar eles vertical mas eu também quero horizontal então justify content como Center aqui cuidado ó com o minúsculo e maiúsculo aqui beleza e para ele saber o tamanho que tem do nosso botão é legal a gente dar um vírgula e passar aqui uma wif dentro de parênteses dentro de aspas aqui como 100% para ele saber qual que é o tamanho desse botão para ele conseguir aplicar eh a nossa estilização do flexbox no centro então se eu salvar isso aqui agora pode ser que o seu flexbox tenha bugado que tá

acontecendo isso nas últimas updates você vem aqui dá um Reload aqui para ver se ele já vai dar uma refrescada aí no estilo Olha lá já apareceu tá então isso tá acontecendo nas últimas versões já já eles vão resolver então vamos dar aqui uma vírgula border radius Vamos colocar aqui para ele oito um arredondamento legal aqui e agora pro nosso texto ó o buton text que faltou né o Butão text aqui vírgula a gente pode dar aqui para ele também um color Colors P zinc para ficar bacana beleza e Font size de 16 ponto Vou

colocar aqui como BOL e pronto a gente tem aqui o nosso acessar acho que 16 não vou colocar 14 aqui que é o padrão vou até tirar aqui a fonte size Vou deixar só eu acho que vai ficar mais bacana aqui se quiser mudar a cor ao invés do Zin outra cor que ficaria bacana é o o branco né o branco aqui também Ficaria legal então que mais que a gente pode ter aqui agora a gente pode ter também o nosso carinho o nosso link para poder Navegar pra tela de cadastro então a gente pode

criar aqui e importar do Expo do Expo router que a gente tem aqui o nosso link tá a gente pode trazer o link aqui e aí eu posso colocar por exemplo é embaixo do acessar a gente pode ter aqui o nosso link dentro aqui vai ser por exemplo um text que vai ser acessar ou ainda não possui uma conta cadastre-se Beleza então vai aparecer aqui no nosso link a gente pode passar uma propriedade href que é para onde eu quero levar o usuário Então se a gente olhar aqui ó se eu der um control espaço

geralmente ele me sugere Pode ser que o autocomplete não né não dê essa sugestão Mas aí a gente pode passar o caminho o caminho é aonde como é que a gente mapeou aqui a gente mapeou essa esse mapeamento aqui ó pro cadastro Então vou copiar e vou colocar aqui ó só que aí falta o barra né então vou levar você para essa página aqui então vou salvar isso aqui agora e olha lá já apareceu vou só passar aqui um Style para ele Styles P link e a gente pode estilizar aqui embaixo que é só centralizar

né então vírgula vamos dar aqui um Margin top de 16 vamos passar também aqui 16 ficou muito né Vou colocar aqui oito Vamos colocar aqui um text align como Center e pronto a gente já tem ele aqui né vou colocar 16 mesmo acho que 16 ficou melhor Beleza então agora se eu clicar aqui ó ele leva pra nossa página de cadastro agora Por enquanto né Depois a gente vai separar melhor a gente pode separar mais em Componentes mas por enquanto vamos fazer a nossa página de cadastro para isso eu vou copiar toda essa nossa página

Então vou dar um cont control a e vou copiar tudo ela vou fechar e a gente vai lá dentro do al signup e page E aí por enquanto a gente vai copiar isso aqui e colar mas a gente vai mudar algumas coisas aqui então a gente vê que a gente repete algumas coisas como o input que a gente pode separar em um componente não vou fazer isso aqui agora pra gente focar no que importa depois a gente pode enxugar ainda mais e melhorar esse projeto separando em Componentes Então dentro aqui vou mudar noss nome aqui

para sign up que era o nome antigo né sign UPE aqui dentro salvar só pra gente ver essa página ouar aqui em castre na pág aqui no noso castre esse o futuro da programação eu quero substituir para por exemplo novo criar uma conta por exemplo beleza ó já ficou mais legal eh aqui embaixo a gente vai ter mais um campo né então primeiro campo vou duplicar aqui pra gente ter mais um uma View aqui dentro tá E essa View o primeiro vai ser nome completo digite seu e-mail vai ser digite seu nome completo Ou só

colocar nome completo aqui que acho que já fica explicativo né auto explicativo nome completo e-mail e senha e aqui embaixo o botão vai ser eh cadastrar esse link aqui embaixo não vai existir beleza e em cima aqui do nosso Dev app que seria o nome do aplicativo que a gente tá construindo a gente pode colocar nemum botão de voltar então dentro do nosso header a gente pode criar aqui em cima do text um pressable e dentro vai ter um ícone Então vou pegar aqui ó e vou importar como a gente está no Expo o Expo

já tem a biblioteca do @ex Vector icons que traz alguns ícones uma biblioteca de ícones pra gente minha luz até apagou agora que eu vi então essa biblioteca Ela traz ó se a gente de um contol espaço aqui várias bibliotecas de ícone no caso eu quero usar o ion icons aqui beleza e a gente vai usar aqui dentro do pressable o nosso ion icons um Arrow back vou passar aqui a cor de fundo para ele legal E aí aqui pro nosso pressable vou dar aqui o Style Styles P back buton né então a gente pode

dar um estilo aqui para ficar em volta né um fundinho aqui pro nosso botãozinho de voltar então vamos lá vamos lá aqui último vou trocar Esse link não existe mais back Button e a gente vai colocar aqui tá para ele vou dar aqui um background color e a gente vai dar aqui um Colors pon Grey deixa eu ver como é que vai ficar vai ficar muito forte né então a gente pode dar aqui ó um rgba que seria uma cor com opacidade 255 255 255 que seria a cor branco só que a gente tem a

o a que é a opacidade vou dar aqui um 0 55% de Transparência né e eu quero que ele fique só o tamanho do botão e não Tente pegar o tamanho inteiro da tela então vírgula Aline S eu vou falar olha a linha esse elemento aqui como Flex start então para ele pegar apenas o início aqui do nosso elemento Vou salvar vou dar aqui um contrl m e vou dar um Reload aí então atualiza a sua aplicação só para ele refrescar ali os estilos Maravilha e a gente já tem o nosso iconz inho ali do

lado para isso eu também vou dar um pading de oito pra gente dar um distanciamento em todos os lados e um border radius aí para ele de oito também para ele ficar bem massa e vírgula Margin botton também de oito aqui para distanciar um pouquinho então a gente já tem aqui a nossa tela de cadastro tá já ficou bem legal não posso voltar ainda então agora como que a gente pode voltar então quando a gente clicar aqui numa no nosso ícone no nosso botão a gente tem um pressable dentro dele a gente pode aplicar aqui

o nosso foso onpress Ou seja quando você clicar eu vou fazer uma ação aqui diretamente Então vou colocar aqui uma função anônima que que eu quero a gente pode importar do Expo router porque agora eu não vou usar o link porque é um botão né poderia até usar um um um link com o botão mas eu quero usar de forma programática né ou seja funcional eu posso importar o router aqui dentro do Expo router E aí eu posso falar olha quando você clicar aqui ó você vai vir aqui no seu na sua função anônima do

onepress e você vai dar um router pon back o router pon back como até a descrição fala aqui ele vai voltar uma tela para trás na na nossa History ou seja na nossa pilha de navegação Olha só se a gente abre aqui ó cliquei ele volta vou dar um cont CRL m e um Reload presta atenção aqui como a gente tem uma navegação em stack a stack é uma pilha sempre vai abrindo uma tela na frente então se eu tô na minha rota principal que por enquanto é login se eu clico aqui ó abriu a

cadastro ou seja subi uma na frente da login chamada cadastro o er o router PB ele fala volta uma pilha para trás então ele desmonta a última que tá Ou seja a última que você tinha navegado então se eu clicar aqui ó ele volta pra nossa página é para trás que é a nossa de login Beleza então agora a gente já tem aqui as nossas duas partes e visuais basicamente e falta a parte funcional salvar isso aqui e vamos pro canço né pra gente primeiro cadastrar para depois a gente fazer o login então aqui dentro

primeiro preciso pegar aqui os dados que você digita no seu campo nome e-mail e senha primeira coisa Existem várias formas já mostrei para vocês aqui dentro do canal a gente pode usar o Zod para validar a gente pode usar o react Hook form que eu usaria né Se tivesse desenvolvendo não vou usar o react Hook form aqui para não ficar muito grande esse vídeo então a gente pode usar US state padrão então o que a gente vai fazer aqui é eu vou pegar aqui os dados que o usuário digita em cada campo então vou criar

aqui uma conche vou chamar aqui de e-mail set e mail e vou pegar aqui uma US State Vou importar ela vou subir esse Import do react como primeiro Import só por organização mesmo tá subir ele aqui depois disso eu quero também ter aqui uma US state é vou até colocar em primeiro chamada name set name que vai ser a primeira a última aqui vai ser do password né então password set password e também eu quero ter por exemplo uma load né const con loading set loading igual use state vai começar com falso Beleza então a

gente criou aqui os nossos estados que são algo dinâmico e mutável na nossa aplicação que a gente pode trocar o valor acessar o valor aqui dentro manipular o valor que tem aqui salvo aqui dentro então algo dinâmico aqui no nosso componente próximo passo é a gente falar olha o nosso primeiro campo aqui que é o nome eu vou passar o value ou seja o valor que vai estar dentro dele vai ser o valor que a gente tem dentro da nossa US state name então primeiro campo que é o do nome referente ao nome vai tá

atrelado a nosso US state name e o onchange text cuidado com o minúsculo eem maiúsculo a gente vai usar o setn então Toda vez que você trocar digitar alguma coisa ali dentro do name do nome completo que é desse primeiro input ou seja desse Campo aqui ó toda vez que eu digito alguma coisa a gente pega o valor e coloca dentro da nossa caixinha do nosso US state a gente vai fazer isso agora com os demais né então vou vir aqui ó no Gmail value vou atrelar ao nosso US state que a gente chamou Gmail

onchange Text e vou passar o set e mail também beleza pro senha a mesma coisa value password que é o nome do US State onchange Text e vou passar aqui o set password então Maravilha quando clicar no botão cadastrar onpress handle sign up aqui então Vamos criar essa função handle signup então quando eu clicar em cadastrar eu vou colocar aqui uma função inha function handle signup e eu vou dar aqui um console P log no nosso name no nosso e-mail e no nosso password beleza salvamos isso aqui agora vamos testar aqui agora vou clicar aqui

duas vezes no R ou dar um control M um Reload só pra gente atualizar aqui o nosso layout e garantir então salva aí o código cuidado com os minúsculos e maiúsculos Opa Às vezes o o exp ele dá uma bugada deixa eu abrir aqui de novo puxar aqui pro lado e vamos lá cliquei aqui vou fechar vou abrir aqui e vou clicar no supa base de novo só para ele carregar minha app de novo vamos lá beleza vou clicar aqui e vou clicar aqui e vou preencher então Mateus email vai ser teste @test comom 1

2 3 1 2 3 ó uma coisa que já tá acontecendo que já Opa é um sinal que a gente precisa melhorar exp do usuário como o nosso teclado ele tentou subir Mas a nossa interface já tá no no limite aqui a gente não consegue ter um scroll não consigo ter um scroll então é interessante que a gente faça algumas alterações né que é colocar um scroll nessa tela Então a nossa tela aqui é de cadastro que é uma tela que tem mais Campos e poderia até ter mais campos no cadastro a gente pode falar

aqui ela vai ter alguns itens a mais aqui dentro então o que que a gente vai fazer ó a gente vai pegar aqui primeiro vamos dar uma save vamos importar aqui uma Safe area view do react n clicou aqui aqui tá abre e fecha aqui e eu lá no na última tag ó fora da View a gente fecha ela Maravilha e para ela como agora ela tá em volta de todo mundo a Safe area vi vai garantir uma área segura aqui do nosso item se você tiver no iPhone por exemplo a gente vai vir aqui

então e vamos dar aqui para ela no Style abro duas Chaves e vou falar olha você vai ter aqui um Flex um ou seja pega o tamanho inteiro da tela que você conseguir tá é isso que a gente vai fazer mas isso não resolve o problema do nosso scroll então eu posso importar também do nosso aqui ó vou dar um monte de vírgula aqui ó nos imports a gente pode dar uma vírgula e importar o famoso scroll View que é tornar algo com o scroll ter uma área scroll né então eu vou vir aqui ó

dentro aqui a gente tem Nossa View que é a nossa interface ó dentro da Safe area View vou copiar toda essa esses itens dentro da Safe area View copia vou apagar ficou só a Safe area View E aí eu vou dar aqui o nosso scroll View scroll View que a gente importou eu vou passar o Style abro duas Chaves e vou passar aqui o Flex 1 PR ele tentar pegar o tamanho inteiro da tela e agora dentro da scroll viw eu vou colar o nosso componente aqui salvo aqui vamos salvar para testar cliquei aqui no

senha no meu caso ó agora tá vendo que agora eu consigo fazer um scroll Zinho da tela porque agora eu posso ter um scroll na minha tela Então já fica melhor a experiência poderia até dar mais um espaço aqui mas agora a gente já consegue rolar caso precise a gente consegue fazer esse scroll Zinho aqui beleza e outra coisa que a gente vai fazer na nossa scroll View eu vou dar uma vírgula background color aqui para ela Colors P White então ele vai ter uma cor de branco aí no fundo Beleza então agora toda a

nossa interface já tá funcionando aqui já tem a parte visual agora a gente pode testar novamente Mateus Vou colocar aqui teste @ test.com 1 2 3 1 2 3 agora eu posso fazer o scroll posso até clicar aqui ó clicamos em cadastrar se a gente olhar aqui agora e-mail name e password então a gente já tá pegando o que você digita nos seus Campos era isso que a gente queria Então antes da gente fazer agora a parte funcional que é de fato cadastrar o usuário vamos pegar só e trazer esses dados aqui também lá para

nosso página de login que é os nossos US state Então o que a gente vai fazer é vou copiar esses US States que a gente tem aqui tá menos o name né só o e-mail o password e o loading vou copiar vou lá no nosso index que é a nossa página de login e eu vou trazer para cá tá então a gente também vai ter aqui ó vou importar o nosso US state então importamos ele aqui também quero ter uma função function handle sign in que é para fazer o login beleza por enquanto não vou

fazer nada e aí o que a gente vai fazer é atrelar aos nossos Campos então primeiro no nosso input de e-mail a gente vai atelar value e-mail e Set On Change text set email no campo de senha mesma coisa value password e on Change text pass set password então agora a gente fez a mesma coisa que a gente fez na página de cadastro ou seja tudo que você digita nos campos de de nome e-mail e sem a gente vai salvando os dados dentro dos nossos US state para quê pra hora que a gente for clicar

no botão de cadastrar como a gente fez aqui no signup eu coloquei um console log aí a gente consegue então acessar esses dados o que que o usuário digitou no campo e-mail senha ou nome então a gente consegue ter acesso através da primeira propriedade do US state então através dessa propriedade eu pego que tem lá dentro salvo dentro desse US state Beleza então a gente já fez isso agora a gente fez isso com o login Então vou salvar aqui o o handle o login novamente e só atrelar aqui o handle sign in ao nosso botão

Então quando você clicar em acessar eu vou dar aqui o onpress para a nossa função que eu chamei de handle sign in aqui na nossa tela de login Beleza então ó maravilha agora vamos fazer a parte funcional então salvamos aqui agora vou fechar todas essas telas aqui pra gente começar a nossa parte funcional Beleza então primeira coisa que a gente vai fazer aqui é configurar o supabase na nossa aplicação Então você vai acessar aqui o supabase tá então você vai vir aqui no supabase você vai fazer o login no supabase tá ele tem é o

plano gratuito você não precisa colocar é nada aqui dentro né Não nenhum cartão de crédito o plano gratuito é sensacional porque é bem grande então dá para fazer muito projeto dá para ter bastante acesso no seu projeto até que você tenha que pagar algo tá então crie a sua conta aí depois que você logar na sua conta você vai cair basicamente nesse dashboard só que claro você não vai ter nenhum projeto aqui e a gente vai então criar um novo tá então ó New Project vai escolher a sua organização que você criou na hora que

você criou a conta senão você cria aqui uma nova organização Zinha se você não tem nenhuma tá então New Project V selecionar aqui a minha nome do Projeto vai ser eh app YouTube Database aqui ó vou gerar uma Database tá gerei um aleatório aqui que clicando nesse botão ou crie uma senha forte vou até copiar aqui essa Database e eu vou colar aqui ó caso a gente precisa né então Salvei a a senha do meu banco aqui que é a senha do seu banco de dados caso a gente precise aqui você pode até selecionar se

você quiser Brasil vou deixar tanto faz aqui e aí eu posso dar aqui um Create New Project Beleza então agora ele vai criar aí o seu projeto dentro é do dashboard supabase então ele vai inicializar o banco de dados o sistema de autenticação que é o que é muito legal né então o o supabase é como um Fire base ali então ele é um serviço ele tem ali a parte de autenticação ou seja cadastro de usuário é sistema de login envio até de mail se você quiser quando cadastrar um usuário tudo isso a gente consegue

ter acesso dentro do supabase outra coisa é que ele tem o banco de dados é um banco de dados post grass Kell que é o que é mais interessante né então a gente consegue ter um postgress atrelado a um sistema de usuário e também a gente tem um Storage aqui dentro se a gente entrar no supabase aqui a gente olhar aqui eh a parte de preços né O que é interessante aqui olha só que legal né ele tem aqui a parte 50.000 usuários ativos por mês você não paga nada 50.000 usuários ativo É muita gente

né então outra coisa é ilimitada api request Ou seja você pode fazer ilimitada eh requisições da sua api tá C 5 GB de banda então é muita coisa também tá e 1 GB de Storage né 1 GB de Storage é a parte de salvar imagem vídeo então se você salva muita imagem talvez você vai precisar pagar mas pô 1 GB é bastante ainda mais que se você trabalha com um serviço desse você pode fazer otimização para salvar a imagem menos pesada possível né então é muito legal então agora uma coisa importante a gente vai continuar

a estrutura mas antes da gente usar o projeto você precisa verificar uma coisa tá vendo aqui ó que a gente acabou de subir o projeto né Acabei de criar com vocês ele tá aqui ó Project status se eu clicar aqui ó você vai ver que ele tá coming up né ou seja ele tá cadastrando ele tá criando tudo e enquanto esse Project status não tiver verdinho tudo certinho A gente não vai poder usar esse projeto né então ele demora ali uns 10 minutinhos no máximo 5 minutos né já que a gente acabou de criar para

ficar tudo pronto pra gente poder usar mas enquanto ele vai criando a gente pode começar já então o que a gente vai fazer é a gente vai vir aqui dentro aqui do nosso al e a gente tem aqui ó já sistema de autenticação tá que a gente já tem alguns se a gente olhar aqui ó providers que a gente pode usar por exemplo Ah eu quero login com discord figma github tem um monte de provider ele já vem com e-mail sem ativado e eu só vou tirar aqui ó confirm e-mail eu vou tirar isso aqui

tá eu não quero que quando o usuário cadastra ele tem que ir lá no e-mail confirmar não quero isso então tiro isso aqui vou salvar tá deixa ele salvar aí maravilha se a gente voltar aqui no Home ó tá ainda conectando lá beleza e a gente vai vir então primeiro e conectar aplicativo react Native com o supabase tá então ele tem alguns exemplos aqui e a gente vai fazer algumas coisas do exemplo e outra a gente vai a mais né então primeiro vamos instalar as bibliotecas eu vou deixar o link aqui aqui para vocês que

eu tô falando aqui na descrição só para copiar aqui as bibliotecas que a gente precisa tá para não perder muito tempo então vou copiar aqui ó npx Expo install vou copiar tudo isso aqui vamos voltar aqui deixa eu dar um CLS e eu vou colar então npx Expo install supabase react Native aing Storage que ele usa o aing Storage para salvar e persistir os dados do usuário Então vou dar um enter aqui vamos instalar o que é necessário pra gente poder criar Esse sistema de autenticação com o Expo E também o supabase beleza maravilha depois

que a gente instalou eu posso voltar no nosso projeto aqui ó primeiro a gente vai fazer o que a gente vai criar o arquivo de conexão com supabase né pra gente estabelecer a conexão do nosso projeto que a gente criou com supabase então ele tem um exemplo aqui ó eu vou copiar esse exemplo aqui tá a gente vai voltar no nosso projeto e aqui dentro do projeto a gente pode vir dentro do src criar uma pasta dentro do src chamada Lib tá dentro da Lib New file eu vou chamar aqui por exemplo ah de supabase.io

dentro a gente pode colar legal e aqui dentro ó percebe percebe que a gente tem dois caras que são a nossa URL e a nossa chave do projeto que a gente criou Beleza então para não colocar direto aqui a gente pode ver dentro de isso aqui é o quê é algo que não vai mudar e se a gente mudar é legal que a gente mude um lugar só E mude qualquer lugar que a gente esteja utilizando ela então dentro da pasta constantes a gente não tem das cores que é uma constante que não muda né

então dentro de constantes a gente pode criar um New file vou chamar aqui de supabase supabase CS dentro de constantes e aqui dentro eu vou criar então Export const eu vou chamar aqui de supa URL Beleza vai ser esse nome e eu vou vir aqui dentro do nosso projeto que a gente criou olha só que legal só para mostrar ó Project status ó todos já tá com check então a gente já pode começar a usar beleza mas não é isso que eu quero eu quero vir aqui embaixo ó em project settings vamos vir aqui aqui

em API dentro aqui ó na parte de api eu tenho aqui ó a nossa é URL vou copiar aqui a nossa URL e aqui temos a nossa Public Key Ou se você quiser você pode clicar aqui ó como a gente não criou nada clica na home por exemplo na home se eu abaixar aqui para baixo abaixar aqui mais embaixo Ó tem aqui já Project URL a mesma coisa né Posso copiar ela aqui vou colocar ela aqui e quero criar também Export con vou chamar aqui de anon Key que vai ser vou copiar de baixo e

vou colocar aqui lembra de salvar o arquivo e agora a gente pode usarla aqui ó então aqui vai ser o nosso supa URL vou dar um Tab ó já importou das constantes ponto e vírgula e a de baixo é o nosso anon Key vou dar um Tab ponto e vírgula já já importou lado do nosso Constant e supabase que a gente criou lá então agora configuramos as nossas Chaves ó perfeito a gente já tem aqui o nossa parte de Create client que ele vai criar então o nossa conexão com o client do supabase usando as

nossas Chaves usando o ass Storage para persistir os dados do usuário que a gente vai criar persistência também já já então vou salvar então esse é o arquivo de conexão que a gente tem com supabase para quando a gente quiser usar o sopa base a gente importa esse arquivo aqui salvamos esse arquivo agora o próximo passo que a gente vai fazer é a gente pode de fato cadastrar um usuário pra gente testar Então se a gente voltar aqui em authentication eu não tenho nenhum usuário concorda então a gente pode ir lá e cadastrar um usuário

vamos lá então vou vir aqui deixa eu abrir aqui do lado vamos vir dentro do nosso painel Opa painel não AL signup page que é o nosso lembra nossa página onde a gente pega os dados que o usuário digita chama a função e não faz nada por enquanto agora de fato eu quero cadastrar usuário Então vou vir aqui vamos lá então vou vir aqui vou dar aqui um set loading th né usando a nossa US state que começa falso passando ela para true E aí vou transformar Nossa função em assíncrona precisamos importar aquele arquivo do

supabase então Import from @ ou barra barra ponto ponto barra mais uma vez acessar aqui o Lib supabase e trazer aqui o suabase Beleza agora a gente pode usar Então vamos lá conche igual a await suabase ponto al que eu quero acessar o sistema de autenticação ponto e aí sign up pra gente poder cadastrar algo e ele fala aqui pra gente se é abrir e fechar Chaves e colocar o mouse em cima ele fala olha o argumento que você precisa me passar aqui agora é credentials né as credenciais do usuário que você quer cadastrar Então

abre fecho Chaves e eu vou passar aqui para ele então o e-mail que vai est dentro da nossa US state que a gente chamou de e-mail também então e-mail vírgula e o password que vai est dentro da US state que a gente chamou de password também né que é quando o usuário digita a gente não salva aqui dentro então eu passo para ele o que que eu quero salvar beleza E esse nosso supabase ele devolve pra gente tá uma Promise com o al response ou seja esse al response são dois caras que é o data

que é Caso der tudo certo se a gente quiser pegar os dados e o error que é caso der erro ele recebe aqui dentro o off error então primeiro vou verificar if se tiver dado error então eu já vou dar aqui um Alert Vou importar esse Alert do reaction Native ó importa do reac Native Caso der erro vou dar um Alert pon Alert Vou colocar aqui erro error a vírgula E aí Vou colocar aqui erro ao cadastrar Ou posso colocar até a mensagem que ele manda ó error pon message só para mostrar a mensagem aqui

que que acontece e eu dou um return para parar a execução desse if aqui para não seguir para baixo agora Caso não dê erro ele vai pular o if que não deu erro então se não deu erro quer dizer que deu tudo certo então vou dar um set set loading false tá E também esse set loading falso eu preciso dar aqui mesmo que der erro só vou parar aqui a indicação do Nosso Erro caso não der erro desativou o loading caso a gente queira ter um loading eu quero navegar o usuário pra tela de login

PR ele poder fazer o login Então o que a gente vai fazer é vamos vir no exp router a gente já importou aqui o nosso router que é pra gente navegar o usuário de forma programática igual a gente fez o back então acessar o nosso router ponto replace ou seja vou mudar o histórico de navegação eu vou mandar o usuário lá pro nosso barra que é onde a gente tem por enquanto a nossa tela de login concorda Então vou salvar isso aqui agora e a gente pode testar isso aqui vou voltar vou vir aqui ó

vou dar um control M um Reload só pra gente forçar que atualize aqui o nosso projeto para garantir que vai est certinho opa ele até fechou o nosso projeto porque a gente esqueceu de rodar né a gente instalou as bibliotecas e tem que rodar o projeto de novo então npx Expo start nov novamente pra gente rodar o projeto agora que a gente Instalou a biblioteca e configurou vamos aguardar ele rodar agora que ele apareceu já o qrcode vou clicar aqui o a do meu teclado né para abrir no nosso Android Então vamos aguardar ele abrir

aqui também deixa ele abrir aqui vou Minimizar subir minha câmera aqui um pouquinho show de bola vou clicar aqui em cadastrar vou clicar então que eu quero cadastrar aqui o Mateus o o e-mail vai ser Mateus @test pcom 1 2 3 1 2 3 Beleza vou clicar aqui para fechar o teclado né e vou dar aqui um cadastrar cliquei uma vez só em cadastrar aqui né olha só que legal me redirecionou aqui pra nossa tela de login Então vamos ver lá se ele cadastrou mesmo ou não então aqui dentro do users Ó já cadastrou você

pode dar um F5 aqui na tela né então ele já cadastrou aqui o meu o id e não quero configurar env de e-mail então o ID já temos aqui o e-mail e não tem o fone display name essas coisas a gente não passou tá Então olha só já cadastrou o usuário Olha que fácil né da a gente já cadastrou o usuário aqui só que uma coisa né Eu quero por exemplo é de alguma forma conectar um usuário com algum banco de dados por exemplo Ah eu quero ter cadastro de usuário legal o sistema de login

de usuários aqui mas eu quero também cadastrar o usuário e ter mais informações por exemplo eu quero cadastrar um um nome completo dele né então a gente precisa de uma tabela no banco de dados de usuários então para isso a gente pode ter tabelas aqui pode est atrelado ao nosso usuário pode pode não est atrelado pode também então aqui por exemplo aqui no nosso table editor eh a gente tá aqui na Public tá vamos aqui ó Public eu vou vir aqui e vou dar um Create new table eu vou chamar aqui de user beleza aqui

embaixo qual que é os campos Eu quero ter um ID esse ID ele vai ser do tipo oid beleza Além disso created add que é quando ele é criado beleza eu quero ter também um campo por exemplo name né que é o campo nome do usuário que vai ser do tipo text beleza que mais eu quero ter um campo por exemplo ah image caso a gente tivesse uma imagem pro usuário né E aí eu quero também que seja do tipo Text e eu quero ter um campo também sei lá Premium que vai ser boleano usuário

é Premium ou não eu quero que ele não seja nullable e o valor Quero que comece já como falso Então esse é os dados aqui do meu banco que eu quero beleza tá aqui um enable e eu vou vir aqui e vou dar um save vamos cadastrar ele tá criando a tabela user deixa eu ver se ele já vai criar ó ele criou aqui como user no singular né Eu queria que fosse users Ah dá para editar vou clicar aqui então Ó clica aqui Edit table eu vou mudar aqui o nome dela para users tá

então users aqui ó só para ficar melhor aqui no plural né que vão ser os usuários Então vou salvar aqui ó já atualizou aqui para users Beleza vou dar aqui um F5 só pra gente garantir que tá tudo certinho com users agora e ó e o ID created name image e um Premium que a gente chamou aqui né que a gente deu o nome Ó Premium beleza outra coisa que a gente vai fazer é adicionar aqui ó add policy a gente vai criar uma política Vamos criar aqui uma Create policy vou dar aqui um clicar

aqui no select então eu quero vou até mudar aqui o nome vou dar aqui um allow All access for All of users então vou deixar acesso é completo aí para nossos usuários em todos os as operações select update delete delete né Aqui você pode criar políticas e específicas e quando o usuário está autenticado tá beleza essa é a nossa tag aqui show de bola vou dar um save nessa política pra gente conseguir ter acesso e cadastrar alterar os dados do usuário e quando a gente tiver logado então Maravilha colocamos ela aqui agora o que que

eu quero fazer a gente criou a política de quem vai poder manipular escrever os dados no usuário então aqui você pode manipular suas políticas tem na documentação aqui sobre Police aqui ó você tem algumas informações que você pode criar informações por exemplo Ah eu só quero se o usuário for com o mesmo ID que o meu que possa listar as informações do meu usuário você pode criar esses tipos de política aqui sem nenhum problema tá E além disso eu quero então que quando o usuário cadastrar na Minha aplicação ele automaticamente pegue o nome completo que

a gente vai enviar para ele e cadastre já nessa tabela do banco de dados é os dados desse usuário né com o nome ou qualquer outra informação que você já esteja cadastrando na hora do registro desse usuário então a gente chama isso aqui que a gente pode colocar aqui dentro e eu deixei até separado para vocês aqui aqui dentro que são triggers né então a gente pode colocar aí funções dentro do nosso banco de dados que a gente quer disparar então conforme alguma ação então aqui dentro do do nosso banco de dados a gente pode

vir aqui no nosso table editor a gente vai mudar aqui agora para o nosso tabela de al que ele cria automaticamente ó al que é referente lá ao nosso sistema de autenticação aqui que é o nosso authentication então ele já tem algumas aqui tá se a gente olhar aqui o users a gente vai ver que é os nossos usuários aqui tá Então a gente vai fazer inserir uma Trigger para isso então aqui dentro ó em esl editor a gente vai colocar uma Trigger para isso vou copiar aqui e vou colar para vocês Vocês não precisam

decorar isso aqui tá então basicamente a gente tá criando uma function tá chamado handle a new user tá para quando o Car asar um novo usuário ele vai ele vai fazer o qu ele vai inserir dentro lá do nosso Public users que é a tabela que a gente criou com o id e um name então ele vai a gente vai passar um ID ele vai colocar o id do usuário e a gente vai colocar o name do usuário dentro do nosso campo name Então vou vir aqui ó vou abrir aqui o nosso table editor numa

nova aba só para mostrar para vocês que a gente vai pegar aqui ó se a gente for em user cadê Aqui Public Public se a gente olhar aqui ó users a gente não criou a nossa nossa tabela users com o campo name Então quero que quando eu cadastre o usuário no meu o aplicativo enviando a propriedade por exemplo nome completo automaticamente a gente vai passar isso para essa função fazer o quê pegar o ID do usuário que foi cadastrado então e cadastrar como um ID dessa tabela desse campo e também no campo name do seu

banco ou seja nesse Campo name dessa tabela que a gente chamou de users a gente vai cadastrar o nome do usuário que você tá me enviando que é o nome que a gente vai colocar nesse Campo aqui que é o nome completo não isso que a gente vai fazer Beleza então essa é a função eu deixo aqui para vocês a função tá então que a gente vai vir aqui embaixo ó Run a gente vai clicar aqui em rodar ele deu aqui um success deu tudo certo agora eu posso vir aqui e testar isso aqui agora

então para isso a gente pode voltar no nosso projeto onde antes a gente só cadastravam-se item nessa tabela e o ID do ID do usuário então eu posso Abir aqui vou passar a propriedade name que vai ter é o nome do usuário o nome do usuário a gente colocou dentro dessa US state que a gente chamou de name então vou passar ela aqui ó e eu vou salvar isso aqui agora então vamos testar isso aqui vou salvar vou vir aqui vou deletar aquele usuário que a gente já cadastrou né vou aqui em user authentication clica

aqui em cima vamos lá embaixo ó delete user deleta ele aí beleza e vou cadastrar de novo então vamos lá vou cadastrar aqui ó Mateus praga Mateus @test pcom 1 23 1 23 deixa eu fechar o teclado cliquei em cadastrar ó maravilha se a gente voltar aqui na nossa aplicação e dar um F5 na authentication vamos ver beleza né Qualquer coisa confere aqui para ver se não deu nenhum erro Maravilha só que além de cadastrar isso a gente já tava fazendo agora a gente pode vir lá no nosso table editor aqui no Public né acha

aqui o seu Public se não tiver na nossa tabela que a gente criou de users E olha que sensacional né olha aqui que bacana né já cadastrou aqui é o mesmo ID do usuário se a gente olhar aqui lá no authentication abrir aqui o authentication ó o ID do usuário cadastrado É esse aqui Posso copiar aqui o ID dele ó se eu der um cont CRL f e um cont CRL V ó é o mesmo ID tá então ele criou dentro da nossa tabela de usuários uma Um item lá um novo usuário né com essid

E aí colocamos aqui ó olha o nome que a gente preencheu né olha que legal né então o item que você preencheu aqui ó dentro do seu campo nome nome completo a gente com aquela Nossa function Trigger a gente falou Olha quando C um usuário coloca o ID dele e também coloca o nome que você tá me enviando e o nome a gente tá enviando aqui ó tá beleza e agora a gente já tá cadastrando o usuário já estamos cadastrando aqui e cadastrando lá vamos fazer o login porque Por enquanto né A gente só tá

cadastrando outra coisa que a gente pode fazer além do login é colocar um loading porque quando a gente clica em cadastrar eu não sei se tá acontecendo alguma coisa ou se nada tá acontecendo Então para isso a gente criou uma US state loading e a gente começa lá como falso quando você clica na função handle sign up a gente muda ela para true e quando acaba ela ou dá erro a gente volta para falso então aqui dentro do nosso botão dentro do cadastrar ó eu vou abrir e fechar Chaves então vou falar olha se tiver

loading eu vou mostrar aqui carregando Caso não esteja loading eu vou colocar aqui o nosso cadastrar então salvei só para mudar aqui a informação do texto Dentro do botão se quiser dá para colocar até um icin girando Então vou colocar aqui por exemplo cadastrar aqui o Lucas Silva o Lucas vai ser teste @test pcom 1 2 3 1 2 3 vou dar aqui um cadastrar ó lá cadastrando E aí beleza maravilha fica melhor visualmente pra gente aqui agora vamos fazer o login né que a gente só sabe cadastrar por enquanto então vamos fechar isso aqui

lá dentro da nossa página de login então na nosso index a gente só tem o handle signin aqui então aqui agora a gente vai fazer a mesma coisa né a gente tem o nosso loading Então vou dar aqui um set loading para true beleza e agora a gente vai fazer o quê transformar a nossa função em síncrona acessar aqui o nosso conch igual await para esperar aqui o nosso supabase pon al Eu dei um Tab aqui no supabase ó ele já importou o supabase para mim Cuidado para ver se ele importou já sozinho tá senão

importa na mão supabase PF PS in E aí tem vários métodos né no nosso caso sign in with password Então a gente vai fazer um login com e-mail e senha um password Esse é o nome do método que o supabase e fornece pra gente então para ele abre e fecha os Chaves V vou passar aqui o e-mail e vou passar a senha né que a gente já tem no nossos inputs depois disso ele devolve pra gente aqui o data caso dê tudo certo e o error caso D um erro a mesma coisa né então F

error caso D um erro vou dar aqui um Alert Alert e vou dar aqui a mesma coisa que a gente fez né só vou importar aqui o nosso Alert do react Native então Caso der erro a gente mostra um alerta com a mensagem do que que é o erro tira o loading e para aqui a execução do IF agora caso não der erro ou seja passou aqui do IF eu vou tirar o loading tiro o loading E aí eu tenho que navegar o usuário lá pra nossa tela de painel que tá dentro do nosso panel

aqui tá profile e page que é a nossa tela de quando o usuário tá logado né então eu vou importar aqui do nosso Expo router então Import from Expo router e a gente vai trazer um carinha chamado router que é pra gente poder fazer essa navegação que a gente já conheceu então router P replace eu vou trocar aqui o histórico de navegação para o nosso panel bar profile bar page né que é o nosso grupo de rotas lá da nossa mandar pro nosso perfil Vou salvar isso aqui agora e vamos testar né então eu tenho

usuário por exemplo Mateus @test pcom vou botar uma senha errada só pra gente ver ó cliquei Ó vamos ver invalid login credentials Olha que legal né a gente poderia tratar aqui o nosso Alerta outra coisa para ficar mais legal também aqui dentro do nosso botão dentro do acessar a gente pode colocar já que ele abre e fecha o Chaves loading E aí se o loading for verdadeiro se tiver true lá dentro vai mostrar o carregando se for falso vai mostrar apenas o nosso botão que é acessar beleza salvei e vou testar agora vou colocar a

senha certa aqui ó 1 2 3 1 2 3 acessar ó carregando e olha que legal mandou a gente lá pra nossa página de de perfil então agora a gente já tá cadastrando o usuário já estamos logando o usuário Então cara tá sensacional já mas a gente vai evoluir mais aqui né você não tá aqui só para isso também né então agora por exemplo se o usuário saí do meu aplicativo fechou ó vou clicar aqui ó fechei o app dele fechei vou vir aqui no Expo né e vou clicar aqui no suab só abre de

novo né rodou de novo fechou o aplicativo rodou de novo o que que vai acontecer Vamos ver eu não tenho a sessão do usuário eu quero que olha ele logou se ele tá logado permanece a sessão do usuário como é que a gente pode fazer isso então para isso o que a gente vai fazer é criar o nosso efeito de manter a a sessão do usuário aqui logado então para isso a gente pode usar o nosso layout porque se a gente olhar aqui dentro do Lay da nossa aplicação é onde a gente passa por todas

as rotas então aqui a gente pode verificar se tem um usuário logado para saber se eu tenho que mandar para nossa primeira rota ou se eu tenho que mandar lá pro cara logado concorda outra coisa eu quero de uma forma descentralizada para qualquer componente conseguir ter acesso se o usuário tá logado é os dados dele eu poderia fazer isso né então para isso para ficar bem completo A gente pode fazer o quê vir dentro do src criar uma nova pasta chamada contest de contextos dentro dela New file off context ptsx pra gente criar um context

api só de autenticação e a gente vai criar ele aqui então Import from react vamos trazer aqui o nosso Create context vamos trazer aqui o use context e o use state aqui também do react interface of context props então aqui dentro Eu quero exportar do nosso contexto uma propriedade por exemplo chamada user que vai ser do tipo user do supabase Ó a gente pode importar o tipo dele para não criar no zero ou nulo né pode ter um usuário ou pode não tem nenhum usuário eu quero também ter um set al que vai ser uma

função que vai devolver void maravilha então agora vamos criar aqui o nosso contexto const of context igual a Create context abre Chaves aqui as of context props pra gente falar que o nosso contexto ele é do tipo off context props então ele vai ter essas tipagens aqui e aí vamos criar o provider Export C of provider um componente aqui que vai ser o provider o provider ele recebe o nosso Children que é o componente que tá dentro né o filho dele dois pontos abre e fecha aqui o Children como a gente tá usando aqui no

typescript ele é do tipo react react node né que ele é um componente e aqui dentro então return al context provider e dentro a gente deixa renderizar o nosso Children como a gente tá no provider eu preciso exportar as informações que você falou aqui para mim né Mateus o user e o set al Então dentro dentro do provider Eu quero ter um US state chamado user set user que vão ser os detalhes do usuário por exemplo que tá logado US state que vai começar vazio ele é do tipo o qu ele é do tipo user

ou n Então abre e fecha sinalzinho de maior menor vou colocar a tipagem do US state para falar o que que qual que é o tipo desse US state e também a gente falou que vai ter uma função chamada set al então function set off que é uma função só para trocar o valor desse US state então ela vai esperar receber off user que é o usuário que tá logado então ele é do tipo user ou N E aí eu vou dar aqui para ele set user Então essa função set user vou até copiar a

tipagem que eu espero como propriedade e vou passar aqui pra nossa tipagem né Falando que olha quem usar essa função precisa me mandar um off user que ele é do tipo usuário ou nulo usuário é o tipo lá do supabase e essa função devolve void ou seja ela não tem nenhum retorno se ela tivesse um return algo aqui aí ela retornava algo como o void quer dizer que ela não tem nenhum return então agora dentro do value a gente passa aqui que esse nosso contexto ele vai exportar o nosso US state user e o set

al aqui beleza então esse é o nosso contexto bem simples Por enquanto né salvei e agora a gente pode até criar um Hook personalizado para quem consumir esse contexto então Export con use al e a gente vai quem usar esse use al vai estar consumindo o nosso use context com o nosso contexto Beleza então nosso contexto aqui PR gente para ficar mais fácil da gente importar e usar esse nosso contexto em algum logal em algum local agora agora que a gente criou o contexto aonde que eu quero utilizar lá dentro do nosso app underline layout

aqui a gente pode fazer nosso controle verificar se tem usuário logado para saber para qual página eu vou redirecionar então para isso eu vou importar aqui bar context bar context vou trazer aqui o nosso provider E aí eu vou criar um Export default function vou chamar aqui de Root layout e esse root ele sim vai ter aqui o nosso al al provider e dentro do off provider a gente vai chamar esse nosso Main layout que é onde tem as páginas Então esse nosso Main layout ó eu vou tirar aqui o Export dele vai ficar apenas

um componente Zinho que vai definir as rotas apenas isso o nosso root layout em volta tem o nosso al provider E dentro dele eu chamo o nosso Main layout que é as rotas que a gente vai ter na aplicação então se eu salvar isso aqui agora vamos ver se só tá funcionando tudo certinho cuidado com o minúsculo e maiúsculo vou dar um control M aqui ó dar um Reload pra gente atualizar o nosso projeto beleza enquanto ele tá em volta do nosso out layout a gente tem acesso aos dados dele então aqui dentro ó o

nosso Main layout ele já tá dentro do al layout não tá então dentro do Main layout eu já consigo ter acesso aos dados do nosso provider então eu posso importar também aqui ó nosso use que é o nosso contexto pra gente importar ele con iG use al E aí aqui dentro eu posso pegar os dados eu quero pegar a nossa função set al aqui que é para trocar se a gente lembrar lá ó o set al a gente passa os dados do usuário ele vai colocar dentro da nossa US state então aqui dentro eu posso

criar aqui um use effect criar aqui o nosso use effect função anônima vírgula abre e fecha Nossa Rede dependência então o use effect ele é o qu ele é um Side effect então quando o nosso componente Main layout for carregado eu quero fazer o quê eu quero lá no nosso supabase e usar um método para verificar se tem algum usuário logado ou não então supabase vou dar um Tab aqui ó só para ver se ele já importa ó já importou supabase ponto al pon on off state Changed Olha que legal ele já até sugeriu aqui

para mim o que que é esse on off state Changed se a gente colocar o mouse em cima dele ele basicamente é um olheiro ele é uma subscription ele é um cara que ele vai ficar olhando se a gente tem alguma sessão do usuário Então se o usuário tiver lá e chamar a função de deslogar ess esse caraa aqui ó vai ser chamado novamente e dentro a gente recebe duas propriedades que é O Event e o session a gente vai ver que agora dentro desse session não vai ter mais nada ou quando você fazer o

login automaticamente essa função ou out state Changed ela é chamada novamente com agora dentro dessa propriedade session os dados do usuário que tem logado então toda vez que a gente faz alguma ação do al a gente vai ter essa esse efeito colateral dentro dessa função então por exemplo pra gente ver o efeito disso na prática antes de seguir eu vou dar aqui um console pon log tá pra gente visualizar é session user virgula e eu vou colocar aqui as informações do session pon user tá Então olha só coloquei as informações dele aqui então a única

coisa que eu vou fazer é salvar isso aqui salvei aqui tá não fiz mais nada se a gente olhar aqui agora ó você vai ver que eu tenho uma sessão por que que eu tenho uma sessão porque a gente logou um usuário há um pouquinho tempo atrás né a gente acabou de logar um usuário Então tá aqui ó Mateus fr usuário que eu loguei e a gente nem deslogou a gente só atualizou a aplicação então vamos fazer o quê vamos logar vou logar aqui com Mateus @ test.com 1 2 3 1 2 3 vou dar

aqui ó acessar vamos lá ó tá vendo aqui ó disparou ó session user os dados do usuário logado Beleza agora na nossa página profile perfil aqui vamos colocar um botão para de fato deslogar o usuário Então vamos lá no nosso panel profile e page Vamos colocar aqui por exemplo um B certo beleza colocar aqui um title deixa eu importar esse Butão aqui né buton do react Native title que vai ser por exemplo sair deslogar por exemplo ou sair tanto faz onpress e vai ser handle signout e a gente pode criar aqui a função então assn

function handle sign out então agora aqui dentro eu vou usar aqui o await suabase dei um Tab aqui ó já importou supabase ponto al P sign out e esse sign out aqui ó ele também devolve caso dê um erro então posso pegar aqui ó conche igual aqui e eu posso pegar aqui error E aí eu posso falar olha F caso tenha um erro quer dizer que deu algum erro para deslogar a conta então vou dar aqui um Alert deixa eu dar um Tab aqui para importar do react Native ponto Alert error para mostrar para usuário

né colocar aqui erro ao sair da conta tente mais tarde sei lá vou colocar um alerta genérico eu vou dar um return aqui para parar a execução também aqui E além disso a gente pode usar aqui o nosso conch abre fecho aqui igual use al pra gente buscar o nosso Hook para consumir o nosso contexto e pegar a nossa função set al e olha se você tá deslogando usuário lá dentro do nosso context a gente não tem essa função setal que é para trocar o valor da nossa US state user que aqui é para saber

se quando tem usuário logado a gente vai colocar aqui dentro os dados do usuário logado se eu estou deslogando usuário e deslogou o usuário que que eu quero fazer eu quero chamar esse set alfa e passar o valor nulo porque agora você deslogou não tem mais nada dentro dele eu quero voltar o valor para nulo Então vou dar aqui um set al que a gente importou aqui do nosso contexto dentro do componente e eu posso passar para ele Ó nulo então agora Opa nul aqui então eu deslogo o usuário passo para nul aqui o valor

dentro do nosso contexto do user lá e também caso de erro eu mostro o erro aqui vou salvar isso aqui agora vou clicar aqui em deslogar ó cliquei em deslogar cliquei em deslogar beleza ó você viu aqui ó session user undefined então quando eu cliquei em deslogar o nosso a nossa função lá do nosso layout chamada on out state Changed foi disparada falando olha aqui tem uma mudança aqui na sessão do usuário e agora se a a gente deu um console o console veio como undefined ou seja como não existe porque ele deslogou o usuário

então não tem mais sessão então se eu der um contrl m e um Reload para ele carregar novamente a aplicação então quando carregar ele tem que usar o use effect de novo vamos ver o que que vai dar nesse console olha só que legal pode aqui tá carregando beleza Olha lá que legal veio aqui pra nossa tela olha aqui o log session user undefined ou seja não tem uma sessão do usuário Então olha que sensacional né E se eu logar o usuário Mateus @test pcom 131 23 acessar olha lá loguei um usuário olha aqui ó

session user agora eu tenho a sessão do usuário Então esse esse nosso Chang é sensacional porque ele é um olheiro que fica olhando se tem sessão ele chama se não se não tem sessão ou se deslogar ele chama falando olha não tem mais nada dentro dessa propriedade session então aqui a gente pode pensar em fazer uma coisa muito simples é if se tiver uma session eu vou pegar aqui o nosso set al lá do nosso contexto então set off do nosso contexto e vou passar o session puser para ele eu vou passar os dados da

sessão lá pro nosso pro nosso user do nosso contexto se tem uma session eu posso pegar aquele nosso vírgula router do Expo router e falar olha router ponto Opa escrev errado aqui o Import router router P replace eu vou mandar você lá para Aquela nossa tela barra panel profile page beleza e eu dou um return aqui para ele parar aqui o nosso if para não prosseguir agora se essa função foi chamada novamente mas não tem nada na session quer dizer que você deslogou ou perdeu a sessão de algum motivo então fora do IF eu vou

dar aqui um set off volta para nulo para garantir que vai est vazio lá dentro do nosso contexto e halter Place eu vou mudar agora pro nosso barra que é mandar a gente lá para nossa tela de login concorda Então vou salvar isso aqui agora só pra gente testar salvei vou dar aqui um Crol M um Reload beleza vamos ver agora quando carregar o aplicativo ele tem que verificar se tem uma sessão ou não se tiver ele tem que logar Olha lá já me logou porque a gente tinha uma sessão ó vou dar um Ctrl

M novamente e um Reload então ó se tiver uma session ele tem que me redirecionar PR para nossa tela de logado lá olha Olha lá que legal a gente consegue ainda enxergar a nossa tela de login Mas ele já me redireciona se eu deslogar o usuário deslogue ó automaticamente ele me redireciona pra nossa tela de login Por que que acontece isso porque quando eu cliquei em deslogar essa função foi chamada novamente out state Chang e agora ele não tem mais nada dentro do campo session então ele falou olha if tem uma session não não tem

Ah então set off nu e rter replace lá pra nossa home então ele volta pra home Só que tem uma coisinha que incomoda né uma uma coisinha que incomoda é quando você loga o usuário mateus@sabesp.com.br um usuário ou não eu redirecionou ou não como que a gente pode fazer isso de uma forma muito simples eu posso ter uma página de carregando né de loading vamos fechar tudo isso aqui pra gente melhorar um pouco a estrutura dentro da pasta al a gente tem a página de de cadastro perfeito dentro da pasta al aqui eu vou criar

mais uma pasta dentro desse Alf chamada sign in sign in dentro dela New file vou chamar aqui de page.ts e eu vou pegar lá nosso index que era a página de login ó lembra que era a página de login nosso índex vou copiar ela e vou trazer aqui para dentro dessa nossa sign in e page colocar aqui ó beleza o nome da do componente vai ser login cuidado com esse Import aqui precisa ser corrigido que é o nosso supabase então ponto ponto barra ponto pon barra pon pon barra Lib bar supabase corrigir o Import que

precisava então cuidado com o Import aí vou salvar aqui beleza agora dentro lá do nosso layout agora eu quero ter uma uma rota vou deixar essa nossa index aqui mas eu vou ter mais uma né vou duplicar essa última aqui ó e eu vou ter agora a nossa Alf certo depois do Alf eu criei uma chamada sign in ó mesmo nome que você deu ó B sign in e dentro dela eu tenho o page que é a nossa página de login e agora a nossa página index que era a página de login antiga a gente

vai ter uma página só indicando que é um loading então aqui ó posso tirar tudo isso aqui deixar só o Import do react n tirar esse US state vou mudar aqui para index apenas o nome do componente tirar essa função aqui tá então cuidado que eu tô na página index tá então essa página index a gente vai ser só um load vou tirar tudo isso daqui deixar só essa View esses estilos aqui ó deixar só o nosso estilo principal que é o container Beleza o Import aqui do Colors eu vou colocar de novo aqui o

Import do Colors Import from pon pon barra pon pon barra const barra Colors vou deixar aqui o nosso Colors novamente que vai ser o nosso White Vou colocar aqui também para centralizar tudo que tem aqui dentro então justify content como Center e o nosso align items como Center centralizar tudo e aqui dentro eu vou importar apenas um activity indicator do react Native então do react Native a gente vai trazer aqui um carinha chamado activity indicator que é uma bolinha girando né de load size eu vou colocar aqui uns 44 Color Colors Green por exemplo colocar

nossa cor verde lá vou salvar isso aqui então salvei isso aqui então presta atenção né olha só a gente tem o nosso arquivo fechar tudo aqui index que agora o arquivo index é apenas essa página que tem um indicator né que algo girando ali dentro do nosso layout agora a gente colocou temos o nosso index que antes era a nossa rota de login agora a gente colocou mais um stack screen dentro do off sign in page que vai ser a nossa rota de login então lá a gente dentro al sign in page a gente criou

agora né que era a nossa rota agora a nossa rota de login tá aqui ó beleza maravilha vou vir dentro do nosso layout e eu vou vir aqui ó dentro desse use effect eu vou comentar esse if aqui ó vou comentar só pra gente conseguir enxergar bem a nossa rota de carregando salvei contrl m e vou dar um Reload então o que que vai acontecer Olha lá nossa rota ele carregou a nossa rota a primeira que tem aqui né que é a nossa rota index tá que é a nossa primeira que é essa rota aqui

que só tem o activity indicator girando beleza Olha que sensacional né então agora vou descomentar esse if aqui então Ó ele vai passar pelo usf ele vai deixar a nossa primeira rota que é essa rota carregando e aí a hora que ele passar pelo session se tiver uma sessão ele vai redirecionar a gente lá pra nossa página de profile se tiver uma sessão agora caso não tenha uma sessão eu vou redirecionar agora você para o Barra bar sign in que é a nossa nova página barra page que é a nossa página de login então caso

não tenha uma sessão você redireciona pro login Vou salvar isso aqui agora beleza salvei então agora se eu der um control m e um Reload ele vai mostrar a nossa página de carregando e quando tiver uma página Opa deixa eu bugou aqui o Expo deixa eu fechar aqui fechar aqui o Expo e clicar aqui de novo para abrir novamente então enquanto ele tiver carregando ou seja ele vai exibir a nossa primeira página que é aquele índex ó só mostra aquele loading E aí a hora que tiver carregado Ou seja a hora que o use effect

aqui tiver de fato uma resposta se tiver autenticado ele manda pro profile se não tiver autenticado ele manda pro sign in Então isso é sensacional porque a gente engana né o usuário como se tivesse carregando porque a primeira página que é exibida que é o nosso index só tem aquela bolinha girando lá informando que tá carregando tá E aí hora que carregar ou não a gente decide para qual grupo de rotas levar o usuário tá E para finalizar aqui uma coisa que falta É lá na nossa página de cadastro quando a gente cadastravam-se 1 2

3 1 2 3 vou clicar aqui ó cadastrar cadastrando ó mandou a gente aqui pra nossa página de login tá se a gente voltar aqui no nosso banco de dados ó banco de dados users deixa eu atualizar aqui ó deixa eu atualizar e eu já cadastrei mais dois usuários três né então Ó Ana Carol O Mateus tá aqui e o Lucas tá aqui também olha que sensacional né E se a gente for em authentication também que é os usuários que tem cadastro aqui de fato ó os três usuários já estão cadastrado aqui autenticado tá se

eu logar aqui com ela né Ana @a.com 1 2 3 1 2 3 acessar aqui olha lá já tô aqui na nossa página se eu fechar o nosso projeto ó vou fechar aqui ó e eu clicar aqui novamente para abrir né no Expo Então como se o usuário tivesse fechado e aberto novamente a gente vai ver que ele vai ver que tem uma sessão ó ele mal mostrou o loading Mas se a internet do usuário tivesse lenta ia mostrar o loading até que aquele on out state Chang tivesse recebido ou a sessão ou não tivesse

nada se não tivesse nada ia mandar pro login se tiver uma sessão aí ele manda né de fato pra nossa página que a gente decidiu ali que é o nosso profile poderia ser a página de dashboard ou de painel que você tivesse a página home no caso a gente mandou pro profile e só pra gente finalizar como a gente passou para o nosso contexto ó quando você faz o login a gente redireciona Mas antes a gente manda lá para nosso set al que é do nosso contexto né as informações da sessão do usuário então lá

dentro do nosso context a gente recebe no set al os dados da sessão do usuário e passa pro US state user tá E nesse contexto eu exporto tanto ess essa função que é para poder trocar quanto exporto a função do user né o nosso US state que é acessar a sessão do usuário então se você quiser acessar a sessão do usuário você pode através desse user por exemplo a gente pode vir aqui dentro do panel profile page e a gente pode vir aqui dentro ó e pegar do use al vírgula o user né os dados

da sessão do usuário e eu posso usar por exemplo ah colocar aqui um text por exemplo abre e fecho aqui user ponto e vou colocar uma interrogação né porque pode estar vazio user. email ou user.id que é o ID do usuário e eu vou salvar aqui ó olha que legal o ID do usuário e o e-mail da pessoa que tá logada olha que sensacional né então isso é muito legal que a gente pode fazer muita coisa com o nosso supabase aqui dentro do react Native e é muito poderoso pra gente criar projetos com cadastro banco

de dados login providers que a gente queira também inclusive se você quer que a gente traga mais vídeos aqui sobre supabase com react Native comenta aqui embaixo para mim saber para mim trazer mais vídeos para vocês então agora sim finalizado o vídeo cara que ficou sensacional e se você quer aprender desde o zero programação passo a passo sai pronto pro mercado criar aplicativos profissionais site sistemas web aproveita que eu deixei aqui embaixo o link da nossa turma e tá com as vagas limitadas tá então o valor que eu deixei aqui é exclusivo para vocês aqui

no vídeo e as vagas também são limitadas pra gente conseguir atender todo mundo se você realmente quer aprender programação sair do zero na ordem correta passo a passo aí para você entrar para mercado ou desenvolver projetos profissionais Beleza então te vejo no próximo vídeo e comenta Qual que é o próximo vídeo que você quer ver aqui no canal fechou até mais