feat: dynamic oauth buttons rendering

Author: ivanskv2000

.env.example

@@ -3,8 +3,29 @@ ENV=dev # dev | prod | demo
 DATABASE_URL=postgresql+psycopg2://evsy:evsy@db:5432/evsy
 FRONTEND_URL=http://localhost:3000
 
+
 # Frontend
 VITE_ENV=dev # dev | prod | demo
 VITE_API_URL=http://localhost:8000/api/v1
 VITE_LOG_LEVEL=error
-__VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS=demo.evsy.dev
+__VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS=demo.evsy.dev
+
+
+# Auth
+
+## Secret key for signing JWTs. Use a secure 32+ character string.
+SECRET_KEY=YOUR_32_CHAR_SECRET_KEY
+
+## GitHub OAuth credentials
+## Create your app here: https://github.com/settings/developers
+## Set "Authorization callback URL" to:
+##   http://localhost:8000/api/v1/auth/oauth/callback
+GITHUB_CLIENT_ID=
+GITHUB_CLIENT_SECRET=
+
+## Google OAuth credentials
+## Create credentials here: https://console.cloud.google.com/apis/credentials
+## Set "Authorized redirect URI" to:
+##   http://localhost:8000/api/v1/auth/oauth/callback
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=

backend/app/modules/auth/router.py

@@ -18,9 +18,7 @@
     UserLogin,
 )
 from app.modules.auth.token import create_access_token, get_current_user
-from app.settings import Settings
-
-settings = Settings()
+from app.settings import get_settings
 
 router = APIRouter()
 
@@ -102,8 +100,12 @@ def start_oauth_login(
     "/oauth/callback", name="oauth_callback", dependencies=[Depends(ensure_not_demo)]
 )
 def handle_oauth_callback(
-    code: str = Query(...),
-    state: str = Query(...),
+    code: str = Query(...), state: str = Query(...), settings=Depends(get_settings)
 ):
     final_url = f"{settings.frontend_url}/oauth/callback?code={code}&state={state}"
     return RedirectResponse(url=final_url)
+
+
+@router.get("/providers", tags=["auth"])
+def list_oauth_providers(settings=Depends(get_settings)):
+    return {"providers": settings.available_oauth_providers}

backend/app/settings.py

@@ -43,6 +43,15 @@ def is_prod(self):
     def is_demo(self):
         return self.env == "demo"
 
+    @property
+    def available_oauth_providers(self) -> list[str]:
+        providers = []
+        if self.github_client_id and self.github_client_secret:
+            providers.append("github")
+        if self.google_client_id and self.google_client_secret:
+            providers.append("google")
+        return providers
+
 
 @lru_cache()
 def get_settings() -> Settings:

backend/tests/conftest.py

@@ -1,14 +1,13 @@
+import bcrypt
 import pytest
 from fastapi.testclient import TestClient
 from sqlalchemy.orm import Session
 
 from app.core.database import Base, get_db, init_db
 from app.factory import create_app
-from app.settings import Settings
-
-import bcrypt
-from app.modules.auth.token import create_access_token
 from app.modules.auth.crud import create_user
+from app.modules.auth.token import create_access_token
+from app.settings import Settings
 
 # Load test settings from .env.test
 test_settings = Settings(_env_file=".env.test")
@@ -59,13 +58,15 @@ def test_user(override_get_db):
 def access_token(test_user):
     return create_access_token({"sub": str(test_user.email)})
 
+
 # FastAPI test client
 @pytest.fixture(scope="module")
 def client():
     with TestClient(app) as c:
         yield c
 
+
 @pytest.fixture
 def auth_client(client, access_token):
     client.headers.update({"Authorization": f"Bearer {access_token}"})
-    return client
+    return client

frontend/src/modules/auth/api.ts

@@ -21,3 +21,6 @@ export const loginWithOAuth = (provider: OAuthProvider, code: string) =>
     provider,
     token: code,
   })
+
+export const getAvailableOAuthProviders = () =>
+  api.get<{ providers: OAuthProvider[] }>('/auth/providers')

frontend/src/modules/auth/components/LoginForm.vue

@@ -42,9 +42,13 @@ const onSubmit = handleSubmit(values => {
   <form @submit="onSubmit" class="mt-2 space-y-6">
     <div class="grid gap-6">
       <!-- OAuth buttons -->
-      <div v-if="!isDemo" class="flex flex-col gap-4">
-        <OauthButton class="flex-1" provider="github" />
-        <OauthButton class="flex-1" provider="google" />
+      <div v-if="!isDemo && auth.availableProviders.length" class="flex flex-col gap-4">
+        <OauthButton
+          v-for="provider in auth.availableProviders"
+          :key="provider"
+          class="flex-1"
+          :provider="provider"
+        />
       </div>
 
       <!-- Divider -->

frontend/src/modules/auth/components/SignupForm.vue

@@ -45,9 +45,13 @@ const onSubmit = handleSubmit(values => {
   <form @submit="onSubmit" class="mt-2 space-y-6">
     <div class="grid gap-6">
       <!-- OAuth Buttons -->
-      <div v-if="!isDemo" class="flex flex-col gap-4">
-        <OauthButton class="flex-1" provider="github" />
-        <OauthButton class="flex-1" provider="google" />
+      <div v-if="!isDemo && auth.availableProviders.length" class="flex flex-col gap-4">
+        <OauthButton
+          v-for="provider in auth.availableProviders"
+          :key="provider"
+          class="flex-1"
+          :provider="provider"
+        />
       </div>
 
       <!-- Divider -->

frontend/src/modules/auth/stores/useAuthStore.ts

@@ -1,11 +1,18 @@
 import { defineStore } from 'pinia'
-import { ref, watch } from 'vue'
-import { getUser, loginWithEmail, signupWithEmail, loginWithOAuth } from '../api'
+import { ref, watch, onMounted } from 'vue'
+import {
+  getUser,
+  loginWithEmail,
+  signupWithEmail,
+  loginWithOAuth,
+  getAvailableOAuthProviders,
+} from '../api'
 import type { OAuthProvider } from '../types'
 
 export const useAuthStore = defineStore('auth', () => {
   const token = ref<string | null>(localStorage.getItem('token'))
   const email = ref<string | null>(localStorage.getItem('email'))
+  const availableProviders = ref<OAuthProvider[]>([])
 
   watch(token, newToken => {
     if (newToken) {
@@ -23,6 +30,17 @@ export const useAuthStore = defineStore('auth', () => {
     }
   })
 
+  const fetchOAuthProviders = async () => {
+    try {
+      const response = await getAvailableOAuthProviders()
+      availableProviders.value = response.data.providers
+    } catch {
+      availableProviders.value = []
+    }
+  }
+
+  onMounted(fetchOAuthProviders)
+
   const login = async (emailInput: string, password: string) => {
     const response = await loginWithEmail({ email: emailInput, password })
     token.value = response.data.access_token
@@ -54,6 +72,7 @@ export const useAuthStore = defineStore('auth', () => {
   return {
     token,
     email,
+    availableProviders,
     login,
     signup,
     loginWithOAuthCode,