Learn

Creating your first project

Supabase

From free account to project URL and anon key copied into your .env.

In this lesson, you will create your Supabase account, launch a first project on the free tier, and retrieve the two values that all your apps will need: the project URL and the publishable key (or anon key). By the end, they will be in your .env and you will be ready for the following lessons.

Creating an account and a project

Open database.new in your browser. This URL redirects directly to the project creation interface in the Supabase dashboard.

If you do not have an account yet, you can sign up with GitHub, Google, or an email - it is free and does not require a credit card for the free tier.

Once logged in, the interface asks you for:

  • Organization: keep the one created by default or create a new one.
  • Name: the name of your project (for example my-first-project).
  • Database Password: generate a strong password and save it somewhere - you will need it if you connect directly to PostgreSQL.
  • Region: choose the region closest to your users. To start, West EU (Ireland) or EU West (Frankfurt) work well if you are in Europe.
  • Plan: select Free.

Click Create new project. Provisioning takes about a minute. Supabase creates a dedicated PostgreSQL instance for your project.

Retrieving the URL and API key

This is the most important part of this lesson. Your code needs two values to connect to Supabase:

  • Project URL: your project's address (something like https://xyzabc.supabase.co).
  • Publishable key (or anon key): a public key, safe to expose on the client side. It grants access to your database with the permissions of the anon PostgreSQL role - that is, only what your RLS policies allow.

In the dashboard, go to Settings > API Keys. There you will find:

  • Your project URL in the "Project URL" section.
  • The publishable key (or anon key in legacy) in its dedicated section.

Never copy the secret key (or service_role) into a client-side file or a public repo - it bypasses all security policies.

Adding the keys to your .env

Create a .env.local file at the root of your project and paste your values:

NEXT_PUBLIC_SUPABASE_URL=https://xyzabc.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_xxxx

If you are working with the older convention (anon key), the common variable names are:

NEXT_PUBLIC_SUPABASE_URL=https://xyzabc.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGci...

The NEXT_PUBLIC_ prefix is specific to Next.js: it makes the variable accessible in client code. For other frameworks (React + Vite, SvelteKit, etc.), the prefix changes (VITE_, PUBLIC_, etc.) but the values remain the same.

Installing the Supabase client

For your app to talk to Supabase, install the JavaScript SDK:

shell
pnpm add @supabase/supabase-js

Optional - the Supabase CLI

The Supabase CLI lets you manage your project locally (migrations, TypeScript types generated from your schema, local stack with Docker). This is optional for now - the following lessons will introduce it progressively. Here is how to install it if you want it right away:

On macOS / Linux with Homebrew:

shell
brew install supabase/tap/supabase

On Windows with Scoop:

shell
scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
scoop install supabase

Via npm (local project dependency):

shell
pnpm add -D supabase

You can also invoke it without a global install using npx supabase <command>.

Sources

Related

See also · package-managerspnpm vs bun vs npm: which to choose

Concepts-ponts

Check off steps to unlock what comes next

Back to course