เพิ่มหน้าล็อกอิน — สมัคร เข้า ออก

ตอนนี้คุณรู้แล้วว่าปัญหาไม่ใช่ข้อมูลพัง แต่คือแอปยังไม่มีระบบที่รู้ว่าใครกำลังใช้อยู่

บทนี้เราจะเพิ่มประตูทางเข้าอย่างเป็นทางการให้แอปของคุณ นั่นคือหน้า signup, login และ logout

ระบบล็อกอินมีแค่ 3 จังหวะหลัก

ถ้ามองแบบง่ายที่สุด คนใช้แอปมีอยู่แค่ 3 สถานะ

สถานะแรกคือยังไม่เคยมีบัญชี ต้องสมัครก่อน

สถานะที่สองคือมีบัญชีแล้ว แต่ตอนนี้ยังไม่ได้เข้าสู่ระบบ

สถานะที่สามคือเข้าสู่ระบบอยู่แล้ว และกำลังใช้งานแอป

ถ้าใช้ภาพเดิมจากบทที่แล้ว ก็เหมือน รปภ.หน้าตึกต้องทำอยู่ 3 อย่าง:

1. รับคนใหม่เข้าระบบ
2. เช็กว่าคนที่กลับมาคือใคร
3. ให้คนออกจากระบบได้เมื่อใช้งานเสร็จ

แค่นี้ก่อนสำหรับบทนี้ ยังไม่ต้องแยกข้อมูลของแต่ละคน นั่นเป็นงานของบทถัดไป

ก่อนเริ่ม ควรรู้เรื่องอีเมลยืนยันก่อน

Supabase โดยปกติจะเปิดการยืนยันอีเมลไว้

แปลว่าเวลาคนสมัครใหม่ ระบบอาจส่งอีเมลไปให้กดยืนยันก่อน ถึงจะเข้าสู่ระบบได้เต็มที่

สำหรับการใช้งานจริง นี่เป็นเรื่องปกติและมีประโยชน์ แต่ถ้าคุณกำลังทดสอบบทเรียนอยู่ มันอาจทำให้ช้ากว่าที่จำเป็น

ถ้าคุณอยากทดสอบเร็วขึ้น ให้เข้าไปใน Supabase dashboard แล้วมองหาเมนู Authentication จากนั้นหาส่วนที่เกี่ยวกับ email หรือ signup settings

ถ้าคุณเห็นตัวเลือกประมาณ Confirm email หรือ Email confirmation คุณสามารถปิดไว้ชั่วคราวสำหรับการทดสอบได้

Prompt ที่จะส่งในบทนี้

ตอนนี้เราจะบอก AI ให้เพิ่ม flow การสมัคร เข้าสู่ระบบ และออกจากระบบให้ครบ

ใช้ prompt นี้ได้เลย:

เพิ่มระบบล็อกอินให้แอปโดยใช้ Supabase Auth

สร้างหน้า Login และ Signup ที่มี:
- ช่องกรอกอีเมล
- ช่องกรอกรหัสผ่าน
- ปุ่มเข้าสู่ระบบสำหรับคนที่มีบัญชีแล้ว
- ปุ่มสมัครสมาชิกสำหรับคนใหม่
- ข้อความแจ้งเมื่อกรอกผิดหรือเข้าสู่ระบบไม่สำเร็จ

เมื่อล็อกอินสำเร็จ ให้เข้าไปหน้าหลักของแอป

เพิ่มปุ่มออกจากระบบในตำแหน่งที่มองเห็นได้ง่าย
เมื่อกดแล้วให้กลับไปหน้า Login

ไม่เปลี่ยน design หรือฟังก์ชันที่มีอยู่แล้ว

สิ่งที่ prompt นี้กำลังขอมีอยู่ 3 ก้อนชัดๆ:

1. มีทางให้คนใหม่สมัคร
2. มีทางให้คนเดิมเข้าสู่ระบบ
3. มีทางให้ออกจากระบบได้แบบชัดเจน

ลงมือทำ — เพิ่มระบบสมัคร เข้า ออก

1. เปิดโปรเจกต์ของคุณใน Lovable
2. เช็กว่า Supabase ยังเชื่อมกับโปรเจกต์นี้อยู่เรียบร้อย
3. คัดลอก prompt ด้านบนไปวางในแชท
4. ส่งให้ AI ทำงาน
5. รอจนหน้าแอปอัปเดตเสร็จ

