Step 2: Create Tables (Database)<\/strong><\/h3>\n\n\n\n1. Let\u2019s make a first posts<\/code> table for saving the user\u2019s post:<\/p>\n\n\n\n\nGo to Table Editor > New Table<\/li>\n\n\n\n Name it: posts<\/li>\n\n\n\n For now, disable RLS<\/li>\n\n\n\n Add these columns:\nid \u2013 UUID, Primary Key (default)<\/li>\n\n\n\n title \u2013 Text<\/li>\n\n\n\n content \u2013 Text<\/li>\n\n\n\n user_id \u2013 UUID (foreign key to auth.users)<\/li>\n\n\n\n created_at \u2013 Timestamp (default: now())<\/li>\n\n\n\n image_url \u2013 Text<\/li>\n<\/ol>\n<\/li>\n\n\n\n Click Save.<\/li>\n<\/ol>\n\n\n\n2. Now let\u2019s make a second user_followers<\/code> table for saving the user\u2019s followers, but this time using SQL Editor:<\/p>\n\n\n\n\nGo to SQL Editor<\/li>\n\n\n\n Paste the following code for creating a user_followers table with unique constraints to prevent duplication.<\/li>\n<\/ul>\n\n\ncreate table user_followers (\n\n id uuid primary key default<\/span> gen_random_uuid(),\n\n user_id uuid references auth.users(id) on delete<\/span> cascade,\n\n following_id uuid references auth.users(id) on delete<\/span> cascade,\n\n created_at timestamp default<\/span> now()\n\n);\n\ncreate unique index unique_follow on user_followers(user_id, following_id);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n<\/p>\n\n\n\n
\nClick on \u201cRun\u201d, It should look like the image below.3. Now, create a profiles<\/code> table. Whenever any user signs up, we will save user_id and email in this profile table. Later, you can add other fields like full name, profile_pic, bio, etc.<\/p>\n\n\n\n\nGo to SQL Editor<\/li>\n\n\n\n Paste the following code for creating a profiles table, and automatically insert a new profile when a user signs up<\/li>\n<\/ul>\n\n\ncreate table public.profiles (\n id uuid primary key references auth.users(id) on delete<\/span> cascade,\n email text, \n created_at timestamp default<\/span> now()\n);\n\ncreate function<\/span> public<\/span>.handle_new_user<\/span>(<\/span>)\nreturns<\/span> trigger<\/span> as<\/span> $$<\/span>\nbegin<\/span>\n insert<\/span> into<\/span> public<\/span>.profiles<\/span> (id, email<\/span>)\n values<\/span> (new.id, new.email<\/span>);\n return<\/span> new<\/span>;\nend<\/span>;\n$$<\/span> language<\/span> plpgsql<\/span> security<\/span> definer<\/span>;\ncreate<\/span> trigger<\/span> on_auth_user_created<\/span>\nafter<\/span> insert<\/span> on<\/span> auth<\/span>.users<\/span>\nfor<\/span> each<\/span> row<\/span> execute<\/span> procedure<\/span> public<\/span>.handle_new_user<\/span>(<\/span>);<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nNow, whenever a new user signs up, a matching row is inserted into profiles.<\/p>\n\n\n\n
Supabase automatically creates APIs and permissions for these tables. Let\u2019s use that next.<\/p>\n\n\n\n
Step 3: Set Up Your Frontend with Vite<\/strong><\/h3>\n\n\n\nWe\u2019ll create our frontend using Vite + React + TypeScript:<\/p>\n\n\n
npm<\/span> create<\/span> vite<\/span>@latest<\/span> supabase-vite-demo -- --template react-ts\ncd supabase-vite-demo\nnpm install<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nInstall Supabase and react router:<\/p>\n\n\n
npm<\/span> install<\/span> @supabase<\/span>\/supabase-js\nnpm install react-router<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nThen, initialize the client in src\/supabaseClient.ts:<\/p>\n\n\n
import<\/span> { createClient } from<\/span> '@supabase\/supabase-js'<\/span>\n\nconst<\/span> supabaseUrl = 'https:\/\/your-project.supabase.co'<\/span>\nconst<\/span> supabaseAnonKey = 'your-anon-key'<\/span>\n\nexport<\/span> const<\/span> supabase = createClient(supabaseUrl, supabaseAnonKey)<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nGrab the key and URL from your Supabase dashboard under Settings > Data API.<\/p>\n\n\n\n
Step 4: Add User Authentication<\/strong><\/h3>\n\n\n\nLet\u2019s build a simple login\/signup form.<\/p>\n\n\n\n
Create src\/Auth.tsx<\/code>, The Auth page handles user authentication using Supabase. It provides:<\/p>\n\n\n\n\nEmail & Password Login<\/strong>: Users can securely sign in.<\/li>\n\n\n\nUser Registration<\/strong>: New users can sign up with an email and password.<\/li>\n\n\n\nError Feedback<\/strong>: Displays clear messages when authentication fails.<\/li>\n\n\n\nLoading States:<\/strong> Disables inputs and buttons during processing for better UX.<\/li>\n<\/ul>\n\n\n\nThis page is the entry point for accessing authenticated features in the app.<\/p>\n\n\n
import<\/span> { useState } from<\/span> 'react'<\/span>\nimport<\/span> { supabase } from<\/span> '.\/supabaseClient'<\/span>\n\nexport<\/span> default<\/span> function<\/span> Auth<\/span>(<\/span>) <\/span>{\n const<\/span> [email, setEmail] = useState(''<\/span>)\n const<\/span> [password, setPassword] = useState(''<\/span>)\n const<\/span> [error, setError] = useState<string | null<\/span>>(null<\/span>)\n const<\/span> [signInLoading, setSignInLoading] = useState(false<\/span>)\n const<\/span> [signUpLoading, setSignUpLoading] = useState(false<\/span>)\n\n const<\/span> handleSignUp = async<\/span> () => {\n try<\/span> {\n setError(null<\/span>)\n setSignUpLoading(true<\/span>)\n const<\/span> { error } = await<\/span> supabase.auth.signUp({ email, password })\n if<\/span> (error) throw<\/span> error\n } catch<\/span> (err) {\n setError(err instanceof<\/span> Error<\/span> ? err.message : 'An error occurred during sign up'<\/span>)\n } finally<\/span> {\n setSignUpLoading(false<\/span>)\n }\n }\n\n const<\/span> handleSignIn = async<\/span> () => {\n try<\/span> {\n setError(null<\/span>)\n setSignInLoading(true<\/span>)\n const<\/span> { error } = await<\/span> supabase.auth.signInWithPassword({ email, password })\n if<\/span> (error) throw<\/span> error\n } catch<\/span> (err) {\n setError(err instanceof<\/span> Error<\/span> ? err.message : 'An error occurred during sign in'<\/span>)\n } finally<\/span> {\n setSignInLoading(false<\/span>)\n }\n }\n\n return<\/span> (\n <div<\/span> className<\/span>=\"auth-container\"<\/span>><\/span>\n <h2<\/span>><\/span>Sign In \/ Sign Up<\/h2<\/span>><\/span>\n {error && <div<\/span> className<\/span>=\"error-message\"<\/span>><\/span>{error}<\/div<\/span>><\/span>}\n <input<\/span>\n value<\/span>={email}<\/span>\n onChange<\/span>={e<\/span> =><\/span> setEmail(e.target.value)}\n placeholder=\"Email\"\n disabled={signInLoading || signUpLoading}\n \/>\n <input<\/span>\n value<\/span>={password}<\/span>\n onChange<\/span>={e<\/span> =><\/span> setPassword(e.target.value)}\n placeholder=\"Password\"\n type=\"password\"\n disabled={signInLoading || signUpLoading}\n \/>\n <button<\/span>
![\"Power](\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/reactjs-frontend-expertise.png\" "\\"ReactJS")
![\"Power](\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20855%20363%22%3E%3C%2Fsvg%3E\" "\\"ReactJS")
![\"Create](\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/create-supabase-database-tables.png\" "\\"Creating")
![\"Create](\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" "\\"Creating")