How to implement email verification in Supabase?

 

Step 1: Set Up a Supabase Project

 

• Visit Supabase.io and click on the "Start your project" button to create a new account or log in if you already have an account.
• Once logged in, create a new project by providing the necessary details like project name and organization.
• After the project is created, you will be directed to the project dashboard.

 

Step 2: Configure Email Authentication

 

• Navigate to the "Authentication" section from the side menu.
• In the Authentication settings, ensure that "Email" is set as a provider.
• Enable email confirmation to ensure verification is required for users. This setting is typically found under the "Configuration" or "Settings" tab within the authentication panel.
• Make note of the SMTP settings if needed for custom email configurations.

 

Step 3: Set Up SMTP for Sending Emails

 

• Configure SMTP settings to send emails from your custom domain. This involves entering SMTP host, port, username, and password of your email service provider.
• If using default Supabase email settings, confirm they are working by checking for any default test email options in the dashboard.

 

Step 4: Build Your Frontend Application

 

• In your frontend application code, integrate Supabase using the Supabase JavaScript client.

<script type="module">
  import { createClient } from '@supabase/supabase-js'
  
  const supabaseUrl = 'your-supabase-url'
  const supabaseKey = 'your-anon-key'
  const supabase = createClient(supabaseUrl, supabaseKey)
</script>

 

Step 5: Implement Email Registration

 

• Implement a sign-up form for users to register with their email and password.

<form id="signup-form">
  <input type="email" id="email" placeholder="Email" required>
  <input type="password" id="password" placeholder="Password" required>
  <button type="submit">Sign Up</button>
</form>

<script>
  document.getElementById('signup-form').addEventListener('submit', async (event) => {
    event.preventDefault()
    const email = document.getElementById('email').value
    const password = document.getElementById('password').value
    const { user, error } = await supabase.auth.signUp({ email, password })
    if (error) { console.error('Error signing up:', error) }
  })
</script>

 

Step 6: Test the Email Verification

 

• After implementing the code, test the registration and email verification process.
• Sign up with an email address, then check the inbox for a verification email.
• Confirm registration by following the link in the email, which should activate your account as verified.

 

Step 7: Validate Email Verification in Supabase

 

• Return to the Supabase dashboard and navigate to the "Auth" section to manage users.
• Ensure the user's status changes from "Unverified" to "Verified" upon successfully following the email verification link.

 

Step 8: Handle Email Verification Status in Your Application

 

• Use Supabase authentication state to reflect user status in the UI (e.g., show prompts for email verification if the email is not verified).

const session = supabase.auth.session()

if (session && !session.user.email_confirmed_at) {
  console.log('Email not verified yet.')
} else {
  console.log('Email verified.')
}

 

This step-by-step guide should help you implement email verification for user authentication using Supabase. Make sure to consult Supabase's official documentation if more in-depth customization is required.