Basic Setup
- Click the "Start your project" button and then login with Github
- Click the "New project" button
2. Specify a name, password and region
.env
file.- You'll see these values on the right side of the screen after creating your project
Authentication
http://localhost:3000
). - Fill in the Site URL and Redirect URL values
- 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.
- 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.
Database
schema.sql
file and click "RUN". This will create your database tables, security policies, and triggers.- 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).
- Click the "New Query" button in the top left
- 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. - 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".
- You can get to the table editor by clicking the icon on the left side (highlighted in the screenshot below).
- You can then browse, insert rows, and create new columns
.env
file.FAQ
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.
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.
- Make sure hCaptcha protection in auth setting is disabled, as that requires a captcha UI that we don’t currently include in your codebase.
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.
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.