Supabase Nuxt signUp Instructions

README.md

Supabase Nuxt Sign up

This tutorial demonstrates how to set up a supabase user sign up form in a web app. For this example we'll use Nuxt 3, however the workflow is similar with other frameworks and user login setups.

Essential Topics

These are some general concepts that you'll need to make use of for connecting Supabase to an app; and more specifically, to set up user sign up

Environment Variables

• these are secure keys that give you access to a service. They are commonly used to access data.
• find the environment variables in Supabase's settings
• add them to a .env file locally
• set them up in your live deployment environment

Async Functions

• asynchronous functions return a promise that something will happen
• they are used when sending requests for data as the response isn't immediate
• async functions are commonly used when fetching from an api as well

3rd Party Libraries

• many services provide a library of tools that streamline accessing features
• in this case, you will be using the nuxtjs/supabase module
• this module provides functions like useSupabaseClient() and useSupabaseUser() which make it really easy to work with the service
• however sometimes, libraries can be out of date and break, it's important to take note of how stable the library is (and the environment that you're using it in)

---

Resources

• Supabase docs that use their universal library

Scope of these instructions

These instructions present a pattern that can be followed for other functionalities like signIn, signOut or forgotten password. the functions from the library might be different but the structure of the code will be roughly the same.

Extra: user name and confirmation messages

you can pass an options: {// email redirect // user name in data} to send redirects for when the user gets a confirmation as well as to set other values like user name (that would be done in: options:{data:{user_name: username.value}})

instructions.md

Instructions

Step 1: Project Setup

1. Create a supabase instance at supabase.com
2. Create a new Nuxt app on your system npx nuxi@latest init app-name
3. Follow the steps to set up the nuxt supabase module - install guide. (you can use the generic module as well)
   • install module using npm
   • add the module to the nuxt.config.ts file
   • create a .env file at the root of your project
   • add the keys (as noted in the abovelinked tutorial)

Step 2: Sign up page

this can be done in a component as well, but we will use a separate page for clarity

1. create a /pages/register.vue file
2. create a simple sign up form for email and password

<form>
<label for="email" >
      Email:
      <input type="email" name="email" <!-- TODO: add v-model to track input to variables--> />
    </label>
    <label for="password">
      Password:
      <input type="password" name="password" <!-- TODO: add v-model to track input to variables--> />
    </label>
    <button <!-- TODO: Add event handler to send the form-->>Sign Up</button>
</form>

3. Import the supabase client in the script tags

const supabase = useSupabaseClient();

4. Add the email and password variables (and userName if you want to add that too)

const email = ref("")
const password = ref(null)

5. Connect the email and password variables to the form. Notice the changes here:

 <input type="email" name="email" v-model="email" />
    </label>
    <label for="password">
      Password:
      <input type="password" name="password" v-model="password" />
    </label>

6. Create a signUp function to attach to the button. This will send the form information to supabase to create a new user

async function signUp() {
  try {
  const { data, error} = await supabase.auth.signUp({
     email: email.value,
     password: password.value,
  })
  if (error) throw error;
  } catch(error) {
    console.error(error)
  }
}

7. Attach the function to the button

<button @click="signUp">Sign Up</button>