Unlocking User Authentication with Supabase and Vue.js

What is Supabase?

Supabase is an open-source alternative to Firebase, providing a range of features, including user authentication and management. It supports various external auth providers, such as passwords, phone numbers, and identity providers like Google, Twitter, Facebook, and Github.

Setting Up Vue.js

To get started, we’ll use the Vue CLI to scaffold a new project. First, install the CLI globally by running the command:

npm install -g @vue/cli

Then, create a new Vue project by running:

vue create my-app

Select the necessary features, including Router and Vuex.

Integrating Supabase

Create a Supabase account and set up a new project. Once created, copy the URL and anonymous public API key from the Settings > API section. Save these credentials in a .env.local file in your project root.

Installing Supabase Client Library

Run the command:

npm install @supabase/supabase-js

to install the Supabase client library. Initialize Supabase by creating a supabase.js file in your src directory and pasting in the necessary code:

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

const supabaseUrl = process.env.SUPABASE_URL;
const supabaseKey = process.env.SUPABASE_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);

Creating Pages and Routes

Create Vue component pages for sign-up, login, and dashboard functionality. Set up routes using Vue Router, including a navigation guard to redirect unauthenticated users to the sign-in route.

Configuring Vuex

Install Vuex and vuex-persistedstate to store data accessible by all components. Configure the Vuex store, defining the default values of our data, including the user state:

import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';

const store = new Vuex.Store({
  state: {
    user: null,
  },
  mutations: {
    // define mutations here
  },
  actions: {
    // define actions here
  },
  plugins: [createPersistedState()],
});

Storing Data and Committing Mutations

Use mutations to change the state object in our Vuex store. Define actions to commit mutations, including sign-up, sign-in, and sign-out actions. These actions interact with the Supabase API to authenticate users and update the user state:

export default {
  async signUp({ commit }, payload) {
    try {
      const { user, session } = await supabase.auth.signUp(payload);
      commit('SET_USER', user);
    } catch (error) {
      console.error(error);
    }
  },

  async signIn({ commit }, payload) {
    try {
      const { user, session } = await supabase.auth.signIn(payload);
      commit('SET_USER', user);
    } catch (error) {
      console.error(error);
    }
  },

  async signOut({ commit }) {
    try {
      await supabase.auth.signOut();
      commit('SET_USER', null);
    } catch (error) {
      console.error(error);
    }
  },
};

Adding Logic to Components

Add logic to the sign-up, sign-in, and dashboard components to make them fully functional. Use the Vuex store to access and update the user state:

<template>
  <div>
    <form @submit.prevent="signUp">
      <input type="email" v-model="email" />
      <input type="password" v-model="password" />
      <button type="submit">Sign Up</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: '',
    };
  },
  methods: {
    async signUp() {
      await this.$store.dispatch('signUp', { email: this.email, password: this.password });
    },
  },
};
</script>

By following these steps, you’ve successfully implemented user authentication using Supabase and Vue.js. You’ve also learned how to use Vuex and Vue Router in your Vue apps with the new composition API.