Using Supabase with Autocode

What is Supabase?

Supabase is an open-source firebase alternative, with built in support to get your project started with a Postgres database, authentication and more! It’s free to get started and a great tool for beginners and hobbyists as well as professionals and enterprise teams! You can sign up at supabase.com.

What is Autocode?

Autocode is an online IDE with support to easily access auto-completion and simple API connections to many services such as Discord, Twitter, GitHub and more! It’s a perfect tool for getting started with using APIs and for seasoned teams! You can sign up at autocode.com.

Getting started...

If you’ve got an account with both Supabase and Autocode you’re ready to start!

Start off by creating a project on both platforms, this will mean you have an environment to work with on both Supabase and on Autocode!

Once you’ve done that make sure to head to Supabase and grab your API token, we’ll be storing this safely as an environment variable on Autocode.

Copy your API key from your Supabase project

To setup this key in Autocode head to your project and select the environment variables section…

Select environment variables inside of the Autocode

After you’ve selected this, create an environment variable with the name SUPABASE_KEY and set it’s content as your Supabase API key.

Create an environment variable for your Supabase key

On with the code!

The code is where things may begin to get confusing! We need to change a few things from the sample code to make things work. As a starting point, Supabase provides us with a few lines of JavaScript to initialise our project:

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

const supabaseUrl = 'https://*****.supabase.co'
const supabaseKey = process.env.SUPABASE_KEY
const supabase = createClient(supabaseUrl, supabaseKey)

But the use of import alongside const within Autocode is not supported. This is because Autocode uses

const pkgName = require('npmPkgName')

to install packages to your project.

Because of the issues we face with the above code we need to change the import line to:

const supabasePkg = require ('@supabase/supabase-js');

This will allow us to install and access the package from NPM.

Now that we have changed this, the createClient function doesn’t exist as a standalone function anymore, therefore we need to access it through the package, we do that like this:

const supabase = supabasePkg.createClient(supabaseUrl, supabaseKey)

Here we have fronted it with the supabasePkg variable we created when installing the package, this allows us to access the nested function, createClient.

You're connected!

Yes, connecting Supabase with Autocode is that simple. With just a few lines of code you can now access Supabase in Autocode, don’t believe me? Try adding console.log(supabase) to the end and hit run to see the data show up in your logs! Now you can use Supabase in your Autocode project!

The Code Crisis by Matt Davison