feat: add anonymous sign-ins

Author: xiaoluoboding

components.d.ts

@@ -7,19 +7,10 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    'Carbon:cafe': typeof import('~icons/carbon/cafe')['default']
-    'Carbon:logoTwitter': typeof import('~icons/carbon/logo-twitter')['default']
     Footer: typeof import('./src/components/Footer.vue')['default']
     Hero: typeof import('./src/components/Hero.vue')['default']
     IconMenu: typeof import('./src/components/IconMenu.vue')['default']
     IconPalette: typeof import('./src/components/IconPalette.vue')['default']
-    'Logos:nuxtIcon': typeof import('~icons/logos/nuxt-icon')['default']
-    'Logos:vue': typeof import('~icons/logos/vue')['default']
-    'Mdi:heart': typeof import('~icons/mdi/heart')['default']
-    'Ri:githubFill': typeof import('~icons/ri/github-fill')['default']
-    'Ri:moonLine': typeof import('~icons/ri/moon-line')['default']
-    'Ri:sunLine': typeof import('~icons/ri/sun-line')['default']
-    'Ri:translate2': typeof import('~icons/ri/translate2')['default']
     ToggleButton: typeof import('./src/components/ToggleButton.vue')['default']
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxtbase/auth-ui-vue",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "type": "module",
   "author": "xiaoluoboding <xiaoluoboding@gmail.com>",
   "scripts": {

packages/auth/AnonymousAuth.vue

@@ -0,0 +1,88 @@
+<template>
+  <form
+    :id="`auth-${authView}`"
+    @submit.prevent="handleSubmit"
+    autoComplete="on"
+    :style="{
+      width: '100%'
+    }"
+  >
+    <Container direction="vertical" gap="large" :appearance="appearance">
+      <Button
+        type="submit"
+        color="primary"
+        :loading="isLoading"
+        :appearance="appearance"
+      >
+        {{ isLoading ? labels?.loading_button_label : labels?.button_label }}
+      </Button>
+    </Container>
+
+    <Message v-if="message" :appearance="appearance">{{ message }}</Message>
+
+    <Message v-if="error" color="danger" :appearance="appearance">
+      {{ error }}
+    </Message>
+  </form>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import {
+  SignInAnonymouslyCredentials,
+  SupabaseClient
+} from '@supabase/supabase-js'
+import { RedirectTo } from '@supabase/auth-ui-shared'
+
+import {
+  AuthViewKey,
+  type Appearance,
+  type AuthViewInjection,
+  type AuthI18nVariables
+} from '../types'
+import { Button, Container, Message } from '../ui/index'
+import { injectStrict } from '../utils'
+import { useSupabaseUser } from './UserContextProvider'
+
+export interface AnonymousSignInProps {
+  appearance?: Appearance
+  supabaseClient: SupabaseClient
+  redirectTo?: RedirectTo
+  i18n?: AuthI18nVariables
+  anonymouslyCredentials?: SignInAnonymouslyCredentials
+}
+
+const props = withDefaults(defineProps<AnonymousSignInProps>(), {})
+
+const { supabaseUser } = useSupabaseUser(props.supabaseClient)
+
+const error = ref('')
+const message = ref('')
+const isLoading = ref(false)
+
+const { authView, setAuthView } = injectStrict<AuthViewInjection>(AuthViewKey)
+
+const labels = computed(
+  () => props.i18n?.[authView.value] as AuthI18nVariables['anonymous_sign_in']
+)
+
+const handleSubmit = async (e: Event) => {
+  // console.log(props)
+  error.value = ''
+  message.value = ''
+  isLoading.value = true
+  let signInError: Error | null = null
+
+  const { data, error: err } =
+    await props.supabaseClient.auth.signInAnonymously(
+      props.anonymouslyCredentials
+    )
+
+  signInError = err
+
+  if (signInError) {
+    error.value = signInError.message
+  }
+  isLoading.value = false
+}
+</script>

packages/auth/Auth.vue

@@ -61,23 +61,31 @@
       :otpType="otpType"
       :i18n="i18n"
     />
+    <AnonymousAuth
+      v-if="authView === 'anonymous_sign_in'"
+      :supabaseClient="supabaseClient"
+      :appearance="appearance"
+      :i18n="i18n"
+      :anonymouslyCredentials="anonymouslyCredentials"
+    />
   </template>
 </template>
 
 <script lang="ts" setup>
 import { provide, ref, watch, computed } from 'vue'
-import { I18nVariables, ViewType, en, merge } from '@supabase/auth-ui-shared'
+import { I18nVariables, en, merge } from '@supabase/auth-ui-shared'
 import { createStitches } from '@stitches/core'
 import cloneDeep from 'lodash.clonedeep'
 
