“I asked an AI to build an app—and it actually worked! The interface looks amazing, and the buttons are clickable. But wait... something's missing. I can't log in, my data isn't saving, and the payment button is practically useless?!”

When you're coding with AI, things usually sail smoothly at first—until you hit a brick wall.

In Part 1 of our guide, we walked through the entire process of using AI tools to design your app's front-end and get it live on the internet. Now, in Part 2, we'll dive into the two absolute must-haves for any real-world web service: Data Storage and User Login.

1. Saving Your Data

• You built a To-Do app, but when you refresh the page, all your tasks vanish into thin air.

• You created a slick sign-up screen, but the login button is just for show.

• You put together a community forum, but nobody else can see your posts.

The culprit behind all these headaches? You don't have a place to store your data yet.

Everything you see on the screen right now is just temporary—it only exists while your browser is open. Once you close that tab, poof! It's gone. To fix this, you need a database: a secure home for your users' information so they can access their data anytime, anywhere. There are plenty of database types out there, but you can just think of it as a giant, super-smart Excel spreadsheet.

---

① Supabase — The Best All-in-One Starting Point

Supabase is a powerhouse platform that bundles data storage, user authentication (login), and file hosting all into one neat package—basically everything your web app needs to survive. The best part? It's practically free while you're getting your service off the ground. Plus, it plays incredibly well with AI coding tools, meaning you won't need a computer science degree to figure it out.

1. When Should You Use It?

• To store and display tons of information (like product catalogs, news feeds, or blog posts).

• Whenever you need a user login or a “My Account” dashboard.

• To let multiple users interact and share data (think message boards, comments, or a “Like” button).

• When you want to let users upload files or images.

• If your app needs real-time updates (like live chat or instant notifications).

2. Hooking Up Supabase to Your AI Tools

STEP 1 — Grab a Supabase Account

Head over to supabase.com → Hit Start your project → Sign up with your email or GitHub.

STEP 2 — Spin Up a New Project

Click New project → Pick a catchy project name, set a secure DB password, choose your Region (like Asia Pacific or Northeast Asia), and hit Create.

STEP 3 — Link the MCP to Your AI Coder

Drop this URL into the MCP settings of your AI tool (like Cursor or Claude Code):

https://mcp.supabase.com/mcp

If you're using the Claude Code app, you can easily find Supabase by navigating to Connectors → Browse Connectors.
Once you save it, your browser will pop open. Just log in to your Supabase account, and boom—you're connected!

3. Cool Stuff You Can Do Once Connected

1. Store & Display Web Content

   • ​“Set up a ‘products’ table in Supabase for me. I need columns for the item name, price, stock count, and an image URL.”
   • ​“Create a ‘posts’ table for my blog and a ‘profiles’ table to hold user information.”

2. Nail Down Logins & Dashboards

   • ​“Build a web app with Google Login via Supabase Auth. Make sure only logged-in users can access their ‘My Account’ page.”
   • ​“Configure Supabase RLS (Row Level Security) so people can only edit or delete their own posts, but anyone can read them.”

3. Make It Social

   • ​“Create a message board where anyone can read the posts, but you have to log in to write, edit, or delete.”
   • ​“Add a ‘Like’ button that only logged-in users can click—and make sure they can't spam it multiple times!”

4. Handle Files & Images

   • ​“Link Supabase to my app, install whatever packages I need, and tuck my Supabase credentials safely into an environment variable file.”
   • ​“I want users to upload images. Create a storage bucket in Supabase and wire it up to my app.”

5. Make It Real-Time

   • ​“Hook up Supabase Realtime so when someone drops a comment, it pops up instantly without me having to refresh the page.”
   • ​“Build a live chat feature where messages show up on the other person's screen the second I hit send.”

---

② Upstash — Your Speedy Sidekick Storage

If Supabase is the massive warehouse holding all your inventory, think of Upstash as the display shelf right next to the cash register for things you need instantly. They do totally different jobs, and as your app scales up, you'll probably end up using them side-by-side.

Upstash is famous for two main superpowers: ultra-fast temporary storage (Redis) and a super-reliable task scheduler (QStash).

1. When Should You Use It?

• To load hot content at lightning speed (like live view counts, leaderboards, or trending topics).

• To stop spammers in their tracks by limiting how many times one person can click a button or load a page (rate-limiting).

• To handle scheduled background tasks, like shooting off an email receipt 5 minutes after a purchase, or a daily morning newsletter.

• When you just need some quick, lightweight storage in a Vercel or Next.js environment.

2. Wiring Upstash to Your AI Tools

STEP 1 — Grab an Upstash Account

Head over to console.upstash.com → Click Create account → Sign up with your email or Google account.

STEP 2 — Get Your API Key

Log in to console.upstash.com → Click your account icon (top right) → Developer API → Create API Key. Give it a name, make sure to select No Expiration, and copy that generated key!

STEP 3 — Connect the MCP to Your AI Coder

This part is a breeze. Just toss your Upstash email and API key to your AI:

​“Hey, connect the Upstash MCP for me. My email is [your email] and my API key is [your copied key].”

