Merge pull request #20 from CyberCowboy404/main

adds anonymous user support

Author: xiaoluoboding

README.md

@@ -36,6 +36,7 @@ Customizable authentication UI component with custom themes and extensible style
     - [Social Providers](#social-providers)
     - [Options](#options)
     - [Supported Views](#supported-views)
+    - [Anonymous User](#anonymous-user)
   - [Customization](#customization)
     - [Predefined themes](#predefined-themes)
     - [Switch theme variations](#switch-theme-variations)
@@ -229,9 +230,22 @@ const redirectTo = computed(() => {
   return authView.value === 'forgotten_password' ? FORGOTTEN_PASSWORD_URL : REDIRECT_TO_URL
 })
 </script>
+
+```
+### Anonymous User
+
+The Auth component is currently support [Anonymous user login](https://supabase.com/docs/guides/auth/auth-anonymous#sign-in-anonymously).
+For this you need to create an anonymous user 
+
+```js
+const { data, error } = await supabase.auth.signInAnonymously()
 ```
 
-We are planning on adding more views in the future. Follow along on this repo.
+[Enable manual linking](https://supabase.com/dashboard/project/_/settings/auth) in supabase
+
+Currently works for magic link and social login.
+If you use password login, you need user to update password after he 
+
 
 ## Customization
 

package.json

@@ -44,14 +44,14 @@
   },
   "peerDependencies": {
     "@supabase/auth-ui-shared": "^0.1.8",
-    "@supabase/supabase-js": "^2.38.5"
+    "@supabase/supabase-js": "^2.42.7"
   },
   "devDependencies": {
     "@iconify/json": "^2.1.104",
     "@intlify/unplugin-vue-i18n": "^0.12.2",
     "@stitches/core": "^1.2.8",
     "@supabase/auth-ui-shared": "^0.1.8",
-    "@supabase/supabase-js": "^2.38.5",
+    "@supabase/supabase-js": "^2.42.7",
     "@types/lodash.clonedeep": "^4.5.7",
     "@types/node": "^18.7.14",
     "@unocss/reset": "^0.45.18",

packages/auth/MagicLink.vue

@@ -60,6 +60,7 @@ import { I18nVariables, RedirectTo, VIEWS } from '@supabase/auth-ui-shared'
 import { AuthViewKey, type Appearance, type AuthViewInjection } from '../types'
 import { Anchor, Button, Container, Input, Label, Message } from '../ui/index'
 import { injectStrict } from '../utils'
+import { useSupabaseUser } from './UserContextProvider'
 
 export interface MagicLinkProps {
   appearance?: Appearance
@@ -71,6 +72,8 @@ export interface MagicLinkProps {
 
 const props = withDefaults(defineProps<MagicLinkProps>(), {})
 
+const { supabaseUser } = useSupabaseUser(props.supabaseClient)
+
 const email = ref('')
 const error = ref('')
 const message = ref('')
@@ -87,10 +90,23 @@ const handleSubmit = async (e: Event) => {
   error.value = ''
   message.value = ''
   isLoading.value = true
-  const { error: signInError } = await props.supabaseClient.auth.signInWithOtp({
-    email: email.value,
-    options: { emailRedirectTo: props.redirectTo }
-  })
+  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
+    })
+    signInError = err
+  } else {
+    const { error: err } = await props.supabaseClient.auth.signInWithOtp({
+      email: email.value,
+      options: { emailRedirectTo: props.redirectTo }
+    })
+    signInError = err
+  }
+
   if (signInError) {
     error.value = signInError.message
   } else {

packages/auth/SocialAuth.vue

@@ -48,6 +48,7 @@ import { Appearance, AuthViewInjection, AuthViewKey } from '../types'
 import { Divider, Button, Container } from '@/ui'
 import { Icons } from '@/icons'
 import { injectStrict } from '../utils'
+import { useSupabaseUser } from './UserContextProvider'
 
 type RedirectTo = undefined | string
 
@@ -71,6 +72,8 @@ const props = withDefaults(defineProps<SocialAuthProps>(), {
   view: 'sign_in'
 })
 
+const { supabaseUser } = useSupabaseUser(props.supabaseClient)
+
 const error = ref('')
 const isLoading = ref(false)
 const { authView } = injectStrict<AuthViewInjection>(AuthViewKey)
@@ -90,16 +93,32 @@ const labels = computed(
 const handleProviderSignIn = async (provider: Provider) => {
   error.value = ''
   isLoading.value = true
-  const { data, error: err } = await props.supabaseClient.auth.signInWithOAuth({
-    provider,
-    options: {
-      redirectTo: props.redirectTo,
-      scopes: props.providerScopes?.[provider],
-      queryParams: props.queryParams
-    }
-  })
+
+  const isAnonymous = supabaseUser.value?.is_anonymous
+  const options = {
+    redirectTo: props.redirectTo,
+    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
+    })
+    signInError = err
+  }
+
   // console.log(data)
-  if (err) error.value = err.message
+  if (signInError) error.value = signInError.message
   isLoading.value = false
 }