-import { AuthProps, AuthViewKey } from '../types'
+import { AuthProps, AuthViewKey, AuthViewType } from '../types'
 import SocialAuthContainer from './SocialAuthContainer.vue'
 import EmailAuth from './EmailAuth.vue'
 import SocialAuth from './SocialAuth.vue'
 import MagicLink from './MagicLink.vue'
 import ForgottenPassword from './ForgottenPassword.vue'
 import UpdatePassword from './UpdatePassword.vue'
 import VerifyOtp from './VerifyOtp.vue'
+import AnonymousAuth from './AnonymousAuth.vue'
 
 const props = withDefaults(defineProps<AuthProps>(), {
   view: 'sign_in',
@@ -87,13 +95,14 @@ const props = withDefaults(defineProps<AuthProps>(), {
   showLinks: true,
   dark: false,
   theme: 'default',
-  otpType: 'email'
+  otpType: 'email',
+  anonymouslyCredentials: undefined
 })
 
 const emit = defineEmits(['update:view'])
 
-const authView = ref<ViewType>(props.view)
-const setAuthView = (newView: ViewType) => {
+const authView = ref<AuthViewType>(props.view)
+const setAuthView = (newView: AuthViewType) => {
   emit('update:view', newView)
   authView.value = newView
 }

packages/auth/EmailAuth.vue

@@ -103,9 +103,14 @@
 <script lang="ts" setup>
 import { ref, computed, watch } from 'vue'
 import { SupabaseClient } from '@supabase/supabase-js'
-import { I18nVariables, RedirectTo, VIEWS } from '@supabase/auth-ui-shared'
+import { RedirectTo, VIEWS } from '@supabase/auth-ui-shared'
 
-import { AuthViewKey, type Appearance, type AuthViewInjection } from '../types'
+import {
+  AuthViewKey,
+  type Appearance,
+  type AuthViewInjection,
+  type AuthI18nVariables
+} from '../types'
 import { Anchor, Button, Container, Input, Label, Message } from '../ui/index'
 import { injectStrict } from '../utils'
 
@@ -117,7 +122,7 @@ export interface EmailAuthProps {
   redirectTo?: RedirectTo
   magicLink?: boolean
   showLinks?: boolean
-  i18n?: I18nVariables
+  i18n?: AuthI18nVariables
   additionalData?: { [key: string]: any }
 }
 
@@ -132,7 +137,7 @@ const isLoading = ref(false)
 const { authView, setAuthView } = injectStrict<AuthViewInjection>(AuthViewKey)
 
 const labels = computed(
-  () => props.i18n?.[authView.value] as I18nVariables['sign_in' | 'sign_up']
+  () => props.i18n?.[authView.value] as AuthI18nVariables['sign_in' | 'sign_up']
 )
 const handleSubmit = async (e: Event) => {
   // console.log(props)

packages/auth/ForgottenPassword.vue

@@ -55,9 +55,14 @@
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
 import { SupabaseClient } from '@supabase/supabase-js'
-import { I18nVariables, RedirectTo, VIEWS } from '@supabase/auth-ui-shared'
+import { RedirectTo, VIEWS } from '@supabase/auth-ui-shared'
 
-import { AuthViewKey, type Appearance, type AuthViewInjection } from '../types'
+import {
+  AuthViewKey,
+  type Appearance,
+  type AuthViewInjection,
+  type AuthI18nVariables
+} from '../types'
 import { Anchor, Button, Container, Input, Label, Message } from '../ui/index'
 import { injectStrict } from '../utils'
 
@@ -66,7 +71,7 @@ export interface ForgottenPasswordProps {
   supabaseClient: SupabaseClient
   redirectTo?: RedirectTo
   showLinks?: boolean
-  i18n?: I18nVariables
+  i18n?: AuthI18nVariables
 }
 
 const props = withDefaults(defineProps<ForgottenPasswordProps>(), {})
@@ -79,7 +84,7 @@ const isLoading = ref(false)
 const { authView, setAuthView } = injectStrict<AuthViewInjection>(AuthViewKey)
 
 const labels = computed(
-  () => props.i18n?.[authView.value] as I18nVariables['forgotten_password']
+  () => props.i18n?.[authView.value] as AuthI18nVariables['forgotten_password']
 )
 
 const handleSubmit = async (e: Event) => {

packages/auth/MagicLink.vue

@@ -8,21 +8,23 @@
     }"
   >
     <Container direction="vertical" gap="large" :appearance="appearance">
-      <div>
-        <Label htmlFor="email" :appearance="appearance">
-          {{ labels?.email_input_label }}
-        </Label>
-        <Input
-          id="email"
-          type="email"
-          name="email"
-          autoComplete="email"
-          autofocus
-          :placeholder="labels?.email_input_placeholder"
-          :appearance="appearance"
-          v-model="email"
-        />
-      </div>
+      <Container direction="vertical" gap="large" :appearance="appearance">
+        <div>
+          <Label htmlFor="email" :appearance="appearance">
+            {{ labels?.email_input_label }}
+          </Label>
+          <Input
+            id="email"
+            type="email"
+            name="email"
+            autoComplete="email"
+            autofocus
+            :placeholder="labels?.email_input_placeholder"
+            :appearance="appearance"
+            v-model="email"
+          />
+        </div>
+      </Container>
 
       <Button
         type="submit"
@@ -55,9 +57,14 @@
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
 import { SupabaseClient } from '@supabase/supabase-js'
-import { I18nVariables, RedirectTo, VIEWS } from '@supabase/auth-ui-shared'
+import { RedirectTo, VIEWS } from '@supabase/auth-ui-shared'
 
-import { AuthViewKey, type Appearance, type AuthViewInjection } from '../types'
+import {
+  AuthViewKey,
+  type Appearance,
+  type AuthViewInjection,
+  type AuthI18nVariables
+} from '../types'
 import { Anchor, Button, Container, Input, Label, Message } from '../ui/index'
 import { injectStrict } from '../utils'
 import { useSupabaseUser } from './UserContextProvider'
@@ -67,7 +74,7 @@ export interface MagicLinkProps {
   supabaseClient: SupabaseClient
   redirectTo?: RedirectTo
   showLinks?: boolean
-  i18n?: I18nVariables
+  i18n?: AuthI18nVariables
 }
 
 const props = withDefaults(defineProps<MagicLinkProps>(), {})
@@ -82,7 +89,7 @@ const isLoading = ref(false)
 const { authView, setAuthView } = injectStrict<AuthViewInjection>(AuthViewKey)
 
 const labels = computed(
-  () => props.i18n?.[authView.value] as I18nVariables['magic_link']
+  () => props.i18n?.[authView.value] as AuthI18nVariables['magic_link']
 )
 
 const handleSubmit = async (e: Event) => {
@@ -93,11 +100,14 @@ const handleSubmit = async (e: Event) => {
   const isAnonymous = supabaseUser.value?.is_anonymous
   let signInError: Error | null = null
   if (isAnonymous) {
-    const { error: err } = await props.supabaseClient.auth.updateUser({
-      email: email.value 
-    }, {
-      emailRedirectTo: props.redirectTo
-    })
+    const { error: err } = await props.supabaseClient.auth.updateUser(
+      {
+        email: email.value
+      },
+      {
+        emailRedirectTo: props.redirectTo
+      }
+    )
     signInError = err
   } else {
     const { error: err } = await props.supabaseClient.auth.signInWithOtp({

packages/auth/SocialAuth.vue

@@ -38,13 +38,17 @@
 import { computed, ref } from 'vue'
 import { Provider, SupabaseClient } from '@supabase/supabase-js'
 import {
-  I18nVariables,
   ProviderScopes,
   SocialLayout,
   template
 } from '@supabase/auth-ui-shared'
 
-import { Appearance, AuthViewInjection, AuthViewKey } from '../types'
+import {
+  AuthViewKey,
+  type Appearance,
+  type AuthViewInjection,
+  type AuthI18nVariables
+} from '../types'
 import { Divider, Button, Container } from '@/ui'
 import { Icons } from '@/icons'
 import { injectStrict } from '../utils'
@@ -61,7 +65,7 @@ export interface SocialAuthProps {
   redirectTo?: RedirectTo
   onlyThirdPartyProviders?: boolean
   view?: 'sign_in' | 'sign_up' | 'magic_link'
-  i18n?: I18nVariables
+  i18n?: AuthI18nVariables
   appearance?: Appearance
 }
 
@@ -87,7 +91,8 @@ const currentView = computed(() => {
 })
 
 const labels = computed(
-  () => props.i18n?.[currentView.value] as I18nVariables['sign_in' | 'sign_up']
+  () =>
+    props.i18n?.[currentView.value] as AuthI18nVariables['sign_in' | 'sign_up']
 )
 
 const handleProviderSignIn = async (provider: Provider) => {
@@ -100,20 +105,21 @@ const handleProviderSignIn = async (provider: Provider) => {
     scopes: props.providerScopes?.[provider],
     queryParams: props.queryParams
   }
-  
+
   let signInError: Error | null = null
-  
+
   if (isAnonymous) {
     const { data, error: err } = await props.supabaseClient.auth.linkIdentity({
       provider,
       options
     })
     signInError = err
   } else {
-    const { data, error: err } = await props.supabaseClient.auth.signInWithOAuth({
-      provider,
-      options
-    })
+    const { data, error: err } =
+      await props.supabaseClient.auth.signInWithOAuth({
+        provider,
+        options
+      })
     signInError = err
   }