Registration & Email Confirmation

The registration system allows users to create an account and confirm it via email.

How it works

1. User registration

User fills the registration form with:

• Email
• Password
• Password confirmation

<form @submit.prevent="handleEmailLogin">
  <input v-model="loginForm.email" type="email" placeholder="Email" />
  <input v-model="loginForm.password" type="password" placeholder="Password" />
  <button type="submit">Sign Up</button>
</form>

2. Automatic email sending

When user submits the form, Supabase:

• Creates the user account
• Automatically sends a confirmation email
• User receives a validation link

3. Account confirmation

User clicks the link in the email and gets redirected to /auth/callback which:

• Verifies the confirmation token
• Activates the account
• Logs in the user
• Redirects to dashboard

Implementation code

Registration form

<script setup lang="ts">
const { signUp, loading } = useAuth()

const registerForm = reactive({
  email: '',
  password: '',
  confirmPassword: ''
})

const handleRegister = async () => {
  // Password verification
  if (registerForm.password !== registerForm.confirmPassword) {
    toast.error('Passwords do not match')
    return
  }

  // Registration
  const result = await signUp(registerForm.email, registerForm.password)
  
  if (result.success) {
    toast.success('Check your email to confirm your account')
  }
}
</script>

Callback page

<!-- pages/auth/callback.vue -->
<script setup lang="ts">
const route = useRoute()
const supabase = useSupabaseClient()

onMounted(async () => {
  const { data, error } = await supabase.auth.getSession()
  
  if (data.session) {
    // User confirmed and logged in
    const redirect = route.query.redirect || '/dashboard'
    await navigateTo(redirect)
  } else if (error) {
    // Confirmation error
    await navigateTo('/auth/login?error=confirmation_failed')
  }
})
</script>

Composable useAuth

export const useAuth = () => {
  const supabase = useSupabaseClient()
  const loading = ref(false)

  const signUp = async (email: string, password: string) => {
    loading.value = true
    
    try {
      const { data, error } = await supabase.auth.signUp({
        email,
        password,
        options: {
          emailRedirectTo: `${window.location.origin}/auth/callback`
        }
      })

      if (error) throw error

      return { success: true, user: data.user }
    } catch (error) {
      return { success: false, error: error.message }
    } finally {
      loading.value = false
    }
  }

  return { signUp, loading }
}

Supabase Configuration

In your Supabase dashboard:

1. Authentication > Settings

   • Enable "Enable email confirmations"
   • Set redirect URL: https://yoursite.com/auth/callback

2. Email Templates

   • Customize the confirmation template
   • Confirmation link points to your callback

Default email template

<h2>Confirm your registration</h2>
<p>Click this link to activate your account:</p>
<a href="{{ .ConfirmationURL }}">Confirm my account</a>

Error handling

Common errors:

• Email already used: Supabase returns an error
• Password too weak: Client and server-side validation
• Email not confirmed: User cannot log in
• Expired link: Confirmation link has limited lifetime

User states

// User registered but not confirmed
user.email_confirmed_at = null

// User confirmed
user.email_confirmed_at = "2024-01-15T10:30:00Z"

Customization

You can customize:

• Registration form design
• Email template in Supabase
• Redirect page after confirmation
• Error and success messages

That's it. The system works with Supabase which automatically handles email sending and token verification.