DEV Community: awalias

Prisma + Postgres

awalias — Wed, 30 Oct 2024 06:36:55 +0000

In this tutorial, we'll explore how to set up Prisma + Postgres. We'll use real-world examples involving books and authors.

Prerequisites for Prisma + Postgres

Before we begin, ensure you have the following installed:

Node.js (v14 or later)
npm or yarn
An account on Supabase

Setting Up Prisma + Postgres

Supabase provides a hosted Postgres database for use with Prisma, making it easy to get started without setting up your own database server. Supabase is quick and easy to get started, and is a cost effective way to scale up to millions of users if your project gets traction.

Create a New Supabase Project
- Sign in to your Supabase account.
- Click on "New Project".
- Fill in the project details and click "Create new project".
Retrieve Database Connection Details
- In the navigation bar, go to "Project Settings" > "Database".
- Copy the Connection string (URI) for Postgres. You’ll need it in the next step:
```
postgres://postgres.[ref]:[password]@[region].pooler.supabase.com:6543/postgres
```

Setting Up Prisma in Your Project

Prisma is an ORM that simplifies database interactions in Node.js applications.

Initialize a Node.js Project

mkdir prisma-postgres
cd prisma-postgres
npm init -y

Install Prisma and Postgres Client

npm install prisma --save-dev
npm install @prisma/client

Initialize Prisma
```
npx prisma init
```
This command creates a prisma directory with a schema.prisma file and a .env file.

Configuring Prisma + Postgres

Set Up the Database Connection

Open the .env file (located in the new prisma folder).

Add DATABASE_URL and DIRECT_URL you can get the connection details here:

DATABASE_URL="postgres://postgres.[ref]:[password]@aws-0-[region].pooler.supabase.com:6543/postgres?pgbouncer=true"

DIRECT_URL="postgres://postgres.[ref]:[password]@aws-0-[region].pooler.supabase.com:5432/postgres"

The direct connection (on port 5432 is required for running database migrations against the database).

Define the Data Model

Open prisma/schema.prisma.

Update the datasource block to include DIRECT_URL like so:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
  directUrl = env("DIRECT_URL")
}

Add your data models. For a library system:

```
model Author {
  id     Int     @id @default(autoincrement())
  name   String
  books  Book[]
}

model Book {
  id        Int      @id @default(autoincrement())
  title     String
  author    Author   @relation(fields: [authorId], references: [id])
  authorId  Int
}

```

Generating the Postgres Schema

Use Prisma Migrate to apply your schema to the Postgres database on Supabase.

npx prisma migrate dev --name init

This command will:

Generate migration files.
Apply the migration to the Postgres database.
Generate the Prisma Client.

Using Prisma Client to Interact with Prisma + Postgres

Create a script.js file to test database operations.

const { PrismaClient } = require('@prisma/client');
const prisma = new PrismaClient();

async function main() {
  // Create a new author
  const author = await prisma.author.create({
    data: {
      name: 'Yevgeny Zamyatin',
    },
  });

  // Create a new book
  const book = await prisma.book.create({
    data: {
      title: 'We',
      authorId: author.id,
    },
  });

  // Retrieve all books with their authors
  const books = await prisma.book.findMany({
    include: { author: true },
  });

  console.log(books);
}

main()
  .catch((e) => console.error(e))
  .finally(async () => {
    await prisma.$disconnect();
  });

Run the script:

node script.js

You should see an array of books with their associated authors logged to the console.

Conclusion

Congratulations! You've set up Prisma with Postgres. This setup allows you to interact with your Postgres database seamlessly using Prisma.

By following this guide, you've taken the first steps toward building robust applications with Prisma and Postgres.

Supabase Beta August 2023

awalias — Fri, 08 Sep 2023 13:14:44 +0000

Launch Week 8 breezed by, leaving behind a trail of new features to explore. Here is a recap of everything and an update of what else we are working on, like pgvector 0.5.0 with HNSW.

pgvector v0.5.0: Faster semantic search with HNSW indexes

Supabase Vector is about to get a lot faster 💨. pgvector v0.5.0 adds Hierarchical Navigable Small World (HNSW), a new type of index that ensures lightning-fast vector searches, especially in high-dimensional spaces and embeddings.

Blog post

Day 1 - Hugging Face is now supported in Supabase

We are all about open source collaboration, and Hugging Face is one of the open source communities we admire most. That’s why we've added Hugging Face support in our Python Vector Client and Edge Functions (Javascript) 🤗

Day 2 - Supabase Local Dev: migrations, branching, and observability

The CLI received some serious upgrades including observability tools, streamlined backups, and enhanced migrations. But that's not all – the big game-changer is the introduction of Supabase branching which we’re rolling out to selected customers.

Day 3 - Supabase Studio 3.0

Supabase Studio went to #1 on Product Hunt with some huge new features, including AI SQL editor, Schema diagrams, Wrappers UI, and a lot more!

Day 4 - Supabase Integrations Marketplace

With the release of OAuth2 applications, we've made it easier than ever for our partners to extend the Supabase platform with useful tooling 🙌

Day 4 - Vercel Integration 2.0 and Next.js App Router Support

The New Supabase x Vercel integration streamlines the process of creating, deploying, and maintaining web applications with several enhancements. Plus, it fully supports the App Router in Next.js ▲

Blog post

Day 5 - Supavisor: Scaling Postgres to 1 Million Connections

Supavisor is a scalable, cloud-native Postgres connection pooler written in Elixir. It has been developed with multi-tenancy in mind, handling millions of connections without significant overhead or latency. We’re rolling it out to every database on our platform.

Community Highlights from the past 4 months

Launch Week is an event for our community, so it’s a good time to look back at what happened in the last months (spoiler: a lot).

Blog post

One more thing: HIPAA and SOC2 Type 2

Supabase is officially SOC2 Type 2 and HIPAA compliant! In this write-up, we offer insights into what you can expect if you’re planning to go through the same process.

Blog post

Launch Week 8 Hackathon Winners

The decision was not easy, but after assessing a record number of submissions, the panel of judges chose WITAS as the winner of the Best Overall project. As the name doesn't suggest, it's an acronym for Wait is that a sticker? In a nutshell, it generates stickers with Midjourney. Huge congrats to Alex Streza and Catalina Melnic.

More product announcements!

Shipping doesn’t stop here at Supabase! We are back in full shipping mode and already thinking about the next LW. These are some of the things we’ve been working on:

Updated and rewrote a bunch of docs: Row-Level-Security, Postgres Roles, Database configuration.
Implemented read only UI for indexes. PR
Organization-based Billing, project transfers, team plan. Blog post

Extended Community Highlights