3. Cool Stuff You Can Do Once Connected

1. Turbocharge Your App's Speed

   • ​“Cache my product catalog and trending posts so my database doesn't have to work overtime on every single page load.”

2. Build a Bouncer (Rate Limiting)

   • ​“If the same user fires off more than 10 requests in a minute, block them. Set up rate limiting using Upstash.”

3. Put Tasks on Autopilot

   • ​“I want an automatic receipt email to go out exactly 5 minutes after a user pays. Wire that up with Upstash.”
   • ​“Create a background job that pings my users with a daily digest email every morning at 9 AM.”

4. Store Small Things Quickly

   • ​“I need a lightweight spot to stash login session data for my Next.js app. Hook me up with Upstash.”

---

2. Building Out Your Login Flow

Here's the truth about “Login”: it's not just a simple button on a screen. It's a full-blown system packed with heavy-duty security and behind-the-scenes operations.
If you build it from scratch, you have to worry about things like:

• Scrambling (hashing) passwords so hackers can't read them even if they steal your database.

• Remembering who's logged in so your users don't get booted out every time they refresh the page.

• Slamming the door on shady behavior (like bots trying to guess a password 500 times a second).

• Essential user-friendly flows like “Verify your email” and “Forgot your password?”

If your security is sloppy, you're opening the door to massive disasters like data leaks and hijacked accounts. That's exactly why most indie developers and startups rely on dedicated Authentication (Auth) services instead of trying to reinvent the wheel.

---

2-1. Getting the Basics Down with Supabase Auth

Supabase isn't just a database; it also packs a top-tier Auth service that handles all the messy stuff—sign-ups, logins, logouts, and keeping users logged in. Whether you want a classic email/password combo or slick social logins (like “Sign in with Google”), Supabase makes it a breeze, and it won't cost you a dime to start.

STEP 1 — Flip the Auth Switch

Head to your Supabase Dashboard → Authentication tab → Sign In / Providers → Auth Providers → toggle on Enable email provider.

• Confirm email: Keep this ON. (It forces users to verify their email after signing up, which is a great way to keep spam bots out.)

• Secure email change: Keep this ON too. (It sends a heads-up to their old email if they try to change it.)

STEP 2 — Let AI Build Your Login Screen

Now, tell your AI coding tool what to do. ​(Note: This works flawlessly if you've already hooked up the Supabase MCP!)

• ​“Build me a sign-up and login screen using email/password via Supabase Auth. Make sure to show a ‘Please verify your email’ message after they sign up, and bounce them straight to their ‘My Account’ page once they log in successfully.”

STEP 3 — Pulling User Data After They Log In

Once they're in, you want to make them feel at home by showing their details.

• ​“Once I'm logged in, display my name and email address right at the top of the dashboard.”

• ​“If someone tries to sneak into the dashboard URL without logging in first, kick them back to the login page.”

STEP 4 — Lock Down Your URLs ⚠️ Super Important!

You'll need to tweak a few things in Authentication → URL Configuration.

Site URL (Your App's Home Base)

• This is the default page users land on after logging in, verifying their email, or resetting a password.

• By default, it's set to http://localhost:3000 (which is just your personal computer). You absolutely must change this to your live domain once your app is on the internet!
  e.g. https://your-awesome-app.com

Redirect URLs (The VIP Guest List)

• Need to allow logins from other addresses too? Add them here.

• If you're building on your laptop while the app is live, you'll want to add both.

• Pro tip: Use the /** wildcard at the end of your URL to allow access from any sub-page on that domain.

Environment	Example URL to Add
Local Development	http://localhost:3000/**
Vercel Preview	https://*-my-project.vercel.app/**
Vercel Production	https://example.com/**

---

2-2. Leveling Up with Social Logins (SSO)

Once you've nailed down the basic email/password flow, you can roll out the red carpet by offering Social Logins (so users can sign in with a single click using their Google or Kakao accounts).
Just keep in mind: to make this work, you'll need to jump through a few setup hoops on those platforms first.

If you're curious about how the magic of SSO (Single Sign-On) works behind the scenes, check out our deep dive:
SSO (Single Sign-On) — One Account, Every Service

Setting up Google Login

STEP 1. Snag Your Callback URL from Supabase

Go to Authentication → Sign In / Providers → Auth Providers → Click Google → Copy the Callback URL (for OAuth) right from that screen.

STEP 2. Register Your App with Google Cloud

1. Head to the Google Cloud Console and click Create a project.

2. Fill out your app's name and contact email over in Google Auth Platform > Branding.

3. Navigate to Google Auth Platform > Clients > Create Client and pick Web application as your type.

4. Remember that Callback URL you copied in Step 1? Paste it straight into the Authorized redirect URIs box.

5. Google will hand you a Client ID and a Client Secret. Copy both of them immediately! ⚠️ ​(Google only shows you the Secret once, so don't lose it!)

STEP 3. Plug Your Keys into Supabase

Bounce back to your Supabase dashboard, paste that Google Client ID and Client Secret (for OAuth) into their respective boxes, and smash that Save button.