7. Setting up Supabase for Production
To get started with Supabase, you will need to set up an account and create a project. Here's how to do it:
Creating an Account
- Go to the Supabase website (https://supabase.com/) and click on the "Sign Up" button in the top right corner.
- Follow the prompts to create a new account. You will need to provide your email address and choose a password.
Creating a Project
- Once you have created your account, log in and click on the "Create Project" button in the dashboard.
- Give your project a name and choose a region for your data to be stored in. You will also need to create a database password. Make sure to save this password in a secure location, as you will need it later to access your database. Then click on the "Create Project" button to finish creating your project.
Accessing Your Project
- You should now see your new project listed in the dashboard. Click on the project name to open it and start working with Supabase.
Auth configuration
- Go to the "Authentication" section of your project usually at
https://app.supabase.io/project/<project-id>/auth
. - Go to the URL Configuration tab.
- Set the Site URL to
http://localhost:3000
or it can also be your production domain e.g.https://myapp.com
. (This is not as important as the Redirect URL configuration) - Set Redirect URLs to
a.
http://localhost:3000/auth/callback
(for local development) orhttp://localhost:3000/**
(this means all routes underhttp://localhost:3000
will be accepted as a valid redirect URL) b.https://myapp.com/auth/callback
(for production) orhttps://myapp.com/**
(this means all routes underhttps://myapp.com
will be accepted as a valid redirect URL)
Install dependencies and link your project
- run
pnpm install
- Supabase login within your terminal
- Note: If you haven't used supabase before in the terminal, you will need to login with supabase in the terminal.
- Create an access token for supabase here https://app.supabase.com/account/tokens
- Copy the access token and run
pnpm supabase login
- It will prompt for an access token. Paste the token there. It should log you in.
- Run
pnpm supabase link --project-ref {projectRef}
. Your project ref is available in the project settings section within the supabase dashboard.- Once you run the command, you will prompted for the database password. Enter the password, you saved earlier.
- When it completes, your project will be linked to supabase.
- Run
pnpm supabase db push
. This will push all the nextbase magic into your own supabase project. Teams, admin panel, projects etc will now be ready for use.
Setup env variables for production
In your repository directory, you should have a .env.local.example file which looks like this. Create a .env.local
file right beside it but instead of dummy values like YOUR_SUPABASE_PROJECT_REF
, fill the actual details.
- NEXT_PUBLIC_SUPABASE_URL is available in the project api settings section in supabase. It's called Project URL over there.
- NEXT_PUBLIC_SUPABASE_ANON_KEY and SUPABASE_SERVICE_ROLE_KEY are also available in the Project API settings section in supabase.
- Setup a Sendgrid / Post mark account and once you do, grab your authorised email sender address and add it to ADMIN_EMAIL. Same goes for SENDGRID_API_KEY. (If you want to use a different email provider, create a different environment variable here and set the relevant value).
- Ensure that NEXT_PUBLIC_SITE_URL points to your domain.
- The other env variables should be relatively easy to setup.
# supabase
NEXT_PUBLIC_SUPABASE_URL=NEXT_PUBLIC_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
SUPABASE_SERVICE_ROLE_KEY=YOUR_SUPABASE_SERVICE_ROLE_KEY
SUPABASE_DATABASE_PASSWORD=postgres
SUPABASE_JWT_SECRET=SUPABASE_JWT_SECRET
SUPABASE_PROJECT_REF=SUPABASE_PROJECT_REF
# stripe
STRIPE_SECRET_KEY=STRIPE_SECRET_KEY
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
STRIPE_WEBHOOK_SECRET=STRIPE_WEBHOOK_SECRET
# host
NEXT_PUBLIC_SITE_URL=YOUR_DOMAIN_URL
# email
ADMIN_EMAIL=admin@myapp.com
RESEND_API_KEY=RESEND_API_KEY
# analytics
NEXT_PUBLIC_POSTHOG_API_KEY=NEXT_PUBLIC_POSTHOG_API_KEY
NEXT_PUBLIC_POSTHOG_APP_ID=NEXT_PUBLIC_POSTHOG_APP_ID
NEXT_PUBLIC_POSTHOG_HOST=NEXT_PUBLIC_POSTHOG_HOST
NEXT_PUBLIC_GA_ID=NEXT_PUBLIC_GA_ID
UNKEY_ROOT_KEY=UNKEY_ROOT_KEY
UNKEY_API_ID=UNKEY_API_ID