Intro to Use the Firebase emulator to create safe test environments for Angular

Overview of the demo application and tools we'll use

Initialize Firebase emulators in your app

Setup the Firebase authentication emulator

Initialize the Firestore emulator

Overview of the different Firebase cloud functions

When to use the onCall or onRequest Firebase Cloud functions

Get started with Firebase HTTP Cloud Functions

Create and use callable functions with the Firebase function emulator

Watch for changes and trigger functions with the Firestore emulator

Disable Firebase emulators when in production

Import seed data for your Firebase emulators

Local App Development with the Firebase Emulator Suite

In this lesson you'll learn how to use the `connectAuthEmulator` function from Firebase's authentication emulator and the Firebase Emulator Suite to test out auth in development.

https://app.egghead.io/api/v1/lessons/firebase-setup-the-firebase-authentication-emulator/subtitles



Jorge Vergara: We're going to initialize the Firebase Authentication emulator. For that, we're going to go wherever we initialized Firebase in our application. Since I'm running this demo on Angular, it means that I need to go to the app.module.ts file. In here, we're look for the line where we're importing from the Firebase Authentication package. We'll add the function, connectAuthEmulator.

Next, we'll go to auth initialization, and we'll add the connect function here. This function takes two parameters. First, it takes the authentication instance. We can get it here with the getAuth method. Then it takes the URL it's going to connect. In our case, it's going to be localhost, followed by the port.

If you don't remember what port does the authentication emulator use, we're going to go into the firebase.json file. In here, you can see that the emulator is using port 9099 for authentication. We can go back to the initialization and add that port here.

As you can see, I have a little typo here, it's HTTP. Then I save again. You can see now, Firebase is letting us know that we are running in emulator mode. This is a nice way to know that we are not using the production environment.

To test this, we are going to go into our CLI and we are going to run the command, firebase emulators start. Once the emulators are running, we are going to check in the console, what's the URL that we are using for the emulator's UI. We're going to copy that URL, and we're going to navigate to that.

Now, we can go to the authentication emulator. We can see that we don't have anything here at the moment. We can go back to our application. We click on Create a New Account. I want to create a new account with the credentials, jorge/jorgevergara.co, and some random password. When I click Create Account, they are moved.

You're going to be able to see that, if I go back to the emulator suite and I refresh here, now I have the new user that I just created. Now, if we log our user out, we can see that we can log in with the same user and same credentials. Here, we have jorge@jorgevergara.co. When I add that same user here, I click Sign in, and it logged into our application.

All of this is talking to the Local Emulator Suite, so none of this is talking to our deployed Firebase application.

Setup the Firebase authentication emulator

Share this video with your friends

Course

Local App Development with the Firebase Emulator Suite