feat: add check for portal-access

app/composables/useAuth.js

@@ -37,7 +37,7 @@ export const useAuth = () => {
         method: 'POST',
         body: {
           code,
-          redirectUri: `${window.location.origin}/`
+          redirectUri: `${window.location.origin}/oauth`
         }
       })
 

app/pages/oauth/index.vue

@@ -2,19 +2,35 @@
 import { ref, onMounted } from 'vue'
 
 const config = useRuntimeConfig()
+const route = useRoute()
+const { exchangeCodeForToken } = useAuth()
 
 const isInitialized = ref(false)
 const isLoggingIn = ref(false)
+const errorMessage = ref('')
 
-onMounted(() => {
+onMounted(async () => {
   isInitialized.value = true
+
+  if (route.query.code) {
+    isLoggingIn.value = true
+    const success = await exchangeCodeForToken(route.query.code)
+
+    if (success) {
+      await navigateTo('/')
+    } else {
+      errorMessage.value = 'Access Denied'
+      isLoggingIn.value = false
+    }
+  }
 })
 
 const handleLogin = () => {
   if (isLoggingIn.value) return
   isLoggingIn.value = true
+  errorMessage.value = ''
 
-  const redirectUri = `${window.location.origin}/`
+  const redirectUri = `${window.location.origin}/oauth`
 
   const authUrl = new URL(
     `${config.public.keycloakUrl}/realms/${config.public.keycloakRealm}/protocol/openid-connect/auth`
@@ -23,7 +39,7 @@ const handleLogin = () => {
   authUrl.searchParams.append('client_id', config.public.keycloakClientId)
   authUrl.searchParams.append('redirect_uri', redirectUri)
   authUrl.searchParams.append('response_type', 'code')
-  authUrl.searchParams.append('scope', 'openid profile email')
+  authUrl.searchParams.append('scope', 'openid profile email roles')
 
   window.location.href = authUrl.toString()
 }
@@ -39,12 +55,17 @@ const handleLogin = () => {
         <p style="color: #8b949e; font-size: 0.95rem; margin-bottom: 1.5rem;">
           Hai there :3
         </p>
+
+        <p v-if="errorMessage" style="color: #f85149; font-size: 0.875rem; margin-bottom: 1rem;">
+          {{ errorMessage }}
+        </p>
+
         <button type="button" class="btn-login-action" :disabled="!isInitialized || isLoggingIn" @click="handleLogin">
           <span v-if="isLoggingIn" class="spinner sm btn-spinner"></span>
           <img v-else src="/keycloak/favicon.svg" alt="Keycloak Logo"
             style="width: 18px; height: 18px; margin-right: 8px; vertical-align: middle;" />
           <span style="vertical-align: middle;">
-            {{ isLoggingIn ? 'Redirecting...' : 'Login with Keycloak' }}
+            {{ isLoggingIn ? 'Logging in...' : 'Login with Keycloak' }}
           </span>
         </button>
       </div>