feat: autenticação via Github #89

vinifraga · 2023-04-07T15:25:28Z

📋 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:

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.

Nova feature

🧪 Como isso foi testado?

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

✅ Checklist:

O título do meu PR está seguindo o padrão <type>(scope): subject. Por exemplo: feat(mobile): add new feature
Meu código segue as diretrizes de estilo deste projeto
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

FilipePfluck · 2023-04-07T18:01:12Z

apps/server/src/app.controller.ts

-  async getUsers() {
-    const users = await this.prisma.user.findMany()
+  @Post()
+  async getUser(@Req() request: Request, @Res() response: Response) {


acho que tá um pouquinho estranho esse @Post() e o nome da função começa com get

Boa, eu só editei o método que tinha pra testar a requisição do mobile e acabei deixando o nome antigo 😅

diego3g · 2023-04-08T12:06:42Z

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

diego3g · 2023-04-08T12:08:50Z

apps/server/src/main.ts

@@ -1,3 +1,4 @@
+import 'dotenv/config'


No Nest acredito que não precisa disso se usarmos o ConfigModule

Se não realizar esse import, o clerk não entende a váriavel ambiente CLERK_SECRET_KEY.

LuizHAP · 2023-04-08T13:10:12Z

apps/mobile/App.tsx

+  async function handleVerifySession() {
+    try {
+      const { sessionId, token } = await getSessionInfo()
+      const response = await axios.post('http://192.168.15.4:3333', {


Acho legal colocar a url via env, não?

Esse código no mobile é apenas para demonstração e teste da funcionalidade aqui na PR, essa página não existe no figma. Vou apagar esse código ao final, mas posso deixar um service com uma env para o IP.

LuizHAP · 2023-04-08T13:11:07Z

apps/mobile/App.tsx

+        token,
+      })
+
+      console.log(response.data)


Aqui sobrou um console log

Esse código no mobile é apenas para demonstração e teste da funcionalidade aqui na PR, essa página não existe no figma.

trolliama · 2023-04-08T19:24:52Z

apps/server/src/app.controller.ts

+    const sessionId = request.body.sessionId
+    const token = request.body.token
+
+    if (typeof sessionId === 'string') {
+      const session = await sessions.verifySession(sessionId, token)
+
+      if (!session) {
+        return response.status(400).json({
+          error: 'Session not verified',
+        })
+      }


Acho que todo esse bloco de código poderia ser substituído pelo auth guard criado por @eletroswing na PR #94

Boa, esse código no back é apenas para demonstração e teste da funcionalidade aqui na PR, toda melhora é bem vinda mas como não trabalho muito com NestJS vou deixar essa parte para outra pessoa.

vinifraga · 2023-04-08T19:43:09Z

@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 · 2023-04-09T10:56:57Z

@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 · 2023-04-10T11:49:14Z

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 · 2023-04-10T11:51:39Z

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

vinifraga · 2023-04-10T22:33:18Z

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.

vinifraga added 13 commits April 5, 2023 07:52

feat: config env variables

2121176

chore: add app scheme

d4fd720

chore: install clerk

66ad627

feat: Sign in with Github button

913491c

chore: relocate and improv visual

3f78894

feat: signIn and signOut flow

f53c6d7

chore: add axios

04b6e27

chore: send session info for backend verification

f0503e2

chore: add clerk sdk node and nestjs/config

65482cf

chore: configure env variables for nest and clerk

17a6122

feat: verify user clerk session

c8b6d88

chore: rename token param

3d28e73

feat: AuthContext API and token secure cache

382e298

vinifraga mentioned this pull request Apr 7, 2023

[0008] Autenticação via Github #61

Closed

5 tasks

vinifraga changed the title ~~Autenticação via Github~~ feat: autenticação via Github Apr 7, 2023

FilipePfluck reviewed Apr 7, 2023

View reviewed changes

diego3g reviewed Apr 8, 2023

View reviewed changes

LuizHAP reviewed Apr 8, 2023

View reviewed changes

trolliama reviewed Apr 8, 2023

View reviewed changes

vinifraga added 4 commits April 9, 2023 12:06

chore: add getUsers method again

f76fa61

fix: upstream conflicts

5638dce

chore: merge main

1d3a566

Merge branch 'main' into main

eb10986

diego3g assigned vinifraga Apr 10, 2023

diego3g added the enhancement New feature or request label Apr 10, 2023

vinifraga added 12 commits April 10, 2023 16:41

fix: import Get method

5922ab6

fix: remove import duplicate

91e0433

refactor: useOAuth hook, browser warmup and minor improvs

2bfce61

refactor: join queryProvider on AppProvider and clerk env type

cf98f69

fix: OAuth android redirect

feaac43

refactor: add base url validation and example

a544b32

chore: remove wrong env example

5477272

chore: merge main

cad9924

chore: resolve conflicts

cfa18ed

chore: remove changes for local testing

943f846

fix: package-lock.json conflicts

89f7228

Merge branch 'main' into main

ad8b801

vinifraga requested a review from diego3g April 10, 2023 22:33

fix: sync lock file

374b603

diego3g merged commit b3a8fc6 into diego3g:main Apr 10, 2023

diego3g mentioned this pull request Apr 11, 2023

[v1.0.0] Backlog de tarefas #49

Open

21 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: autenticação via Github #89

feat: autenticação via Github #89

vinifraga commented Apr 7, 2023

FilipePfluck Apr 7, 2023

vinifraga Apr 7, 2023

diego3g commented Apr 8, 2023

diego3g Apr 8, 2023

vinifraga Apr 8, 2023

LuizHAP Apr 8, 2023

vinifraga Apr 8, 2023

LuizHAP Apr 8, 2023

vinifraga Apr 8, 2023

trolliama Apr 8, 2023

vinifraga Apr 8, 2023

vinifraga commented Apr 8, 2023

diego3g commented Apr 9, 2023

vinifraga commented Apr 10, 2023

diego3g commented Apr 10, 2023

vinifraga commented Apr 10, 2023

feat: autenticação via Github #89

feat: autenticação via Github #89

Conversation

vinifraga commented Apr 7, 2023

📋 Descrição

Mobile

Proposta

Problemas

Backend

Proposta

Problemas

🛠️ Tipo da mudança

🧪 Como isso foi testado?

✅ Checklist:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

diego3g commented Apr 8, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vinifraga commented Apr 8, 2023

diego3g commented Apr 9, 2023

vinifraga commented Apr 10, 2023

diego3g commented Apr 10, 2023

vinifraga commented Apr 10, 2023