Merge pull request #1 from devforth/open-signup

fix: Add open signup configuration for OAuth plugin

Author: SerVitasik

custom/OAuthCallback.vue

@@ -18,12 +18,13 @@ onMounted(async () => {
   const urlParams = new URLSearchParams(window.location.search);
   const code = urlParams.get('code');
   const state = urlParams.get('state');
-  
-  if (code && state) {
+  const redirectUri = window.location.origin + '/oauth/callback';
+  if (code && state && redirectUri) {
     const encodedCode = encodeURIComponent(code);
     const encodedState = encodeURIComponent(state);
+    const encodedRedirectUri = encodeURIComponent(redirectUri);
     const response = await callAdminForthApi({
-      path: `/oauth/callback?code=${encodedCode}&state=${encodedState}`,
+      path: `/oauth/callback?code=${encodedCode}&state=${encodedState}&redirect_uri=${encodedRedirectUri}`,
       method: 'GET',
     });
     if (response.allowedLogin) {

custom/OAuthLoginButton.vue

@@ -0,0 +1,37 @@
+<template>
+  <div :class="meta.iconOnly ? 'flex flex-row justify-center items-center gap-3' : 'flex flex-col justify-center items-center gap-2'" >
+    <a 
+      v-for="provider in meta.providers" 
+      :key="provider.provider"
+      :href="handleLogin(provider.authUrl)" 
+      class="border dark:border-gray-400 flex items-center justify-center hover:bg-gray-50 hover:dark:border-gray-300 hover:dark:bg-gray-700"
+      :class="[
+        meta.iconOnly ? 'w-11 h-11 p-0' : 'w-full py-2 px-4',
+        meta.pill ? 'rounded-full' : 'rounded-md'
+      ]"
+    >
+      <div v-html="provider.icon" class="w-6 h-6" :class="meta.iconOnly ? 'mr-0' : 'mr-4'" :alt="getProviderName(provider.provider)" />
+      <span v-if="!meta.iconOnly" class="font-medium dark:text-white">Continue with {{ getProviderName(provider.provider) }}</span>
+    </a>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  meta: {
+    type: Object,
+    required: true
+  }
+});
+
+const getProviderName = (provider) => {
+  return provider.replace('AdminForthAdapter', '').replace('Oauth2', '');
+};
+
+const handleLogin = (authUrl) => {
+  const redirectUri = window.location.origin + '/oauth/callback';
+  const url = new URL(authUrl);
+  url.searchParams.set('redirect_uri', redirectUri);
+  return url.toString();
+};
+</script>

custom/OAuthLoginButtons.vue

@@ -10,6 +10,13 @@ interface OAuthPluginOptions {
   emailField: string;
   emailConfirmedField?: string;
   adapters: OAuth2Adapter[];
+  iconOnly?: boolean;
+  pill?: boolean;
+  authenticationExpireDuration?: number;
+  openSignup?: {
+    enabled?: boolean;
+    defaultFieldValues?: Record<string, any>;
+  };
 }
 
 export default class OAuthPlugin extends AdminForthPlugin {
@@ -22,7 +29,17 @@ export default class OAuthPlugin extends AdminForthPlugin {
     if (!options.emailField) {
       throw new Error('OAuthPlugin: emailField is required');
     }
-    this.options = options;
+    
+    // Set default values for openSignup
+    this.options = {
+      ...options,
+      iconOnly: options.iconOnly ?? false,
+      pill: options.pill ?? false,
+      openSignup: {
+        enabled: options.openSignup?.enabled ?? false,
+        defaultFieldValues: options.openSignup?.defaultFieldValues ?? {},
+      }
+    };
   }
 
   async modifyResourceConfig(adminforth: IAdminForth, resource: AdminForthResource) {
@@ -31,11 +48,6 @@ export default class OAuthPlugin extends AdminForthPlugin {
     this.adminforth = adminforth;
     this.resource = resource;
 
-    // Add custom page for OAuth callback
-    if (!adminforth.config.customization.customPages) {
-      adminforth.config.customization.customPages = [];
-    }
-
     adminforth.config.customization.customPages.push({
       path: '/oauth/callback',
       component: { 
@@ -72,24 +84,30 @@ export default class OAuthPlugin extends AdminForthPlugin {
     }
 
     // Register the component with the correct plugin path
-    const componentPath = `@@/plugins/${this.constructor.name}/OAuthLoginButton.vue`;
-    this.componentPath('OAuthLoginButton.vue');
+    const componentPath = `@@/plugins/${this.constructor.name}/OAuthLoginButtons.vue`;
+    this.componentPath('OAuthLoginButtons.vue');
 
     const baseUrl = adminforth.config.baseUrl || '';
-    this.options.adapters.forEach(adapter => {
+    const providers = this.options.adapters.map(adapter => {
       const state = Buffer.from(JSON.stringify({
         provider: adapter.constructor.name
       })).toString('base64');
 
-      adminforth.config.customization.loginPageInjections.underInputs.push({
-        file: componentPath,
-        meta: {
-          authUrl: `${adapter.getAuthUrl()}&state=${state}`,
-          provider: adapter.constructor.name,
-          baseUrl,
-          icon: adapter.getIcon?.() || ''
-        }
-      });
+      return {
+        authUrl: `${adapter.getAuthUrl()}&state=${state}`,
+        provider: adapter.constructor.name,
+        baseUrl,
+        icon: adapter.getIcon(),
+      };
+    });
+
+    adminforth.config.customization.loginPageInjections.underInputs.push({
+      file: componentPath,
+      meta: {
+        providers,
+        iconOnly: this.options.iconOnly,
+        pill: this.options.pill,
+      }
     });
   }
 
@@ -124,7 +142,7 @@ export default class OAuthPlugin extends AdminForthPlugin {
         response,
         username,
         pk: user.id,
-        expireInDays: this.adminforth.config.auth.rememberMeDays 
+        expireInDays: this.options.authenticationExpireDuration ? this.options.authenticationExpireDuration : this.adminforth.config.auth.rememberMeDays 
       });
     }
 
@@ -137,7 +155,7 @@ export default class OAuthPlugin extends AdminForthPlugin {
       path: '/oauth/callback',
       noAuth: true,
       handler: async ({ query, response, headers, cookies, requestUrl }) => {
-        const { code, state } = query;
+        const { code, state, redirect_uri } = query;
         if (!code) {
           return { error: 'No authorization code provided' };
         }
@@ -155,20 +173,26 @@ export default class OAuthPlugin extends AdminForthPlugin {
             return { error: 'Invalid OAuth provider' };
           }
 
-          const userInfo = await adapter.getTokenFromCode(code);
+          const userInfo = await adapter.getTokenFromCode(code, redirect_uri);
 
           let user = await this.adminforth.resource(this.resource.resourceId).get([
             Filters.EQ(this.options.emailField, userInfo.email)
           ]);
 
           if (!user) {
+            // Check if open signup is enabled
+            if (!this.options.openSignup?.enabled) {
+              return { 
+                error: 'User not found and open signup is disabled',
+                redirectTo: '/login'
+              };
+            }
+
             // When creating a new user, set emailConfirmedField to true if it's configured
             const createData: any = {
-              id: randomUUID(),
-              created_at: new Date().toISOString(),
               [this.options.emailField]: userInfo.email,
-              role: 'user',
-              password_hash: ''
+              [this.adminforth.config.auth.passwordHashField]: '',
+              ...this.options.openSignup.defaultFieldValues
             };
 
             if (this.options.emailConfirmedField) {