How to allow sign in only with specific domains in Supabase?

 

Step 1: Set Up a Supabase Project

 

• Navigate to the Supabase website and sign in or create an account.

• Once logged in, create a new project. Follow the necessary setup steps, such as selecting the server region and entering a name for your project.

 

Step 2: Configure Authentication

 

• In your Supabase project dashboard, navigate to the “Authentication” tab on the left sidebar.

• Click on “Settings” and then on the “Auth” tab.

 

Step 3: Enable Email Domain Restriction

 

• In the Email Auth section, locate the “Restrict sign-ups by email” option.

• Enter the allowed email domains in the provided field. Separate multiple domains with commas (e.g., example.com, company.org).

• Save your changes by clicking the “Save” button.

 

Step 4: Test the Email Domain Restriction

 

• Log out of the Supabase dashboard and attempt to sign up with an email address from one of the allowed domains to verify it works.

• Try signing up with an email address from a non-allowed domain to ensure the restriction is functioning.

 

Step 5: Implement Client-Side Email Sign-Up

 

• Use Supabase Client Libraries in your application. First, install the Supabase client for your environment. For example, using npm:

npm install @supabase/supabase-js

• Initialize the Supabase client in your application using your project-specific URL and public API key, which can be found in the Supabase dashboard under the “Settings” > “API” menu.

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'https://xyzcompany.supabase.co'
const supabaseAnonKey = 'your-public-anon-key'

const supabase = createClient(supabaseUrl, supabaseAnonKey)

• Set up the client-side sign-up functionality to handle user registration:

async function signUpWithEmail(email, password) {
  const { user, session, error } = await supabase.auth.signUp({
    email: email,
    password: password,
  })

  if (error) {
    console.error('Error signing up:', error.message)
  } else {
    console.log('User signed up:', user)
  }
}

 

Step 6: Handle Sign-Up Confirmation and Email Verification

 

• Supabase automatically sends a confirmation email to new users. Ensure to test and verify that the confirmation flow works as expected.

• Optionally, customize the email templates used by Supabase from the “Settings” > “Email Templates” section in your dashboard.

 

Step 7: Monitor and Adjust Domain Restrictions (Optional)

 

• Monitor the sign-up traffic to ensure only users from the allowed domains are signing up.

• Modify the allowed domains list as needed, following the procedure in Step 3.

 

This step-by-step guide should help you effectively restrict sign-ins to specific domains using Supabase, ensuring better control over who can access your application based on their email domain.