Build SaaS with AI - Part 5

Part 5: User Authentication & Prompts Management

Author

Sabrina Ramonov
August 21, 2024

This is part 5 of my series Build SaaS with AI — where I go from Idea to MVP with AI-driven coding!

In this post, we’ll add Firebase Authentication and a prompts table supporting the CRUD operations we made in the previous post.

Here’s the Youtube video for this post:

Table of Contents

What type of content do you LOVE?

Your vote helps me prioritize what to focus on next!

Login or Subscribe to participate in polls.

Cursor AI - Composer Feature

Thanks to a few Youtube users, I found Cursor’s beta feature “Composer” to create and edit multiple files.

As a beta feature, there are still bugs.

But, I didn’t test it out before filming my Youtube video.

So, I didn’t realize I have to open it separately with CMD + i.

Sounds very promising though!

To try it, go to Settings > Cursor Settings > Beta > Composer > enabled.

 

Firebase Authentication - Console

First, I’ll setup Firebase Authentication, so that we can authenticate and manage users without any server-side code. We offload most of the work to Firebase.

Go to console.firebase.google.com and your specific Firebase project.

On the left sidebar, go to Build > Authentication.

Click Get Started.

Select the authentication methods you want to support.

For my app, I’ll offer email/password sign-in and Google sign-in to start.

You should see something like this when you’re done:

Firebase Authentication - UI

Next, let’s create the UI screens and logic workflows for user signup, login, logout, and authentication.

Below is the prompt.

It looks long, but most of it is boilerplate:

  • first, I tell Cursor about the framework/tools we’re using and best practices to follow

  • then the spec, “your task is to…”

  • last, I instruct Cursor to ask me clarifying questions

I recommend chatting with the entire codebase (CMD + Enter) for this: 

- Use Next.js, Typescript, Tailwind CSS, and App Router.

- Use Next.js App Router when creating new screens.

- Do not use src directory.

- ALWAYS show the proposed directory structure including all new files that must be created.

- ALWAYS show directory structure first.

- For each step in your plan, specify the filename and path to the file.

- For next.js components that require client side state, use 'use client'.

- Tailwind config is specified in tailwind.config.ts

- Use a modern color palette, ensuring that any user-facing text is readable and visible. Force the text colors everywhere to ensure only light mode is supported.

- ALWAYS add robust logging to help troubleshoot issues.

Your task is to create the signup screen, login screen, and user authentication process. Use Firebase Authentication. If a user is not signed in, the user should NOT see the topbar, sidebar, or any other screen, except the signup and login screens. Immediately after authentication, the user should be redirected to the main page and see "Create" screen. Add a 'Logout' link at the bottom of the Sidebar component, which when clicked, logs out the current user.

Act as an expert in Next.js and Firebase, and ask me clarifying questions until you are 95% confident you can complete the task successfully.

Apply each change, carefully reading AI’s plan and suggested edits.

I’ve been experimenting with follow up questions to help avoid common issues after a big prompt request. However, I’ve had mixed results with this prompt — it’s far from 100% reliable, so I’ll keep experimenting. 

Update your answers as follows:

- Check that 'use client' is used in all components where it is needed.
- Check all import paths in files that have been edited or created, and fix any broken paths.
- Check for any other bugs and fix them.

When you encounter errors, read the error message and specify the files to be used as context.

Remember:

Narrowing down the context, instead of feeding in your entire codebase, helps AI troubleshoot the issue.

After Cursor AI implemented all code edits, I run npm run dev in the terminal, navigate to localhost:3000, and see a nice simple signup page, with an option to navigate to the login page.

I create an account and am authenticated — success!

Don’t forget to commit your changes after completing a unit of work 🙂

Big Surprise…

However, after signing up, I see a drastically altered “Create” screen:

  • topbar is gone

  • sidebar is gone

  • changed to dark theme!

A strange surprise - considering I didn’t ask for any of these changes!

So, I turn to Cursor AI to fix everything. I supply a screenshot of the UI and describe the issues.

Easy fix!

… still, quite alarming 😅 

I want to emphasize again the importance of committing frequently, so that you can always rollback to a stable version. Also, read every single edit that AI proposes, so you can accept or reject each edit as needed.

When I film myself using Cursor AI, I confess sometimes I rush for the sake of time and don’t read all the edits as thoroughly as I should 😆

Prompts Table

Now that we’ve successfully implemented user authentication, I want to create a Prompts screen and table where I can see all my prompts, organized in one place, and create/update/delete prompts.

The first step is to create our database.

Go to your Firebase project > Firestore Database > Create database.

This creates what’s called “Firestore” — basically a Firebase database.

Click on the Rules tab and update it to allow read and write operations for authenticated users. Ask Cursor AI: 

How would you update the Firestore rules so that users can create, edit, and delete prompts belonging to them?

Cursor AI should reply with something like this, which allows logged-in users to perform sensitive tasks - such as creating, updating, and deleting prompts: 

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /prompts/{promptId} {
      allow read, write: if request.auth != null && request.auth.uid == resource.data.userId;
      allow create: if request.auth != null;
    }
  }
}

Update your Firestore rules with Cursor AI’s code by navigating to…

Firestore Database > rules > paste in code > Publish

Here’s my prompt to create a new screen called “Prompts” — showing a table of a user’s prompts, as well as the ability to create, update, and delete prompts.

The prompt looks long, but the first half and the last paragraph are boilerplate, just like before: 

- Use Next.js, Typescript, Tailwind CSS, and App Router.

- Use Next.js App Router when creating new screens.

- Do not use src directory.

- ALWAYS show the proposed directory structure including all new files that must be created.

