Environment variables and secrets in Supabase - Mini Project: Build & Apply

Environment variables and secrets

📖 Scenario: You are building a simple web app using Supabase. You need to securely store and use environment variables and secrets like API keys and database URLs.

🎯 Goal: Create a Supabase project configuration that uses environment variables to store sensitive information and access them securely in your app.

📋 What You'll Learn

Create environment variables for SUPABASE_URL and SUPABASE_ANON_KEY

Add a configuration file that reads these environment variables

Initialize the Supabase client using the environment variables

Ensure the secrets are not hardcoded in the code

💡 Why This Matters

🌍 Real World

Storing API keys and secrets in environment variables is a common practice to keep sensitive data safe and separate from code.

💼 Career

Understanding environment variables and secret management is essential for cloud developers and DevOps engineers to build secure applications.

1

Create environment variables

Create two environment variables called SUPABASE_URL and SUPABASE_ANON_KEY with these exact values: https://xyzcompany.supabase.co and public-anon-key-123 respectively.

Supabase

# Your code here to create environment variables SUPABASE_URL and SUPABASE_ANON_KEY

Hint

Environment variables are usually stored in a file named .env in your project root.

2

Add configuration to read environment variables

In a file called supabaseClient.js, import createClient from @supabase/supabase-js and create two constants supabaseUrl and supabaseAnonKey that read from process.env.SUPABASE_URL and process.env.SUPABASE_ANON_KEY respectively.

Supabase

// Your code here to import createClient and read environment variables

Hint

Use process.env.VARIABLE_NAME to access environment variables in Node.js.

3

Initialize Supabase client

Use createClient with supabaseUrl and supabaseAnonKey to create a constant called supabase.

Supabase

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.SUPABASE_URL;
const supabaseAnonKey = process.env.SUPABASE_ANON_KEY;

// Your code here to create supabase client

Hint

Pass the URL and anon key to createClient to initialize Supabase.

4

Export the Supabase client

Export the constant supabase as the default export from supabaseClient.js.

Supabase

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.SUPABASE_URL;
const supabaseAnonKey = process.env.SUPABASE_ANON_KEY;

const supabase = createClient(supabaseUrl, supabaseAnonKey);

// Your code here to export supabase client

Hint

Use export default supabase; to export the client for use in other files.