- Hello Next.js Conf. My name is Jon Meyers and I'm a Developer
Advocate from Supabase. At Supabase we love open source. We do what we can to support open source because we are open source. And so we wanted to take
the time today to talk a little bit about what's under the hood with the Supabase project, and highlight some of the
awesome open source projects that actually make that possible. Copple is going to take
us through PostgREST. That's a REST API layer that sits on top of a Postgres database and is going to cover OAuth in Supabase using Netlify's gotrue library. Wen Bo takes us through
how Supabase implements real-time using Alexa and web sockets. Inian is going to explain
how Kong is used as a gateway and a little bit about file storage. Jonny is going to take us
through some of the UI tools that make up the dashboard. And finally, we want to showcase an
awesome community project called slip, which is a
course marketing platform built with Next.js and Supabase. Over to you, Copple. - Hey everyone, I'm
Copple CEO at Supabase. Today I'm talking about one of my favorite open-source projects, PostgREST. There's PostgREST with a T,
not PostgreSQL, the database. PostgREST provides an auto-generated API on top of your PostgreSQL database. And instead of explaining
why I love PostgREST so much, I thought I'd show you with a demo. I have started a Postgres database using Supabase.
I'm building a slack clone, so I've added some tables which you're probably familiar
with. A messages table which stores all the user
messages and a channels table with the default public and random
channels already populated. For this demo, I'm also adding a new table called leaderboard, where I can store both the user ID and the total number of
messages each user has sent. Now let's jump into the
auto-generated documentation for our demo. As you can see, the docs are populated with
all the tables we just created, including the leaderboard which we created live in this demo. The API is extremely powerful. You can use it to fetch individual columns or all the columns. You can add filters to only
return a subset of rows, and you can even build nested
queries, just like GraphQL. Let's jump into the channels documentation and copy one of the requests
to see how it works. First, I'm going to select
everything in the channels table. I can use the JavaScript
libraries, but for this demo, I'm going to make the
request directly using Go and I'm going to use an anonymous user. After I've copied the code, I can run the request and it
will return both the public and the random channels. Now let's modify the request
to return the messages as well. PostgREST automatically
detects a relationship between these tables.
So when I run the query again, I now receive the
messages in each channel. PostgREST is an extremely thin
layer on top of PostgreSQL, which means we can use many
of the features of PostgreSQL inside the API. For example, our API doesn't
seem very secure right now, since it's returning all the messages for our anonymous users. Let's change that by turning on PostgreSQL Row-Level Security for our messages table. After we've done that we
can run our query again. And voila, the API is
no longer returning data for our anonymous users. In this demo, I just scratched the surface of what PostgREST can do. PostgREST is a connection less API, so you can use it with any JAMstack or serverless framework,
including of course, Next.js and Vercel. - Hi, I'm Ant, co-founder
and CTO at Supabase. Supabase OAuth is two things. First it's an authentication API, which you can use to sign up your users using their email, mobile phone, or one of the long list
of OAuth providers, such as Google, Twitter,
Apple, or Discord. Unlike other OAuth providers, the user data is stored
inside your database. So you have full control
over it at all times, which is great for privacy and awesome for things
like GDPR compliance. Logging someone into Supabase is as simple as supabase.auth.signIn, and then pass the email and passwords directly from the client and account recovery
for forgotten passwords is all included. Supabase even manages, the transactional emails, which ofcourse are also
fully customizable. The second thing that Supabase OAuth is, is an authorization layer. You can write access
policies in plain old SQL instructing your backend, which data a given user should or should not be able to access. And because it's just SQL
your rules can be as simple or as complex as you like. You can implement admin
or moderator accounts using role-based access control, or you can do more advanced things like limit the delete access according to the time
of day or geo location, or whether the user hasn't set an email domain or mobile
country code prefix. Another cool thing made possible via Oauth and file storage integration is that because we store the entire
object tree in your database, you can write these row-level
policies to control access to all of your folders,
files, and buckets. If you want a bucket that's
available to the public and another storage bucket, that's only available to pro users. You can do that and it's
easy and you can do it all from the Supabase dashboard. As with everything we do Supabase Oauth is also fully open source. So if you want to add
some new functionality, let's say a new OAuth provider, or just audit the code yourself, then it's all available on GitHub. I hope you have fun playing
with Supabase OAuth. - Hi, I'm Wen Bo and I'm a
software engineer at Supabase. Supabase realtime consists
of a server and client working together to send Postgres database changes
to users in real time. Real time server connects to
the database and subscribes to insert, update and delete changes via Postgres logical replication, and broadcast those
changes via web sockets. We decided to build the server with the elixir programming language and Phoenix web framework
for a number of reasons. We chose elixir because it
enables massive concurrency, fault tolerance and isolation by utilizing the Erlang virtual machine, which has been battle tested
over its 30 year existence. We chose Phoenix because
it takes advantage of the best of elixir while
providing the right extraction, such as channels. Making it easier to work
with web sockets ranging from thousands to millions of connections. All of these features were important to us for the type of highly
available and performing real-time server we wanted
to offer to developers. And as we continue to
scale the real-time server, it gives us peace of mind
knowing that app such as Discord and WhatsApp rely on Elixir
and Erlang respectively, for their chat infrastructure. Real-time client establishes
a WebSocket connection enabling communication
with the real-time server and receives database changes. Today, there are official
Supabase clients, as well as community maintained ones written in JavaScript,
Python, Dart, and C#. I want to quickly demonstrate
Supabase real-time in our Next.js slack clone
that's available on our GitHub. Here are two users wenbo1 and wenbo2 who are sending messages to each other. Messages are inserted into the
database via PostgREST API. Then Supabase real-time will pick up the inserted messages and
broadcast them to both users in this channel. Now let's go ahead and take
a look at the messages table using the Supabase dashboard. And as we can see, all
the messages are present. Next, let's use this dashboard GUI in order to insert a message
into the messages table. We can see that the message
was broadcast to both users. Finally, let's go ahead and
insert a batch of messages in a single database
transaction. In this case, there are four inserts
inside of the transaction. Again, both users were
broadcast the messages inside of the transaction. Now it doesn't matter how you
get data into your database, but once it's there, real-time server will pick up the changes and broadcast them. We're currently working
on improving the security of Supabase real-time by
only broadcasting changes to those users who are
authorized to receive them, according to PostgREST row-level security. We'll be releasing this
into production very soon. We're also working on
providing additional real-time functionality to developers
who are interested in building synchronous apps. Thank you. And I hope you have a great time exploring Supabase real-time. - Hi everyone, I'm Inian
from the Supabase team. We use Kong for our
open source API gateway. Kong is built on top of NGINX, which is very battle tested and powers a large
portion of the internet. And Kong offers a lot more
features on top of it, which makes it ideal to
use as an API gateway. All our other services like
storage Postgres, OAuth, are protected by Kong. Apart from authorization and routing, one of the key features
that we use Kong for is SSL Termination. We use Let's Encrypt to
provision our SSL certificates for all projects hosted on Supabase. Let's Encrypt is open source,
builds on the ACME protocol and has provision certificates to more than 260 million websites. Kong is flexible with
support for a lot of plugins, and in the future, this would help us
implement rate limiting, adding and removing API keys, and Kong has a good foundation for implementing these features. Supabase storage is an
object storage service. You can upload any asset or
media file to our service. Storage integrates very well with the rest of the Supabase ecosystem. Storage sits behind Kong and
the metadata for all objects is stored in your own Postgres database. This makes your data very portable, and since we target the S3 API, it makes it very simple to add support for more storage backends
like Backblaze, AliCloud and even the Cloudflare's
newly launched R2 service. The storage API is built
on the fastify framework. It is one of the fastest
web frameworks out there and has a very rich ecosystem around it. Our client library for storage storage-js, has a very familiar API. If you have used our client
library for PostgREST, it follows a very similar syntax to that. We have a profile management example, which makes you sub storage and you can deploy quickly to Vercel. That should get you started
with Supabase storage and excited to see what you build with us. - Hi everyone. My name's Jonny. I'm from the Supabase team, and I'll love to talk to
you about our dashboard. So our dashboard for anyone
who's familiar with Supabase, you'll know how it looks and how it feels, but you probably have no
idea what it's built with. And it's probably no surprise
to anyone we use Next.js. We use Next.js for pretty
much all of our websites. We use Vercel as well. So all of our servers
functions are on there. We also use SWR. I'm also interested in using Multi Zones, which we haven't implemented yet, but we're interested in putting all of our Next.js apps together so we can have, we can put them on the, their all new rel I suppose. So like our documentation
site could live /docs and our dashboard can live on /dashboard, and things like that. But what we used isn't Vercel based. Like what other the open source stuff do we like? So one of them is MobX. MobX, we use for state management. And I think usually you use one store, like one main store, but we actually use several. So we actually have a MobX
store for kind of everything. And so we try and replicate
what we have remotely, locally. So to give an example, if we were using Supabase postgres-meta, we would fetch tables from it, which will be the metadata for tables for your Postgres database. We bring it down and then
we would actually save it in a MobX store called tables. And that would be accessible
anywhere in our application, along with other stuff like
maybe tables, projects, schema, and we can list them all, get the length of them
or whatever we want. It can be done anywhere in the app. It's pretty handy. Another thing that we're
quite interested in doing is dogfooding your own Supabase real-time. So if there's any
changes, so for instance, someone adds a new table
that would come down Supabase real-time. And then we could add that change into the MobX store automatically. And then all of a sudden your
client is already up to date with the change that's happened remotely. Really cool stuff. Moving on, our UI components. So we can't talk about the dashboard without talking about visually
how we put it together. So we're using Redux. Anyone who's been working on front end would have probably heard of it. It's an accessibility
focused design system. It means that kind of the components in it are primitives as they call it, handle all of the kind of
accessibility needs for you. So things like keyboard
control, aerial labels, it's all done for you. And all you have to do then is
style it or like structure it the way that you want,
add the CSS you want. And then you have fully
functional components that look the way that you want. But the way that we style it
is it was actually a single, a singular CSS file for each component. But we're actually moving
towards using tailwind because we use tailwind everywhere. Everyone in the Supabase
team loves using tailwind. So like why, why did we stop
using it for the UI library? So we're actually working
on a theme provider that kind of wraps around the whole app, and then it would inject
the correct tailwind CSS classes for each component. And you can see here, this is my example of changing
the Supabase brand to purple, which I don't think anyone
is gonna like at all. But I can, I can keep showing people and maybe one day Supabase
will be a purple brand. For forms we actually had several different
implementations of forms, but one library that
we've kind of decided on because it was just easy to use. It was stable and just easy to use. We just like the React Hook form. So we are kind of like rewriting
some of our UI components. So it works well with React form. So that's pretty cool. And the reason we've actually been working on the React form stuff
in the last week or so is actually because we're really trying to open source our dashboard. So everything that you saw
before, at the beginning, we're going to make that
publicly accessible. And it's probably going
to live in this repo called supabase/supabase. There'll be like a
directory called studio, and we're going to put
the dashboard in there. We're going to try and open
source as much code as possible. We're really working flat out
to really pull apart our code. So anything that's kind
of infrastructure based, that's to do with billing or to do with our actual
like hosting platform, we're trying to like separate.
It's been a bit of a big job. We know people have been asking for it, but hopefully soon they'll be open-sourced but you heard it here first. Yeah. We're open-sourcing it. So thanks for listening and
onto the next speaker. Thanks. - Hey everybody, I'm Kenneth
and I'm the founder of slip. We're a marketplace that makes
it easy for expert developers to build and sell interactive
programming courses. We were in the most recent
Summer 2021 YC batch, and we're big fans of
Next.js and Supabase. Both of these tools allow us to iterate super fast on our product. And I think they're really amazing tools that help a small team like
ours get a lot done really fast. And today I kinda want to tell
you specifically how we use these tools and how they help us at slip. I think a great place to start is kind of the evolution
of our tech stack. So initially I started building slip when I still had a day job and I had never used Next.js. I was building it using
a create React app, kind of scaffolding. And then I had a traditional
front and backend kind of architecture where
the frontend was React, the backend was a FastAPI server. It's like a Python API server, similar to Node. And then I had a hosted Postgres database. The stack worked Okay. The main issue I had with that stack was that I felt it was extremely slow to make schema changes to my database. When I made schema changes to my database, there was a lot of kind
of boilerplate code that had arrived inside of FastAPI. FastAPI is a great product
and it has a lot of cool, like auto-generated stuff for you, but it still felt quite slow to add like new tables to my
database and interact with it. So the first thing I did was
I switched to using Next.js and I got rid of FastAPI. By using Next.js, I was able to move all
those calls to the database, into the API layer inside of Next.js. So this really sped things up
and made things a lot faster. As far as like development speed, and when you're a startup
that's pre product market fit, like being able to iterate
fast is like one of the biggest things that you can focus on. And so we really kind of
focus a lot at slip about choosing tools that help us
iterate as fast as possible and get a lot done. So yeah, so we switched to Next.js and that also had the added
benefit of kind of like cleaning up the structure of my code and making it like a standard pattern that anyone coming off of the street and working on the project
could really easily kind of get their feet wet if they've used Next.js
before in the past. So that was actually like a hidden benefit that I didn't think about, but it's been like really great so far. So, you know, as we've had contractors and like employees come on
to slip and work with us, having Next.js and like
that standard pattern has actually been really great in getting people up to speed on the code. The next reason The next reason why we ended up adding Supabase was initially because I
just wanted a better UI for interacting with my database. So if you've ever used like pgAdmin or other tools like that, it's really not the best experience. It's like pretty buggy,
it's slow, it's unintuitive. And I just thought that the Supabase UI for interacting with your
actual database was really nice. And so there's lots of times where we want to go into database and like get particular information out and it's just easier to use the UI. And that was the initial
reason why we switched to Supabase, was because
we just wanted a nicer UI for our actual, you know,
interacting with our data. The surprising thing was
that we ended up finding out Supabase was so much more than just a better hosted Postgres and it has actually allowed
us to ship even faster. So now, like we're pretty
proficient Supabase users. We really love the project
and we use multiple things from Supabase to build faster on slip. So not only do we use the hosted database, but we also use storage
and authentication. And with that, it makes it super easy to actually write client
site code, to retrieve data. And you can restrict it to users based on role level policies,
which is really awesome. And I think basically with the combination of both of these tools,
with Supabase and Next.js, we're able to like ship
and iterate on new features at a pace that would have
seemed crazy to me a year ago. So yeah, I think that, you know, when you're a startup, choosing tools that help you ship faster
is a really great way to make sure that you are
interacting with your users and you're building the right things. And that you're just
kind of like continually getting that feedback loop and, you know, Supabase and Next.js really
help us do that at slip. And yeah. So yeah, that's me, I'm Kenneth and I'm the
founder of slip and, you know, hope you guys
enjoy the rest of the talk. We're big fans of Supabase, big fans of Next.js and
encourage you guys to check both of those tools out if
you want to ship faster. - Thanks Kenneth. It is super cool to see Next.js and Supabase
working so well together. These tools go hand in hand. Both built on opensource, both cater to the client and the server, both helping to build
a better, faster web. And we are very excited to
see where people take this in the future. Thanks for your time and
go build some cool stuff. (upbeat music)
