feat: autenticação via Github

[vinifraga]

📋 Descrição

Bom dia pessoal, trago uma proposta de autenticação com o Clerk principalmente para o mobile, mas também sugestões para o backend. Vou dividir essa issue em duas seções: mobile e back.

Mobile

Libs utilizadas:

• @clerk/clerk-expo para o login com Clerk
• expo-auth-session e expo-random para o login social do Clerk
• expo-secure-store para armazenamento seguro do token na memória do dispositivo
• axios HTTP Client para comunicação com o backend
• babel-plugin-inline-dotenv para leitura e uso de variáveis de ambiente
• expo-constants para leitura de informações do sistema como scheme.

Docs utilizadas:

• Beta Clerk Expo

Proposta

Utilizarmos o contexto AuthContext para gerenciar todo o fluxo que precisarmos de autenticação, deixando "transparente" para o restante dos devs as particularidades do Clerk. Esse contexto disponibiliza as seguintes funções e variáveis:

• user: dados do usuário que devemos utilizar ao longo da aplicação como id, email, nome completo e foto de perfil;
• signInOrSignUpWithOAuth: função que autentica o usuário de acordo com o provider escolhido. Por enquanto, utilizamos apenas o GitHub. Além disso, ela também automaticamente gerencia se o usuário precisa ser cadastrado (primeiro acesso) ou logado;
• signOut: função para deslogar o usuário;
• getSessionInfo: função que retorna as informações da sessão do usuário necessárias para a validação das requisições no backend;
• isLoading: variável que retorna true caso alguma das três funções anteriores estiverem sendo executadas.

Para consumir os dados desse contexto, criei um hook chamado useAuth (temos que tomar cuidado na importação pois o @clerk/clerk-expo exporta um hook de mesmo nome)

Para centralizar os providers em um ambiente, sugiro a estrutura do AppProvider

Apesar do Clerk não disponibilizar componentes visuais no Expo, sugiro utilizarmos os helpers SignedIn e SignedOut para exibir condicionalmente componentes dependendo do status da autenticação do usuário.

Problemas

Apesar da documentação do Clerk acusar que a SDK deles não é compatível com a SDK 48 do Expo, não encontrei nenhum problema com a lib deles. Porém, definitivamente o maior empecilho dessa PR foi a incompatibilidade da SDK 48 do Expo e a lib expo-auth-session no Expo Go iOS. Tentei de várias formas resolver esse problema mas não consegui. Então quem for tentar autenticar no Expo Go via iOS não funciona por enquanto. Existe uma gambiara caso você realmente precise autenticar via iOS:

• Rodar npx expo run:ios
• Substituir essas linhas por:

  const authResult = await AuthSession.startAsync({
  authUrl: externalVerificationRedirectURL.toString(),
  projectNameForProxy: `@NOME_DA_SUA_CONTA_EXPO/${Constants.manifest.scheme}`
  })

Backend

Libs utilizadas:

• @clerk/clerk-sdk-node para a validação da sessão e busca de dados do usuário no Clerk
• @nestjs/config para configuração de variáveis ambiente

Docs utilizadas:

• Clerk SDK Node Manual Authentication
• Clerk SDK Node READMED

Proposta

Aqui não me aprofundei muito pessoal, basicamente importei os métodos sessions e users da SDK para validar a sessão e buscar os dados do usuário, respectivamente. Então basicamente editei a rota no AppController.tsx para receber os parâmetros sessionId e token que o mobile envia, validei a sessão, obtive o id do usuário e o utilizei para buscar o restante das informações.

Problemas

Como a SDK do Clerk já retorna uma instância inicializada e populada automaticamente com a variável ambiente CLERK_SECRET_KEY, eu tive que realizar o import 'dotenv/config'. Além disso, como não temos uma recipe do NestJS para o Clerk e como o Clerk retorna uma função em vez de uma classe, tive dificuldade em criar um provider como fizemos com o Prisma.

Fixes #61

🛠️ Tipo da mudança

Exclua as opções que não são relevantes.

• [x] Nova feature

🧪 Como isso foi testado?

Não adicionei testes para essa parte pois ainda precisamos definir o setup de testes no mobile.

✅ Checklist:

• [x] O título do meu PR está seguindo o padrão <type>(scope): subject. Por exemplo: feat(mobile): add new feature
• [x] Meu código segue as diretrizes de estilo deste projeto
• [x] Realizei uma auto revisão do meu código
• [ ] Fiz alterações correspondentes na documentação
• [ ] Minhas alterações não geram novos alertas
• [ ] Adicionei testes para minhas alterações

[diego3g]

@vinifraga brabo demais! resolve os conflitos pra nós?

[vinifraga]

@vinifraga brabo demais! resolve os conflitos pra nós?

Opa, por aqui na PR disse que não tenho acesso. Tem alguma sugestão?

[diego3g]

@vinifraga você precisa resolver os conflitos localmente, isto é, combinar o código mais atualizado do projeto com o código que você fez. Isso pode ser feito utilizando rebase ou dando um "git pull origin main" na sua branch e passando por cada conflito e resolvendo. Se quiser ajuda, me chama Discord.

[vinifraga]

Bom dia pessoal, encontrei esse artigo trazendo atualizações do Clerk para o Expo:

https://clerk.com/blog/changelog-2023-04-07?utm_source=changelog&utm_medium=email_campaign

Vou testar esse novo hook para ver se funciona bem e resolve o problema do Login social no iOS.

[diego3g]

@vinifraga Vou aguardar você testar isso antes de dar merge.

[vinifraga]

Essas últimas alterações foram implementar algumas mudanças pontuais:

• Atualizar o @clerk/clerk-expo para a versão 15 que traz um novo hook totalmente voltado para autenticação social OAuth, resolvendo aquele problema do iOS que levantei anteriormente e deixando bem mais simples a autenticação.
• Ajustar o Expo Router para redirecionamento da autenticação no Android (ele redireciona para a rota oauth-native-callback. Criei essa rota e redireciono dela para o irmão mais próximo automaticamente.
• E outras melhorias gerais ao integrar com alterações da main como unificar tudo no AppProvider, remove exemplo de env incorreto, adicionar mais pastas no paths do Typescript, etc.