Login With Email

Overview

Setting up Email logins for your Supabase application.

• Add Email authenticator to your Supabase Project
• Add the login code to your application - JavaScript | Dart

Configure email settings

• Go to your Supabase Project Dashboard
• In the left sidebar, click the Authentication icon (near the top)
• Click Settings from the list to go to the Authentication Settings page
• Enter the final (hosted) URL of your app under Site URL
• Under Email Auth turn Enable Email Signup to ON
• Click Save

Self hosting

For self-hosting, you can update your project configuration using the files and environment variables provided. See the self-hosting docs for details.

Add login code to your client app

Add logins using our client libraries:

• JavaScript
• Dart

JavaScript

const { user, error } = await supabase.auth.signIn({
  email: 'example@email.com',
  password: 'example-password',
})

Dart

final res = await supabase.auth.signIn(
  email: 'example@email.com',
  password: 'example-password'
);

final user = res.data?.user;
final error = res.error;

Add this function which you can call from a button, link, or UI element.

JavaScript

async function signInWithEmail() {
  const { user, error } = await supabase.auth.signIn({
    email: 'example@email.com',
    password: 'example-password',
  })
}

Dart

Future<void> signInWithEmail() async {
  await supabase.auth.signIn(
    email: 'example@email.com', 
    password: 'example-password'
  );
}

To log out:

JavaScript

async function signOut() {
  const { error } = await supabase.auth.signOut()
}

Dart

Future<void> signOut() async {
   await supabase.auth.signOut();
}

Resources

• Supabase Account - Free Tier OK
• Supabase JS Client
• Supabase Dart Client