Vue Firebase UI: Create Login Page [Facebook/Google Auth]

In this Firebase + Vue tutorial, you are going to learn the QUICKEST way to implement a login system to your vue app using FirebaseUI including OAuth providers Facebook Sign-in, Google Sign-in and Email/Password Sign-in without writing any UI related code what so ever.

If you look at most of the web / mobile login screens, you will see the three most common sign-in methods such as Email and Password, Facebook and Google.

That’s what is exactly covered in this article!

Let’s get started!

• Setting Up VueJs Starter Project
• Add Firebase To The Vue.js app
• Sign in with Facebook
• Login with Google
• Login with Email and Password
• Protect Vue Routes/Navigation Items Upon Authentication

Setting up Starter VueJs Project

I have already created a sample vue starter project and downloaded it so that you can follow along if you want. I am also assuming that you have node installed on your computer.

Once it’s downloaded, open up the terminal/command prompt and cd to the starter project folder and issue npm install command which will install dependencies for the project.

After that, run the application using npm run dev command.

Then, go to the localhost and you can see the app is running similar to the screenshot below.

As you can see this sample app has three navigation items: home (/), profile (/profile) and login (/login).

Pretty straight forward!

Add Firebase to the Web App

The FIRST step is you need to install firebase package to the project.

npm install firebase --save

Then, go to Firebase and create a project if you have not already done so.

After that…

Go ahead and obtain the configuration code from the Firebase dashboard → Project Overview (at the top left) → click the gear ⚙ icon → click Project Settings.

Then, scroll to the bottom → under the Firebase SDK snippet section → choose Config option and copy the code.

If you haven’t seen the configuration page, you need to register the app by clicking </> web icon which will open up the window. Follow the instructions to complete the registration process.

Once you have registered, then you can come back to the above location and obtain the firebase configuration code.

Next, I am going to initialize Firebase.

To do that, go to main.js file and import firebase at the top.

import firebase from 'firebase'

After that, paste the configuration code that you copied earlier.

const firebaseConfig = {
  apiKey: "*****",
  authDomain: "firebaseUIAuth-*****.firebaseapp.com",
  databaseURL: "https://****-709a3.firebaseio.com",
  projectId: "firebaseUIAuth-709a3",
  storageBucket: "",
  messagingSenderId: "2547636***397",
  appId: "1:254763***397:web:***c15c671b5c"
};

Make sure to obtain the config code from your firebase project as the above code will not work for your project.

Finally, initialize firebase.

firebase.initializeApp(firebaseConfig);

If you run the app at this point, everything should work as it did previously.

Sign in with Facebook Using FirebaseUI

For the FIRST step, you need to install firebaseui packages to the project.

npm install firebaseui --save

The NEXT step would be to import firebase, firebaseui and firebaseui.css packages to the Login.vue component.

import firebase from "firebase";
import firebaseui from "firebaseui";
import "firebaseui/dist/firebaseui.css";

Then, create an element with an ID inside which is the container element where the Sign-in with Facebook button will appear.

<section id="firebaseui-auth-container"></section>

After that, Instantiate firebaseui object by passing firebase.auth() and store it in a variable called ui inside the mounted() function like the code below.

As you can see in the below code, I have defined a Javascript object called uiConfig which will have two properties.

mounted() {
        var ui = new firebaseui.auth.AuthUI(firebase.auth());
        var uiConfig = {
            signInSuccessUrl: "/profile",
            signInOptions: [firebase.auth.FacebookAuthProvider.PROVIDER_ID]
        };
        ui.start("#firebaseui-auth-container", uiConfig);
    }

The first one is the signInSuccessUrl and set its value of a /profile route. This property will take it to the profile page upon successful login.

The second property is signInOption which is an array in which I have a Facebook button in there for now. This is the place where you will be adding more buttons later.

Finally, invoke the start() method on the ui object and pass #firebaseui-auth-container as a first argument and uiConfig as a second.

Now, you can see the Sign-in with Facebook button on the login page.

You can configure with more options than given inside uiConfig object. For example, if you want the sign in flow to be a popup window you can set signInFlow: “popup”. Find out more here.

Nice!

But there is a problem…

If I switch to the home or profile page and come back to the login page, I do not see the Sign-in with Facebook button and also will get an error on the browser console.

"Error: An AuthUI instance already exists for the key

This is because I am running a single page vue application, so it’s trying to instantiate firebase Auth UI object every single time when I go to /login route.

To fix that, I can easily check to see if firebaseui object is instantiated or not before creating a new instance.

Continue Reading...