Skip to content

useSignIn Hook

useSignIn hook is used to sign in a user. A very simple example would be:

const { dispatch } = useSignIn(auth);
await dispatch({
  type: "classic",
  email,
  password,
});

Warning

useSignIn is lazy by default and will not do anything until you use dispatch function.

You can also get the state1 of sign-in process.

const { state, dispatch } = useSignIn(auth);
await dispatch({
  type: "classic",
  email,
  password,
});
// `state` is "ready" | "loading" | "authenticated" | "awaiting"

Warning

useSignIn automatically listens to authentication state and will be "authenticated" if the user is authenticated. In "authenticated" state, dispatch will simply do nothing even if it is invoked.

dispatch function will return an instance of UserCredential | undefined.

const { state, dispatch } = useSignIn(auth);
const credential = await dispatch({
  type: "classic",
  email,
  password,
});
// do something with `credential`

Input Parameters

Input parameters for useSignIn hook is as follows:

Name Type Description Required Default Value
auth firebase/auth/Auth Reference to the Firebase Auth service instance. ✅ -

Return Type

useSignIn hook returns an object with properties as below:

Name Type Description
state "ready" | "loading" | "authenticated"1 The state of sign-up process.
dispatch UseSignInDispatcher A callback to start sign-up process.

Sign In Methods

There are many sign-in methods available. The available ones are:

Method type provider
Email and password classic ❌
Email link link ❌
Google google GoogleAuthProvider
Facebook facebook FacebookAuthProvider
Apple apple OAuthProvider
Microsoft microsoft OAuthProvider
Yahoo yahoo OAuthProvider
Twitter twitter TwitterAuthProvider
Github github GithubAuthProvider

dispatch function will require an object as parameter. This object will always have property of type: string. type will correspond to what kind of method you will prefer while signing in a visitor.

Classic (Email and Password) Sign In Method

If type is "classic" (email-password authentication), it's pretty simple:

const credential = await dispatch({
  type: "classic",
  email,
  password,
});

If no verification email was sent and the user is not verified, your credential!.user.emailVerified will return false. After you sign in, you can use useSendEmailVerification hook to send an email verification to the user.

If type is "link", the example would be:

await dispatch({
  type: "link",
  email,
  actionCodeSettings,
});

You will need actionCodeSettings. You can see this section in Firebase Auth documentation to see it.

"link" is the only type that will return undefined credential as the user has to click the link in the email to get authenticated. Also, it is the only method to change the state to "awaiting".

Other Methods

If type is something else, you need to provide an implementation of AuthProvider. An example for Google sign-in looks as such:

const { state, dispatch } = useSignIn(auth);
const provider = new GoogleAuthProvider();
await dispatch({
  type: "google",
  provider,
});
// state is "loading" until user successfully signs in, then "authenticated"

Warning

You might need to take extra steps to use 3rd-party authentication systems, e.g. for Apple, you need to comply with their anonymized data requirements. Although authentication via Google is mostly okay and require less hassle (as Firebase is a product of Google), you might want to check individual documents of each 3rd-party provider here. Choose the provider of your choice from the left menu.

  1. You can consider "authenticated" state as logically unauthorized. Your website visitors are not authorized to sign in again if they are already authenticated (signed-in). ↩↩