feat: make the auth view reactivity

Author: xiaoluoboding

README.md

@@ -211,6 +211,27 @@ The Auth component is currently shipped with the following views:
 - [Update password](https://supabase.com/docs/guides/auth/auth-password-reset#update-password)
 - [Forgotten password](https://supabase.com/docs/guides/auth/auth-password-reset#sending-password-reset-email)
 
+```html
+<template>
+  ...
+  <Auth
+    :supabaseClient="supabaseClient"
+    :providers="['google']"
+    v-model:view="authView"
+    :redirectTo="redirectTo"
+  />
+  ...
+</tempalte>
+
+<script setup lang="ts">
+const authView = ref('sign_in')
+
+const redirectTo = computed(() => {
+  return authView === 'forgotten_password' ? FORGOTTEN_PASSWORD_URL : REDIRECT_TO_URL
+})
+</script>
+```
+
 We are planning on adding more views in the future. Follow along on this repo.
 
 ## Customization

packages/auth/Auth.vue

@@ -90,8 +90,13 @@ const props = withDefaults(defineProps<AuthProps>(), {
   otpType: 'email'
 })
 
+const emit = defineEmits(['update:view'])
+
 const authView = ref<ViewType>(props.view)
-const setAuthView = (newView: ViewType) => (authView.value = newView)
+const setAuthView = (newView: ViewType) => {
+  emit('update:view', newView)
+  authView.value = newView
+}
 
 provide(AuthViewKey, {
   authView,

packages/auth/SocialAuth.vue

@@ -18,9 +18,12 @@
             </template>
             <template v-if="verticalSocialLayout">
               {{
-                template(labels?.social_provider_text?.replace('_oidc', '') as string, {
-                  provider: capitalize(provider.replace('_oidc', ''))
-                })
+                template(
+                  labels?.social_provider_text?.replace('_oidc', '') as string,
+                  {
+                    provider: capitalize(provider.replace('_oidc', ''))
+                  }
+                )
               }}
             </template>
           </Button>
@@ -87,14 +90,15 @@ const labels = computed(
 const handleProviderSignIn = async (provider: Provider) => {
   error.value = ''
   isLoading.value = true
-  const { error: err } = await props.supabaseClient.auth.signInWithOAuth({
+  const { data, error: err } = await props.supabaseClient.auth.signInWithOAuth({
     provider,
     options: {
       redirectTo: props.redirectTo,
       scopes: props.providerScopes?.[provider],
       queryParams: props.queryParams
     }
   })
+  // console.log(data)
   if (err) error.value = err.message
   isLoading.value = false
 }

src/App.vue

@@ -57,7 +57,7 @@
                   }
                 }"
                 :supabaseClient="supabaseClient"
-                :view="view.id"
+                v-model:view="view"
                 :providers="['github', 'google', 'twitter']"
                 :socialLayout="socialLayout"
                 :theme="theme"
@@ -154,11 +154,10 @@
                       v-for="v in views"
                       :key="v.id"
                       :value="v.id"
-                      @click.prevent="view = v"
+                      @click.prevent="view = v.id"
                       class="text-white border-0 py-2 px-6 focus:outline-none rounded text-sm"
                       :style="{
-                        background:
-                          view.id === v.id ? brandColor : backgroundColor
+                        background: view === v.id ? brandColor : backgroundColor
                       }"
                     >
                       {{ v.title }}
@@ -194,6 +193,11 @@ import UserContextProvider, {
 const supabaseClient = createClient(
   import.meta.env.VITE_SUPABASE_URL,
   import.meta.env.VITE_SUPABASE_ANON_KEY
+  // {
+  //   auth: {
+  //     debug: true
+  //   }
+  // }
 )
 
 useSEOHeader()
@@ -231,7 +235,7 @@ const views: { id: ViewType; title: string }[] = [
 const brandColor = ref(colors[0])
 const borderRadius = ref(radii[0])
 const socialLayout = ref(socialAlignments[0])
-const view = ref(views[0])
+const view = ref(views[0].id)
 
 const backgroundColor = computed(() => {
   const opacity = isDark.value ? '.2' : '.48'