Supabase’s Happy Hour made a comeback! Two new episodes of Alaister, Tyler, and Jon chatting about the latest news while live coding. Episode #27 | Episode #28
The State of Postgres 2023 is live. Take the survey and help improve Postgres. Survey
Jon Meyers stopped by the PodRocket podcast to chat about everything we shipped for LW8. Podcast
Supabase Crash Course for iOS Developers: Mikaela shows how to implement a Postgres database in a Swift project. Video
The Vite ecosystem conference is back and we are happy to be a Community Partner again. Get your ticket
Building a real app with Tamagui and Supabase. Video
Build PostgreSQL Databases Faster With Supabase AI SQL Editor. Video
Creating Customized i18n-Ready Authentication Emails using Supabase Edge Functions, PostgreSQL, and Resend. Blog post
Expo Router Tabs with Supabase Authentication. Video
Integrating Supabase with Prisma and TRPC: A Comprehensive Guide. Tutorial
A Supa-Introduction to Supabase. Blog post
Authentication in Next.js with Supabase Auth and PKCE. Tutorial
Implementing OAuth in Nuxt with Supabase. Tutorial

⚠️ Baking hot meme zone ⚠️

If you made it this far in the email you deserve a devilish treat.

That's it for now, see you next month 👋

🚀 Learn more about Supabase

Supabase Beta May 2023

awalias — Fri, 09 Jun 2023 10:40:10 +0000

We have two big product announcements this month, new integrations with products we love, and exciting highlights from our amazing community.

We're also absolutely stoked to let you know that we've hit a massive milestone: 50k GitHub Stars! 🌟. Much love to everyone who helped us get there!

Supabase Vector: the open source Vector Toolkit for Postgres

Storing vector embeddings in Postgres with 'pgvector' is becoming increasingly popular for AI applications, so we're building out a collection of tools to store, index, and query embeddings at scale.

Supabase Vector

Vault is now available for all projects

Vault is a Postgres extension and accompanying Supabase UI that makes it safe and easy to store encrypted secrets and other data in your database.

Learn how to use Vault.

Auth Helpers now include server-side Auth and full support for the Next.js App Router

We have updated the Next.js Auth Helpers package to make it available across the client and server of the App Router. They also now implement server-side auth by default with PKCE - meaning the entire auth flow is now possible server-side.

Updated docs

Video course

Improving our dashboard with user feedback

As we plan the next few months of Dashboard development, we're reaching out to users to see all the different ways people use the Dashboard in their work.

Last month, we opened up a public RFC for the Dashboard SQL Editor. It's been amazing to see how people use this tool to build their projects. If you're a heavy user of the SQL Editor, we'd love to get your feedback.

We also started doing user interviews to understand how users use the Dashboard. Our goal is to build the best possible Dashboard for all of our users, and you can help! Reach out to Terry you would like to share your experience.

Quick product announcements

[Auth] You can now use Turnstile as a Captcha provider. Doc
[Auth] How to send a password reauthentication nonce. Doc
[Dashboard] Supabase Wrappers UI that supports pulling data in from Firebase, Stripe, S3, and Clickhouse. Create a Wrapper
[Edge Functions] Support for deploying all Edge Functions via CLI. Doc
[Edge Functions] Custom domains and vanity domains support for Edge Functions. PR
[Storage] Image Transformation is now out of Beta. Doc
[Postgres Extensions] pg_cron 1.5.2 (new projects only) now supports sub-minute schedules. PR

AI resources & examples

The whole team has been busy building with ChatGPT, pgvector, and creating valuable resources so the community can unleash their imagination and build great AI apps faster than ever.

Flutter Hackathon winners

We hosted our first-ever Flutter Hackathon, in partnership with FlutterFlow and Invertase. Samuel Philip built Syno, a YouTube summarizer app that uses OpenAI, and won the limited Flutter-themed Supabase keyboard 💙, and there are tons of other great open source projects to check out.

Read the blog post with all the winners

Watch the live announcement with Pooja and Majid

Made with Supabase

Quivr, your second brain in the cloud, utilizes the power of GenerativeAI to store and retrieve unstructured information. Built by Stan Girard using LangChain, OpenAI, and Supabase Vector.

Bonus track: make sure to also check out ChartGPT, which just launched V2.0 with a big UI refresh ✨

Extended Community Highlights

We worked with Cloudflare on a new integration that makes it super easy to connect your Supabase database from Cloudflare Workers. Doc

- Deno Fresh Starter: ChatGPT-style doc search. Blog post

