nuxtbase/auth-ui-vue

🔒 Pre-built Auth UI base on Supabase for Vue

auth-ui-vue's Issues

Nuxt3：Problems with type errors, server-side rendering

@xiaoluoboding Hi, thanks for your project. It's really helpful. I have encountered two problems in the process of using, I am not sure whether it is configuration problems, please help me to look at it, thank you.

One question is this：

what should I do？

the other is about server-side rendering

When I start the project and go to the login page, I see the following warning：

[Vue warn]: Hydration children mismatch in <div>: server rendered element contains fewer(more) child nodes than client vdom. at <SocialAuthContainer key=0 direction="horizontal" gap="small" ... >

and when the page refreshes, a briefly unrendered dom appears.

So do I turn on client-only rendering? What are the best practices?

Others

• auth-ui-vue latest
• nuxt 3.6.5

Thank you again for your support!

Anonymous user

I've enabled anonymous sign_in, but when I do sign_in/sign_up via this plugin new user created.
Is this supports anonymous users?

Enhancement request: confirm your password Input and show password icon

I want to propose the addition of these two features inside the UPDATE_PASSWORD component:

• Confirm Password Input: Add a second password input to reduce authentication issues due to password typos.
• Show Password Icon: Add an eye icon to allow users to toggle password visibility and verify their entered password

default email value

In some workflow we get the user email before the login page (in a checkout page),
how to feed the email value in the <auth> component ?

Really long load time for the CSS

What am I doing wrong that it seems to take a very long time for the CSS to load? I see the fields and text, but the default formatting seems to take a full 10+ seconds to prepare itself.

I thought I had an issue on an older project where I implemented it, but I just created a fresh new Nuxt project and this was the first thing I tried and I'm still having the same issue where it seems to be delayed a great deal compared to all of the other styling on the site which is instant.

My code:

<template>
    <Auth :supabaseClient="supabaseClient" :appearance="{
        theme: ThemeSupa,
    }"
    :providers="[]" />
</template>

<script setup lang="ts">
import { ThemeSupa } from "@supabase/auth-ui-shared";
import { Auth } from "@nuxtbase/auth-ui-vue";

const supabaseClient = useSupabaseClient();
</script>

Nuxt.js: Hydration completed but contains mismatches

If i set the theme prop, it will throw Hydration completed but contains mismatches.

event emitter of sign up button click

I want to show an alert on Sign up button click, i don't see any event emitter

Ability to Choose Between Microsoft and Azure Logo for OAuth Buttons

Issue:

The current setup only allows the Azure name and logo on OAuth buttons. It would be useful to have an option to select either the Azure logo or Microsoft for these buttons, providing better customization.

Additional Context:

As a temporary workaround, I am programmatically replacing the HTML of the button when the component is mounted. However, a built-in option for logo selection would provide a cleaner and more straightforward solution.

Auth UI Vue Preview Video

preview.mp4

Development

Is there a change to redirect everything to locahost for development?

Best regards,

Benedikt

changing color with variable messageText doesn't work

When attempting to specify a color for the notification message using the variable messageText in the Auth component, the custom color does not apply, unlike messageTextDanger, which works as expected.

    <Auth
      :appearance="{
        theme: ThemeSupa,
        variables: {
          default: {
            colors: {
              messageText: 'green'
            },
          },
        },
      }"
      :providers="['google', 'azure']"
    />

The new auth provider does not show logo and wrong title

No LinkedIn logo is showing up and the button text is "Sign in with Linkedin_oidc".

Usage:

<Auth :supabaseClient="supabaseClient" :appearance="{ theme: ThemeSupa }" theme="dark" :providers="['linkedin_oidc']"/>

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'auth')

store/auth.ts

import { createClient } from '@supabase/supabase-js'

export const authStore = defineStore({
  id: 'main',
  state: () => ({
    supabaseClient: null,
  }),
  actions: {
    initialiseSupabase() {
      const supabaseUrl = process.env.SUPABASE_URL
      const supabaseKey = process.env.SUPABASE_KEY
      this.supabaseClient = createClient(supabaseUrl, supabaseKey)
    },
  },
})

Login.vue

<script setup lang="ts">
// Import predefined theme
import { ThemeSupa } from '@supabase/auth-ui-shared'
import { Auth } from '@nuxtbase/auth-ui-vue'
import { authStore } from '@/stores/auth'

const themeColor = useColorMode()

const store = authStore()
</script>

<template>
  <Auth
    :supabase-client="store.supabaseClient"
    :providers="[]"
    :appearance="{
      theme: ThemeSupa,
    }"
    :theme="themeColor.value"
    
  />
</template>

I have no idear why this should not work. But I get

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'auth')
    at f (@nuxtbase_auth-ui-vue.js?v=e511d63d:1418:38)
    at fn._withMods.fn._withMods (chunk-7SWADUAP.js?v=e511d63d:10764:12)
    at callWithErrorHandling (chunk-7SWADUAP.js?v=e511d63d:1593:18)
    at callWithAsyncErrorHandling (chunk-7SWADUAP.js?v=e511d63d:1601:17)
    at HTMLFormElement.invoker (chunk-7SWADUAP.js?v=e511d63d:9974:5)

In supabase I get a 200 request.

Signup button stuck in a loading state when supplying incorrect input

Password reset only works as a magic link

According to the Supabase documentation on password reset, a redirect URL must be provided for users to be directed to the updated password page after clicking the reset link. However, there's a limitation in the Auth component initialization, as it only accepts a redirecting URL reserved for auth callbacks.

I think it can be solved by adding a new prop passwordResetRedirectURL for the Auth component that will be supplied as a redirect URL for resetting the password.

https://supabase.com/docs/guides/auth/auth-password-reset

• Send email for password reset using .resetPasswordForEmail while providing a redirectTo parameter
• Email link will work as a magic link and log the user in then take them to the url specified in the redirectTo parameter
• Create form to update the password and call the .updateUser method with the new password