LovableFree

Prompt #2 - Cloud Connect & Admin Dashboard

Guides AI to build a secure website footer and admin login with specific authentication and access controls.

Generates a prompt for an AI to create a website footer incorporating Google and Apple authentication buttons, plus a dedicated admin login button.

The prompt
# Tip 2 — Admin Dashboard + Google Auth Prompt

You are a web developer specializing in authentication systems and administrative access.

## Step 1 — Ask for the Admin Email (ask this FIRST, before building anything)

Ask me:

**"What email address should be the default administrator? IMPORTANT: This MUST be a Gmail address (or a Google Workspace account), because admin login uses Google Authentication. A non-Google email will not be able to sign in."**

Wait for my answer. If the email I give is not a Gmail or Google-hosted address, warn me clearly and ask me to confirm or provide a different one before continuing. Do not proceed until you have a confirmed Google account email. Use my answer as admin_email everywhere below. Never invent or substitute a different address.

## Step 2 — Build the Following

Update the website footer and admin authentication flow according to these requirements:

### Footer
Add a single, discreet text link labeled **Admin** alongside standard footer links (Privacy, Terms, copyright). No auth buttons in the footer.

### Admin Login Page
Clicking Admin opens a dedicated, public login route (e.g. `/admin/login`) — it must NOT sit behind the auth guard. Offer:

* Continue with Google (official branding)
* Continue with Apple (official branding)
* Email + password (with show/hide, Log In, Forgot Password, validation)

Clean, professional, responsive.

### Admin Authorization
Only authorized admins may reach the dashboard. Treat admin_email as the default admin. After successful authentication AND authorization, redirect to the admin dashboard. Unauthorized users see a clear "Access denied" message. Never auto-log-in on link click.

### Dashboard Contents
The admin dashboard must display the `waitlist` table (email signups with timestamps) in a clean, sortable list with a total count and a CSV export button.

### Security
* Store roles in a separate `user_roles` table checked server-side — never on the profile/user record, never in localStorage.
* Protect the dashboard route with a server-side authorization check.
* No secrets in front-end code.

### CRITICAL — OAuth Redirect Rules (prevents auth loop)
* The OAuth redirect_uri MUST be a public, same-origin URL — use `window.location.origin` or the public login page URL. Never point it at a protected route like `/admin` or anything under the auth guard.
* The admin login page itself MUST be public (outside the `_authenticated` layout / auth gate).
* On the login page, subscribe to `supabase.auth.onAuthStateChange`; when SIGNED_IN fires, verify the admin role, then navigate to the dashboard. Do not rely on the OAuth redirect URL alone to land the user.
* The auth guard MUST await `supabase.auth.getUser()` before redirecting unauthenticated users — otherwise an in-flight session bounces back to login and loops.
* To preserve the intended destination, store it in sessionStorage or a query param on the public login page and navigate there only AFTER the session is confirmed.

## Expected Result
Footer shows only Admin → opens a public login page with Google/Apple/email → after auth, the confirmed admin (admin_email) lands on a dashboard showing the waitlist signups; everyone else sees "Access denied" — with no redirect loops.

When I click sign out it should bring me back to the homepage of the website

Begin with Step 1.