בנה מערכת אימות והטמעת משתמשים עם Claude Code

הבעיה

הוצאת לאוויר את האפליקציה שלך. אנשים רואים אותה. אף אחד לא יכול להירשם. אתה צריך דפי התחברות, Google OAuth, מסד נתונים לפרופילי משתמשים, זרימת onboarding שתופסת מי הם המשתמשים שלך, ואתה רוצה שכל הרשמה תסומן באופן אוטומטי בכלי השיווק בדוא"ל שלך. הגדרת כל זה מאפס נשמעת כמו שבוע של עבודה. בואו נעשה את זה ב25 דקות.

מה אתה בונה

אפליקציית Next.js עם אימות Supabase (Google ודוא"ל), מסד נתונים של פרופילים שנוצר אוטומטית עם ההרשמה, כושר onboarding בן 4 שלבים שישמור העדפות, ומערכת אירועים שמסנכרנת כל משתמש ל-ActiveCampaign עם תגיות כמו "beginner_level" ו"goal_build-tools." כשתסיים, משתמש לוחץ על "Sign in with Google," נוחת בـ onboarding, עונה על כמה שאלות, ובסוף הוא עוקב בחלוטין ב-CRM שלך — בלי שכתבת אפילו שאילתת SQL אחת בעצמך.

שלב ראשון: יסודות אימות Supabase

כל משתמש צריך פרופיל. במקום ליצור אחד באופן ידני אחרי הרשמה, נתן למסד הנתונים להתמודד עם זה באופן אוטומטי.

הנושא:

Set up Supabase auth for this Next.js project. Create a profiles table that extends auth.users — fields: id (references auth.users), email, full_name, avatar_url, experience_level, goal, onboarding_completed (boolean, default false), created_at, updated_at. Add a database trigger that auto-creates a profile row whenever a new user signs up — pull name and avatar from the auth metadata. Add an updated_at trigger too. Add RLS policies: anyone can read profiles, users can only update their own. Create three Supabase client helpers in lib/supabase/: a browser client (client.ts) using createBrowserClient, a server client using cookies (server.ts) using createServerClient, and an admin client using the service role key (admin.ts) using createClient from @supabase/supabase-js. Use @supabase/ssr for the browser and server clients.

מה Claude Code עושה: זה יוצר את ההגרה של SQL עם פונקציית handle_new_user() trigger — זה הרעיון המרכזי כאן. כשאימות Supabase יוצר משתמש, PostgreSQL מפעיל את ה-trigger ומכניס שורת פרופיל באופן אוטומטי. אין צורך בקריאת API נוספת. זה גם מגדיר שלושה עוזרי client: מצד ה-browser לרכיבי React, מצד השרת לנתיבי API, וכללי לפעולות שעוקפות אבטחה ברמת השורה.

נסה: עבור לדוח הבקרה של Supabase → עורך SQL. הדבק את הקוד ההגרה שנוצר והפעל אותו. ואז בדוק עורך טבלה — אתה צריך לראות את טבלת ה-profiles. הוסף את מפתחות Supabase שלך ל.env.local:

NEXT_PUBLIC_SUPABASE_URL=your-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

שלב שני: דפי התחברות והרשמה

משתמשים צריכים דרך להיכנס. Google OAuth בחלק העליון, דוא"ל כגיבוי.

הנושא:

Build login and register pages. Both should have a Google OAuth button at the top, a divider saying "or continue with email", then email/password fields. Register also needs a full name field. For OAuth, use supabase.auth.signInWithOAuth with provider "google" and redirect to /api/auth/callback. For email login, use signInWithPassword. For registration, create a server API route at /api/auth/register that uses the admin client to create users with email_confirm: true (no verification email needed), then the client signs them in with signInWithPassword immediately. Add middleware that protects /dashboard and /onboarding — redirect unauthenticated users to /login, redirect authenticated users away from login/register pages.

מה Claude Code עושה: זה בונה שני דפים וקו הרשמה של API. התבנית הקריטית היא יצירת משתמש בצד השרת — במקום להשתמש בהרשמת צד-client של Supabase (שתשלח דוא"ל אימות שאתה לא רוצה), אנחנו משתמשים בלקוח הכללי עם email_confirm: true. המשתמש נוצר ומאומת בשלב אחד. ה-middleware משתמש בsupabase.auth.getUser() בכל בקשה לנתיבים מוגנים.

נסה: הפעל npm run dev וביקר ב-/register. אתה צריך לראות את כפתור Google וטופס דוא"ל. הרשמה עם דוא"ל — אתה צריך נחות בדוח הבקרה ללא דוא"ל אימות שנשלח.

שלב שלישי: חוזר OAuth וטעינה מקדימה של פרופיל

כשGoogleשלח את המשתמש בחזרה, אנחנו מחליפים את הקוד עבור סשן ולוקחים את השם והתמונה שלהם.

הנושא:

Create an API route at /api/auth/callback. It receives a "code" query parameter from the OAuth redirect. Exchange it for a session using supabase.auth.exchangeCodeForSession(code). Then check if the user's profile has onboarding_completed set to false. If so, grab full_name and avatar_url from user.user_metadata (Google provides "full_name" and "picture") and update the profiles table. Redirect new users to /onboarding. If onboarding is already complete, redirect to /dashboard.

מה Claude Code עושה: החוזר מטפל בחילופי קוד OAuth — Google מפנה בחזרה עם code זמני, ו-Supabase מחליף אותו עבור סשן קבוע. ואז זה קורא את metadata של Google של המשתמש (שם, תמונת פרופיל) ומעדכן את טבלת ה-profiles. כשהמשתמש מגיע ל-onboarding, השם והתמונה שלהם כבר שם.

נסה: תצטרך אישורי OAuth של Google תחילה. עבור ל-Google Cloud Console → APIs & Credentials → צור OAuth Client ID. קבע את ה-authorized redirect URI לhttps://your-project.supabase.co/auth/v1/callback. ואז בדוח הבקרה Supabase → Auth → Providers → Google, הדבק את ה-client ID וה-secret. עכשיו לחץ על "Sign in with Google" בדף ההתחברות שלך — אתה צריך נחות ב-/onboarding עם השם שלך גלוי.

שלב רביעי: כושר Onboarding

משתמשים יכולים להירשם. עכשיו בואו נעשה מי הם עם כושר מהיר וניתן לדילוג.

הנושא:

Build a 4-step onboarding page. Step 1: "What's your coding experience?" with three clickable cards — Beginner, Intermediate, Advanced — clicking one auto-advances to step 2. Step 2: "What's your main goal?" with four cards — Build tools, Automate work, Learn Claude Code, Portfolio projects — clicking auto-advances to step 3. Step 3: "Tell us about yourself" with optional fields: job title, company, country, a "how did you hear about us" dropdown (Google, LinkedIn, Twitter/X, YouTube, Friend, Newsletter, Other — show a text input when Other is selected), and a newsletter opt-in checkbox (default checked). Include Continue and Skip buttons. Step 4: "You're all set!" showing a recommended tutorial with a Start button. Add a Skip button on steps 1 and 2 as well. Progress dots at the top. Pre-fill user name and avatar from supabase.auth.getUser() metadata. On step 3 submit, POST to /api/onboarding with all collected data.

מה Claude Code עושה: הכל כושר הוא רכיב אחד המנהל מצב שלב — ללא ניווט דפים. כל שלב הוא עיבוד מותנה על סמך משתנה step. לחיצה על כרטיס קוראת setStep(next) מיידית. ללא טעינה, ללא ניתוב, ללא קריאות API עד ההגשה הסופית. זה שומר על החוויה יזמית — כל לחיצה מרגישה מיידית.

נסה: התחברה ואתה צריך נחות בדף onboarding. שם Google שלך ותמונה צריכים להופיע בשלב 1. לחץ דרך השלבים. נסה לדלג על כל שלב — אתה צריך להגיע לשלב ההסברה. נסה למלא הכל — אותה תוצאה, נתונים שונים שנשמרו.

שלב חמישי: API Onboarding וסנכרון CRM

התשובות צריכות להיכנס לשני מקומות: מסד הנתונים שלך ו-CRM שלך.

הנושא:

Create two things. First, a lib/activecampaign.ts module with these functions: syncContact(email, firstName, lastName) that POSTs to /api/3/contact/sync to create or update a contact; addToList(contactId, listId) that adds a contact to a list; addTag(contactId, tagName) that finds or creates a tag then assigns it to the contact; addTags(contactId, tags[]) that runs addTag in parallel for multiple tags. Use the ACTIVECAMPAIGN_URL and ACTIVECAMPAIGN_API_KEY env vars with an "Api-Token" header. Second, create an API route at /api/onboarding. Validate with Zod — all fields optional: experience_level, goal, job_title, company, country, heard_from, newsletter_opt_in. Save to profiles table (set onboarding_completed: true). Sync to ActiveCampaign: create/update the contact, add a tag for every non-empty response like "beginner_level", "goal_build-tools", "company_acme", "heard_from_google". If newsletter_opt_in is true, add them to the newsletter list. Return a recommended tutorial slug based on their goal.

מה Claude Code עושה: לקוח AC משתמש בנקודת סנכרון הקשר — upsert שיוצר אנשי קשר חדשים או משדרג קיימים לפי דוא"ל. אין צורך בשלב "בדוק אם קיים". כל תגובת onboarding הופכת לתגית CRM, כך שאתה יכול לסגמנט משתמשים בקמפיינים דוא"ל: שלח דוא"ל לכל מתחילים, שלח דוא"ל לכל מי ששמע עליך מ-LinkedIn, שלח משתמשים דוא"ל שרוצים לטעון עבודה.

נסה: הוסף את מפתחות ActiveCampaign שלך ל.env.local (ACTIVECAMPAIGN_URL וACTIVECAMPAIGN_API_KEY). השלם onboarding, ואז בדוק ActiveCampaign → Contacts. חפש את הדוא"ל שלך — אתה צריך לראות תגיות כמו "onboarded", "beginner_level", "goal_build-tools".

שלב שישי: מערכת אירועים ודוא"ל בברכה

כל הרשמה צריכה להשפיע דוא"ל בברכה ותגיות CRM — בלי להאט את ההרשמה עצמה.

הנושא:

Build a fire-and-forget event system. Create lib/behavioral-tags.ts with event types: user.signup, user.onboarded, tutorial.started, tutorial.completed, subscription.created. Each event maps to ActiveCampaign tags — user.signup maps to "signed_up" plus a country tag if available. Create lib/events.ts with a fireUserEvent function that POSTs to /api/webhooks/user-events — use fetch() without await so it doesn't block. Build the webhook route at /api/webhooks/user-events: receive the event, sync the contact to ActiveCampaign, apply the mapped tags, add signup users to the newsletter list (list ID in a constant), and send a welcome email for user.signup events. Wire up fireUserEvent in the OAuth callback and the registration route — call it after creating/authenticating the user.

מה Claude Code עושה: תבנית fire-and-forget היא הכל כאן. fireUserEvent קוראת fetch() ללא await — תגובת ההרשמה חוזרת למשתמש מיד בזמן שה-webhook עיבודים תגיות, הרשמת רשימה ודוא"ל בתוכנית הרקע. משתמש שלך רואה הרשמה מהירה. מאחורי הקלעים, הם מתוגים, רשומים בעמוד ודוא"ל.

נסה: מחק את משתמש הבדיקה שלך מ-Supabase (Auth → Users) והרשמה שוב. בדוק את תיבת הדוא"ל שלך — דוא"ל בברכה. בדוק ActiveCampaign — קשר עם תגית "signed_up", ברשימת הניוזלטר שלך. ההרשמה עצמה צריכה להרגיש מיידית.

מה בנית

זכור "אף אחד לא יכול להירשם"? בדיוק פתרת את זה. האפליקציה שלך כעת יש:

• Google OAuth והרשמה דוא"ל — משתמשים בוחרים בנתיב שלהם
• פרופילים שנוצרו באופן אוטומטי עם שם ותמונה משך מ-Google
• כושר onboarding בן 4 שלבים שמשמר העדפות למסד הנתונים שלך
• כל תגובה מתגית ב-ActiveCampaign לפילוח דוא"ל
• דוא"לי בברכה שחוזרים על הרשמה ללא האטת החוויה
• נתיבים מוגנים דרך middleware

התבניות שאתה השתמשת: טריגרים למסד נתונים ליצירת פרופיל אוטומטית, metadata OAuth לטעינה מקדימה של פרופילים, טפסי רב-שלביים בצד-client, אימות Zod, תגיות CRM לפילוח, ואירועי fire-and-forget לעיבוד אסינכרוני.

עלה זה יותר רחוק

• הוסף GitHub OAuth — עוד ספק אחד ב-Supabase, אותו נתיב חוזר מטפל בזה באופן אוטומטי
• תגלה מדינה מ-IP — Vercel נותן לך x-vercel-ip-country בחינם בכותרות בקשה. שמור אותו בפרופיל ותגית אותו ב-ActiveCampaign על הרשמה.
• הוסף מעקב הפניות — שמור קוד הפניות מפרמטרי URL בעוגיה, הנקוב את המפנה כשהמשתמש המופנה להרשמה