├── .gitignore
├── README.md
├── app.vue
├── assets
└── main.css
├── components
├── Account.vue
├── Auth.vue
└── Avatar.vue
├── nuxt.config.ts
├── package-lock.json
├── package.json
└── tsconfig.json
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log*
3 | .nuxt
4 | .nitro
5 | .cache
6 | .output
7 | .env
8 | dist
9 |
10 | # vscode
11 | .history
12 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Supabase Nuxt User Management
2 |
3 | > **Warning**
4 | > All example apps have been consolidated to Supabase's main repo. You can find the nuxt3 quick start guide [here](https://github.com/supabase/supabase/tree/master/examples/user-management/nuxt3-user-management).
5 |
6 | This repo is a quick sample of how you can get started building apps using Nuxt 3 and Supabase. You can find a step by step guide of how to build out this app in the [Quickstart: Nuxt guide](https://supabase.io/docs/guides/with-nuxt-3).
7 |
8 | This repo will demonstrate how to:
9 | - sign users in with Supabase Auth using [magic link](https://supabase.io/docs/reference/dart/auth-signin#sign-in-with-magic-link)
10 | - store and retrieve data with [Supabase database](https://supabase.io/docs/guides/database)
11 | - store image files in [Supabase storage](https://supabase.io/docs/guides/storage)
12 |
13 | ## Getting Started
14 |
15 | Before running this app, you need to create a Supabase project and copy [your credentials](https://supabase.io/docs/guides/with-nuxt-3#get-the-api-keys) to `.env`.
16 |
17 | Run the following command to launch it on `localhost:3000`
18 | ```bash
19 | npm run dev
20 | ```
21 |
22 | ## Database Schema
23 |
24 | ```sql
25 | -- Create a table for public "profiles"
26 | create table profiles (
27 | id uuid references auth.users not null,
28 | updated_at timestamp with time zone,
29 | username text unique,
30 | avatar_url text,
31 | website text,
32 |
33 | primary key (id),
34 | unique(username),
35 | constraint username_length check (char_length(username) >= 3)
36 | );
37 |
38 | alter table profiles enable row level security;
39 |
40 | create policy "Public profiles are viewable by everyone."
41 | on profiles for select
42 | using ( true );
43 |
44 | create policy "Users can insert their own profile."
45 | on profiles for insert
46 | with check ( auth.uid() = id );
47 |
48 | create policy "Users can update own profile."
49 | on profiles for update
50 | using ( auth.uid() = id );
51 |
52 | -- Set up Realtime!
53 | begin;
54 | drop publication if exists supabase_realtime;
55 | create publication supabase_realtime;
56 | commit;
57 | alter publication supabase_realtime add table profiles;
58 |
59 | -- Set up Storage!
60 | insert into storage.buckets (id, name)
61 | values ('avatars', 'avatars');
62 |
63 | create policy "Avatar images are publicly accessible."
64 | on storage.objects for select
65 | using ( bucket_id = 'avatars' );
66 |
67 | create policy "Anyone can upload an avatar."
68 | on storage.objects for insert
69 | with check ( bucket_id = 'avatars' );
70 | ```
71 |
--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
1 |
2 |