feat: add login form and oauth verification

website/.env.example

@@ -13,9 +13,9 @@ SMTP_PORT=1025
 VITE_TZ=Europe/Lisbon
 VITE_EVENT_COUNTDOWN_DATE=2025-04-11
 
-GITHUB_CLIENT_ID=
-GITHUB_CLIENT_SECRET=
-GOOGLE_CLIENT_ID=
-GOOGLE_CLIENT_SECRET=
-LINKEDIN_CLIENT_ID=
-LINKEDIN_CLIENT_SECRET=
+GITHUB_CLIENT_ID=********
+GITHUB_CLIENT_SECRET=********
+GOOGLE_CLIENT_ID=********
+GOOGLE_CLIENT_SECRET=********
+LINKEDIN_CLIENT_ID=********
+LINKEDIN_CLIENT_SECRET=********

website/app/controllers/authentication_controller.ts

@@ -0,0 +1,41 @@
+import type { HttpContext } from '@adonisjs/core/http'
+
+export default class AuthenticationController {
+  async login() {}
+
+  async initiateGithubLogin({ ally, inertia }: HttpContext) {
+    const url = await ally.use('github').redirectUrl()
+    return inertia.location(url)
+  }
+
+  async callbackForGithubLogin({ response, ally }: HttpContext) {
+    const github = ally.use('github')
+    const user = await github.user()
+
+    return response.json({ user })
+  }
+
+  async initiateGoogleLogin({ ally, inertia }: HttpContext) {
+    const url = await ally.use('google').redirectUrl()
+    return inertia.location(url)
+  }
+
+  async callbackForGoogleLogin({ response, ally }: HttpContext) {
+    const google = ally.use('google')
+    const user = await google.user()
+
+    return response.json({ user })
+  }
+
+  async initiateLinkedinLogin({ ally, inertia }: HttpContext) {
+    const url = await ally.use('linkedin').redirectUrl()
+    return inertia.location(url)
+  }
+
+  async callbackForLinkedinLogin({ response, ally }: HttpContext) {
+    const linkedin = ally.use('linkedin')
+    const user = await linkedin.user()
+
+    return response.json({ user })
+  }
+}

website/app/messages.ts

@@ -0,0 +1,8 @@
+export const messages = {
+  auth: {
+    oauth: {
+      accessDenied: 'O pedido de início de sessão foi rejeitado.',
+      stateMismatch: 'Ocorreu um erro ao iniciar sessão. Por favor, tenta novamente.',
+    },
+  },
+} as const

website/app/middleware/verify_social_callback_middleware.ts

@@ -0,0 +1,34 @@
+import { SocialProviders } from '@adonisjs/ally/types'
+import type { HttpContext } from '@adonisjs/core/http'
+import type { NextFn } from '@adonisjs/core/types/http'
+import { messages } from '../messages.js'
+
+export default class VerifySocialCallbackMiddleware {
+  async handle(
+    { response, session, ally }: HttpContext,
+    next: NextFn,
+    options: { provider: keyof SocialProviders }
+  ) {
+    const oauth = ally.use(options.provider)
+
+    if (oauth.accessDenied()) {
+      session.flashErrors({ oauth: messages.auth.oauth.accessDenied })
+      return response.redirect('/login')
+    }
+
+    if (oauth.stateMisMatch()) {
+      session.flashErrors({ oauth: messages.auth.oauth.stateMismatch })
+      return response.redirect('/login')
+    }
+
+    const postRedirectError = oauth.getError()
+    if (postRedirectError) {
+      session.flashErrors({ oauth: postRedirectError })
+      return response.redirect('/login')
+    }
+
+    const output = await next()
+
+    return output
+  }
+}

website/config/ally.ts

