useAuth

new

All-in-one auth hook with ready-to-use sign-in and sign-out actions.

Usage

useAuth combines user state with auth actions in one hook. It eliminates the boilerplate of managing auth state and calling individual auth methods.

useAuth

import { useAuth } from 'refirebase/react';

function AuthButton() {
  const {
    user,
    loading,
    error,
    signInWithGoogle,
    signInWithEmail,
    signUpWithEmail,
    resetPassword,
    signOut,
  } = useAuth();

  if (loading) return <p>Loading...</p>;

  if (!user) {
    return (
      <button onClick={signInWithGoogle}>Sign in with Google</button>
    );
  }

  return (
    <div>
      <p>Hello, {user.displayName}!</p>
      <button onClick={signOut}>Sign out</button>
    </div>
  );
}

Email sign up

signUpWithEmail

const { signUpWithEmail, error } = useAuth();

await signUpWithEmail('alice@example.com', 'password', {
  displayName: 'Alice',
});

if (error) {
  setFieldError(error.message); // user-friendly message
}

Return value

Param	Type	Description
`user`	`User \| null`	Current Firebase user, or null if not signed in.
`loading`	`boolean`	True while auth state is being resolved on first render.
`error`	`RefirebaseError \| null`	Last auth error, if any.
`isAuthenticated`	`boolean`	Shorthand for !!user.
`signInWithGoogle`	`(options?) => Promise`	Sign in with Google popup.
`signInWithGithub`	`(options?) => Promise`	Sign in with GitHub popup.
`signInWithFacebook`	`(options?) => Promise`	Sign in with Facebook popup.
`signInWithEmail`	`(email, password) => Promise`	Sign in with email and password.
`signUpWithEmail`	`(email, password, options?) => Promise`	Create a new account.
`resetPassword`	`(email) => Promise`	Send a password reset email.
`signOut`	`() => Promise`	Sign out the current user.

← PrevioususeRefirebase Next →useUser