Nuxt Auth Supabase Template

This project is a basic Nuxt.js app for user authentication. It uses Prime Vue, Tailwind, and Supabase for a simple login system with roles, secure data storage, and dynamic theming based on the system's light or dark mode. The app is a practical starting point for anyone exploring Nuxt.js or needing a straightforward authentication setup.

Download

This is a simple login app created with Nuxt.js, Prime Vue, Tailwind, and Supabase. It serves as a template or guide for building a minimal authentication system with server-side rendering (SSR).

Features

User authentication with regular and admin roles.
Server and client route protection.
Supabase integration for user data storage.
Token verification for email confirmation upon sign-up.
Dynamic theming based on the system theme (light/dark).

Setup

Clone the repository:

git clone https://github.com/prxncxss03/nuxt-auth-supabase-template.git

Install dependencies:
```
  npm install
```

Set up environment variables:

  SUPABASE_URL=<URL>
  SUPABASE_KEY=<anon key>
  BASE_URL=http://localhost:3000

Run the app:
```
   npm run dev
```
Visit http://localhost:3000 in your browser to see the app in action.

Supabase Tables

Users Table

create table public.users (
  id bigint generated always as identity,
  user_id uuid not null,
  user_type text null,
  created_at timestamp with time zone null default (now() at time zone 'utc'::text),
  name text not null default ''::text,
  constraint users_pkey primary key (id),
  constraint users_user_id_fkey foreign key (user_id) references auth.users (id),
  constraint users_name_check check ((length(name) < 300)),
  constraint users_user_type_check check (
    (
      user_type = any (array['regular'::text, 'admin'::text])
    )
  )
) tablespace pg_default;

Sessions Table

Just stores their data when logging in.

create table public.sessions (
  user_id uuid not null,
  created_at timestamp with time zone not null default (now() at time zone 'utc'::text),
  id bigint generated by default as identity,
  constraint sessions_pkey primary key (id),
  constraint sessions_id_key unique (id),
  constraint sessions_user_id_fkey foreign key (user_id) references auth.users (id) on update cascade on delete cascade
) tablespace pg_default;

When it comes to queries, Supabase AI is incredibly helpful. You can simply type in what you need.

Usage

Regular users: After login, a greeting and a logout button are displayed.
Admin users: A table shows user IDs and the number of logins.
Email Confirmation: Clicking the confirmation email redirects to a confirmation page.
Theme: The app dynamically changes based on the system theme.

License

This project is licensed under the MIT License.

Notes

This app was developed as an assignment for an upcoming OJT. It's a great starting point for building more complex applications with Nuxt.js and Supabase.

Feel free to customize and extend the app according to your needs!

Temporary Demo

Screencast from Friday, 09 February, 2024 06:21:59 AM PST.webm

Top categories