Firebase Authentication

Add authentication with different providers to your Ionic app

Follow Set up instructions before reading this page

Most apps need to know the identity of a user. Knowing a user's identity allows an app to securely save user data in the cloud and provide the same personalized experience across all of the user's devices.

Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more.

All the logic for the Firebase Authentication can be found in the FirebaseAuthService in src/app/firebase/auth/firebase-auth.service.ts‌

Authentication Providers

To enable authentication with different providers in our firebase app, we need to go to the Authentication section (from the firebase console) as shown in the image and enable the desired providers.

You can use Firebase Authentication to let your users authenticate with Firebase using their email addresses and passwords, and to manage your app's password-based accounts.

Just enable Email/Password option in the Firebase console as shown below:

To integrate Facebook Authentication, we must first create a Facebook application which we will then connect to our ionic app. To create it, we need to go to the Facebook developer console and follow the wizard to create a new app.

Once you had created your Facebook application, you will get an APP ID and a SECRET KEY APP. Add this credentials in your Firebase project under the Facebook Authentication option.

As you can see in the previous screenshot, when you enable Facebook as an authentication provider, a "OAuth redirect URI" will be generated automatically. You need to add this URI in your Facebook application as shown in the following image:

If you plan to build your Ionic app to iOS and/or Android you need to add those platforms to your Facebook App. To do this go to Settings => Basic menu add both iOS and Android platforms.

In iOS platform complete the following details using your own Bundle ID. You can find this ID in ios/App/App/capacitor.config.json

In Android platform complete the following details using your own Google Play Package Name. You can find this ID in android/app/src/main/AndroidManifest.xml under the manifest tag.

Then generate a key hash and add it in the Key Hashes input.

To integrate Twitter Authentication, we need to create a Twitter application which we will then connect to our ionic app.

When registering your Twitter App, make sure your Firebase OAuth redirect URI (e.g. my-app-12345.firebaseapp.com/__/auth/handler) is set as your Authorization callback URL in your app's settings page on your Twitter app's config.

Also, add the following urls:

twitterkit-[YOUR_API_KEY]://
twittersdk://

Rename [YOUR_API_KEY] with your own key.

You need the 3 callback urls.

Add your Twitter App credentials in your Firebase App:

You can let your users authenticate with Firebase using their Google Accounts. Enable Google Sign-In in the Firebase console as shown below:

If you plan to build your apps to Android and iOS make sure to read the following section and add all required configurations.

You can let your users authenticate with Firebase using their Apple Accounts. Enable Apple Sign-In in the Firebase console.

Sign In with Apple can only be configured by members of the Apple Developer Program so you need to purchase a Developer membership.

Once you have your developer membership, you need to configure the Apple Sign In Capability on your project. The easiest way is doing this from Xcode.

Open your iOS project on Xcode
Go to "Signing & Capabilities"
Click "+ Capability"
Add "Sign in with Apple" option

For more details check the Firebase documentation.

For Firebase Capacitor Authentication we use the community plugin capacitor-firebase-auth so we need to follow its configurations also.

Authentication Flows

If you are building an Ionic Angular app, the easiest way to authenticate your users with Firebase is to handle the sign-in flow using AngularFire and the Firebase Authentication web library.

However, if you plan to use Capacitor to build your native iOS and Android apps, we must do some extra work.

Firebase Authentication from Capacitor

Firebase web library needs the app to be served from origins with the file:// or ionic:// scheme. This is required so that Firebase Auth can properly handle signInWithRedirect and signInWithPopup operations. Firebase Auth will treat http://localhost origins as web-based browser apps.

Capacitor apps are hosted on a local HTTP server and are served with the http:// protocol, so there is no match between these protocols. For this reason, we need to use the native SDKs to perform social authentication from our native (iOS and Android) apps.

Luckily, we have this plugin that handles the authentication on Native layer and propagate the token to the web view layer. After the sign-in process completes, the user will be signed in within both tiers.

In Ionic 5 Full Starter App PRO version we integrated Capacitor Firebase Auth plugin.

This plugin has been created by a community member and is not officially done by the Ionic Team. Please acknowledge this when deciding to use it in your app.

Required Configurations

