Vibe Coding Flowsta into an existing Website using Cursor

Adding authentication to a web app used to be a chore. Setting up databases, managing sessions, worrying about security... it's a lot.

But with Flowsta Auth and an AI-powered editor like Cursor, you can "vibe code" your way to a secure, decentralized login system in minutes.

In this guide, I'll walk you through how we added Flowsta Auth to The NOW Times (our automated news site) using Cursor. We'll go from zero to a fully gated content system with just a few prompts.

The Goal

We have an existing Qwik/React site. We want to:

1. Add a "Sign in with Flowsta" button.
2. Gate content so only logged-in users see more than 4 articles.
3. Display the user's name in the header.

Let's get into the flow.

Step 1: Get Your Credentials

Before we even open Cursor, we need to set up our app in Flowsta.

1. Go to dev.flowsta.com and sign in.
2. Click "Create New App".
3. Give your app a name (e.g., "My Awesome App").
4. Copy your Client ID. You'll need this for the code.

Note: We'll come back here later to set the Redirect URI once we know what it is!

Step 2: Prompting Cursor

Open your project in Cursor. We want to give the AI context so it knows exactly what to do.

1. Add the Docs: In Cursor's chat (Cmd+L), type @ and paste the URL to the Flowsta docs: https://docs.flowsta.com/. This lets Cursor read the documentation so you don't have to explain how the SDK works.

2. The Prompt: Here is the exact prompt we used to get started:

"I'd like to add Flowsta Auth as the only authentication system in our project. Once added, we will add the Sign in with Flowsta button after the 4th article on the front page. After implementation, the way to see more than 4 articles is to login with the button.

Here is my Client ID: flowsta_app_...

Please use the dark theme pill-shaped button."

Cursor will analyze your project structure and the Flowsta docs, then propose a plan.

Step 3: The Implementation (Code Examples)

Cursor handled the heavy lifting, but here's a look at the key pieces it built.

1. The Auth Wrapper (src/lib/flowsta.ts)

First, we created a singleton to manage the SDK instance. This ensures we aren't re-initializing it constantly.

import { FlowstaAuth } from '@flowsta/auth';

const CLIENT_ID = import.meta.env.VITE_FLOWSTA_CLIENT_ID || 'your_fallback_id';

let authInstance: FlowstaAuth | null = null;

export const getAuth = () => {
  if (typeof window === 'undefined') return null;
  
  if (!authInstance) {
    authInstance = new FlowstaAuth({
      clientId: CLIENT_ID,
      // This constructs the redirect URL dynamically based on where the app is running
      redirectUri: window.location.origin + '/auth/callback',
      scopes: ['openid', 'email', 'display_name']
    });
  }
  
  return authInstance;
};

2. The Callback Route (src/routes/auth/callback/index.tsx)

When a user logs in, Flowsta redirects them back to this page. We need to handle that response.

import { component$, useVisibleTask$ } from '@builder.io/qwik';
import { useNavigate } from '@builder.io/qwik-city';
import { getAuth } from '~/lib/flowsta';

export default component$(() => {
  const nav = useNavigate();

  useVisibleTask$(async () => {
    const auth = getAuth();
    if (auth) {
      try {
        // This does the magic: exchanges the code for a token
        await auth.handleCallback();
        // Send them back home
        window.location.href = '/';
      } catch (e) {
        console.error('Login failed', e);
      }
    }
  });

  return <div>Logging you in...</div>;
});

3. The "Vibe" Button

We wanted the official Flowsta style. Cursor helped us create a component that uses the official SVG asset.

First, head over to the Flowsta Button Gallery. They have various styles (Dark, Light, Neutral) and shapes (Pill, Rectangle).

Choose the one that fits your vibe, download the SVG version, and save it to your project's public folder (e.g., as flowsta_signin.svg).

Then, create the component:

// src/components/widgets/FlowstaButton.tsx
export default component$(() => {
  const handleLogin = $(async () => {
    const auth = getAuth();
    if (auth) await auth.login();
  });

  return (
    <a onClick$={handleLogin} class="cursor-pointer hover:opacity-90">
      <img 
        src="/flowsta_signin.svg" 
        alt="Sign in with Flowsta"
        width="175"
        height="40"
      />
    </a>
  );
});

Step 4: Closing the Loop (Redirect URIs)

Once the code was written, we needed to tell Flowsta where to send users back to.

Because we used window.location.origin + '/auth/callback' in our code, the URI depends on where we are running the app:

• Localhost: http://localhost:5173/auth/callback
• Production: https://your-site.com/auth/callback

Action: Go back to dev.flowsta.com, select your app, and add both of these URLs to the "Allowed Redirect URIs" section.

Step 5: Gating the Content

Finally, we updated our homepage to check the status.

// Inside your component
useVisibleTask$(() => {
  const auth = getAuth();
  if (auth && auth.isAuthenticated()) {
    store.isAuthenticated = true;
  }
});

// In the JSX
return (
  <>
    {/* Show first 4 articles */}
    <ArticleGrid articles={articles.slice(0, 4)} />

    {!store.isAuthenticated ? (
      <div class="gate-container">
        <p>Sign in to see more!</p>
        <FlowstaButton />
      </div>
    ) : (
      /* Show the rest */
      <ArticleGrid articles={articles.slice(4)} />
    )}
  </>
);

Conclusion

And that's it! In about 15 minutes of "vibe coding" with Cursor, we integrated a secure, decentralized authentication system. No backend database required for user sessions, no complex password management—just clean, simple identity.

---

Ready to integrate Flowsta Auth into your app? Visit dev.flowsta.com for integration docs and get your Client ID.

Have questions? Check out our FAQ or join our Discord community.