Identity Providers

We allow users to authenticate with external provider accounts, such as with their Google account or Apple account.

select one or several providers

Note: We enable providers in the Firebase console.

const gProvider = new GoogleAuthProvider() // Google account provider

authentication flows

Alternative flows:

  • the user authenticates through a popup window.
  • the user authenticates through a redirect.

A flow is initiated through a user action, such as tapping a button. Both flows handle sign-in and sign-up through a single, undiscriminated action. As such, we use generic labels, such as:

  • Continue with Google
  • Authenticate with Google

On success, a flow triggers an authentication event. The flow functions return a credential object (UserCredential), that exposes the user object:

const credential = await signInWithPopup(auth, gProvider)
credential.user // User

Note: We can detect it is a new user through a helper method:

const userInfo = getAdditionalUserInfo(credential)
if (userInfo?.isNewUser) {
}

popup flow specifics

The popup flow may fail if the browser doesn't allow popups.

const credential = await signInWithPopup(auth, gProvider)

redirect flow

The redirect flow relies on navigating to another page and navigating back.

It requires extra work unless the website is hosted on Firebase Hosting.

earlymorning logo

Identity Providers

We allow users to authenticate with external provider accounts, such as with their Google account or Apple account.

select one or several providers

Note: We enable providers in the Firebase console.

const gProvider = new GoogleAuthProvider() // Google account provider

authentication flows

Alternative flows:

  • the user authenticates through a popup window.
  • the user authenticates through a redirect.

A flow is initiated through a user action, such as tapping a button. Both flows handle sign-in and sign-up through a single, undiscriminated action. As such, we use generic labels, such as:

  • Continue with Google
  • Authenticate with Google

On success, a flow triggers an authentication event. The flow functions return a credential object (UserCredential), that exposes the user object:

const credential = await signInWithPopup(auth, gProvider)
credential.user // User

Note: We can detect it is a new user through a helper method:

const userInfo = getAdditionalUserInfo(credential)
if (userInfo?.isNewUser) {
}

popup flow specifics

The popup flow may fail if the browser doesn't allow popups.

const credential = await signInWithPopup(auth, gProvider)

redirect flow

The redirect flow relies on navigating to another page and navigating back.

It requires extra work unless the website is hosted on Firebase Hosting.