Create a New Supabase Project

Navigate the Supabase Admin Interface

Create PostgreSQL Tables Using Supabase's Interface

Configure Supabase Auth to Allow Users to Login with GitHub

Use Triggers to Automatically Update Supabase Tables

Set up a Supabase Client in Next.js

Set up a Login Page in Next.js with Supabase's auth.session()

Set up GitHub Authorization with Supabase

Manage Third-Party Authorization Errors in Supabase

Executing Raw SQL using Supabase's Interface

Retrieve Data with a Supabase API Request

Subscribe to Database Changes using Supabase's Realtime Client

Enable Realtime Only for Individual Tables using supabase_realtime

Insert Submitted Data to Supabase Tables

Keep Track of the Current User Using Next.js with Supabase

Logout and Update Users with React and Supabase's upsert Method

Request User Details for a Given User Using Supabase's API

Retrieve and Displaying User Details with User Subscriptions

Deploy a Supabase Application to Production with Cloudflare Pages

Building Supabase Serverless Workflows with Cloudflare Workers

Build a Real-Time Data Syncing Chat Application with Supabase and Next.js

Supabase's admin interface is where we can explore data, create new tables, and configure our project. In this lesson, we'll walk through the admin interface and the available options for your Supabase application.

We'll explore the following pages and their features
- Table Editor
- Authentication
- Storage
- SQL
- API
- Database


https://app.egghead.io/api/v1/lessons/javascript-navigate-the-supabase-admin-interface/subtitles

Kristian Freeman: [0:00] Just a couple of minutes after we created our project, you can see that I now have this tables page, which allows me to actually create data in my Supabase project. That's just one of many things you can do inside of this admin interface. Let's go and just look through everything and understand how it all works.

[0:18] First, our table editor is where we can look at the data in our project. Once you create a table and begin writing data to it, we can explore it here in the editor, and we can even make changes to it as much as we would like. The authentication section is where you can set up authentication for your project. You can also look at the currently created users for your project.

[0:38] You can see things like their provider, which is how they sign in, more on that a little bit later, as well as things like policies, which are kind of rule sets for your users, templates, which are the emails that get sent out to users when they are invited, when they reset their password or when they confirm their sign up.

[0:59] Then finally, we have the settings page, which is probably the most important section in this user category. It allows you to set up things like sign in with Google, GitHub, GitLab, etc. as well as where your website is hosted, disabling sign up and all other things here.

[1:15] One thing you might want to know is as you're walking through your Supabase project, especially when it comes time to auth, is that there is a log section down here at the bottom. This is super useful for understanding if something goes wrong, what is going wrong, and you may want to commit this to memory that this log section down here is super useful.

[1:33] The storage section is where you can manage storage for your project. If you've ever worked with Amazon S3, or anything like that, you can create a bucket which allows you to say handle image uploads, video uploads, or whatever else.

[1:47] The SQL section is a full-blown area for running and executing SQL against your Postgres database. You can do things like create a table and add a column. You can also search here for whatever queries you may have written in the past.

[2:02] You can see here if I click on this query1, which they made by default, I can execute queries here, and I can look at them here in the results section. If I just say, select* from, let's say, auth.users, and then I run it, you can see that it executes it, and it's a success, no rows returned.

[2:24] This is a great place too if you know SQL pretty well, kind of directly work with your data by using a SQL editor. The API section is an automatically generated set of documentation for your project that tells you how to interface with your data using Supabase's SDK.

[2:42] Anytime you make a change here, say adding a new table or updating data, this documentation section will stay up to date, which is super cool. You have your URL here, which is your actual API URL. We'll use that later on. Then you get things like an example for initializing a client. That will show you how to work with your Supabase API inside of a JavaScript project.

[3:06] As you might imagine, we will come back to this and use this code "wholesale" in our actual project. Our database section is a more detailed look at what the actual database that we have set up for our project is.

[3:20] Although you'll be creating your own tables for storing your public data, you can see that there are a bunch of different things created in the background as part of your auth schema, which is all of the data you need for doing authentication in your project.

[3:35] All of this is created for you by default. You won't have to spend too much time looking at this, but in case you're curious, you can come in here and dive into that. You also have roles. These are basically permission sets for your Postgres database.

[3:48] There are things like Postgres, which is the default one, Anon which is anonymous which is anonymous access to your database, and then other things like authenticated authenticator, dashboard user. Effectively, you can use these roles to gate what has access to different parts of your database.

[4:07] We won't get too much into that right now, but in case you're a SQL expert, it's just worth knowing that these roles exist. You can use them for more complex permission sets. Postgres is a very popular open source project. It has a ton of extensions, which are additions to the core Postgres functionality that you can use in your project.

[4:26] Some of these are already enabled by default, things like JSON Web Token support, UUID generation. There are a ton of other ones that you can go check out here in the extension section.

[4:38] These are things that might be useful for your particular project but aren't enabled by default, things, just to pick a random one, like a data type for case-insensitive character strings. That's the citext extension.

[4:50] There are a lot of different things here. It's great that they're included by default because you don't have to install them or anything like that. There's a lot of different things to check out here. Make sure to come look at this in case you want to build something. Maybe the extension you need is already included.

[5:05] The backup section will include a list of backups of your Postgres database. It'll create one every single day, so you can come back and check. Like it says, no backups created, and check again tomorrow.

[5:15] It's a good idea to come in here and pretty regularly download a backup and maybe put it in some backup solution like S3 or wherever you want to put it. In case something goes wrong with your database, you can always come with a backup and restore it to a good, well-known state that you can trust.

[5:35] The final section here is connection pooling. This is a way to have some configuration options for your Postgres database. You can say how the connections to your Postgres database get managed, how many connections can there be, and then, of course, the usual connection info.

[5:51] You can do things like provide an SSL cert, so when you make a connection directly to your database, you can know that it is a valid connection that should be given permission to your database as well as a full on connection string, which if you've ever used Postgres in the past, you can connect directly, say, from a Postgres client, or wherever else.

[6:11] The final section here is settings. There are a couple of things you need to know here. You can change your project name right here. This is just a client-facing project named here in the dashboard in case you end up having a bunch of projects.

[6:23] The database section, again, is pretty similar to the connection pooling. It gives you a connection string and some information about your database. Then also tells you a little bit about where your database is deployed. In this case, cloud provider AWS, region us-east-1.

[6:39] API has a couple pieces of information that we will need later on, our URL for connecting to our API, as well as some API keys. We have a public key here, JWT, secret number of Max rows, all kinds of stuff there. This auth settings here is a link back into the auth settings inside of our authentication category. We've already looked at this.

[7:03] Finally, billing and usage gives us a glimpse at the limits for Supabase inside of the free plan and helps us understand what we're running up against in terms of database space, number of users, authentication, confirmation emails, etc.

[7:18] It's worth mentioning that Superbase is open source. You can take this and deploy it yourself via GitHub. We'll look at that a little bit later on. In case you want to use the hosted version from Supabase, these are the limits that you need to be aware of. Though we definitely won't run into them here in this example project.

Navigate the Supabase Admin Interface

Share this video with your friends

Course

Build a Real-Time Data Syncing Chat Application with Supabase and Next.js