- ALWAYS show directory structure first.

- For each step in your plan, specify the filename and path to the file.

- For next.js components that require client side state, use 'use client'.

- Tailwind config is specified in tailwind.config.ts

- Use a modern color palette, ensuring that any user-facing text is readable and visible. Force the text colors everywhere to ensure only light mode is supported.

- ALWAYS add robust logging to help troubleshoot issues.


Complete the following tasks:

- Create a new screen called "Prompts" that shows a table of all the user's prompts and gives user the ability to create, update, and delete prompts. This screen is only accessible to authenticated users.

- Add form validation so that: when a user creates or updates a prompt, the user cannot save an empty prompt.

- Add "Prompts" as a link in the Sidebar below the "Dashboard" link. Follow the same directory structure as app/dashboard/page.tsx

- When a new user signs up, create default prompts for Facebook, Twitter, Linkedin that belong to the new user. When the user goes to "Prompts" screen for the first time, the user should see these 3 prompts in the table.


Before starting working on this feature, act as an expert in Next.js and Firebase, and ask me clarifying questions until you are 95% confident you can complete the task successfully.

@firebase.ts @useFirebase.ts @FirebaseProvider.tsx @promptService.ts @dashboard @Sidebar.tsx @AuthProvider.tsx

At the end of the prompt, remember to tag specific files to use as context. Cursor AI doesn’t need your entire codebase in order to implement a narrow set of features.

Hit Enter, instead of CMD + Enter, to chat with Cursor AI using only the specified set of files as context.

Then, answer Cursor AI’s clarifying questions to the best of your ability:

Firestore Index

After implementing Cursor AI’s code edits, try running the app and navigate to the Prompts screen.

I see the following error, which is pretty clear and helpful — thanks Firebase!

usePrompts.ts:25 Error fetching prompts:
FirebaseError: The query requires an index. You can create it here: https://console.firebase.google.com/v1/r/project/remix-768f9/firestore/inde…B0cy9pbmRleGVzL18QARoKCgZ1c2VySWQQARoNCgljcmVhdGVkQXQQAhoMCghfX25hbWVfXxAC

Because I increased the spec, requesting a searchable and filterable Prompts table, Firestore must first create an index to support our query.

I copy and paste the error, asking Cursor AI to help me fix it:

I simply follow Cursor AI’s instructions, click on the link in the error, create the suggested Firestore index, wait a few minutes, and reload the page.

Now, everything works! 🥳 

I’m able to create a new prompt, edit it, log back out, log back in, and see the edited version of the prompt. Yay!

This will be useful to organize many prompts and eventually see performance analytics for each prompt, enabling continuous optimization.

Select Prompt For Each Platform

Now that each user has a library of prompts, let’s update the remix workflow.

In the “Create” screen, I want to choose a prompt for each platform.

For example, I’ll most likely use one prompt for Facebook and a different prompt for Twitter because the platforms are wildly different, especially in character count limits.

So, I’ll insert a prompt selector dropdown next to each social media platform that is selected. There’s no need to select a prompt for platforms that aren’t selected.

Here’s my prompt: 

- Use Next.js, Typescript, Tailwind CSS, and App Router.

- ALWAYS show the proposed directory structure including all new files that must be created.

- For each step in your plan, specify the filename and path to the file.

- For next.js components that require client side state, use 'use client'.

- Tailwind config is specified in tailwind.config.ts

- Use a modern color palette, ensuring that any user-facing text is readable and visible. Force the text colors everywhere to ensure only light mode is supported.

- ALWAYS add robust logging to help troubleshoot issues.


Update the "Create" screen as follows:

- In the section "Select Platforms", insert a dropdown selector so that the user must select a prompt for each platform selected. Position the platform checkbox and prompt dropdown selector horizontally next to each other.

- Each user should have the 3 prompts that were created when they signed up. Prompts are not specific to a platform. Users can select any prompt to use for any platform.

- If a user selected 2 platforms, Facebook and Twitter, then the user must select 1 prompt to use for Facebook and 1 prompt to use for Twitter. The user does NOT need to select a prompt for Linkedin because the user did not select it.

- Remove the "Edit Prompt" button. 


Before starting working on this feature, act as an expert in Next.js, and ask me clarifying questions until you are 95% confident you can complete the task successfully.

@promptService.ts @create @ContentGenerator.tsx @AuthProvider.tsx @usePrompts.ts

As usual, AI will ask a bunch of clarifying questions. Answer them to the best of your ability. If you’re not certain about an answer, you can simply reply “Up to you” or “Not sure”.

Test, Test, Test

After implementing AI’s code suggestions, let’s test everything works.

In the “Original Content” text input, I pasted in content from a past newsletter.

Then, I selected 2 platforms: Facebook and Linkedin.

After selecting each platform, I see the prompts dropdown selector appear.

I choose a prompt for each platform.

I click the “Generate Content” button.

Yay!

I see 2 distinct pieces of generated content, one created with the Linkedin Article prompt, the other created with the Facebook Post prompt.

Always test multiple times to check the functionality works as desired!

If you get stuck or don’t like where something is going, remember you can always git stash to rollback to a previous version. However, git stash does NOT delete newly created files, so you have to do that yourself.

Up Next…

  • Image generation for posts

  • Call webhook to publish on social media

  • Update “Edit Prompt” functionality

Did I miss anything?

Have ideas or suggestions?

Message me on LinkedIn 👋

Sabrina Ramonov

P.S. If you’re enjoying my free newsletter, it’d mean the world to me if you share it with others. My newsletter just launched, every single referral helps. Thank you!