Rebin/test-user-table.html at main · Sajidcodez/Rebin · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>User Table Fix Test</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background-color: #f5f5f5;
      }
      .test-section {
        background: white;
        padding: 20px;
        margin: 20px 0;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .success {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
        padding: 10px;
        border-radius: 4px;
        margin: 10px 0;
      }
      .error {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
        padding: 10px;
        border-radius: 4px;
        margin: 10px 0;
      }
      .info {
        background: #d1ecf1;
        color: #0c5460;
        border: 1px solid #bee5eb;
        padding: 10px;
        border-radius: 4px;
        margin: 10px 0;
      }
      .step {
        background: #fff3cd;
        color: #856404;
        border: 1px solid #ffeaa7;
        padding: 10px;
        border-radius: 4px;
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <h1>🔧 User Table Fix Test</h1>

    <div class="test-section">
      <h2>🚨 Problem Fixed</h2>
      <p>
        <strong>Issue:</strong> Users were being created in Supabase Auth but
        not in your custom `users` table, causing empty tables.
      </p>
      <p>
        <strong>Solution:</strong> Updated AuthContext to create user profiles
        in both `auth.users` and custom `users` table.
      </p>
    </div>

    <div class="test-section">
      <h2>📋 Setup Steps</h2>

      <div class="step">
        <h3>Step 1: Apply Database Triggers (Recommended)</h3>
        <ol>
          <li>Go to your <strong>Supabase Dashboard</strong></li>
          <li>Navigate to <strong>SQL Editor</strong></li>
          <li>
            Copy and paste the contents of
            <code>database/user_trigger.sql</code>
          </li>
          <li>Click <strong>"Run"</strong> to execute the triggers</li>
        </ol>
        <p>
          <em
            >This creates automatic triggers that ensure every user gets a
            profile record.</em
          >
        </p>
      </div>

      <div class="step">
        <h3>Step 2: Test the Fix</h3>
        <ol>
          <li>Restart your dev server: <code>npm run dev</code></li>
          <li>
            Go to <a href="http://localhost:5173/register">Registration Page</a>
          </li>
          <li>Create a new account with test data</li>
          <li>
            Check your Supabase dashboard → Table Editor →
            <code>users</code> table
          </li>
        </ol>
      </div>
    </div>

    <div class="test-section">
      <h2>🧪 Test Cases</h2>

      <h3>Test 1: New User Registration</h3>
      <div class="info">
        <strong>What to do:</strong>
        <ol>
          <li>
            Go to <a href="http://localhost:5173/register">Register Page</a>
          </li>
          <li>
            Fill out the form:
            <ul>
              <li>First Name: <code>Test</code></li>
              <li>Last Name: <code>User</code></li>
              <li>Email: <code>testuser@example.com</code></li>
              <li>Password: <code>TestPass123!</code></li>
              <li>Confirm Password: <code>TestPass123!</code></li>
              <li>ZIP Code: <code>12345</code></li>
              <li>Check "I agree to terms"</li>
            </ul>
          </li>
          <li>Click "Create Account"</li>
        </ol>
      </div>

      <div class="success">
        <strong>Expected Result:</strong>
        <ul>
          <li>Success message appears</li>
          <li>Redirects to dashboard or login page</li>
          <li>
            Check Supabase Dashboard → Table Editor → <code>users</code> table
          </li>
          <li>You should see a new record with the user's data</li>
        </ul>
      </div>

      <h3>Test 2: Existing User Login</h3>
      <div class="info">
        <strong>What to do:</strong>
        <ol>
          <li>Go to <a href="http://localhost:5173/login">Login Page</a></li>
          <li>Enter credentials from Test 1</li>
          <li>Click "Sign In"</li>
        </ol>
      </div>

      <div class="success">
        <strong>Expected Result:</strong>
        <ul>
          <li>Success message appears</li>
          <li>Redirects to dashboard</li>
          <li>User profile is loaded correctly</li>
        </ul>
      </div>
    </div>

    <div class="test-section">
      <h2>🔍 Verification Steps</h2>

      <h3>Check Supabase Dashboard</h3>
      <ol>
        <li>Go to your <strong>Supabase Dashboard</strong></li>
        <li>Navigate to <strong>Table Editor</strong></li>
        <li>Select the <code>users</code> table</li>
        <li>
          You should see records with:
          <ul>
            <li><code>id</code> (UUID matching auth.users)</li>
            <li><code>email</code> (user's email)</li>
            <li><code>full_name</code> (first + last name)</li>
            <li>
              <code>metadata</code> (JSON with first_name, last_name, zip_code)
            </li>
            <li><code>email_verified</code> (boolean)</li>
            <li>
              <code>created_at</code> and <code>updated_at</code> (timestamps)
            </li>
          </ul>
        </li>
      </ol>

      <h3>Check Browser Console</h3>
      <ol>
        <li>Open browser console (F12)</li>
        <li>
          Look for messages like:
          <ul>
            <li>"Successfully created user profile in users table"</li>
            <li>"User profile not found, creating from metadata"</li>
          </ul>
        </li>
        <li>Make sure there are no error messages</li>
      </ol>
    </div>

    <div class="test-section">
      <h2>🔧 What the Fix Does</h2>

      <h3>Registration Flow:</h3>
      <ol>
        <li>User signs up → Creates record in <code>auth.users</code></li>
        <li>
          <code>createUserProfile</code> is called → Creates record in custom
          <code>users</code> table
        </li>
        <li>User metadata is stored in both places</li>
      </ol>

      <h3>Login Flow:</h3>
      <ol>
        <li>User logs in → Authenticated via <code>auth.users</code></li>
        <li>
          <code>ensureUserProfile</code> checks if record exists in custom
          <code>users</code> table
        </li>
        <li>If not found, creates it from user metadata</li>
        <li>Profile is fetched and set in the app</li>
      </ol>

      <h3>Database Triggers (Backup):</h3>
      <ol>
        <li>Any time <code>auth.users</code> is updated → Trigger fires</li>
        <li>
          Automatically creates/updates record in custom
          <code>users</code> table
        </li>
        <li>Ensures data consistency even if frontend fails</li>
      </ol>
    </div>

    <div class="test-section">
      <h2>🚨 Troubleshooting</h2>

      <h3>If users still don't appear in the `users` table:</h3>
      <ul>
        <li><strong>Check Browser Console:</strong> Look for error messages</li>
        <li>
          <strong>Check Supabase Logs:</strong> Go to Logs in your Supabase
          dashboard
        </li>
        <li>
          <strong>Verify Database Schema:</strong> Make sure the `users` table
          exists
        </li>
        <li>
          <strong>Test Database Triggers:</strong> Create a user manually in
          Supabase Auth
        </li>
      </ul>

      <h3>If you get permission errors:</h3>
      <ul>
        <li>
          <strong>Check RLS Policies:</strong> Make sure authenticated users can
          insert into `users` table
        </li>
        <li>
          <strong>Check Service Role:</strong> Ensure your Supabase project has
          proper permissions
        </li>
      </ul>
    </div>

    <div class="test-section">
      <h2>✅ Success Criteria</h2>
      <p>The fix is working when:</p>
      <ul>
        <li>✅ New registrations create records in both tables</li>
        <li>✅ Existing users get profiles created on login</li>
        <li>✅ Database triggers work as backup</li>
        <li>✅ No errors in browser console or Supabase logs</li>
        <li>✅ User data is properly stored and accessible</li>
      </ul>
    </div>

    <div class="test-section">
      <h2>📚 Files Modified</h2>
      <ul>
        <li>
          <code>frontend/src/contexts/AuthContext.tsx</code> - Updated to create
          user profiles
        </li>
        <li>
          <code>database/user_trigger.sql</code> - Database triggers for
          automatic profile creation
        </li>
        <li><code>USER_TABLE_FIX_GUIDE.md</code> - Detailed setup guide</li>
      </ul>
    </div>

    <script>
      // Check if dev server is running
      function checkServerStatus() {
        fetch("http://localhost:5173")
          .then((response) => {
            if (response.ok) {
              document.body.insertAdjacentHTML(
                "afterbegin",
                '<div class="success">✅ Development server is running on http://localhost:5173</div>'
              );
            } else {
              document.body.insertAdjacentHTML(
                "afterbegin",
                '<div class="error">❌ Server responded with error: ' +
                  response.status +
                  "</div>"
              );
            }
          })
          .catch((error) => {
            document.body.insertAdjacentHTML(
              "afterbegin",
              '<div class="error">❌ Cannot connect to development server. Make sure it\'s running on http://localhost:5173</div>'
            );
          });
      }

      // Check server status when page loads
      checkServerStatus();
    </script>
  </body>
</html>