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.

Login with Password

Server Action

Usage

On this page