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.