Login with Password

Nextbase supports traditional email and password authentication, providing a familiar login experience for users.

Server Action

Here's the server action used for password-based login:

"use server";
import { createSupabaseUserServerActionClient } from "@/supabase-clients/user/createSupabaseUserServerActionClient";

export const signInWithPassword = async (email: string, password: string) => {
  const supabase = createSupabaseUserServerActionClient();
  const { error } = await supabase.auth.signInWithPassword({
    email,
    password,
  });

  if (error) {
    throw error;
  }
};

Usage

Here's an example of how to use password-based authentication in your login component:

const passwordMutation = useToastMutation(
  async ({ email, password }: { email: string; password: string }) => {
    return await signInWithPassword(email, password);
  },
  {
    onSuccess: redirectToDashboard,
    loadingMessage: "Logging in...",
    errorMessage: "Failed to login",
    successMessage: "Logged in!",
  },
);

// In your component JSX
<EmailAndPassword
  isLoading={passwordMutation.isLoading}
  onSubmit={(data) => {
    passwordMutation.mutate(data);
  }}
  view="sign-in"
/>;

This implementation allows users to log in using their email and password credentials.

Server Action

Usage

On this page