@@ -6,6 +6,8 @@ const allyConfig = defineConfig({
     clientId: env.get('GITHUB_CLIENT_ID'),
     clientSecret: env.get('GITHUB_CLIENT_SECRET'),
     callbackUrl: '',
+    scopes: ['user:email'],
+    allowSignup: false,
   }),
   google: services.google({
     clientId: env.get('GOOGLE_CLIENT_ID'),

website/config/inertia.ts

@@ -11,7 +11,7 @@ const inertiaConfig = defineConfig({
    * Data that should be shared with all rendered pages
    */
   sharedData: {
-    errors: (ctx) => ctx.session?.flashMessages.get('errors'),
+    errors: (ctx) => ctx.session?.flashMessages.get('errorsBag'),
   },
 
   /**

website/inertia/app/app.tsx

@@ -1,6 +1,7 @@
 /// <reference path="../../adonisrc.ts" />
-/// <reference path="../../config/inertia.ts" />
+/// <reference path="../../config/ally.ts" />
 /// <reference path="../../config/auth.ts" />
+/// <reference path="../../config/inertia.ts" />
 
 import '../css/app.css'
 

website/inertia/app/tuyau.ts

@@ -1,7 +1,8 @@
 import { createTuyau } from '@tuyau/client'
 import { api } from '#.adonisjs/api'
 
+console.log(import.meta.env.BASE_URL)
 export const tuyau = createTuyau({
   api,
-  baseUrl: import.meta.env.BASE_URL || 'http://localhost:3333',
+  baseUrl: 'http://localhost:3333',
 })

website/inertia/hooks/use_error.ts

@@ -0,0 +1,29 @@
+import { usePage } from '@inertiajs/react'
+import { useEffect, useMemo } from 'react'
+import { Toast, toast } from './use_toast'
+
+export function useError(key: string) {
+  const page = usePage()
+  const error = useMemo(() => {
+    const props = page.props
+    if (props.errors && key in props.errors) {
+      return props.errors[key]
+    }
+
+    return null
+  }, [page.props])
+
+  return error
+}
+
+export function useErrorToast(key: string, toastCreator: (msg: string) => Toast) {
+  const error = useError(key)
+  const toastContent = useMemo(() => error && toastCreator(error), [error])
+
+  useEffect(() => {
+    if (toastContent) {
+      const t = toast(toastContent)
+      return () => t.dismiss()
+    }
+  }, [toastContent])
+}

website/inertia/hooks/use_toast.ts

@@ -135,7 +135,7 @@ function dispatch(action: Action) {
   })
 }
 
-type Toast = Omit<ToasterToast, 'id'>
+export type Toast = Omit<ToasterToast, 'id'>
 
 function toast({ ...props }: Toast) {
   const id = genId()

website/inertia/layouts/applayout.tsx

@@ -1,11 +1,12 @@
-import { ReactElement } from 'react'
+import React from 'react'
 import { Head } from '@inertiajs/react'
 import NavBar from '../components/navbar'
+import { Toaster } from '~/components/ui/toaster'
 
 type Props = {
   title: string
-  children: ReactElement[]
-  className: string
+  children: React.ReactNode
+  className?: string
 }
 
 export default function AppLayout({ title, children, className }: Props) {
@@ -22,10 +23,8 @@ export default function AppLayout({ title, children, className }: Props) {
         <div className="sticky left-0 right-0 top-0 z-30">
           <NavBar />
         </div>
-        <div className={'flex-1' + ' ' + className}>
-          {children}
-          <slot />
-        </div>
+        <div className={'flex-1' + ' ' + className}>{children}</div>
+        <Toaster />
       </div>
     </>
   )

website/inertia/pages/login.tsx

@@ -1,14 +1,20 @@
-import { Button } from '~/components/ui/button'
+import { Link } from '@tuyau/inertia/react'
+import { Button, buttonVariants } from '~/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '~/components/ui/card'
 import { Input } from '~/components/ui/input'
 import { Label } from '~/components/ui/label'
 import { Separator } from '~/components/ui/separator'
+import { useError } from '~/hooks/use_error'
+import { cn } from '~/lib/utils'
 
 export default function Login() {
+  const oauthError = useError('oauth')
+
   return (
+    // <AppLayout title="Iniciar Sessão">
     <div className="flex items-center justify-center w-full h-dvh">
       <div className="flex flex-col gap-6 max-w-sm">
-        <Card>
+        <Card className={cn(oauthError && 'border-red-600')}>
           <CardHeader>
             <CardTitle className="text-2xl">Iniciar Sessão</CardTitle>
             <CardDescription>
@@ -43,9 +49,29 @@ export default function Login() {
                     <p className="text-sm text-muted-foreground min-w-max">Ou</p>
                     <Separator className="shrink" />
                   </div>
-                  <Button variant="outline" className="w-full">
-                    Iniciar Sessão com o Google
-                  </Button>
+                  <div className="grid grid-cols-3 gap-2">
+                    <Link
+                      route="auth.google.initiate"
+                      className={cn(buttonVariants({ variant: 'outline' }), 'w-full')}
+                    >
+                      <span className="sr-only">Iniciar Sessão com o</span> Google
+                      {/* <Google className="h-5 w-5" /> */}
+                    </Link>
+                    <Link
+                      route="auth.github.initiate"
+                      className={cn(buttonVariants({ variant: 'outline' }), 'w-full')}
+                    >
+                      <span className="sr-only">Iniciar Sessão com o</span> Github
+                      {/* <Github className="h-5 w-5" /> */}
+                    </Link>
+                    <Link
+                      route="auth.linkedin.initiate"
+                      className={cn(buttonVariants({ variant: 'outline' }), 'w-full')}
+                    >
+                      <span className="sr-only">Iniciar Sessão com o</span> LinkedIn
+                      {/* <LinkedIn className="h-5 w-5" /> */}
+                    </Link>
+                  </div>
                 </div>
               </div>
               <div className="mt-4 text-center text-sm">
@@ -57,7 +83,9 @@ export default function Login() {
             </form>
           </CardContent>
         </Card>
+        {oauthError && <p className="text-sm text-red-600 text-center">{oauthError}</p>}
       </div>
     </div>
+    // </AppLayout>
   )
 }

website/start/kernel.ts

@@ -46,6 +46,7 @@ router.use([
  * the routes or the routes group.
  */
 export const middleware = router.named({
+  verifySocialCallback: () => import('#middleware/verify_social_callback_middleware'),
   guest: () => import('#middleware/guest_middleware'),
   auth: () => import('#middleware/auth_middleware'),
 })

website/start/routes.ts

@@ -7,10 +7,46 @@
 |
 */
 import router from '@adonisjs/core/services/router'
+import { middleware } from '#start/kernel'
 
+const AuthenticationController = () => import('#controllers/authentication_controller')
 const TicketsController = () => import('#controllers/tickets_controller')
 
 router.on('/').renderInertia('home')
 router.on('/login').renderInertia('login')
 router.get('/tickets', [TicketsController, 'index'])
 router.on('/tickets/:id/checkout').renderInertia('payments').as('checkout')
+
+router
+  .group(() => {
+    // Github
+    router
+      .get('/github/initiate', [AuthenticationController, 'initiateGithubLogin'])
+      .as('auth.github.initiate')
+
+    router
+      .get('/github/callback', [AuthenticationController, 'callbackForGithubLogin'])
+      .middleware(middleware.verifySocialCallback({ provider: 'github' }))
+      .as('auth.github.callback')
+
+    // Google
+    router
+      .get('/google/initiate', [AuthenticationController, 'initiateGoogleLogin'])
+      .as('auth.google.initiate')
+
+    router
+      .get('/google/callback', [AuthenticationController, 'callbackForGoogleLogin'])
+      .middleware(middleware.verifySocialCallback({ provider: 'google' }))
+      .as('auth.google.callback')
+
+    // LinkedIn
+    router
+      .get('/linkedin/initiate', [AuthenticationController, 'initiateLinkedinLogin'])
+      .as('auth.linkedin.initiate')
+
+    router
+      .get('/linkedin/callback', [AuthenticationController, 'callbackForLinkedinLogin'])
+      .middleware(middleware.verifySocialCallback({ provider: 'linkedin' }))
+      .as('auth.linkedin.callback')
+  })
+  .prefix('/auth')