หลังจากเสร็จ คุณควรเห็นหน้าหรือฟอร์มที่เกี่ยวกับการสมัครและเข้าสู่ระบบเพิ่มเข้ามา

สิ่งที่คุณกำลังมองหาไม่ใช่แค่ช่องกรอกอีเมลกับรหัสผ่าน แต่คือ flow ที่คนใหม่และคนเดิมใช้ได้จริง

ทดสอบแบบสองบัญชี เพื่อพิสูจน์ว่าระบบสมัครและล็อกอินทำงานจริง

บทนี้ยังไม่ใช่บทแยกข้อมูลของแต่ละคน แต่เราจะใช้สองบัญชีทดสอบให้ชัวร์ว่าระบบตัวตนทำงานแล้ว

ขั้นตอนที่ 1 — สร้างบัญชีแรก

1. สมัครด้วยอีเมลแรก
2. ถ้าระบบต้องให้เช็กอีเมล ให้ทำตามนั้น
3. เข้าสู่ระบบให้สำเร็จ
4. เมื่อเข้าได้แล้ว ลองออกจากระบบ

ขั้นตอนที่ 2 — สร้างบัญชีที่สอง

1. ใช้อีเมลอีกอันหนึ่งสมัคร
2. เข้าสู่ระบบให้สำเร็จ
3. เมื่อเข้าได้แล้ว ลองออกจากระบบอีกครั้ง

ขั้นตอนที่ 3 — ลองเข้าเป็นแต่ละคน

1. เข้าสู่ระบบด้วยบัญชีแรก
2. ดูว่าคุณเข้าหน้าแอปได้
3. ออกจากระบบ
4. เข้าด้วยบัญชีที่สอง
5. ดูว่าเข้าหน้าแอปได้เหมือนกัน

ถ้าทั้งสองบัญชีสมัครได้ เข้าได้ และออกได้ นั่นแปลว่าระบบล็อกอินเริ่มทำงานแล้ว

ถ้า login ได้ไม่ครบ ลองเช็กทีละอย่าง

ถ้าสมัครไม่ได้ หรือเข้าแล้วไม่ไปหน้าหลัก ยังไม่ต้องรีบแก้หลายอย่างพร้อมกัน

ให้เช็กทีละข้อ:

1. Supabase Auth ถูกเปิดใช้งานในโปรเจกต์นี้หรือยัง
2. ถ้าใช้อีเมลสมัคร ระบบกำลังรอการยืนยันอีเมลอยู่หรือเปล่า
3. AI เพิ่มทั้ง login, signup และ logout ครบตาม prompt หรือยัง

ถ้ายังไม่ครบ ลองส่ง prompt เดิมอีกครั้งแบบเดิม อย่าเพิ่งแทรกคำสั่งอย่างอื่นเพิ่ม

สำหรับแอปของคุณเอง

ไม่ว่าคุณจะทำแอปแบบไหน ถ้ามีแนวคิดว่าแต่ละคนควรมีพื้นที่ของตัวเอง คุณก็ต้องมี 3 จังหวะนี้เหมือนกัน คือสมัคร เข้า และออก

ตอนนี้ยังไม่ต้องคิดว่าหน้า login จะสวยแค่ไหน แค่ให้มันทำงานและพาคนเข้าแอปได้ก่อนก็พอ

คุณเพิ่งทำอะไรสำเร็จไปแล้วบ้าง

• คุณเข้าใจแล้วว่าระบบล็อกอินจริงๆ มีแค่ 3 จังหวะหลัก: สมัคร เข้า และออก
• คุณเพิ่มหน้า signup/login/logout ให้แอปได้แล้ว
• คุณสร้างบัญชีอย่างน้อย 2 บัญชี และเข้าสู่ระบบได้ทั้งคู่
• แอปของคุณเริ่มมีระบบรู้แล้วว่าใครกำลังเข้ามาใช้งาน แม้ข้อมูลจะยังไม่แยกกันในบทนี้

บทต่อไป เราจะไปถึงจุดที่สำคัญที่สุดของคอร์สนี้ คือทำให้ User A กับ User B เห็นคนละโลกกันจริงๆ แต่ละคนเห็นแค่ข้อมูลของตัวเอง