Nuxt•8mo ago

Nuxt Supabase Login is loading forever

I dont really know if this is a question for supabase or nuxt but i am using both. When i login my nuxt app should redirect via middleware when the user is authenticated. Additionally i have some router.push functions and a location.reload function to move the user over to the dashboard. but sometimes it just loads forever and does not redirect the user unless a manual page reload happens this is my login function, triggered by a button klick if the user has given his email and password

const signInEmail = async () => {
    try {
        loading.value = true
        const { error } = await client.auth.signInWithPassword({
            email: email.value,
            password: password.value,
        })
        toast.add({ title: 'Welcome', description: 'You have successfully signed in' })
        router.push(localePath("/app"))
        location.reload();
        loading.value = false
    }
    catch (error) {
        toast.add({ title: 'Error', description: error.message, color: 'red' })
    } finally {

    }
}

const signInEmail = async () => {
    try {
        loading.value = true
        const { error } = await client.auth.signInWithPassword({
            email: email.value,
            password: password.value,
        })
        toast.add({ title: 'Welcome', description: 'You have successfully signed in' })
        router.push(localePath("/app"))
        location.reload();
        loading.value = false
    }
    catch (error) {
        toast.add({ title: 'Error', description: error.message, color: 'red' })
    } finally {

    }
}

4 Replies

Patrity•8mo ago

hey @RAVEN! You shouldn't need to reload your window like you're doing. My supabase impl looks fairly similar with a couple of differences. You can simply router.push with the string of the path, but this is an async function which is probably why nothing is happening for you right now.

async function signIn() {
    loading.value = true
    const { data, error } = await supabase.auth.signInWithPassword({
        email: email.value,
        password: password.value
    })
    if (error) {
        toastStore.addToast(error.message, 'error')
        errorMsg.value = error.message
    } else await router.push('/dashboard')

    loading.value = false
}

async function signIn() {
    loading.value = true
    const { data, error } = await supabase.auth.signInWithPassword({
        email: email.value,
        password: password.value
    })
    if (error) {
        toastStore.addToast(error.message, 'error')
        errorMsg.value = error.message
    } else await router.push('/dashboard')

    loading.value = false
}

RAVENOP•8mo ago

Oh okay, i did not know that router push is async. It also does not throw any errors. I will try that and tell you if it solved my problem ☺️

Patrity•8mo ago

according to the docs, navigateTo is actually the preferred method, and it is also async: https://nuxt.com/docs/api/utils/navigate-to

RAVENOP•8mo ago

Okay thank you

Gaming

Programming

Nuxt Supabase Login is loading forever