I’ve always been curious about Supabase. Since we’re using it for a student project at work, I’ve spent quite a bit of time with the docs. And I noticed a React + Supabase tutorial to build a simple app. So I gave it a go!

All in all it was pretty easy! The code (including CSS) is written and you can just copy/paste it. It builds a login page with a Magic Link to sign in. When you click the link you’re brought to an Account page to add your name, website url, and profile pic.

The directions were pretty thorough. There are only a few tiny gotchas.

• The directions read to go to the SQL Editor and click on the User Management Starter. To find the User Management Starter you will first click into Quickstarts.
• There are commands to pull the database schema to the local project, but running the commands gave me a “command not found” error. There’s a link to the docs that I’ll investigate. I’m betting that I need to log into the Supabase CLI first.
• To find the API settings click on Project Settings > Data API.
• The directions read to store the environmental variables are stored in a .env.local file. But the file is listed as a .env file. And the path in the supabaseClient.js file doesn’t include .local. There’s no mention of adding the .env file to the .gitignore file – likely because the key is public and can be exposed. But since the .env file might hold other environmental variables, it’s still a good idea.

The next steps would be to add whatever the app will do. There are also some red squiggles I’m not sure what to do with yet. I figure it’s because the only pages I have are login and account. But this is the basics of what I’d need.

I might try merging another app into it – maybe the Shopping List app from Scrimba that’s meant for Firebase or the Todo list from freeCodeCamp. It could be fun. And it could be interesting to try to launch it – maybe through Vercel?

Day 2:

The app ran perfectly from what I could tell. But there were some ESLint errors that were creating those red squiggly lines: 'session' is missing in props validationeslintreact/prop-types. Fortunately, this is a common enough error that there is a lot of good information out there including this article by Krina Sardhara on DhiWise. She covers a couple of ways that the error can be quieted and how to fix the error. I also used Codeium for code snippets specific to the props in my code. And this StackOverflow answer had a helpful screenshot showing were to add a rule to the aslant.config.js file.

I wanted to fix the errors so I added import PropTypes from "prop-types"; to the imports. Then added validation for the prompt types. In the Avatar.jsx file this meant adding:

  Avatar.propTypes = {
    url: PropTypes.string.isRequired,
    size: PropTypes.number.isRequired,
    onUpload: PropTypes.func.isRequired,
  };

under the function definition. I added it below where the variables for useState were declared. I just looked tidier.

The files:

The tutorial walks you through adding a few files to the project folder.

• .env – to hold the environmental variables VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY.
• supabaseClient.js – to create the Supabase Client and pass in the environmental variables.
• Account.jsx – the form to create a user on the database and allow them to update their profile.
• Auth.jsx – sets up the form for a Magic Link sign in.
• Avatar.jsx – adds the ability for a user to upload an image which is stored in Supabase’s Storage.

The Account.jsx file’s code is passed a session via props. It sets the state for loading, username, website, and avatar – the fields in the form in the same file. The useEffect hook is also used since connecting and getting data from the Supabase database involves working outside of the React library.

The Auth.jsx file sets the state for loading and email. It includes the form to take in the user’s email address and a button to submit the email so the user can receive a Magic Link.

The Avatar.jsx file sets the state of the avatar’s url and uploading. The useEffect hook is in place to download the image from the Supabase database if one exists. And there is a function and a form to upload the image.