Supabase

Supabase

image
👋
Follow this guide to get Supabase auth and database setup in your Divjoy codebase
👀
Click the ▶︎ icon next to any step to see a detailed walkthrough with screenshots.

Basic Setup

‣
Signup for an account at supabase.com or login to your existing account.
  1. Click the "Start your project" button and then login with Github
    2. image

‣
Create a new Supabase project
  1. Click the "New project" button
    2. image

2. Specify a name, password and region

image
‣
Copy your new project's Public Key, Secret Key, and URL into your codebase .env file.
  1. You'll see these values on the right side of the screen after creating your project
    2. image

Authentication

‣
Go to Authentication settings and fill in your Site URL and Redirect URLs. The value for both should be your local development URL (generally http://localhost:3000).
  1. Fill in the Site URL and Redirect URL values
    2. image

‣
Ensure Email Auth is enabled and that email confirmation settings are to your liking.
  1. You may want to change the email confirmation settings. In our case we opted to disable email confirmation and double-confirmation of email changes, but that depends on your preference and security needs.
    2. image
‣
[optional] Enable social auth providers. This will involve creating apps with each provider and adding your credentials. You can also come back to this step later, as it's not required to get your web app up and running.
  1. For example, to get Twitter auth working you'll need to go to https://developer.twitter.com, create an app, then fill in the client ID and secret.
    2. image

Database

‣
Go the the SQL editor, click the "New query" button, paste in the contents of your codebase schema.sql file and click "RUN". This will create your database tables, security policies, and triggers.
  1. When viewing your new project click the "SQL editor" button. From any page you can also click the icon on the left side (highlighted in the screenshot below).
    2. image
  2. Click the "New Query" button in the top left
    3. image
  3. Paste in the contents from schema.sql and click the "RUN" button in the bottom right. You should then see the message "Success. No Rows returned" at the bottom.
    4. image
  4. Before you move on to the next step, let's rename the SQL snippet you just ran to something other than "New Query" so that it's easier to find in the future. Try renaming it to "Create tables".
    5. image
‣
You can now view your tables and data in the Supabase Table Editor. As you build your app you'll likely want to come back to the table editor to add tables, columns, manually insert rows, etc.
  1. You can get to the table editor by clicking the icon on the left side (highlighted in the screenshot below).
    2. image
  2. You can then browse, insert rows, and create new columns
    3. image
image

👏
Congrats! Supabase is all setup in your codebase. If you're already running your dev command you'll want to make sure to stop it (Ctrl + C) and re-run it so that it reads your updated .env file.

FAQ

‣
Why does it show a loading indicator forever after signing up?

The auth logic we give you in src/util/auth.js automatically merges extra user data from the database and will fail if it's unreachable (causing it to be stuck in a loading state). You can check as to whether this is the issue by temporarily setting const MERGE_DB_USER = false in src/util/auth.js. To resolve this issue you'll want to follow the database instructions above. After the setup, make sure you delete any account from authentication that you've created while encountering this bug.

‣
Why am I seeing errors when I try to run my app?

Make sure that all environment variables for all the services in your .env file have values filled in. Also make sure the variables at the bottom (starting with REACT_ or NEXT_) have values filled in.

‣
Why am I getting a “request disallowed” error when signing up in my app?
  • Make sure hCaptcha protection in auth setting is disabled, as that requires a captcha UI that we don’t currently include in your codebase.
‣
Why don't I see all the social auth providers when viewing my app?

Assuming you are using the authentication components from the Divjoy library, you just need to go to src/pages/auth.js and update the providers array on the AuthSection component. For example, here's what it would look like if you want to display options for Google, Facebook, and Twitter.

image

Our authentication component supports the following by default: google, facebook, twitter, and github. You can add more options by configuring them in Supabase and then following this guide to display them in your component: Adding new login providers to Supabase.