Belajar ElysiaJS - OAuth & Social Login Integration

#Pendahuluan

Setelah di episode 12 kita mengimplementasikan JWT authentication, pada episode ini kita akan menambahkan OAuth social login — mekanisme yang memungkinkan user login menggunakan akun GitHub, Google, atau provider lain tanpa membuat password baru.

#OAuth Flow di ElysiaJS

#Konsep Dasar OAuth

OAuth 2.0 adalah protokol standar untuk authorization. Alurnya:

1. User diklik redirect ke provider (GitHub/Google).
2. User authorize aplikasi di provider.
3. Provider redirect kembali ke callback URL dengan authorization code.
4. Server menukar authorization code dengan access token.
5. Server menggunakan access token untuk mengambil data user.

#Menggunakan Plugin OAuth

bun add @elysiajs/oauth-providers

import { Elysia } from 'elysia'
import { githubOAuth } from '@elysiajs/oauth-providers'
 
const app = new Elysia()
  .use(githubOAuth({
    client_id: process.env.GITHUB_CLIENT_ID,
    client_secret: process.env.GITHUB_CLIENT_SECRET,
    scope: ['user:email'],
  }))
  .listen(3000)

#Setup Callback Route

.get('/auth/github/callback', async ({ code, jwt, cookie }) => {
  if (!code) return { error: 'Authorization code not provided' }
 
  const token = await exchangeCodeForToken(code)
  const githubUser = await fetchGitHubUser(token.access_token)
 
  const dbUser = await findOrCreateUser({
    provider: 'github',
    providerId: githubUser.id,
    email: githubUser.email,
    name: githubUser.name,
  })
 
  const jwtToken = await jwt.sign({ sub: dbUser.id, exp: '7d' })
 
  cookie.session.set(jwtToken, {
    httpOnly: true,
    secure: true,
  })
 
  return { message: 'Logged in via GitHub' }
})

#Integrasi dengan Google OAuth

import { googleOAuth } from '@elysiajs/oauth-providers'
 
const app = new Elysia()
  .use(googleOAuth({
    client_id: process.env.GOOGLE_CLIENT_ID,
    client_secret: process.env.GOOGLE_CLIENT_SECRET,
    scope: ['openid', 'email', 'profile'],
  }))

#Best Practice

#Simpan Refresh Token di httpOnly Cookie

Jangan pernah simpan refresh token di localStorage — ini rentan terhadap XSS attack. Selalu gunakan httpOnly cookie.

#Rotate Access Token

Rotasi access token secara berkala membatasi dampak jika token bocor:

const newAccessToken = await jwt.sign({
  sub: user.id,
  exp: '15m', // akses pendek
})
 
const newRefreshToken = await jwt.sign({
  sub: user.id,
  exp: '7d', // refresh panjang
})

#Rate Limit Login Attempts

Terapkan rate limiting ketat pada endpoint login untuk mencegah brute force:

.post('/auth/login', loginHandler, {
  rateLimit: { max: 5, duration: 300000 }
})

#Penutup

Pada episode 13 ini, kalian telah memahami integrasi OAuth di ElysiaJS — dari GitHub OAuth hingga Google OAuth dan best practice keamanan.

Inti yang harus dibawa pulang:

• OAuth memungkinkan login tanpa password menggunakan akun provider.
• Plugin @elysiajs/oauth-providers menyederhanakan integrasi.
• Refresh token harus disimpan di httpOnly cookie.
• Rate limit login attempts untuk mencegah brute force.

Di episode 14 selanjutnya kita akan memahami WebSocket dan real-time communication — setup WebSocket endpoint, typed messages, broadcast, dan room management untuk aplikasi chat atau live notification. Sampai jumpa di episode 14!