Chore: Improve onboarding (#304)

.env.example

@@ -0,0 +1,3 @@
+SUPABASE_AUTH_EXTERNAL_GITHUB_REDIRECT_URI="http://127.0.0.1:54321/auth/v1/callback"
+SUPABASE_AUTH_EXTERNAL_GITHUB_CLIENT_ID=
+SUPABASE_AUTH_EXTERNAL_GITHUB_SECRET=

.env.local.example

@@ -1,17 +1,11 @@
-# Update these with the details of your local test instance from the Supabase CLI
-# ("API URL", "anon key", and "service_role key")
-NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54321
-NEXT_PUBLIC_SUPABASE_ANON_KEY=
-SUPABASE_SERVICE_ROLE_KEY=
-
-# Update these with the details of your remote database
-SUPABASE_PROJECT_REF=
-SUPABASE_DB_PASSWORD=
+NEXT_PUBLIC_SITE_URL="http://localhost:3000"
 
-# Update these with your Stripe credentials from https://dashboard.stripe.com/apikeys
-NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_1234
-STRIPE_SECRET_KEY=sk_test_1234
-STRIPE_WEBHOOK_SECRET=whsec_1234
+# These environment variables are used for Supabase Local Dev
+NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0"
+NEXT_PUBLIC_SUPABASE_URL="http://127.0.0.1:54321"
+SUPABASE_SERVICE_ROLE_KEY=
 
-# Add NEXT_PUBLIC_SITE_URL to your Vercel environmental variables for the production environment following the example below. This defaults to http://localhost:3000 in development.
-# NEXT_PUBLIC_SITE_URL=https://your-deployment-url.vercel.app
+# Get these from Stripe dashboard
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
+STRIPE_SECRET_KEY=
+STRIPE_WEBHOOK_SECRET=

.gitignore

@@ -25,6 +25,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local

README.md

@@ -65,7 +65,7 @@ Next, we'll need to configure [Stripe](https://stripe.com/) to handle test payme
 
 For the following steps, make sure you have the ["Test Mode" toggle](https://stripe.com/docs/testing) switched on.
 
-#### Create a webhook
+#### Create a Webhook
 
 We need to create a webhook in the `Developers` section of Stripe. Pictured in the architecture diagram above, this webhook is the piece that connects Stripe to your Vercel Serverless Functions.
 
@@ -117,17 +117,27 @@ I know, that was quite a lot to get through, but it's worth it. You're now ready
 
 If you haven't already done so, clone your Github repository to your local machine.
 
+### Install dependencies
+
+Ensure you have [pnpm](https://pnpm.io/installation) installed and run:
+
+```bash
+pnpm install
+```
+
 Next, use the [Vercel CLI](https://vercel.com/download) to link your project:
 
 ```bash
-vercel login
-vercel link
+pnpm dlx vercel login
+pnpm dlx vercel link
 ```
 
+`pnpm dlx` runs a package from the registry, without installing it as a dependency. Alternatively, you can install these packages globally, and drop the `pnpm dlx` part.
+
 If you don't intend to use a local Supabase instance for development and testing, you can use the Vercel CLI to download the development env vars:
 
 ```bash
-vercel env pull .env.local
+pnpm dlx vercel env pull .env.local
 ```
 
 Running this command will create a new `.env.local` file in your project folder. For security purposes, you will need to set the `SUPABASE_SERVICE_ROLE_KEY` manually from your [Supabase dashboard](https://app.supabase.io/) (`Settings > API`). If you are not using a local Supabase instance, you should also change the `--local` flag to `--remote` in the `supabase:generate-types` script in `package.json`.
@@ -136,65 +146,96 @@ Running this command will create a new `.env.local` file in your project folder.
 
 It's highly recommended to use a local Supabase instance for development and testing. We have provided a set of custom commands for this in `package.json`.
 
-First, you will need to install [Docker](https://www.docker.com/get-started/). You should also copy `.env.local.example` to `.env.local`.
+First, you will need to install [Docker](https://www.docker.com/get-started/). You should also copy or rename:
+
+- `.env.local.example` -> `.env.local`
+- `.env.example` -> `.env`
 
 Next, run the following command to start a local Supabase instance and run the migrations to set up the database schema:
 
 ```bash
-# or `npm` or `yarn` instead of `pnpm`
-pnpm run supabase:start
+pnpm supabase:start
+```
+
+The terminal output will provide you with URLs to access the different services within the Supabase stack. The Supabase Studio is where you can make changes to your local database instance.
+
+Copy the value for the `service_role_key` and paste it as the value for the `SUPABASE_SERVICE_ROLE_KEY` in your `.env.local` file.
+
+You can print out these URLs at any time with the following command:
+
+```bash
+pnpm supabase:status
+```
+
+To link your local Supabase instance to your project, run the following command, navigate to the Supabase project you created above, and enter your database password.
+
+```bash
+pnpm supabase:link
+```
+
+If you need to reset your database password, head over to [your database settings](https://supabase.com/dashboard/project/_/settings/database) and click "Reset database password", and this time copy it across to a password manager! 😄
+
+🚧 Warning: This links our Local Development instance to the project we are using for `production`. Currently, it only has test records, but once it has customer data, we recommend using [Branching](https://supabase.com/docs/guides/platform/branching) or manually creating a separate `preview` or `staging` environment, to ensure your customer's data is not used locally, and schema changes/migrations can be thoroughly tested before shipping to `production`.
+
+Once you've linked your project, you can pull down any schema changes you made in your remote database with:
+
+```bash
+pnpm supabase:pull
 ```
 
-The terminal output will provide you with values for the environment variables `NEXT_PUBLIC_SUPABASE_URL`, `NEXT_PUBLIC_SUPABASE_ANON_KEY`, and `SUPABASE_SERVICE_ROLE_KEY`. Copy these into your `.env.local` file.
+You can seed your local database with any data you added in your remote database with:
 
-The terminal output will also provide you with a URL to access the local Supabase Studio, where you can make changes to your local database instance. (You can always find the Supabase Studio later by opening up a Docker window, navigating to `Containers` tab, and clicking the link in the `Ports` column for the corresponding container.)
+```bash
+pnpm supabase:generate-seed
+pnpm supabase:reset
+```
 
-To link your local Supabase instance to your project, you will need to set `SUPABASE_PROJECT_REF` and `SUPABASE_DB_PASSWORD` for your remote database in your `.env.local` file. You can find these values in the [Supabase dashboard](https://supabase.com/dashboard/projects) for your project. Then, run the following command to link your local Supabase instance to your project:
+🚧 Warning: this is seeding data from the `production` database. Currently, this only contains test data, but we recommend using [Branching](https://supabase.com/docs/guides/platform/branching) or manually setting up a `preview` or `staging` environment once this contains real customer data.
+
+You can make changes to the database schema in your local Supabase Studio and run the following command to generate TypeScript types to match your schema:
 
 ```bash
-pnpm run supabase:link
+pnpm supabase:generate-types
 ```
 
-Once you've linked your project, you can make changes to the database schema in your local Supabase Studio and run the following command to generate TypeScript types to match your schema:
+You can also automatically generate a migration file with all the changes you've made to your local database schema with the following command:
 
 ```bash
-pnpm run supabase:generate-types
+pnpm supabase:generate-migration
 ```
 
-You can also automatically generate a migration file with all the changes you've made to your local database schema and then push the migration to your remote database with the following commands:
+And push those changes to your remote database with:
 
 ```bash
-pnpm run supabase:generate-migration
-pnpm run supabase:migrate
+pnpm supabase:push
 ```
 
-Remember to test your changes thoroughly in your local environment before deploying them to production!
+Remember to test your changes thoroughly in your `local` and `staging` or `preview` environments before deploying them to `production`!
 
 ### Use the Stripe CLI to test webhooks
 
-[Install the Stripe CLI](https://stripe.com/docs/stripe-cli) and [link your Stripe account](https://stripe.com/docs/stripe-cli#login-account).
+Use the [Stripe CLI](https://stripe.com/docs/stripe-cli) to [login to your Stripe account](https://stripe.com/docs/stripe-cli#login-account):
+
+```bash
+pnpm stripe:login
+```
+
+This will print a URL to navigate to in your browser and provide access to your Stripe account.
 
 Next, start local webhook forwarding:
 
 ```bash
-stripe listen --forward-to=localhost:3000/api/webhooks
+pnpm stripe:listen
 ```
 
 Running this Stripe command will print a webhook secret (such as, `whsec_***`) to the console. Set `STRIPE_WEBHOOK_SECRET` to this value in your `.env.local` file. If you haven't already, you should also set `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY` and `STRIPE_SECRET_KEY` in your `.env.local` file using the **test mode**(!) keys from your Stripe dashboard.
 
-### Install dependencies and run the Next.js client
+### Run the Next.js client
 
-In a separate terminal, run the following commands to install dependencies and start the development server:
+In a separate terminal, run the following command to start the development server:
 
 ```bash
-pnpm install
-pnpm run dev
-# or
-npm install
-npm run dev
-# or
-yarn
-yarn dev
+pnpm dev
 ```
 
 Note that webhook forwarding and the development server must be running concurrently in two separate terminals for the application to work correctly.

app/layout.tsx

@@ -46,9 +46,7 @@ export async function generateMetadata(): Promise<Metadata> {
   };
 }
 
-export default async function RootLayout({
-  children
-}: PropsWithChildren) {
+export default async function RootLayout({ children }: PropsWithChildren) {
   return (
     <html lang="en">
       <body className="bg-black loading">

app/signin/[id]/page.tsx

@@ -43,13 +43,14 @@ export default async function SignIn({
 
   // Check if the user is already logged in and redirect to the account page if so
   const supabase = createClient();
+
   const {
-    data: { session }
-  } = await supabase.auth.getSession();
+    data: { user }
+  } = await supabase.auth.getUser();
 
-  if (session && viewProp !== 'update_password') {
+  if (user && viewProp !== 'update_password') {
     return redirect('/');
-  } else if (!session && viewProp === 'update_password') {
+  } else if (!user && viewProp === 'update_password') {
     return redirect('/signin');
   }
 

components/ui/AuthForms/OauthSignIn.tsx

@@ -14,7 +14,11 @@ type OAuthProviders = {
 
 export default function OauthSignIn() {
   const oAuthProviders: OAuthProviders[] = [
-    { name: 'github', displayName: 'GitHub', icon: <Github className="h-5 w-5" /> }
+    {
+      name: 'github',
+      displayName: 'GitHub',
+      icon: <Github className="h-5 w-5" />
+    }
     /* Add desired OAuth providers here */
   ];
   const [isSubmitting, setIsSubmitting] = useState(false);

package.json

@@ -8,13 +8,20 @@
     "start": "next start",
     "lint": "next lint",
     "prettier-fix": "prettier --write .",
-    "stripe:listen": "stripe listen --forward-to=localhost:3000/api/webhooks --project-name=saas-starter",
-    "stripe:fixtures": "stripe fixtures fixtures/stripe-fixtures.json --project-name=saas-starter",
+    "stripe:login": "stripe login",
+    "stripe:listen": "stripe listen --forward-to=localhost:3000/api/webhooks",
+    "stripe:fixtures": "stripe fixtures fixtures/stripe-fixtures.json",
     "supabase:start": "npx supabase start",
-    "supabase:link": "node supabase/link.js",
+    "supabase:stop": "npx supabase stop",
+    "supabase:status": "npx supabase status",
+    "supabase:restart": "npm run supabase:stop && npm run supabase:start",
+    "supabase:reset": "npx supabase reset",
+    "supabase:link": "npx supabase link",
     "supabase:generate-types": "npx supabase gen types typescript --local --schema public > types_db.ts",
-    "supabase:generate-migration": "npx supabase db diff | npx supabase migration new update",
-    "supabase:migrate": "npx supabase migration up --linked"
+    "supabase:generate-migration": "npx supabase db diff | npx supabase migration new",
+    "supabase:generate-seed": "npx supabase db dump --data-only -f supabase/seed.sql",
+    "supabase:push": "npx supabase push",
+    "supabase:pull": "npx supabase pull"
   },
   "dependencies": {
     "@radix-ui/react-toast": "^1.1.5",
@@ -37,6 +44,7 @@
   "devDependencies": {
     "@types/node": "^20.11.17",
     "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
     "autoprefixer": "^10.4.17",
     "eslint": "^8.56.0",
     "eslint-config-next": "14.1.0",