Vector Similarity Search in Bubble using Supabase Vector. Integration
Supabase RLS with Typescryp. Editor
How Supabase does performance benchmarking using k6, with Egor Romanov. Webinar
Code With Antonio - Spotify Clone with Next.js Auth Helpers. Video tutorial
Our friends from 1Password announced Passage and wrote an integration guide. Doc
How to create a chatbot with OpenAI's API: a conceptual cheat sheet. Tutorial
How to Implement Role-Based Access with Supabase. Tutorial
Rodrigo Mansueli, Developer Support Enginere here at Supabase, started a blog that is starting to become go-to resource for leveling up with Supabase and Postgres. [Blog]](https://blog.mansueli.com/)
Building a mobile authentication flow for your SaaS with Expo and Supabase. Tutorial
Huntabyte released a new course: Modern SaaS Apps with SvelteKit, Stripe, & Supabase. Full Course
Setting Up n8n on Railway with Postgres Database. Tutorial

We're hiring

Great opportunity to be an early and key member of our Customer Success team. Come join one of the fastest-growing open source projects ever 🤗

Customer Solution Architect

Meme Zone

As always, one of our favorite memes from last month. Follow us on Twitter for more.

Supabase Beta April 2023

awalias — Wed, 10 May 2023 13:03:55 +0000

Brace yourself, this is one of the most feature-packed Beta Updates we've published so far.

Launch Week 7 was a massive success with great feedback from the community. We also gave away lots of mechanical keyboards, including the Hackathon winner which we announce here!

Day 1 - Supabase Logs: open source logging server

Logflare is the hub of analytics streams for Supabase. We are open sourcing it so that you can self-host your own Logging infrastructure.

Blog Post
Video overview

Day 2 - Supabase Edge Runtime: Self-hosted Deno Functions

You can now self-host Edge Functions and run them in local development using our new Edge Runtime. We published a guide showing how to self-host Edge Functions with Fly and what more is coming️

Blog post
Video overview

Day 3 - Storage v3: Resumable Uploads with support for 50GB files

Supabase Storage received many of the most requested features from our users: Resumable Uploads, Quality Filters, Next.js support, and WebP support.

Blog post
Video overview

Day 4 - Supabase Auth: SSO, Mobile, and Server-side support

On day 4, we introduced SSO with SAML 2.0, PKCE, and Sign in with Apple for iOS. It felt like acronym day, but it was actually Auth day!

Blog post
Video overview

Day 5 - Supabase Studio 2.0 with new AI features

Supabase Studio got a major upgrade that goes from redesigns to improved developer experience, and new tools. We have the features people have been asking for and new capabilities that will change the way you work.

Blog Post\
Video overview

Community highlights

Our community defines us. We're honored to work with, sponsor, and support incredible people and tools 💜. Our CEO wrote a highlight of the last 3 months.

Blog post

Introducing dbdev: PostgreSQL Package Manager

database.dev fills the same role for PostgreSQL as npm for JavaScript or pip for Python, it enables publishing libraries and applications for repeatable deployment. Our goal is to create an open ecosystem for packaging and discovering SQL.

Blog post

More product announcements

Trusted Language Extensions for Postgres. [Blog post]
What's New in pg_graphql v1.2. [Blog post]
GitHub Discussions are now a new knowledge source for search & AI (Troubleshooting category only for now). [Check it out]
New API report with routing information for each chart, making it easier to debug API calls. [PR]
Storage permission changes: the developer role is now allowed to update the storage settings (previously was only owner and admin). [PR]

Launch Week 7 Hackathon winners

The community is loving pgvector to build AI apps so we decided to make it part of the traditional Launch Week Hackathon. The quality of the apps was out of this world, it wasn't easy, but in the end, we selected Page Assist - by @n4ze3m as the winner of the Best Overall Project.

Full list of Winners

See all the submissions

Mendable.ai switches from Pinecone to Supabase for PostgreSQL vector embeddings.

With Supabase and pgvector, Mendable.ai could build a more cost-effective solution that is just as performant - if not more performant - than other vector databases.

Read the full story

From the community

FlutterFlow now supports Supabase Authentication. Video guide
Supabase + ClickHouse: Combining the Best of the OLTP and OLAP Worlds. Webinar
Our friend Guillaume put together the most incredible course about Supabase, with the in and outs of the platform. Full course
Supabase + LangChain starter template for building full stack AI apps. Template
Creating a Books Tracker App with .NET MAUI and Supabase. Article - Vanta Case Study - Supabase turns trust into a revenue-generating opportunity with Vanta. Case Study

Meme Zone

As always, one of our favorite memes from last month. Follow us on Twitter for more.

Supabase Auth: SSO, Mobile, and Server-side support

awalias — Thu, 13 Apr 2023 16:08:32 +0000

Today we're excited to announce a few new features for Supabase Auth:

Easily add Single Sign-On support to your projects using SAML 2.0
Better support for server-side rendering and mobile apps using PKCE
Native Apple login on iOS

Single Sign-On Support using SAML 2.0

With Single Sign-On (SSO), your users can login with their company's identity provider (IDP), a critical feature when you're building applications for Enterprises.

Every developer building a B2B application eventually needs the SSO authentication flow to onboard enterprise customers. SSO is a requirement for larger Enterprise customers because it's a standard request in Enterprise Security Policies. Over the past few months, we've been dogfooding SSO for our own Enterprise customers, and today we're releasing it for you to do the same.

Building SSO into your application isn't necessarily hard, but does come with some complexity. A lot of time can be spent understanding the nuances and details of the protocol - from dissecting the jargon to testing the implementation heavily. It took us months to build it for ourselves. With this release, you will have SSO set up and running in less than an hour so that you can focus on shipping the core features of your product. This feature is available for the Pro-tier and above, starting today. It will also be available on the self-hosted version.

Getting Started with SAML 2.0

To get started, enable the “SAML 2.0“ authentication method in the dashboard. We've added new commands to the Supabase CLI to help with the configuration process:

$ supabase sso --help
Manage Single Sign-On (SSO) authentication for projects

Usage:
  supabase sso [command]

Available Commands:
  add         Add a new SSO identity provider
  info        Returns the SAML SSO settings required for the identity provider
  list        List all SSO identity providers for a project
  remove      Remove an existing SSO identity provider
  show        Show information about an SSO identity provider
  update      Update information about an SSO identity provider

Once you've added a new SSO identity provider to your project, it's as simple as calling the signInWithSSO() from the supabase-js library:

const { data } = await supabase.auth.signInWithSSO({ domain: 'acme.corp' })

if (data.url) window.location.href = data.url

SSO with Row Level Security and multi-tenancy

As usual, we've engineered this feature around the excellent capabilities of PostgreSQL.

For example, you can use Row Level Security (RLS) to build multi-tenant applications, simply by using the provider's unique identifier in the user's JWT:

create policy "Only allow read-write access to tenants" on tablename as restrictive to authenticated using (
  tenant_id = (auth.jwt () -> 'app_metadata' ->> 'provider')
);

The journey to enterprise readiness isn't an end goal, it is a continuous process that demands constant attention and maintenance. With Supabase Auth, your team can offload this engineering burden to us and prioritize the features that matter.

Server-Side and Mobile Auth

Many developers today are using Supabase to build mobile apps, and server-side rendering is becoming popular (again!). This release will add support for these use cases by introducing the Proof Key for Code Exchange flow (PKCE) authentication flow. This improves security for mobile apps and makes building server-first apps simple. Since this is a major update that touches many of the authentication routes, we will be rolling it out gradually over the next few weeks.

A brief history of Supabase Auth

When we launched Supabase Auth, our target was JAMstack developers. In these cases, the protocol used between the user's application and Supabase Auth is known as the Implicit Grant Flow:

As developers built more complex apps, they encountered two problems with this authentication flow:

Server-Side Email Verification Links Data provided in a URL fragment is only accessible in a browser environment, not on the server. This is problematic for email verification links that redirect users to a server-side route.
Challenges with Mobile App Authentication The implicit grant flow raised security concerns for mobile use cases since malicious apps could potentially obtain the user session.

Server-side auth unlocks a number of benefits. Developers can:

Set cookies on the same domain as the application.
Enable server-side rendering for protected pages.
Perform downstream actions after user authentication, such as adding the user to a CRM or sending analytics.

Introducing PKCE

To solve these problems, we're introducing support for the Proof Key for Code Exchange flow (PKCE, pronounced “pixy”).

The PKCE flow introduces a code verifier (a randomly generated secret) and a code challenge (the hash of the code verifier). The authorization code is returned as a query parameter so it's accessible on the server. During the PKCE flow:

The code challenge is sent to Supabase Auth, which returns an authorization code.
The client sends the authorization code together with the code verifier to obtain the user's session.
Supabase Auth checks if the code verifier matches the code challenge sent earlier by computing the hash. This renders a malicious attacker's attempt to intercept the authorization code useless, since they need to know the value of the code verifier as well.

Migrating to PKCE on the client

Over the next few weeks, you'll be able to use it with the Supabase libraries. We've already added PKCE to the JavaScript client library and our auth-helpers library. If you're using supabase-js , you can switch to PKCE by initializing your client with the following option:

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
  auth: {
    flowType: 'pkce',
  },
})

For client-side auth, that's all you need to do to switch over. supabase-js will handle the generation and storage for the code verifier, as well as exchanging the authorization code for the user's session.

Migrating to PKCE on the server

Server-side authentication is now a lot easier. Let's look at an example using NextJS.

Install the next version of auth-helpers (lets use the nextjs version for this example)

npm install @supabase/auth-helpers-nextjs@next

Then prepare an endpoint for the sign in process. The redirect URL is set to /api/auth/callback, which will be implemented next.

