Login With Magic Link

By default, if no password is provided, the user will be sent a "magic link" to their email address, which they can click to open your application with a valid session. By default, a given user can only request a Magic Link once every 60 seconds.

Overview

Setting up Magic Link logins for your Supabase application.

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

Add Magic Link into your Supabase Project

• 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 (this is important)
• Under Email Auth turn Enable Email Signup to ON
• Click Save

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',
})

Dart

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

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',
  })
}

Dart

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

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