### Setup the Firebase Project

If you are new to [Firebase](https://firebase.google.com) then you'll need to sign up (it's free!), otherwise head over to the [Firebase Console](https://console.firebase.google.com) and hit the Add project button.

Give your project a name in step 1, if you want analytics, leave it enabled in step 2 and hit create.

Once it has finished spinning up, hit the iOS button to add an iOS app to the project. Apple sign-in is only really useful for users with Apple devices, so iOS only.

You will need to provide a bundle ID but everything else can be ignored for now.

### Create an Ionic Capacitor app

Over in a terminal, create a new ionic app using the blank template and any framework you prefer from the options.

`ionic start appleSignInDemo blank`

Once that is finished, we need to add Capacitor to the app:

`npm i @capacitor/core`

`npm i -D @capacitor/cli`

`npx cap init`

The command will prompt some questions about the naming of your app. Make sure it matches the bundle you specified in the Firebase console.

### Add iOS and Sign-in with Apple Capacitor Plugin

After the ionic CLI has finished creating the app we need to add the iOS platform and the Apple Sign-in plugin:

`npm i @capacitor/ios`

`npx cap add ios`

The [Apple Sign-in plugin](https://github.com/capacitor-community/apple-sign-in) is part of the [Capacitor Community](https://github.com/capacitor-community) Github repo and was originally written by Max Lynch (the CEO of Ionic itself).

The installation is pretty straightforward:

`npm i @capacitor-community/apple-sign-in`

### Configure Firebase in Ionic

In your ionic you will need to add the Firebase npm package:

`npm i firebase`

Then, in your app.module.ts (if you've created an Angular based Ionic project) you'll need to add to the general imports:

`import firebase from "firebase/app";`

and then above the NgModule declaration:

`firebase.initializeApp(environment.firebaseConfig);`

Now we need to add the Firebase details into the environment.ts file:

```
export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: "YOU-API-KEY",
    authDomain: "YOUR-APP-DOMAIN.firebaseapp.com",
    databaseURL: "https://YOUR-APP-DOMAIN.firebaseio.com",
    projectId: "PROJECT-NAME",
    storageBucket: "PROJECT-NAME.appspot.com",
    messagingSenderId: "SENDER-ID-NUMBER",
    appId: "APP-ID-NUMBER",
    measurementId: "MEASUREMENT-ID"
  }
}
```

These values come from the Firebase Project settings.

### Configure Apple Sign-in for Ionic

Using the CLI, create a login page:

ionic generate page login

Then, in the html, add the Apple Sign-in button. You will need to style this button in-line with Apple's style guide to ensure compliance.

```html
<ion-content>
  <ion-button expand="block" color="dark" class="ion-margin-bottom" *ngIf="iosVersion >= 13"
    (click)="signIn('apple')">
    <ion-icon name="logo-apple"></ion-icon> &nbsp; Sign in with Apple
  </ion-button>
 </ion-content>
```

Sign in with Apple is not supported on anything earlier than iOS 13, so we are hiding the button if the user is on an older version.

Then, in the login.component.ts we need to implement the sign-in logic (this is a Capacitor V2 example for the import of the plugins):

```typescript
import firebase from "firebase/app";
import "firebase/auth";
import { Plugins } from "@capacitor/core";
const { SignInWithApple } = Plugins;

async signIn(provider: string): Promise<void> {
  const { response } = await SignInWithApple.Authorize();
  let provider = new firebase.auth.OAuthProvider("apple.com");
  provider.addScope("email");
  provider.addScope("name");
  credential = provider.credential({
    idToken: response.identityToken,
  });
  // Redirect preferred for mobile according to above
  result = await firebase.auth().signInWithCredential(credential);
}
```

The result object (if logged in with the correct username/password combination will be the Firebase authentication result containing the user information needed to continue personalising the app and to make any subsequent authenticated Firebase API calls.

Authentication is vital for any app with user accounts. Apple requires that their authentication provider is available on all apps submitted to the iOS app store.

Adding Sign-in with Apple to Ionic Capacitor Apps with Firebase

![Firebase-Logo](/assets/firebase-1024x293.jpg "Firebase Logo")

[Firebase](https://firebase.google.com/) provides a wide variety of modules that are highly useful for mobile & web apps, particularly Authentication, Firestore DocumentDB, Storage, Analytics, and App Performance Monitoring.

Here, we will integrate Firebase with an Ionic Capacitor app built with Angular.

There are a couple of [Capacitor Community plugins](https://github.com/capacitor-community) available that provide a native wrapper around the Firebase libraries, but I have found that they are unnecessary as the web Firebase set up does all of the same and more just as quickly.

Let's start by spinning up a new Ionic app. Open a new command prompt and run the following:

![New app](https://cdn.hashnode.com/res/hashnode/image/upload/v1607766648768/EaJuxY8mD.png?auto=compress,format&format=webp "Create New App")

This creates a new ionic app called firebase-ionic-app that is preconfigured using a blank Ionic template, Angular as the underlying framework and automatically adds the Capacitor requirements so we do not need to do this manually later.

Once that has finished setting up and installing all the required packages let's also install firebase by cd-ing into the newly created directory (firebase-ionic-app in this case) and running npm i firebase.

Now we can open the directory in your IDE of choice. You'll also need to have [set up a web project in Firebase](https://firebase.google.com/docs/web/setup) to connect to (At this stage there is no need to set up Android or iOS projects).

Starting in the environment.ts file in src/environments/environment.ts, let's add a firebaseConfig property to the environment object:

```javascript
export const environment = {
  production: false,
  firebaseConfig: {
    apiKey:
    authDomain:
    databaseURL:
    projectId:
    storageBucket:
    messagingSenderId:
    appId:
    measurementId: 
  }
};
```

All these values can be retrieved from the Firebase project created previously. Next, we're going to move on to the src/app/app.module.ts file and initially, we're going to add three lines of code right above the @NgModule declaration:

```javascript
import { environment } from "../environments/environment";
import firebase from "firebase/app";

firebase.initializeApp(environment.firebaseConfig);
```

* make sure the firebase import is from "firebase/app" and not just "firebase" as this will cause errors.

What this does is bring in the firebaseConfig object we just created in the environment file, imports the firebase npm module and initialises our firebase app using those details.

Many examples have this setup running in the src/app/app.component.ts file, but this can result in multiple attempts to initialise the firebase app when it has already been initialised which, in turn, leads to a number of follow-on issues.

The app.module.ts file is where we also import other Firebase modules into our app, *say*, [analytics](https://firebase.google.com/docs/analytics) and [performance monitoring](https://firebase.google.com/docs/perf-mon) so our app.module.ts might end up like this:

```javascript
import { environment } from "../environments/environment";
import firebase from "firebase/app";
import "firebase/analytics";
import "firebase/performance";
firebase.initializeApp(environment.firebaseConfig);
firebase.analytics();
const perf = firebase.performance();
```

At this point, we can run "ionic serve" in our command prompt to start the Ionic app in our browser. If the firebaseConfig object is set up with the correct variable values, your app should run with no errors in the browser or the browser developer console.

From here, any component class that needs to use any of the Firebase functionality can just import the main Firebase package and any additional modules.

For example, to use the authentication module in a component:

```javascript
import firebase from "firebase/app";
import "firebase/auth";
```

From here, we can now flesh out all the Firebase functionality we need in our Ionic app until we're ready to add the Android and iOS platforms.

A quick how-to guide for adding Firebase into an Ionic application using Angular

Adding Sign-in with Apple to Ionic Capacitor Apps with Firebase

Integrating Firebase with Ionic + Angular