JavaScript client installation in Supabase - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Supabase Client Initialization

You want to initialize the Supabase JavaScript client in your web app. Which option correctly creates the client instance?

A const supabase = new SupabaseClient('https://xyzcompany.supabase.co', 'public-anon-key');

B const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key');

C const supabase = supabase.createClient('https://xyzcompany.supabase.co', 'public-anon-key');

D const supabase = supabaseClient('https://xyzcompany.supabase.co', 'public-anon-key');

💡 Hint

Check the official Supabase docs for the exact function name to create a client.

The Supabase JavaScript client is created using the createClient function imported from '@supabase/supabase-js'. The other options use incorrect function or constructor names.

❓ Configuration

intermediate

Correct npm Package for Supabase Client

You want to install the Supabase JavaScript client in your project. Which npm command installs the official package?

A npm install supabase-js

B npm install supabase

C npm install supabase-client

D npm install @supabase/supabase-js

💡 Hint

Look for the package name that starts with '@supabase'.

The official Supabase JavaScript client package is named '@supabase/supabase-js'. Other package names are incorrect or unofficial.

❓ Architecture

advanced

Best Practice for Storing Supabase Keys

In a client-side JavaScript app, where should you store your Supabase public anon key and service role key?

A Store the public anon key in client code, keep the service role key only on the server.

B Store both keys in environment variables and expose them to the client.

C Embed both keys directly in the client JavaScript code.

D Store both keys in a public JSON file loaded by the client.

💡 Hint

Think about which keys are safe to share publicly and which must be kept secret.

The public anon key is safe to include in client code because it has limited permissions. The service role key has full access and must be kept secret on the server only.

❓ service_behavior

advanced

Supabase Client Behavior on Network Failure

What happens when the Supabase JavaScript client tries to fetch data but the network is offline?

A The client silently ignores the request and returns empty data.

B The client automatically retries the request indefinitely until the network is back.

C The client throws an error immediately and does not retry the request.

D The client queues the request and sends it when the network is restored.

💡 Hint

Consider how typical HTTP clients behave on network failure.

The Supabase client throws an error immediately on network failure. It does not retry or queue requests automatically.

❓ security

expert

Preventing Unauthorized Access with Supabase Client

You want to restrict access to certain database rows based on the logged-in user using the Supabase JavaScript client. Which approach correctly enforces this?

A Use Row Level Security (RLS) policies on the Supabase database and authenticate users with the client.

B Filter data on the client side after fetching all rows from the database.

C Store user IDs in localStorage and filter queries based on that without server policies.

D Use the service role key in the client to bypass restrictions and filter manually.

💡 Hint

Think about where security enforcement should happen: client or server?

Row Level Security (RLS) policies on the database enforce access control securely. Client-side filtering or using the service role key in the client is insecure.

Practice

1. What is the correct command to install the Supabase JavaScript client using npm?

easy

A. npm install @supabase/supabase-js

B. npm install supabase-js

C. npm install supabase-client

D. npm install @supabase/client-js

Solution

1. Step 1: Identify the official package name

   The official Supabase JavaScript client package is named '@supabase/supabase-js'.

2. Step 2: Use npm install with the correct package

   The correct command is 'npm install @supabase/supabase-js' to install the client.

3. Final Answer:

   npm install @supabase/supabase-js -> Option A

4. Quick Check:

   Correct package name = npm install @supabase/supabase-js [OK]

Hint: Remember the package starts with '@supabase/' [OK]

Common Mistakes:

• Using incomplete package names
• Omitting the '@supabase/' prefix
• Confusing with other similar package names

2. Which of the following is the correct way to import the Supabase client in a JavaScript file after installation?

easy

A. const supabase = require('supabase-js');

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

C. import supabase from '@supabase/client';

D. const supabase = require('@supabase/supabase-js');

Solution

1. Step 1: Use ES module import syntax

   The Supabase client uses named export 'createClient' from '@supabase/supabase-js'.

2. Step 2: Confirm correct import statement

   The correct import is 'import { createClient } from '@supabase/supabase-js';'.

3. Final Answer:

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

4. Quick Check:

   Use named import 'createClient' from '@supabase/supabase-js' [OK]

Hint: Use named import with curly braces for createClient [OK]

Common Mistakes:

• Using default import instead of named import
• Using wrong package name in import
• Mixing require and import syntax

3. Given the following code snippet, what will be the output of console.log(supabaseUrl)?

import { createClient } from '@supabase/supabase-js';
const supabaseUrl = 'https://xyzcompany.supabase.co';
const supabaseKey = 'public-anonymous-key';
const supabase = createClient(supabaseUrl, supabaseKey);
console.log(supabaseUrl);

medium

A. https://xyzcompany.supabase.co

B. undefined

C. An error because supabaseUrl is not defined

D. 'public-anonymous-key'

Solution

1. Step 1: Identify the variable logged

   The code logs 'supabaseUrl', which is defined as a string URL.

2. Step 2: Confirm the value of supabaseUrl

   It is set to 'https://xyzcompany.supabase.co', so logging it prints this string.

3. Final Answer:

   https://xyzcompany.supabase.co -> Option A

4. Quick Check:

   Variable supabaseUrl = 'https://xyzcompany.supabase.co' [OK]

Hint: Check which variable is logged exactly [OK]

Common Mistakes:

• Confusing supabaseUrl with supabaseKey
• Assuming logging supabase object instead
• Thinking variable is undefined

4. What is wrong with this code snippet for creating a Supabase client?

import { createClient } from '@supabase/supabase-js';
const supabaseUrl = 'https://xyzcompany.supabase.co';
const supabaseKey = 'public-anonymous-key';
const supabase = createClient(supabaseKey, supabaseUrl);

medium

A. The supabaseUrl is missing the protocol

B. The import statement is incorrect

C. The supabaseKey should be an environment variable

D. The arguments to createClient are reversed; URL should be first

Solution

1. Step 1: Check the order of arguments in createClient

   The function expects the URL first, then the key.

2. Step 2: Identify the mistake in argument order

   The code passes the key first and URL second, which is incorrect.

3. Final Answer:

   The arguments to createClient are reversed; URL should be first -> Option D

4. Quick Check:

   createClient(url, key) order matters [OK]

Hint: Remember: URL first, key second in createClient() [OK]

Common Mistakes:

• Swapping URL and key arguments
• Ignoring import correctness
• Not using environment variables (though recommended)

5. You want to keep your Supabase key secure in a JavaScript project. Which is the best practice to handle the key?

hard

A. Publish the key in your public GitHub repository for easy access

B. Hardcode the key directly in your JavaScript files

C. Store the key in an environment variable and access it in your code

D. Send the key as a query parameter in URLs

Solution

1. Step 1: Understand security best practices for keys

   Keys should not be exposed in code or public places to avoid misuse.

2. Step 2: Use environment variables to keep keys secure

   Environment variables keep keys out of code and can be managed securely.

3. Final Answer:

   Store the key in an environment variable and access it in your code -> Option C

4. Quick Check:

   Use environment variables for secrets [OK]

Hint: Never hardcode keys; use environment variables [OK]

Common Mistakes:

• Hardcoding keys in source code
• Exposing keys publicly in repos
• Passing keys in URLs