// api/auth/login
import { NextApiRequest, NextApiResponse } from 'next'
import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  // Create the Supabase Client
  const supabase = createServerSupabaseClient(
    { req, res },
    {
      supabaseUrl: process.env.SUPABASE_URL,
      supabaseKey: process.env.SUPABASE_ANON_KEY,
    }
  )

  // Start sign in with one-time password
  const { error } = await supabase.auth.signInWithOtp({
    email: 'foo@example.com',
    options: {
      emailRedirectTo: 'http://localhost:3000/api/auth/callback',
    },
  })

  if (error) {
    res.json(JSON.stringify(error))
  }

  res.redirect('/')
}

Now we can set up the callback API endpoint:

// api/auth/callback
import { NextApiRequest, NextApiResponse } from 'next'
import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  // Create authenticated Supabase Client
  const supabase = createServerSupabaseClient(
    { req, res },
    {
      supabaseUrl: SUPABASE_URL,
      supabaseKey: SUPABASE_ANON_KEY,
    }
  )
  // check for code in url querystring
  const code = req.query.code

  if (typeof code === 'string') {
    // exchange the auth code for user session
    await supabase.auth.exchangeCodeForSession(code)
  }

  // redirect the user to a server-side protected area in your app
  res.redirect('/')
}

Roll out

Since this is a major update that touches many of the authentication routes, we will roll it out gradually over the next few weeks. You will receive a notification in your dashboard when the feature is available for your project. Reach out to us if you want early access to this feature.

Native Apple login on iOS

While PKCE support is great, that is not the only news for you mobile app developers out there.

Building apps for iOS requires support for native Sign in with Apple. We heard the community's requests for native sign-in. We hope you join our excitement to officially announce support for native Sign in with Apple.

Your app's iOS Bundle ID can now be configured in the Apple provider section of your project's dashboard.

This is the only prerequisite for triggering a native Sign in with Apple. With supabase-flutter, this is as easy as:

final AuthResponse response = await supabase.auth.signInWithApple();

It's that easy! No need to set up deep links, no need to pass any parameters.

We're just starting with Apple login, and soon add support for Google login.

Wrapping Up

Supabase Auth aims to continue developing auth features that are secure by default yet simple to implement. We use Supabase Auth for our hosted platform and continuously dogfood the latest version on it. If you are interested to migrate to Supabase Auth, you can check out this blog post on how Parqet migrated 125,000 users from Auth0 to Supabase Auth.

More Launch Week 7

🚀 Learn more about Supabase

Supabase Storage v3: Resumable Uploads with support for 50GB files

awalias — Wed, 12 Apr 2023 15:48:42 +0000

Supabase Storage is receiving a major upgrade, implementing many of the most requested features from our users: Resumable Uploads, Quality Filters, Next.js support, and WebP support.

The key feature: Resumable Uploads! With Resumable Uploads, you can continue uploading a file from where you left off, even if you lose internet connectivity or accidentally close your browser tab while uploading.

Resumable uploads divides the file into chucks before uploading them, emitting progress events during upload.

With this release, you can now upload files as large as 50GB! (Previously the limit was 5GB).

To build this feature, we implemented Postgres Advisory locks which solved some gnarly concurrency problems. We can now handle edge-cases, like two clients uploading to the same location. We’ll deep dive into how we implemented Advisory locks later in the post.

New features

Storage v3 introduces a number of new features.

More image transformations options

We introduced image resizing last Launch Week. This time, we’ve added the ability to specify quality and format filters when downloading your image. When you request images via the transform endpoint, by default we render it as Webp, if the client supports it.

supabase.storage.from('bucket').download('image.jpg', {
  transform: {
    width: 800,
    height: 300,
    quality: 75,
    format: 'origin',
  },
})

Next.js loader

You can serve images from Storage with a simple Next.js loader for the Image component. Check out our docs on how to get started.

// supabase-image-loader.js
const projectId = '<SUPABASE_PROJECT_ID>'
export default function supabaseLoader({ src, width, quality }) {
  return `https://${projectId}.supabase.co/storage/v1/render/image/public/${src}?width=${width}&quality=${
    quality || 75
  }`
}

// nextjs.config.js
module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './supabase-image-loader.js',
  },
}

// Using Next Image
import Image from 'next/image'
const MyImage = (props) => {
  return <Image src="bucket/image.png" alt="Picture of the author" width={500} height={500} />
}

Presigned upload URLs

Authenticated users can now generate presigned URLs.

These URLs can then be shared with other users who can then upload to storage without further authorization. For example, you can generate a presigned URL on your server (ahem, Edge Function).

Shoutout to community members @abbit and @MagnusHJensen who implemented this feature on the Storage server and @Rawnly for the client library bindings 🎉.

// create a signed upload url
const filePath = 'users.txt'
const { token } = await storage.from(newBucketName).createSignedUploadUrl(filePath)

// this token can then be used to upload to storage
await storage.from(newBucketName).uploadToSignedUrl(filePath, token, file)

Size and file type limits per bucket

You can now restrict the size and type of objects on a per-bucket basis. These features make it easy to upload to Storage from the client directly, without requiring validation from an intermediary server.

