Build a User Management App with Vue 3

1
import { createClient } from '@supabase/supabase-js'
2
3
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
4
const supabasePublishableKey = import.meta.env.VITE_SUPABASE_KEY
5
6
export const supabase = createClient(supabaseUrl, supabasePublishableKey)

1
<script setup>
2
import { ref } from 'vue'
3
import { supabase } from '../supabase'
4
5
const loading = ref(false)
6
const email = ref('')
7
8
const handleLogin = async () => {
9
    try {
10
        loading.value = true
11
        const { error } = await supabase.auth.signInWithOtp({ email: email.value })
12
        if (error) throw error
13
        alert('Check your email for the login link!')
14
    } catch (error) {
15
        if (error instanceof Error) {
16
            alert(error.message)
17
        }
18
    } finally {
19
        loading.value = false
20
    }
21
}
22
</script>
23
24
<template>
25
    <form class="row flex-center flex" @submit.prevent="handleLogin">
26
        <div class="col-6 form-widget">
27
            <h1 class="header">Supabase + Vue 3</h1>
28
            <p class="description">Sign in via magic link with your email below</p>
29
            <div>
30
                <input class="inputField" type="email" placeholder="Your email" v-model="email" />
31
            </div>
32
            <div>
33
                <input type="submit" class="button block" :value="loading ? 'Loading' : 'Send magic link'"
34
                    :disabled="loading" />
35
            </div>
36
        </div>
37
    </form>
38
</template>

1
<script setup>
2
import { supabase } from '../supabase'
3
import { onMounted, ref, toRefs } from 'vue'
4
import Avatar from './Avatar.vue';
5
6
const props = defineProps(['claims'])
7
const { claims } = toRefs(props)
8
9
const loading = ref(true)
10
const username = ref('')
11
const website = ref('')
12
const avatar_url = ref('')
13
14
onMounted(() => {
15
    getProfile()
16
})
17
18
async function getProfile() {
19
    try {
20
        loading.value = true
21
        let { data, error, status } = await supabase
22
            .from('profiles')
23
            .select(`username, website, avatar_url`)
24
            .eq('id', claims.value.sub)
25
            .single()
26
27
        if (error && status !== 406) throw error
28
29
        if (data) {
30
            username.value = data.username
31
            website.value = data.website
32
            avatar_url.value = data.avatar_url
33
        }
34
    } catch (error) {
35
        alert(error.message)
36
    } finally {
37
        loading.value = false
38
    }
39
}
40
41
async function updateProfile() {
42
    try {
43
        loading.value = true
44
        const updates = {
45
            id: claims.value.sub,
46
            username: username.value,
47
            website: website.value,
48
            avatar_url: avatar_url.value,
49
            updated_at: new Date(),
50
        }
51
52
        let { error } = await supabase.from('profiles').upsert(updates)
53
54
        if (error) throw error
55
    } catch (error) {
56
        alert(error.message)
57
    } finally {
58
        loading.value = false
59
    }
60
}
61
62
async function signOut() {
63
    try {
64
        loading.value = true
65
        let { error } = await supabase.auth.signOut()
66
        if (error) throw error
67
    } catch (error) {
68
        alert(error.message)
69
    } finally {
70
        loading.value = false
71
    }
72
}
73
</script>
74
75
<template>
76
    <form class="form-widget" @submit.prevent="updateProfile">
77
        <Avatar v-model:path="avatar_url" @upload="updateProfile" size="10" />
78
        <div>
79
            <label for="email">Email</label>
80
            <input id="email" type="text" :value="claims.email" disabled />
81
        </div>
82
        <div>
83
            <label for="username">Name</label>
84
            <input id="username" type="text" v-model="username" />
85
        </div>
86
        <div>
87
            <label for="website">Website</label>
88
            <input id="website" type="url" v-model="website" />
89
        </div>
90
91
        <div>
92
            <input type="submit" class="button primary block" :value="loading ? 'Loading ...' : 'Update'"
93
                :disabled="loading" />
94
        </div>
95
96
        <div>
97
            <button class="button block" @click="signOut" :disabled="loading">
98
                Sign Out
99
            </button>
100
        </div>
101
    </form>
102
</template>

1
<script setup>
2
import { onMounted, ref } from 'vue'
3
import Account from './components/Account.vue'
4
import Auth from './components/Auth.vue'
5
import { supabase } from './supabase'
6
7
const claims = ref()
8
9
onMounted(() => {
10
  supabase.auth.getClaims().then(({ data }) => {
11
    claims.value = data.claims
12
  })
13
14
  supabase.auth.onAuthStateChange(async () => {
15
    const { data } = await supabase.auth.getClaims()
16
    claims.value = data.claims
17
  })
18
})
19
</script>
20
21
<template>
22
  <div class="container" style="padding: 50px 0 100px 0">
23
    <Account v-if="claims" :claims="claims" />
24
    <Auth v-else />
25
  </div>
26
</template>

1
<script setup>
2
import { ref, toRefs, watch } from 'vue'
3
import { supabase } from '../supabase'
4
5
const prop = defineProps(['path', 'size'])
6
const { path, size } = toRefs(prop)
7
8
const emit = defineEmits(['upload', 'update:path'])
9
const uploading = ref(false)
10
const src = ref('')
11
const files = ref()
12
13
const downloadImage = async () => {
14
    try {
15
        const { data, error } = await supabase.storage
16
            .from('avatars')
17
            .download(path.value)
18
        if (error) throw error
19
        src.value = URL.createObjectURL(data)
20
    } catch (error) {
21
        console.error('Error downloading image: ', error.message)
22
    }
23
}
24
25
const uploadAvatar = async (evt) => {
26
    files.value = evt.target.files
27
    try {
28
        uploading.value = true
29
        if (!files.value || files.value.length === 0) {
30
            throw new Error('You must select an image to upload.')
31
        }
32
33
        const file = files.value[0]
34
        const fileExt = file.name.split('.').pop()
35
        const filePath = `${Math.random()}.${fileExt}`
36
37
        let { error: uploadError } = await supabase.storage
38
            .from('avatars')
39
            .upload(filePath, file)
40
41
        if (uploadError) throw uploadError
42
        emit('update:path', filePath)
43
        emit('upload')
44
    } catch (error) {
45
        alert(error.message)
46
    } finally {
47
        uploading.value = false
48
    }
49
}
50
51
watch(path, () => {
52
    if (path.value) downloadImage()
53
})
54
</script>
55
56
<template>
57
    <div>
58
        <img v-if="src" :src="src" alt="Avatar" class="avatar image"
59
            :style="{ height: size + 'em', width: size + 'em' }" />
60
        <div v-else class="avatar no-image" :style="{ height: size + 'em', width: size + 'em' }" />
61
62
        <div :style="{ width: size + 'em' }">
63
            <label class="button primary block" for="single">
64
                {{ uploading ? "Uploading ..." : "Upload" }}
65
            </label>
66
            <input style="visibility: hidden; position: absolute" type="file" id="single" accept="image/*"
67
                @change="uploadAvatar" :disabled="uploading" />
68
        </div>
69
    </div>
70
</template>