Prerequisites

Required to hook everything up.

Installing the application ships the guestbook user interface and default Supabase wiring.

You'll need to first:

Install Node.js with npm

Download the 22 LTS Windows installer from nodejs.org. The installer includes npm.

Or, install fnm (fnm-windows.zip), then call:

fnm install 22
fnm use 22

Confirm that you have the right versions:

# Should return v22.23.2
node -v
# Should return 10.9.8
npm -v

Download the 22 LTS macOS installer from nodejs.org. The installer includes npm.

Or install nvm, restart the terminal, then call:

nvm install 22
nvm use 22

Confirm that you have the right versions:

# Should return v22.23.2
node -v
# Should return 10.9.8
npm -v

Create an account and organization with Supabase, then on the Create a new project screen:

Enter in your Organization, Project name, and Database password.

Hang on to your Database password — we'll need to enter this into your .env.local file under your DATABASE_URL to replace [YOUR-PASSWORD].
Select a Region.
Under Security, check off:
- Enable Data API
- Enable automatic RLS
Toggle Automatically expose new tables to unchecked.
Click Create new project.

When your project is ready:

In the Settings left sidebar, select Data API.
Under Overview, copy the API URL to your clipboard. You'll need to clip the rest/v1/ portion from the end of the URL.

Hang on to this — we'll need to enter this into your .env.local file and to hook up Supabase and Google OAuth 2.0:
```
NEXT_PUBLIC_SUPABASE_URL=https://<your-database-url>.supabase.co
```
In the top navigation, click the Connect button.
Select Direct, then under Connection Method, click Transaction pooler.

Leave the Type as URI.
Under Connection string, copy the Shared pooler to your clipboard.

Hang on to this — we'll need to enter this into your .env.local file under your DATABASE_URL (replace with [YOUR-PASSWORD]):
```
DATABASE_URL=postgresql://postgres.<your-database-url>:[YOUR-PASSWORD]@<your-database-region>.pooler.supabase.com:<port>/postgres
```

Create a new Google Cloud project.
When the project is ready, select your new project.
In the left sidebar, click APIs & Services, then select OAuth consent screen.
In OAuth Overview, click Get started.
Configure your project, then click Create. For example, enter your:
- App Information
- Audience (for personal Google accounts, select External)
- Contact Information
- Finish (to agree to the Google API Services: User Data Policy)
Click Create.

In the left sidebar, click Clients.
Click + Create client.
In the Application type drop-down, select Web application.
Give your application a Name.
Under Authorized JavaScript origins, enter any URLs you'll use to access your application. For example:
- Local host: http://localhost:3000
- Vercel deployment: https://<your-vercel-project-name>.vercel.app
Under Authorized redirect URIs, enter your Supabase project's callback URL based on your NEXT_PUBLIC_SUPABASE_URL. For example:
```
https://<your-database-url>.supabase.co/auth/v1/callback
```
Click Create.
On the OAuth client created popup, copy the Client ID and Client secret to your clipboard. Hang on to these — we'll need to enter this into Supabase to connect Google OAuth 2.0 in the next section.

After you have your Google OAuth client credentials, within Supabase:

In the left sidebar, click Authentication, then select Sign In / Providers.
Under Auth Providers, click Google.
Toggle Enable Sign in with Google to ON.
Replace the Client IDs with your Google OAuth client ID.
Paste in your Client Secret (for OAuth).
Click Save.

Fork the starter repository or drop the guestbook kit into your existing Next.js app: