Doppler (doppler.com) will help your development in three main ways: manage environment variables and avoid storing them as plaintext, manage developer access to secrets, and manage secrets during deployments.

Dopper is free for up to 5 users.

Instead of creating .env files and storing secrets there, we’ll use the Doppler CLI.

Keep in mind that you have the option of using the web interface as well (or instead). To open the web interface, run doppler open on the command line.

1. Install the Doppler CLI by following the instructions on https://docs.doppler.com/docs/cli. Continue once gnupg and doppler are installed

2. Run doppler login to authenticate with Doppler. Create a new account if you don’t already have one

3. Next, in the root of the project, run doppler projects create prompts-with-friends to create a Doppler project named prompts-with-friends

4. Connect the current directory with the dev environment by running doppler setup -c dev -p prompts-with-friends

5. Next, run doppler secrets set SITE_URL http://localhost:3000 - this will set the secret named SITE_URL to the value http://localhost:3000

6. Run doppler secrets to make sure that it’s actually set

7. Restart the project with doppler run yarn dev (instead of yarn dev). If everything worked out, you should see a green checkmark ✅ on this section of the tutorial, with the next section expanded

PropelAuth (https://propelauth.com) provides end-to-end managed user authentication. PropelAuth is a great fit for the B2B SaaS Kit because it ships with organization management features, enabling your users to create teams and manage membership.

PropelAuth is free up to 1000 monthly active users.

1. Create an account on https://propelauth.com, create a new project (e.g. pwf_dev), in the sidebar select “Integrate your product” - “Frontend integration”

2. In the “Test” tab “Primary Frontend Location” should be https://localhost:3000. Set “Default redirect path after login” to /app

3. Press “Save”

4. [Optional] Locate “Configuration” - “User Schema” in the sidebar. Enable “Profile Picture” and “Name”

5. Locate the “Integrate your product” - “Backend integration” page

6. Locate and copy the value of “Auth URL” - it should like like https://123456789.propelauthtest.com, then run doppler secrets set PUBLIC_AUTH_URL and paste the value

NOTE: to exit Doppler CLI after setting the value, type Enter twice, then type ”.” (period). Run doppler secrets to make sure the value of PUBLIC_AUTH_URL looks good - set it again (step 6 above) if you see any extra newlines

1. Copy “Public (Verifier) Key” and save it with doppler secrets set PROPELAUTH_VERIFIER_KEY

2. Click on “Create New API Key” give it a name “b2b localhost”, copy the key and save it with doppler secrets set PROPELAUTH_API_KEY

3. Restart doppler run yarn dev to move to the next section of the tutorial

Supabase (https://supabase.com) is an open source Firebase alternative, providing services like authentication, managed database, storage, functions, etc. In this project, we’ll only use Supabase for its managed Postgres database service.

Supabase is free for 2 lightweight projects.

1. Create an account on Supabase, then:

• Create a new project named “b2b localhost”
• Click on “generate a password” link under “Database Password”
• Open a fresh editor buffer and paste the password there
• Click “Create new project” - this can take a few minutes to complete

2. Click on “Project Settings” - “Database”, navigate to “Connection string” and copy the URI (it will look something like postgresql://postgres:[YOUR-PASSWORD]@db.xxxxxxxxxxxxxxxxxxxx.supabase.co:5432/postgres)

3. Paste the URI to the editor buffer from step 1, replace [YOUR-PASSWORD] with your password, then copy the resulting string

4. Run doppler secrets set DATABASE_URL and set it the string from step 3

5. Run doppler run yarn migrate to initialize the database. You should see your new tables in the Supabase table editor

6. Restart doppler run yarn dev to move to the next section of the tutorial

Fogbender (https://fogbender.com) is a B2B customer support tool that enables users associated with the same customer organization to collaborate in vendor support conversations as a team.

Fogbender is free for 2 customer-facing agents and unlimited “readers” (agents with read-only access to customer conversations).

1. Open the embedding instructions and copy the widgetId (look for text with light green background)

2. Run doppler secrets set PUBLIC_FOGBENDER_WIDGET_ID and paste the widgetId as the value

3. Go back to the embedding instructions and copy the Secret

4. Run doppler secrets set FOGBENDER_SECRET and paste the secret as the value

5. Restart doppler run yarn dev to move to the next section of the tutorial

PostHog (https://posthog.com/) is an open-source product analytics platform that helps engineers understand user behavior.

PostHog is free for 1 project and up to 1 million events per month.

1. Open Project settings and copy the Project API Key, it will look something like phc_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

2. Save the project API key with doppler secrets set PUBLIC_POSTHOG_KEY

3. Restart doppler run yarn dev to move to the next section of the tutorial

By default, Prompts with Friends offers email-based user authentication. An alternative approach is to allow users to sign up and sign in with third-party services like Google, Microsoft, GitHub, and so on, via a mechanism called “OAuth”. In the context of OAuth, a third-party service used for authentication is called an “OAuth provider”.

In this step, we’ll configure authentication with GitHub. Using GitHub as an OAuth provider is free to you and your users.

1. Open https://app.propelauth.com, in the sidebar, select “Configuration” - “Signup/Login”, then click on “Sign in with GitHub”

2. Locate “Authorized redirect URIs” - this URL will be used in the next step (it should similar to https://123456789.propelauthtest.com/github/callback)

3. Open https://github.com/settings/developers, click on “New OAuth App” or “Register a new application”, and fill in the form:

   • Application name: “Prompts with Friends localhost”
   • Homepage URL: http://localhost:3000
   • Authorization callback URL: paste the Authorized redirect URL value from the previous step

4. Leave the rest of the fields blank and click on “Register application”

5. You should see a page with “Application created successfully” banner on top. Click on the “Generate a new client secret” button, then copy “Client ID” and the new “Client secret” to the PropelAuth configuration page from step 1

6. In PropelAuth, switch “Enabled?” to “ENABLED”, then click “Save”

7. You don’t need to restart the app or save anything to Doppler, just refresh the login page and you should see a new “Sign in with GitHub” button

OpenAI (https://openai.com/) provides APIs for generating text and images.

Prompts with Friends, our sample B2B app, uses OpenAI to return responses to prompts and requires each customer organization to provide its own OpenAI API key. However, to ease onboarding, you can specify your OpenAI API key to offer each user 3 free API calls per day.

OpenAI does not come with a free tier, but all new accounts get a $5 credit that must be used during the initial 3 months.

1. Open API keys and create a new API key named “b2b_localhost”, then copy the key

2. Save the API key with doppler secrets set OPENAI_API_KEY

3. Restart doppler run yarn dev to move to the next section of the tutorial

Stripe (https://stripe.com) is a payments platform that makes it relatively easy to manage subscriptions in a B2B product.

Stripe makes money whenever you do, by charging a small fee per successful transaction. For details, see https://stripe.com/pricing.

It takes some effort to open a Stripe account, with details falling outside the scope of this tutorial - we’ll assume you’ve got access to a Stripe account in good standing.

1. While developing locally, you can use Stripe’s “Test mode” to avoid experimenting with real customers or payments

2. Navigate to https://dashboard.stripe.com/test/apikeys, locate “Secret key” and store it with doppler secrets set STRIPE_SECRET_KEY

3. Create a product of type “subscription” and store its API ID with doppler secrets set STRIPE_PRICE_ID

4. Restart doppler run yarn dev to move to the next section of the tutorial

At this point, you should be able purchase a (test) subscription on http://localhost:3000/app/settings. For test card numbers, see https://stripe.com/docs/testing.

At this point, Prompts with Friends is fully configured on your machine! You can check it out here: http://localhost:3000/app.

Except for the data, you should see the exact same app we have running on https://promptswithfirends.com/app.

A great next step is to learn how to deploy your version of the app to production. For this, we’ll be using Vercel (https://vercel.com), a cloud platform for deploying and hosting static sites and serverless functions.

Fogbender (optional)

1. Create a new Fogbender workspace on https://fogbender.com/admin/-/workspaces

2. Copy the new widgetId, then save it with doppler secrets set PUBLIC_FOGBENDER_WIDGET_ID --config prd

3. Copy the new secret, then save it with doppler secrets set FOGBENDER_SECRET --config prd

PropelAuth

1. Create a new PropelAuth project (e.g., pwf_prod), then locate “Integrate your product” - “Frontend integration”.

2. Under “Test” / “Primary Frontend Location”, change Type to Vercel, then come up with a value for “Subdomain” - this can be any string (e.g., pwf-2023-may-13-435pm), as long as https://[subdomain].vercel.app resolves to 404: NOT_FOUND.

3. Set “Default redirect path after login” to /app

4. Press “Save”

5. [Optional] Locate “Configuration” - “User Schema” in the sidebar. Enable “Profile Picture” (for nicer avatars) and “Name” (to show name instead of email)

6. Locate the “Integrate your product” - “Backend integration” page

7. Copy “Auth URL”, then save it with doppler secrets set PUBLIC_AUTH_URL --config prd

8. Copy “Public (Verifier) Key”, then save it with doppler secrets set PROPELAUTH_VERIFIER_KEY --config prd

9. Click on “Create New API Key”, give the key a name (e.g., pwf-prod), copy the key, then save it with doppler secrets set PROPELAUTH_API_KEY --config prd

Supabase

Note that the Supabase free tier has a limit of 2 projects.

1. Create a new Supabase project and save the new database URL with doppler secrets set DATABASE_URL --config prd
2. Run doppler run --config prd yarn migrate to initialize the database. You should see your new tables in the Supabase table editor.

PropelAuth GitHub OAuth (optional)

1. In the sidebar, select “Configuration” - “Signup / Login”, and click on “Sign in with GitHub”.

2. Locate “Authorized redirect URIs”, this URL is going to be used in the next step.

3. Open https://github.com/settings/developers, click on “New OAuth App”, and fill in the form:

   • “Application name” - “Prompts with Friends”
   • “Homepage URL” - https://[subdomain].vercel.app
   • “Authorization callback URL” - paste the value from the previous step

4. Leave the rest of the fields blank and click on “Register application”

5. You should see a new OAuth application created. Click on the “Generate a new client secret” button, then copy “Client ID” and the new “Client secret” to the page from step 1.

6. Click enable and save.

Posthog (optional)

1. Since free PostHog is limited to only one project on a free tier, use the same values for production and the local version.

2. Get existing PUBLIC_POSTHOG_KEY with doppler secrets get PUBLIC_POSTHOG_KEY

3. Set it for production with doppler secrets set PUBLIC_POSTHOG_KEY --config prd

OpenAI (optional)

1. Create a new API key on https://platform.openai.com/account/api-keys named “b2b_prod”, then copy it

2. Save it with doppler secrets set OPENAI_API_KEY --config prd

Stripe (optional)

1. Navigate to https://dashboard.stripe.com/apikeys and make sure you’re in live mode (“Test mode” off)

2. Locate “Secret key” and store it with doppler secrets set STRIPE_SECRET_KEY --config prd

3. Navigate to https://dashboard.stripe.com/products (still in live mode)

4. Create a product of type “subscription” and store its API ID with doppler secrets set STRIPE_PRICE_ID --config prd

Check build

1. Make sure you can still build the project locally with doppler run --config prd yarn build

Publish to GitHub, deploy to Vercel

1. Publish your project to GitHub

   • Create a new project on GitHub, copy the new URL
   • Change our origin URL to yours with git remote set-url origin NEW_URL
   • Add and commit your changes (if any) with git add . && git commit -m "my updates"
   • Push to GitHub with git push -u origin main

2. Link your GitHub project to Vercel

   • See https://vercel.com/docs/concepts/deployments/git/vercel-for-github

3. Note that if your Vercel subdomain ended up being different from the one used in the 2nd step of PropelAuth settings above, make sure to update “Primary Frontend Location” in PropelAuth to your actual Vercel subdomain

4. Configure Vercel to use production secrets from Doppler by using the Doppler Vercel integration. For additional information, see https://docs.doppler.com/docs/vercel

Astro

1. Open astro.config.mjs and change site to your new url (e.g., https://hotdog-catering.vercel.app)

2. Consider setting allowRobots to false in src/pages/robots.txt.ts in case you’re not ready for search engines to index your site

3. Redeploy your project to Vercel for the changes to take effect

Note that a custom domain is required for making PropelAuth work with Safari.

1. Buy a domain name
   • A good place to search for domain names is https://domainr.com/

Vercel

1. Go to Vercel, select your project, then locate “Settings” - “Domains”

2. Enter your domain name and press “Add”

3. Select your primary domain (e.g., www.yourdomain.com) and the redirect (e.g., yourdomain.com)

4. Follow domain verification instructions. Note that you will need access to your domain name’s DNS to configure TXT and CNAME records

PropelAuth

1. In PropelAuth, locate “Going Live” - “Go Live”. Enter your domain name under “Set Domain”, then press the green checkmark

2. Follow domain verification instructions. Note that you will need access to your domain name’s DNS to configure TXT and CNAME records

3. Make sure you can open https://auth.yourdomain.com

4. Locate “Integrate your product” - “Frontend integration”, then switch to “Prod” tab

5. Make sure your “Application URL” is the same as the primary domain in step 2 of Vercel configuration above

6. Set “Default redirect path after login” to /app

7. Press “Save”

8. Locate the “Integrate your product” - “Integrate your Backend” step

9. Copy “Auth URL”, then save it with doppler secrets set PUBLIC_AUTH_URL --config prd

10. Copy “Public (Verifier) Key”, then save it with doppler secrets set PROPELAUTH_VERIFIER_KEY --config prd

11. Click on “Create New API Key” give it a name (e.g. pwf-prod-custom-domain), copy the key, then save it with doppler secrets set PROPELAUTH_API_KEY --config prd

PropelAuth GitHub OAuth (optional)

1. In the sidebar, select “Configuration” - “Signup / Login”, and click on “Sign in with GitHub”.

2. You going to see two URLs in the “Authorized redirect URIs” section. Copy the second one that looks like https://auth.yourdomain.com/github/callback, this URL is going to be used in the next step.

3. Open https://github.com/settings/developers, select “Prompts with Friends” application, then click on it.

4. Set “Homepage URL” to https://auth.yourdomain.com (replace yourdomain.com with your domain name)

5. Set “Authorization callback URL” to the value from the step 2.

6. Press “Update application”

Astro

1. Open astro.config.mjs and change site to your primary domain

2. Consider setting allowRobots to false in src/pages/robots.txt.ts in case you’re not ready for search engines to index your site

3. Redeploy your project to Vercel for the changes to take effect

Preview deployments are tricky to configure because they are not quite production, but also not quite development. The main issue is that PropelAuth only lets you configure CORS to accept subdomains for your own domain - you can’t use something.vercel.app.

There are multiple ways of dealing with this, but in this guide we’re going to use production values for the preview environment.

Doppler

1. In Doppler, find your project, open prd and click “Duplicate”. Give it a name, like prd_preview, and click “Duplicate”
2. Then, go to “Integrations” and set up a new sync with Vercel. Select “Preview” for “Vercel environment” and “prd_preview” as “Config”

PropelAuth

1. In PropelAuth, locate “Integrate your product” - “Frontend Integration”, then switch to the “Test” tab (because PropelAuth lets us set any domain for test environments)

2. Click on “Add additional frontend location” and add https://vercel.app. Make sure that “Allow any subdomain” is checked. (If you need greater security, you’d need to add your preview domains one by one after each deployment)

3. Press “Save”

4. Locate “Integrate your product” - “Backend Integration”

5. Copy “Auth URL”, then save it with doppler secrets set PUBLIC_AUTH_URL --config prd_preview

6. Copy “Public (Verifier) Key”, then save it with doppler secrets set PROPELAUTH_VERIFIER_KEY --config prd_preview

7. Click on “Create New API Key”, give it a name (e.g. pwf_preview), copy the key, then save it with doppler secrets set PROPELAUTH_API_KEY --config prd_preview

Supabase - Option 1, using a separate DB

1. Create a new DB. Keep in mind that Supabase only allows two free projects - you won’t be able to use the same free Supabase account for separate development, preview, and production databases. Configure DATABASE_URL with doppler secrets set DATABASE_URL --config prd_preview

2. To run migrations, use doppler run --config prd_preview yarn migrate

Supabase - Option 2, using the development DB

1. Copy DATABASE_URL from your development config with doppler secrets get DATABASE_URL --config dev, copy the value

2. Set DATABASE_URL with doppler secrets set DATABASE_URL --config prd_preview to the value from the previous step

3. Run migrations with doppler run --config dev yarn migrate - --config dev works, because development and preview environments share the same database

Supabase - Option 3, using the production DB

1. Copy DATABASE_URL from your production config with doppler secrets get DATABASE_URL --config prd, copy the value

2. Set DATABASE_URL with doppler secrets set DATABASE_URL --config prd_preview to the value from the previous step

3. Since production and preview environments share the same database, you have to ensure your migrations are compatible with production code. The safest option is to use the preview environment to test changes not involving changes to the database schema

Vercel

Assuming you’re using GitHub with Vercel, push to a branch and navigate to the preview site by clicking the “View deployment” button in GitHub - you’ll now be able to login with a user from the “Test” environment in your production PropelAuth project.