For example, you can restrict your users a 1 MB and image/* files when uploading their profile images:

Deep Dive into Resumable Uploads

Let’s get into the nuts-and-bolts of how we implemented Resumable Uploads.

First, why do we need Resumable Uploads, when the HTTP protocol has a standard method for uploading files - multipart/form-data ? This approach works well for small files, since the file is streamed to the server in bytes over the network. For medium to large files this method becomes problematic, especially on spotty connections like mobile networks. Uploads that are interrupted need to be restarted from the beginning.

TUS - Resumable Protocol

We use S3 to store your files and it implements a proprietary protocol for resumable uploads. At Supabase, we support existing open source communities when possible and so, instead of exposing the S3 protocol to our users, we implemented TUS (historically an acronym for Transloadit Upload Server, later renamed to The Upload Server). TUS is an open protocol for resumable file uploads. By leveraging an open protocol, developers can use existing libraries with Supabase Storage.

TUS is a powerful protocol. It’s built on top of HTTP, making it easy to integrate your browser and mobile applications. Because of its open nature, a variety of powerful, drop-in clients and open-source libraries have been built around it. For example, at Supabase, we love Uppy.js, a multi-file uploader for TUS.

Using Uppy with Supabase Storage looks like this:

import { Uppy, Dashboard, Tus } from 'https://releases.transloadit.com/uppy/v3.6.1/uppy.min.mjs'

const token = 'anon-key'
const projectId = 'your-project-ref'
const bucketName = 'avatars'
const folderName = 'foldername'
const supabaseUploadURL = `https://${projectId}.supabase.co/storage/v1/upload/resumable`

var uppy = new Uppy()
  .use(Dashboard, {
    inline: true,
    target: '#drag-drop-area',
    showProgressDetails: true,
  })
  .use(Tus, {
    endpoint: supabaseUploadURL,
    headers: {
      authorization: `Bearer ${token}`,
    },
    chunkSize: 6 * 1024 * 1024,
    allowedMetaFields: ['bucketName', 'objectName', 'contentType', 'cacheControl'],
  })

uppy.on('file-added', (file) => {
  file.meta = {
    ...file.meta,
    bucketName: bucketName,
    objectName: folderName ? `${folderName}/${file.name}` : file.name,
    contentType: file.type,
  }
})

uppy.on('complete', (result) => {
  console.log('Upload complete! We’ve uploaded these files:', result.successful)
})

And there you have it, with a few lines of code, you can support parallel, resumable uploads of multiple files, with progress events!

Implementing TUS inside Supabase Storage

There were a few technical challenges we faced while implementing TUS in Supabase Storage.

Storage is powered by our Storage-API service, a Node.js server that interfaces with different storage backends (like AWS S3). It is fully integrated with the Supabase ecosystem, making it easy to protect files with Postgres RLS policies.

To implement the TUS protocol, we use tus-node-server, which was recently ported to Typescript. It was only missing a few features we needed:

Ability to limit the upload to files of a certain size
Ability to run multiple instances of TUS (more on this later)
Ability to expire upload URLs after a certain amount of time

We will be contributing these features back to TUS with discussions and PRs after Launch Week.

Scaling TUS

One of the biggest challenges we faced was the ability to scale TUS by running multiple instances of the server behind a load balancer. The protocol divides the file into chunks and sends it to any arbitrary server. Each chunk can be processed by a different server. Cases like these can lead to corrupted files with multiple servers trying to buffer the same file to S3 concurrently.

The TUS documentation gives 2 work-arounds:

Use Sticky sessions to direct the client to the same server the upload was originally started.
Implement some sort of distributed locking to ensure exclusive access to the storage backend.

Option 1 would have affected the even distribution of requests across servers. We decided to go with option 2 - Distributed Locking. Storage uses Postgres as a database, a queue, and now as a lock manager.

Enter Postgres Advisory Locks

Postgres advisory locks offer a way for defining locking behaviour of resources outside of the database. These are called advisory locks because Postgres does not enforce their use - it is up to the application to acquire and release the locks when accessing the shared resource. In our case, the shared resource is an object in S3. Advisory locks can be used to mediate concurrent operations to the same object.


const key = `/bucket-name/folder/bunny.jpg`
const hashedKey = hash(key)

await db.withTransaction(() => {
    // try acquiring a transactional advisory lock
    // these locks are automatically released at the end of every transaction
    await db.run('SELECT pg_advisory_xact_lock(?)', hashedKey);

    // the current server can upload to s3 at the given key
    await uploadObject();

   if (isLastChunk) {
    // storage.objects stores the object metadata of all objects
    // It doubles up as a way to enforce authorization.
    // If a user is able to insert into this table, they can upload.
    await db.run('insert into storage.objects(..) values(..)')
   }
});

// the advisory lock is automatically released at this point

With advisory locks, we’ve been able to utilize Postgres as a key part of the Supabase Stack to solve difficult concurrency problems.

Roll out

Because this is a major update, we’re rolling it out gradually over the next month. You will receive a notification in your dashboard when the feature is available for project. Reach out to us if you want early access to this feature.

Coming up next

We’ve got an exciting roadmap for the next few Storage releases:

Presigned upload URLs for TUS
Increasing max file size limit to 500 GB
Transform images stored outside Supabase Storage
Smart CDN v2 with an even higher cache hit rate

More Launch Week 7

Supabase AI Hackathon

awalias — Sun, 09 Apr 2023 22:36:58 +0000

Key Facts

You have 10 days to build a new Open Source project using Supabase in some capacity.
- Starting 6:00 am PT Friday 7th April 2023
- The submission deadline is 11:59 pm Sunday midnight PT 16th April 2023
Enter as an individual, or as a team of up to 5 people
Build whatever you want - a project, app, tool, library, or anything

Prizes

There are 5 categories, there will be prizes for:

Best overall project (Mechanical Keyboards & Swag kit)
Best use of AI (Swag kit)
Most fun / best easter egg (Swag kit)
Most technically impressive (Swag kit)
Most visually pleasing (Swag kit)

There will be a winner and a runner-up prize for each category. Every team member on winning/runner-up teams gets a Supabase Launch Week swag kit.

Submission

You should submit your project using this form before 11:59 pm Sunday midnight PT 16th April 2023. Extra points if you include a simple video demoing the app in the description.

Judges

The Supabase team will judge the winners for each category.
We'll be looking for:

creativity/inventiveness
functions correctly/smoothly
visually pleasing
technically impressive
use of Supabase features
- deep usage of a single feature or
- broad usage are both ok
FUN! 😃

Rules

Team size 1-5 (all team members on winning teams will receive a prize)
You cannot be on multiple teams
One submission per team
It's not a requirement to use AI, it's just a theme
All design elements, code, etc. for your project must be created during the event
All entries must be Open Source (link to source code required in entry)
Must use Supabase in some capacity
Can be any language or framework
You must submit before the deadline (no late entries)
(optional) Include a link to a demo video along with the submission for extra points

Resources

Supabase resources to get you started

Community help

The Supabase Team will be taking part in the Hackathon and you'll find us live to build in our discord all week. Please join us by building in public:

Text channel: #hackathon
Audio channel: #hackathon

If you need help or advice when building, find other people to join your team, or if you just want to chill and watch people build, come and join us!

Join our Discord

Launch Week

Don't forget to check out the new features being announced as part of Launch Week.

Previous Hackathon Prize Winners

Additional Info

Any intellectual property developed during the hackathon will belong to the team that developed it. We expect that each team will have an agreement between themselves regarding the IP, but this is not required
By making a submission you grant Supabase permission to use screenshots, code snippets, and/or links to your project or content of your README on our Twitter, blog, website, email updates, and in the Supabase discord server. Supabase does not make any claims over your IP.

Supabase Beta August 2022

awalias — Thu, 08 Sep 2022 12:09:05 +0000

This month the Beta Update is a Launch Week special. #SupaLaunchWeek 5 just happened and it was a big one, so we revisit everything we shipped, congratulate the winners of the Supa Hackathon, and of course we have the extended the Community Highlights.

Day 1 - Supabase CLI v1 and Admin API Beta

The Supabase CLI is now in v1.0 (including the ability to generate TypeScript types 🎉). We also released the Admin API Beta, a REST API that opens the door to a whole new suite of integrations (Zapier, Terraform, Pulumi, you name it). Full programmatic control of your projects and orgs is on the way.

Blog Post

Video Announcement

Day 2 - supabase-js v2 Release Candidate

supabase-js v2 focuses on "quality-of-life" improvements for developers and includes Type Support, new Auth Methods, async Auth overhaul, improvements for Edge Functions, and more. We couldn't have done this without our amazing Community, so thanks a lot to everyone who contributed.

Try it out by running npm i @supabase/supabase-js@rc

Blog Post

Video Announcement

Day 3 - Supabase is SOC2 compliant

Our customers can rest assured knowing their information is secure and private 🔒. The blog post explains the process we went through to get there and is very useful for anyone building a SaaS product.

Blog Post

Security at Supabase

Video Announcement

Day 4 - Realtime: Multiplayer Edition

Next level Realtime is here ⚡️. Presence and Broadcast are two key blocks developers can use to build the digital experiences users want. All projects now have access to these features. Try it out in combination with supabase-js v2.

Blog Post

Video Announcement

Day 5 - Community Day and One More Thing

We wrapped Launch Week 5 with contributors, partners, and friends and the traditional One More Thing... that was actually SIX more things: Supabase Vault, Auth UI, Dashboard permissions, JSON schema validation, pg_graphql v0.4.0, MFA early-access.

Community Day Blog Post

Community Day Video Announcement

One More Thing Blog Post

Launch Week 5 Hackathon

We had a huge amount of open source submissions 🤯. The selection process was not easy as it wasn't only quantity, but also quality. After a thorough review, we declared Supabase Cache Helpers the overall winner of the $1500 GitHub sponsorship and Gold SupaCap. Congratulations to @psteinroe 👏

Full list of winners

Check all the submissions in Made with Supabase

Platform Updates

The following changes to the Supabase Platform will take effect from September 11th at 7 pm PDT.

HTTP API requests to Supabase will automatically be redirected to HTTPS.
The API Key was passed to Supabase both in the Authorization header and in a separate apiKey header. This led to confusion among new users of Supabase who used the API directly. It is no longer required to send the anon key or service key via the apiKey header. If you are using Supabase via our client libraries, no change is required from your side.

Supabase Migration Guides

Our guides and tools make it super easy to migrate your projects to Supabase:

Webinar: How Netlify and Supabase Enables “Supa” DX

Our friends from Netlify invited Ant to their new webinar series. He and Netlify's VP of Partnerships & Ecosystems, Steven Larsen, will show you how to:

Deploy Supabase’s open source backend together with Netlify
Build User Management without handing over user data to any third parties
Upload files and folders to the cloud without needing to tack on additional tools

Save your seat.

Extended Community Highlights

Inian shared our journey with Cloudflare. Video
Supabase Tips: Introduction to Supabase Storage. Video
Zack DeRose playing around with Supabase and Nx. Part 1 | Part 2
A new guide showing how to combine Supabase and Directus. Guide
Supabase with Flutter course on raywenderlich. Course
Build a full-stack app with Next.js and Supabase on the LogRocket blog. Tutorial
Supabase Crash Course by The Net Ninja. Video Courses
How to build a Grocery Application with Webflow CMS using DhiWise. Tutorial
How To Create a Full Stack app with SolidJS, Supabase, and TailwindCSS Video and Tutorial.
The WalletConnect Cloud now supports Sign in wtih Ethereum. Announcement.
Building In Public: Cartta Tech Stack. Article
Supabase + Vue 3 in 12 minutes. Video

We’re hiring

Come join one of the fastest growing open source projects ever 🤗

Meme Zone

If you made it this far in the blog post you deserve a treat. Follow us on Twitter for more.

Get started

Start using Supabase today: app.supabase.com
Make sure to star us on GitHub
Follow us on Twitter
Subscribe to our YouTube channel

Supabase Beta July 2022

awalias — Thu, 04 Aug 2022 14:53:20 +0000

It’s happening! Launch Week is back ✊. We are preparing lots of product announcements and fun activities. Join us the week of August 15-19 for Launch Week 5️⃣.

We don't ship only during Launch Weeks, so this month we still bring you some great new stuff: Flutter SDK 1.0 (developer preview), Auth Helpers, pg_jsonschema, and more.

Launch Week Golden Ticket

Register for #SupaLaunchWeek 5 and if you are lucky, you may pull a golden ticket and win a limited edition Supabase goodie bag! Get a ticket.

Supabase Flutter SDK 1.0 developer preview

Supabase Flutter SDK is getting a major update, with a big focus on developer experience. We shared a preview of what is to come so you can help us make it even better with your feedback. Read the blog.

Revamped Auth Helpers (now with SvelteKit support)

We've been hard at work making an Auth experience that is as smooth as possible for Supabase developers. The new Auth Helpers have a better experience for server-side rendering (SSR) environments, new Github structure, SvelteKit support, and more. Read the blog.

pg_jsonschema – A Postgres extension for JSON validation

Born as an excuse to play with pgx, pg_jsonschema is a solution we're exploring to allow enforcing more structure on json and jsonb typed postgres columns. Only 10 lines of code 😎

hCaptcha integration

The new hCpatcha integration allows you to implement captcha functionality for auth. Enable hCaptcha protection in the auth settings to stop bots attacks and protect your users' privacy. Captcha settings.

Updated Settings UI in dashboard

We've started updating our settings UI, starting with the Auth settings. You'll now see updated UI for setting up your Auth providers, Email templates and SMTP config. Auth settings

Quick product announcements

- Email OTP now supports 6-10 digits length. PR
- GenerateLink method now returns the email_otp, the hashed_token , the verification_type and the redirect_to. PR

Nuxt 3 Quickstart

There is a new quickstart in town. The guide, powered by NuxtSupabase, shows how to build a simple user management app using Supabase and Nuxt 3, including Database, Auth, Storage, and more. Get started.

Made with Supabase

BuyMeAPizza | A brand new, free, and open source service to accept donations in crypto on your website. Built with Next.js, Tailwind, Supabase, and Solana tools.

Discover other projects: Made with Supabase

Community highlights

The Supabase community is exploding and we’ve reached a point where we can’t fit everything into our monthly newsletter so here’s the full list of community updates from July:

Netlify announced a new webinar series, Web Ecosystem, and we get to be part of it. Blog Post
Implementing "seen by" functionality with Postgres. Blog Post
Open Source Startup Podcast with our CEO Paul Copplestone. Podcast
Scaleway listed 40+ of the best open-source tools to build your startup. Blog Post
Sign-up form with OTP and auto login using Supabase and Arengu. Guide
Setup Supabase with Nest.js. Tutorial
Loading SportsDB data into Supabase. Tutorial
Introduction to Supabase: Postgres Database using Python. Tutorial
Supabase and SWR to fetch data updates in realtime using React Hooks. Tutorial
Protected routes using Next.js Edge Middleware & Supabase. Tutorial
Supabase backend demo with Bravo Studio. Video
Building a live demo with Supabase and AppSmith. Video
Auto-generated documentation in Supabase. Tutorial
Speeding Up Bulk Loading in PostgreSQL. Blog Post
Installing React-Admin In A Remix App. Tutorial
How to set up Supabase in React? And Some Useful Tips. Tutorial
My approach to authentication with Next.JS, Prisma & Supabase. Guide

We’re hiring

Come join one of the fastest growing open source projects ever 🤗

Meme Zone

If you made it this far in the blog post you deserve a treat. Follow us on Twitter for more.

Get started

Start using Supabase today: app.supabase.com
Make sure to star us on GitHub
Follow us on Twitter
Subscribe to our YouTube channel

Visualizing Supabase Data using Metabase

awalias — Thu, 30 Jun 2022 12:08:21 +0000

Data helps organizations make better decisions. With a programming language like Python to analyze your data and transform data into visual representations, you can effortlessly tell the story of your business. One way to create customized visuals from your data would be to use data visualization libraries in Python like Matplotlib, Seaborn, Ggplot2, Plotly, or Pandas. When you want to accomplish this task with little or no code (not even SQL), you might consider using tools like Metabase.

With Metabase, a powerful visualization tool, you can quickly turn your data into easy-to-understand visuals like graphs, pie charts, flow diagrams, and much more. Then, using Metabase’s intuitive interface, you can cut through the data noise and focus on what’s essential for your business.

In the previous blog of this series*,* we explained how to use Python to load data into Supabase. In this blog, we will create different kinds of charts out of the data stored in Supabase using Metabase.

Prerequisites

Before we dive in, let’s look at some prerequisites that you will need:

Supabase project with data

Based on our previous article, we assume we already have a Supabase project setup and have data loaded into it.

Metabase Docker Container

To take advantage of the open-source version of Metabase, you can use the Metabase docker container here.

Visualizing data in Supabase with Metabase

Launching Metabase

To launch Metabase, simply go to "http://localhost:3000/setup/" which is the default port that the Metabase server will be listening to.

After Metabase is launched, select your preferred language and add your contact information. In the Add your data markdown, you will need to choose PostgreSQL.

You will be prompted to add the necessary connection information to your Supabase project. Go to your Supabase project and hit Settings > Database to get the database info.

Enter the necessary information on Metabase and hit next. Finally, select your data preference, after which you will land on the Metabase homepage.

View Database and Tables

We can now see the "Supabase DB" Supabase project under "Our data".

To view the tables, go to SupabaseDB > public

View Table Data Insights

Go back to the home page and select public schema under "Try these x-rays based on your data"

Here is the output of the product table.

As you can see, we can get some handy information from this like:

How many products are present with a given range of inventory count.
How many products are present for a given range of price.
The ratio between the number of employees to the number of products.
How many products each vendor has created.

If you have column-specific views, you can select the zoom-in option under More x-rays.

For example, let's select the total employees field.

With information like this, you will be able to answer some key questions like

What are some common statistics for company employees like average, minimum, maximum, and standard deviation?
What is the distribution of the employees across different geo locations?
What is the distribution of the employees across different vendors?

Using custom SQL queries

We can also use custom queries to set up our dashboards. To do this, go to New > SQL query.

Next, under the database, select "SupabaseDB".

We will be using the following SQL query:

SELECT "Vendor".vendor_name, product_name, "Vendor".total_employees
FROM "Product"
LEFT JOIN "Vendor" on "Product".vendor_id = "Vendor".vendor_id
WHERE "Vendor".total_employees

This query should fetch us the vendor name and the product where the number of employees for a given vendor is less than 110.

To run the SQL query, hit the play button.

This will be shown below in the output window. To visualize the data, hit the visualization button.

Next, select the type of visualizer you want. Let us choose Bar.

Choose the appropriate x-axis and y-axis fields, and you will be able to view the data in bar format.

Conclusion

Data visualization empowers organizations to turn unused data into actionable insights, leading to faster and better decision-making. Why wait?

With our free tier Supabase account, you can start a new project today and use Metabase to visualize your app data.

If you have any questions please reach out via Twitter or join our Discord.

Python data loading with Supabase

awalias — Fri, 17 Jun 2022 14:41:14 +0000

Python is an excellent choice when it comes to data science. With a wide selection of libraries and built-in analytics tools, you can crunch data with ease, analyze even the most complex datasets, and visualize your results in beautiful charts and graphs.

Supabase is backend-as-a-service built on top of PostgreSQL. It’s an excellent choice for building modern data-intensive apps and tooling.

Thanks to our incredible community, Supabase now has a powerful and open source Python SDK. With Supabase and Python, you can automate tasks such as CRUD operations with only a few lines of code. This guide will first create a simple schema in Supabase, then we’ll use the Supabase Python SDK to show how you can load sample data.

Prerequisites

Before we dive in, let’s look at some prerequisites you'll need:

Python version > 3.7
- The SDK only supports version > 3.7. You can download a supported Python version from here.
Python virtual environment
- This is optional, but it will avoid issues of package dependencies and version conflicts. You can find the steps to create a virtual environment here. We will be using PyCharm to harness its venv creation capabilities.
Faker python package
- We will be using the faker-commerce package from the Faker library in Python to generate realistic sample data.

Loading data into Supabase using Python

Supabase is built for developers, and you can get started for free using your existing Github account. Once your Supabase account is set up, you will access the Supabase dashboard. From here, go to All Project > New Project.

Give your project a name and set the database password. You can also choose the region and adjust the pricing plan based on the requirements of your project.

Your project will spin up within 2 minutes.

Creating tables in Supabase

In this example, we’ll be creating 2 tables in Supabase:

Vendor (fields are vendor_name, vendor_location, and total_employees)
Product (vendor_id as FK, product_name, price, and total orders)

The database schema will look like the following:

Let us now begin creating the tables. Once you create a project, you will need to go to Table Editor > New Table

Now, you can create a table according to the defined schema.

Click on Save to create your vendor table. Similarly, create the product table.

Before you click Save, you need to set up the foreign key relationship between the Product and Vendor table. To do this, select the button next to “vendor_id”

Select the vendor_id primary key from the “Vendor” table.

Click on Save and you are good to go. You should now see the 2 tables under Table Editor.

Installing the Python SDK

Once you have set up the tables and installed the prerequisites, you can now start playing around with the Python SDK. To install the SDK, run the following command:

pip3 install supabase

Ensure that you are running this inside your python virtual environment. This will take a few minutes to complete.

Using Supabase API keys

The SDK authentication uses API keys pointing to a project URL. To find out your project URL and APIs, go to Settings > API.

Setting up the environment variables

API credentials and project URL can be stored in environment variables. Setting the environment variables in bash/zsh is very simple. All we need to do is run:

export <variable_name>=<variable_value>

So for our example we will set them up like this:

export SUPABASE_URL=<<the value under config > URL>>
export SUPABASE_KEY=<<the value present in Project API keys > anon public>> 
export SUPABASE_SECRET_KEY=<<the value present in Project API keys > service_role secret>>

Inserting data into Supabase

Here is a snippet of the code we will be using to insert random data into our tables:

import os
import json
from dotenv import load_dotenv
from supabase import create_client, Client
from faker import Faker
import faker_commerce


def add_entries_to_vendor_table(supabase, vendor_count):
    fake = Faker()
    foreign_key_list = []
    fake.add_provider(faker_commerce.Provider)
    main_list = []
    for i in range(vendor_count):
        value = {'vendor_name': fake.company(), 'total_employees': fake.random_int(40, 169),
                 'vendor_location': fake.country()}

        main_list.append(value)
    data = supabase.table('Vendor').insert(main_list).execute()
    data_json = json.loads(data.json())
    data_entries = data_json['data']
    for i in range(len(data_entries)):
        foreign_key_list.append(int(data_entries[i]['vendor_id']))
    return foreign_key_list


def add_entries_to_product_table(supabase, vendor_id):
    fake = Faker()
    fake.add_provider(faker_commerce.Provider)
    main_list = []
    iterator = fake.random_int(1, 15)
    for i in range(iterator):
        value = {'vendor_id': vendor_id, 'product_name': fake.ecommerce_name(),
                 'inventory_count': fake.random_int(1, 100), 'price': fake.random_int(45, 100)}
        main_list.append(value)
    data = supabase.table('Product').insert(main_list).execute()


def main():
    vendor_count = 10
    load_dotenv()
    url: str = os.environ.get("SUPABASE_URL")
    key: str = os.environ.get("SUPABASE_KEY")
    supabase: Client = create_client(url, key)
    fk_list = add_entries_to_vendor_table(supabase, vendor_count)
    for i in range(len(fk_list)):
        add_entries_to_product_table(supabase, fk_list[i])


main()

To summarize what we have done using this code snippet:

We have inserted 10 random vendors to the table.
For each of the 10 vendors, we have inserted a number of different products

Reading the data stored in Supabase

Data can also be viewed directly from the Supabase dashboard. To do this, go to Table Editor > All tables

Note: In case you cannot see any of the data, you should hit the Refresh button.

Conclusion

With Python, data loading into Supabase is easy. It just takes a few easy steps to get started with the Python SDK and Supabase. In the next part of this blog series, we will learn how to visualize the data that we just loaded into Supabase using Metabase. Stay tuned!

If you have any questions please reach out via Twitter or join our Discord.

What is OAuth? Setting up Github OAuth with Supabase

awalias — Thu, 09 Jun 2022 12:38:14 +0000

TL;DR: In this post, I will do a quick intro to the OAuth protocol and show how to use OAuth with Supabase by implementing Sign in with Github.

What is OAuth? Setting up Github OAuth with Supabase

OAuth is an open protocol which allows users to log into your service with an account that they already have with a third party provider (e.g. Google, Github, Twitter etc.). The benefit is that the user doesn't need to maintain a separate set of credentials for each app or web service that they interact with, they can just "log in with Google". The protocol depends on grants and tokens and works by issuing access tokens to the third-party client with the approval of the resource owner.

Figure 1 : OAuth-based authentication between a User and a Supabase based web app. 'Gotrue tenant' refers to the Supabase Auth server.

Some of the benefits of using OAuth for authentication are:

Improved security and privacy - The OAuth 2.0 framework uses SSL to securely store access tokens, which protects user data on the wire.
Greater control and flexibility - OAuth allows the user to choose where and how their data can be accessed, giving them greater control and flexibility.
Better agility and user experience - OAuth lifts and shifts the responsibility of API authentication from developers to the external provider, allowing developers to focus on the application logic rather than writing and maintaining a new auth flow from scratch.

Now that we know the value of using OAuth, let's set up authentication based on native OAuth in Supabase using Github as the external provider. The full list of supported external providers can be found here.

What is Supabase?

Supabase is an open source backend for apps. It works with any client or framework (e.g. Javascript/React/Next.js, Python/Django, Mobile/Flutter/iOS, and comes with a free tier which is good for two free backends. It hosts all your data in the cloud, and comes with auth, realtime, and cloud functions.

Learn about Supabase's Auth system

Using OAuth in Supabase

Supabase allows you to set up auth integrations with a long list of OAuth providers. Once your Supabase account is set up, you will be able to access the Supabase dashboard. From here, go to All Project > New Project.

Give your project a name and set the database password. You can also choose the region and adjust the pricing plan based on the requirements of your project.

Once you create a new project, Supabase will begin provisioning your database and set up your API endpoint. This process may take a few minutes.

Once your project is ready, go to Settings > API and make a note of the Config URL.

Now, let's set up Supabase with Github OAuth. Once your project is set up and you have your Config URL, log into Github and go to Settings > Developer Settings > OAuth Apps, and click on Register a new application.

Give the OAuth application a name and copy <YOUR_CONFIG_URL>/auth/v1/callback in the Authorization callback URL. For the homepage URL, add the URL to your app. In this example, we will create a react app that is running locally on port 3000. Once the fields have been filled, click on the Register application.

Once the application is created, click on the Generate a new client secret button and copy the value that is generated.

In Supabase, go to Authentication > Settings and scroll down to the External OAuth Providers section and enable the Github option.

Paste the Github client ID as well as Github Secret in their respective fields and save.

Next, let's verify this functionality by creating a simple react app app to sign in with Github OAuth on the front end.

Create the app by running the following command:

npx create-react-app supabase-oauth-example

Once the app is created, change directory into the app and install the Supabase npm package by running:

cd supabase-oauth-example
npm install @supabase/supabase-js

Before creating an instance of createClient which will be used to connect to the Supabase project, make a note of the project's public API which can be found by going to Settings > API.

In the App.js file, create an instance of createClient which will be used to connect to your Supabase project by adding the following. The first argument for createClient is the URL Config. For the second argument, copy the Project public API key.

import { createClient } from  '@supabase/supabase-js';

const  supabase = createClient('<https://zcc```


import { createClient } from  '@supabase/supabase-js';

const  supabase = createClient('<https://zccsowtggisnkzbgsco.supabase.co>','eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.....')

import { createClient } from '@supabase/supabase-js';

const supabase = createClient('https://zccsowtggisnkzbgsco.supabase.co','eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.....')

Next, replace the App function with the following which adds a sign in button that will then redirect users to sign in using Github OAuth.



const  provider = 'github';

function  App() {
  const [user, setUser] = useState(null);
  async  function  userStatus() {
    const  user = supabase.auth.user();
    setUser(user);
  }
async  function  signIn() {
  await  supabase.auth.signIn({
    provider:  provider
  });
}
async  function  signOut() {
  await  supabase.auth.signOut();
  setUser(null);
}

useEffect(() => {
  userStatus();
  window.addEventListener('hashchange', function() {
    userStatus();
  });
}, [])

if (user) {
  return (
    <div  className="App">
      <h1>Hello, {user.email}</h1>
      <button  onClick={signOut}>Sign out</button>
    </div>
  )
}
return (
  <div  className="App">
    <h1>Sign in using Github OAuth</h1>
    <button  onClick={signIn}>Sign In</button>
  </div>
  );
}

Start the development server by running the following from the terminal:



npm start

On a browser, go to http://localhost:3000 to access the app.

Clicking on the Sign in button will redirect you to Sign in with Github.

You will then be redirected back to the app and be signed in.

You can then also sign out using the Sign out button.

By following this process, you can configure your Supabase project with any supported OAuth providers. After setting up your project with a provider, you just need to pass in the provider name:



await  supabase.auth.signIn({
  provider:  <YOUR_PROVIDER>
});

Conclusion

Supabase makes it very simple to use OAuth and allows you to extend access control to a large number of applications. You can easily control access using the Supabase Console or from the API. So, say goodbye to traditional password management and get access to secure user data without complex user onboarding workflows!

Now, become a Supabase developer today by starting a new project on our free tier.