Merge branch 'master' of github.com:profullstack/generate-pdf-api

Author: ralyodio

bin/setup-auth-integration.sh

@@ -0,0 +1,35 @@
+#!/bin/bash
+
+# Script to set up auth integration between auth.users and public.users
+
+echo "This script will set up proper integration between auth.users and public.users tables."
+echo "It will create a trigger to automatically create a public user when an auth user is created."
+echo ""
+echo "Press Ctrl+C to cancel or Enter to continue..."
+read
+
+# Get the directory of the script
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
+
+# Change to the project root directory
+cd "$SCRIPT_DIR/.."
+
+# Check if supabase CLI is installed
+if ! command -v supabase &> /dev/null; then
+    echo "Error: Supabase CLI is not installed. Please install it first."
+    echo "See: https://supabase.com/docs/guides/cli"
+    exit 1
+fi
+
+# Apply the migration using the existing supabase-db.sh script
+./bin/supabase-db.sh
+
+echo "Migration applied successfully!"
+echo "Auth integration has been set up."
+echo ""
+echo "Next steps:"
+echo "1. Register a new user through the application"
+echo "2. The user will be created in both auth.users and public.users tables"
+echo "3. JWT authentication should now work correctly"
+
+exit 0

public/js/api-client.js

@@ -162,11 +162,21 @@ export class ApiClient {
    */
   static async createSubscription(email, plan, coin) {
     try {
+      // Get JWT token from localStorage
+      const jwtToken = localStorage.getItem('jwt_token');
+      
+      const headers = {
+        'Content-Type': 'application/json'
+      };
+      
+      // Add Authorization header with JWT token if available
+      if (jwtToken) {
+        headers['Authorization'] = `Bearer ${jwtToken}`;
+      }
+      
       const response = await fetch(`${this.baseUrl}/subscription`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
+        headers,
         body: JSON.stringify({
           email,
           plan,
@@ -192,9 +202,21 @@ export class ApiClient {
    * @returns {Promise<Object>} - Subscription status
    */
   static async checkSubscriptionStatus(email) {
-    return this.fetchJsonResponse(`${this.baseUrl}/subscription-status`, {
-      email
+    // This is a public endpoint that doesn't require authentication
+    const response = await fetch(`${this.baseUrl}/subscription-status`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ email })
     });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(errorData.error || response.statusText);
+    }
+
+    return await response.json();
   }
 
   /**

public/js/auth-ui.js

@@ -5,9 +5,9 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 function updateNavbar() {
-  const apiKey = localStorage.getItem('api_key');
-  const username = localStorage.getItem('username') || apiKey;
-  const isLoggedIn = !!apiKey;
+  const jwtToken = localStorage.getItem('jwt_token');
+  const username = localStorage.getItem('username');
+  const isLoggedIn = !!jwtToken;
 
   const navLinks = document.querySelector('.nav-links');
   if (!navLinks) return;
@@ -85,13 +85,16 @@ function logout() {
   // Clear authentication data
   localStorage.removeItem('username');
   localStorage.removeItem('jwt_token');
+  localStorage.removeItem('api_key'); // Remove any legacy API key
+  localStorage.removeItem('user'); // Remove user object
+  localStorage.removeItem('subscription_data'); // Remove subscription data
 
   // Update UI
   updateNavbar();
 
   // Redirect to home page if on a protected page
   const currentPath = window.location.pathname;
-  const protectedPages = ['/api-keys.html', '/settings.html'];
+  const protectedPages = ['/api-keys.html', '/settings.html', '/dashboard.html'];
 
   if (protectedPages.includes(currentPath)) {
     window.location.href = '/';

public/js/components/subscription-form.js

@@ -419,14 +419,17 @@ export class SubscriptionForm extends BaseComponent {
       this._error = null;
       this.render();
 
+      // Use subscription id if available, otherwise use email
+      const requestBody = this._subscription ? 
+        { id: this._subscription.id } : 
+        { email: this._email };
+      
       const response = await fetch('/api/1/subscription-status', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'
         },
-        body: JSON.stringify({
-          email: this._email
-        })
+        body: JSON.stringify(requestBody)
       });
 
       if (!response.ok) {
@@ -436,7 +439,7 @@ export class SubscriptionForm extends BaseComponent {
 
       const data = await response.json();
 
-      if (data.has_subscription) {
+      if (data.has_subscription || data.payment_verified) {
         // Subscription is active, show success message
         this._subscription = data.subscription;
         this._paymentInfo = null;
@@ -445,6 +448,36 @@ export class SubscriptionForm extends BaseComponent {
         // Show success message
         this.render();
         this.showSuccessMessage();
+        
+        // Generate fresh JWT token and redirect after 5 seconds
+        if (data.payment_verified) {
+          console.log('Payment verified, will redirect to API keys page in 5 seconds');
+          this._showRedirectCountdown();
+          
+          try {
+            // Request a fresh JWT token
+            const tokenResponse = await fetch('/api/1/auth/refresh-token', {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json'
+              },
+              body: JSON.stringify({
+                email: this._subscription.email
+              })
+            });
+            
+            if (tokenResponse.ok) {
+              console.log('JWT token refreshed successfully');
+            }
+          } catch (tokenError) {
+            console.error('Error refreshing JWT token:', tokenError);
+          }
+          
+          // Redirect after 5 seconds
+          setTimeout(() => {
+            window.location.href = '/views/api-keys.html';
+          }, 5000);
+        }
       } else {
         // Subscription is not active yet
         this._loading = false;
@@ -475,6 +508,7 @@ export class SubscriptionForm extends BaseComponent {
             <p><strong>Plan:</strong> ${this._subscription.plan === 'monthly' ? 'Monthly' : 'Yearly'}</p>
             <p><strong>Expiration Date:</strong> ${new Date(this._subscription.expiration_date).toLocaleDateString()}</p>
             <p>You can view your API usage and manage your subscription in your account dashboard.</p>
+            <p id="redirect-message" style="margin-top: 15px; font-weight: bold;"></p>
           </div>
         </div>
       `);
@@ -500,6 +534,25 @@ export class SubscriptionForm extends BaseComponent {
     this.render();
   }
 
+  /**
+   * Display redirect countdown message
+   * @private
+   */
+  _showRedirectCountdown() {
+    let seconds = 5;
+    const updateCountdown = () => {
+      const redirectMessage = this.$('#redirect-message');
+      if (redirectMessage) {
+        redirectMessage.textContent = `Redirecting to API keys page in ${seconds} seconds...`;
+        if (seconds > 0) {
+          seconds--;
+          setTimeout(updateCountdown, 1000);
+        }
+      }
+    };
+    updateCountdown();
+  }
+
   /**
    * Generate QR code for payment
    * @private