Login with Password

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

Here's the server action used for password-based signup. Login is similar, but uses a different schema and action.

We use next-safe-action to ensure type safety and error handling for our server actions. Next safe action errors are also passed along to react hook form with field level errors to correctly display errors in the UI.

'use server';
import { createSupabaseUserServerActionClient } from '@/supabase-clients/user/createSupabaseUserServerActionClient';
// ...other imports
/**
 * Signs up a new user with email and password.
 * @param {Object} params - The parameters for sign up.
 * @param {string} params.email - The user's email address.
 * @param {string} params.password - The user's password (minimum 8 characters).
 * @returns {Promise<Object>} The data returned from the sign-up process.
 * @throws {Error} If there's an error during sign up.
 */
export const signUpWithPasswordAction = actionClient
  .schema(signUpWithPasswordSchema)
  .action(async ({ parsedInput: { email, password, next } }) => {
    const supabase = createSupabaseUserServerActionClient();
    const emailRedirectTo = new URL(toSiteURL('/auth/callback'));
    if (next) {
      emailRedirectTo.searchParams.set('next', next);
    }
    const { data, error } = await supabase.auth.signUp({
      email,
      password,
      options: {
        emailRedirectTo: emailRedirectTo.toString(),
      },
    });
 
    if (error) {
      const errorDetails = handleSupabaseAuthPasswordSignUpErrors(error);
      if (errorDetails.field) {
        returnValidationErrors(signUpWithPasswordSchema, {
          [email]: {
            _errors: [errorDetails.message],
          },
        });
      } else {
        returnValidationErrors(signUpWithPasswordSchema, {
          _errors: [errorDetails.message],
        });
      }
    }
 
    return data;
  });

Usage

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

const signUpWithPasswordMutation = useAction(signUpWithPasswordAction, {
  onExecute: () => {},
  onSuccess: () => {},
  onError: ({ error }) => {}
);
 
// In your component JSX
<EmailAndPassword
  isLoading={signUpWithPasswordMutation.execute}
  onSubmit={(data) => {
    passwordMutation.mutate(data);
  }}
  view="sign-in"
/>;

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

Usage

On this page