การสร้าง Application โดยใช้ React และ Supabase
สำหรับ Blog นี้เราก็จะมาแนะนำการสร้าง User Management Application แบบง่ายๆ โดยใช้ “User Management Starter” ซึ่งเป็น Quickstart ของ Supabase กัน
หากใครพึ่งอ่าน Blog นี้เป็นครั้งแรก แล้วสงสัยว่า Supabase คืออะไร สามารถอ่านเพิ่มเติมได้ที่นี่
ขั้นตอนการสร้าง Application โดยใช้ React และ Supabase
Step 1 : คลิกเข้าสู่เว็บไซต์ app.supabase.io เพื่อสร้างโปรเจคใหม่บน Supabase และสร้าง Auth API จาก User Management Starter (Source: การสร้าง Auth API จาก User Management Starter ของ Supabase)
Step 2 : หลังจากเตรียม Database เรียบร้อยแล้ว ให้คลิกไปที่เมนู Settings > API และ copy URL และ anon key เก็บไว้ซึ่งจะใช้ค่านี้ใน Step ถัดไป
Step 3 : สร้าง React app
โดยเราจะใช้ Create React App ในการสร้าง React app และตั้งชื่อว่า supabase-react
npx create-react-app supabase-react --use-npm
cd supabase-reactจากนั้นติดตั้ง supabase-js
npm install @supabase/supabase-jsสร้างไฟล์ .env เพื่อเก็บค่าของตัวแปร API URL และ anon key ที่ได้จาก Step 2
REACT_APP_SUPABASE_URL=YOUR_SUPABASE_URL
REACT_APP_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
จากนั้นสร้างไฟล์ชื่อว่า supabaseClient.js วางไว้ในโฟลเดอร์ src ซึ่งเป็นไฟล์สำหรับ initialize Supabase client
จากนั้นอัปเดตไฟล์ CSS src/index.css โดย copy โค้ด css จากที่นี่
ขั้นตอนต่อไป เป็นการสร้าง Login component สำหรับจัดการการ logins และ sign ups โดยสร้างไฟล์ src/Auth.js ซึ่งในโค้ดจะเป็นการใช้ Magic Links API ดังนั้นผู้ใช้จะสามารถ Login โดยใช้เพียงแค่ email เท่านั้น
หลังจากผู้ใช้ Login เราจะเตรียมหน้าเว็บสำหรับให้ผู้ใช้สามารถแก้ไขข้อมูลส่วนตัวได้ ดังนั้นเราจึงจะต้องสร้างอีก component สำหรับจัดการข้อมูล Profile โดยตั้งชื่อไฟล์ว่า Account.js วางไว้ในโฟลเดอร์ src ของโปรเจค
หลังจากสร้าง components ต่างๆ เรียบร้อยแล้ว ให้ทำการแก้ไขไฟล์App.js ดังนี้
จากนั้นให้ใช้คำสั่ง run project ดังนี้
npm startเปิดเบราเซอร์ localhost:3000 จะได้หน้าเว็บดังนี้
ซึ่งสามารถทดสอบ Sign in โดยการกรอก email ของท่านได้เลย ระบบจะสร้าง magic link ซึ่งเป็น API ของ Supabase ส่งไปยังอีเมล และจะมีลิงก์ Confirm your mail เพื่อทำการยืนยันตัวตนและเก็บข้อมูลไว้ใน Supabase
หลังจากกดยืนยันการ Signup ระบบจะ redirect กลับมายังหน้าเว็บของ React ในส่วนของ Account component ที่ได้สร้างไว้ ซึ่ง URL ในการ redirect ต่างๆ สามารถตั้งค่าได้ใน Supabase
สามารถดูประวัติการ Login ของ Users ได้ที่เมนู Authentication ของ Supabase
สามารถแก้ไขการตั้งค่า Site URL, Redirect URL รวมถึงการ confirm email ได้ที่เมนู Settings ภายใต้เมนู Authentication ของ Supabase ได้
สรุป
เราสามารถประยุกต์ใช้ Auth API ของ Supabase กับ React App ได้ไม่ยาก ซึ่งทาง Supabase ก็มี Tutorials และ Documents มากมายให้ต่อยอดไม่ใช่แค่กับ React แต่ยังมีอีกมากมายหลายแพลตฟอร์มให้เลือกใช้งานสามารถศึกษาเพิ่มเติมได้ ที่นี่