There are some configurations you need to do in order to support firebase authentication from your iOS and Android apps. Everything is explained here, so make sure to follow that guide carefully.

As this template already has all the configuration done from the app side, you will see that much of what is explained in the above guide is already done.

First, make sure you created the social apps as explained in the Authentication Providers section.

Second, you need to create the native projects in your Firebase Console by following these steps:

When creating your Android project (or you can also do it later) you need to specify your app's SHA-1 fingerprint. You can do so from the Settings page of the Firebase console. See Authenticating Your Client for details on how to get your app's SHA-1 fingerprint.

After creating your Android and iOS projects in Firebase you will get a google-services.json file for android and GoogleService-Info.plist for iOS.

Download these files to your computer. For iOS open your ionic project on Xcode and drag the GoogleService-Info.plist file into your Xcode project in App/App like in the following screenshot:

For Android add google-services.json in your android project in android/app like in the image below:

Please read these guides and make sure you did everything mentioned there.

If you face any error when trying this functionality from iOS or Android devices please make sure to look up your error message inside the plugin issues section because much of them are already reported and explained.

Firebase Authentication from Web

You can prompt your users to sign in with their social accounts (twitter, facebook, google) either by opening a pop-up window or by redirecting to the sign-in page. The redirect method is preferred on mobile devices.

On this template we included both options so you can choose which one you prefer.

src/app/firebase/auth/firebase-auth.service.ts

  socialSignIn(provider: auth.AuthProvider): Promise<any> {
    // You can choose to use popup or redirect auth options
    // Popup is recommended for browser and redirect for mobile devices
    
    if (this.platform.is('desktop')) {
      return this.angularFire.auth.signInWithPopup(provider);
    } else {
      return this.angularFire.auth.signInWithRedirect(provider);
    }
  }

When using signInWithPopup option, a new browser window will open like in the following screenshot:

When using signInWithRedirect option, your user will be redirected to the provider's sign in page like in the following screenshot:

All the code needed for Firebase Authentication can be found in the FirebaseAuthService in src/app/firebase/auth/firebase-auth.service.ts

Route Guards and Authentication

Many times we want to do certain things depending if the user is logged in or not. AngularFire library can help us with this!

AngularFireAuthGuard provides a prebuilt canActivate Router Guard using AngularFireAuth.

We use this in our FirebaseProfilePageModule to redirect unauthorized users to sign in page so they can sign in to the app and then access their profile page.

firebase-profile.module.ts

const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['/firebase/auth/sign-in']);

const routes: Routes = [
  {
    path: '',
    component: FirebaseProfilePage,
    canActivate: [AngularFireAuthGuard],
    data: { authGuardPipe: redirectUnauthorizedToLogin },
    resolve: {
      data: FirebaseProfileResolver
    }
  }
];

AngularFireAuthGuard can be customized using a RXJS pipe. Learn more here.

Manage logged in user

Users can create a new account or sign in to the app by calling the signUpWithEmail method from the src/app/firebase/auth/firebase-auth.service.ts or by signing in using a federated identity provider, such as Google Facebook or Twitter.

Authentication State Persistence

You can specify how the Authentication state persists when using the Firebase JS SDK. This includes the ability to specify whether a signed in user should be indefinitely persisted until explicit sign out, cleared when the window is closed or cleared on page reload.

For a web application, the default behavior is to persist a user's session even after the user closes the browser. This is convenient as the user is not required to continuously sign-in every time the web page is visited on the same device. This could require the user having to re-enter their password, which could add a lot of friction to the user experience.

However, there are cases where this behavior may not be ideal for example in applications with sensitive data. You can learn more about this here.

In this template, we use the session persistence. This means that once the user signed in to the app, we redirect them to the profile page until there is an explicit sign out action. Please see the following video to understand what I mean.

Get currently signed-in user Information

The recommended way (from the Firebase documentation) to get the current user is by setting an observer on the Auth object.

firebase-auth.service.ts

constructor(
    public angularFire: AngularFireAuth,
    ...
  ) {
    this.angularFire.onAuthStateChanged((user) => {
    if (user) {
      // User is signed in.
      this.currentUser = user;
    } else {
      // No user is signed in.
      this.currentUser = null;
    }
  });
}