Make sure to install the dependencies:
# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
Then, make sure to update the .env file with your Supabase credentials, like described in the NuxtSupabase Module documentation.
This template is initially designed to work with a modified version of the Supabase User Management Starter that you can find in your Supabase dashboard under the "SQL Editor" tab and then in the Quick Start section.
Here the modified version of the User Management Starter which include a email column in the profiles table to be able to check the existence of a user in the database:
-- Create a table for public profiles
create table profiles (
id uuid references auth.users on delete cascade not null primary key,
updated_at timestamp with time zone,
email text unique,
username text unique,
full_name text,
avatar_url text,
website text,
constraint username_length check (char_length(username) >= 3)
);
-- Set up Row Level Security (RLS)
-- See https://supabase.com/docs/guides/auth/row-level-security for more details.
alter table profiles
enable row level security;
create policy "Public profiles are viewable by everyone." on profiles
for select using (true);
create policy "Users can insert their own profile." on profiles
for insert with check (auth.uid() = id);
create policy "Users can update own profile." on profiles
for update using (auth.uid() = id);
-- This trigger automatically creates a profile entry when a new user signs up via Supabase Auth.
-- See https://supabase.com/docs/guides/auth/managing-user-data#using-triggers for more details.
create function public.handle_new_user()
returns trigger as $$
begin
insert into public.profiles (id, username, email, full_name, avatar_url)
values (new.id, new.raw_user_meta_data->>'username', new.raw_user_meta_data->>'email',new.raw_user_meta_data->>'full_name', new.raw_user_meta_data->>'avatar_url');
return new;
end;
$$ language plpgsql security definer;
create trigger on_auth_user_created
after insert on auth.users
for each row execute procedure public.handle_new_user();
-- Set up Storage!
insert into storage.buckets (id, name)
values ('avatars', 'avatars');
-- Set up access controls for storage.
-- See https://supabase.com/docs/guides/storage#policy-examples for more details.
create policy "Avatar images are publicly accessible." on storage.objects
for select using (bucket_id = 'avatars');
create policy "Anyone can upload an avatar." on storage.objects
for insert with check (bucket_id = 'avatars');
Start the development server on http://localhost:3000
:
# npm
npm run dev
# pnpm
pnpm run dev
# yarn
yarn dev
Build the application for production:
# npm
npm run build
# pnpm
pnpm run build
# yarn
yarn build
Locally preview production build:
# npm
npm run preview
# pnpm
pnpm run preview
# yarn
yarn preview
Look at the Nuxt 3 documentation to learn more.