Implementing Supabase

Now let's connect our user data from our AuthForm to Supabase.

Make sure that you have a Supabase account and that you have created a Project for your app. https://supabase.com/

You will also need to install the supabase-js library into your Clutch Project. Using the package manager click the (+) button and search for the supabase-js (version 1.35.6 when this was recorded) and click to install it.

You will also need to create a client.js file in your src directory in Clutch and paste in this code from Supabase.

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

// Create a single supabase client for interacting with your database
const supabase = createClient(
  'https://yoururlkey.supabase.co',
  'your-public-anon-key'
)
export default supabase;

The only change here is that you replace your URL and Public-Anon key with your own so that it connects to your Supbase project.
I am also exporting my supabase client so that it can be used in other modules.

Now that we have our client code set up, let's look back at the code on the action property in the signup route.
Using the signUp() method from Supabase we can implement this into the action. First, you will need to import the supabase client from the client.js file using the relative path.

import supabase from './../../../../client';

Then we can add the signUp() method.

const { data, error } = await supabase.auth.signUp({
  email: '[email protected]',
  password: 'example-password',
})

Your result should look like this after removing the hardcoded email and password values and passing in the email and password object.

import supabase from './../../../../client';
export default async ({ params, request }) => {
  let formData = await request.formData();
  let email = formData.get('email');
  let password = formData.get('password');
  console.log('formData', { email, password });
  const { data, error } = await supabase.auth.signUp({
    email,
    password,
  });
};

You should be all set and new users can now signup for your application. Repeat these steps for your sign-in route form and action, replacing the signUp() method with the signIn() method. You can also implement other logic and route your user to a new route depending on whether or not they are logged in to your app.

📘
Links
Link to the Clutch Project: https://app.clutch.io/project/631f8a2f45fd6fca056cc44e?workspace=215_164

📘Links

📘
Links