Vue Firebase UI: Create Login Page [Facebook/Google Auth]
Tags: firebase, vue, programming
Published: 2021-06-07 14:35:02

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!

![alt text](https://softauthor.com/wp-content/uploads/2019/09/vuejs-authentication-firebase-final.png)

Let’s get started!

- [Setting Up VueJs Starter Project](https://softauthor.com/firebaseui-vue-facebook-google-auth/#setting-up-starter-vuejs-project)
- [Add Firebase To The Vue.js app](https://softauthor.com/firebaseui-vue-facebook-google-auth/#add-firebase-to-the-web-app)
- [Sign in with Facebook](https://softauthor.com/firebaseui-vue-facebook-google-auth/#sign-in-with-facebook-using-firebaseui)
- [Login with Google](https://softauthor.com/firebaseui-vue-facebook-google-auth/#sign-in-with-google-using-firebaseui)
- [Login with Email and Password](https://softauthor.com/firebaseui-vue-facebook-google-auth/#login-with-email-and-password-using-firebaseui)
- [Protect Vue Routes/Navigation Items Upon Authentication](https://softauthor.com/firebaseui-vue-facebook-google-auth/#protect-vue-routes-upon-authentication)

###Setting up Starter VueJs Project

{% youtube 3A57dcz8A8E %}

I have already created a sample [vue starter project](https://github.com/softauthor/firebaseui-oauth-for-vuejs/tree/master/start) and downloaded it so that you can follow along if you want. I am also assuming that you have [node](https://nodejs.org/en/) 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

{% youtube NpDlC2-Zo0U %}

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

```JavaScript
npm install firebase --save
```

Then, go to [Firebase](http://firebase.google.com) 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.

```JavaScript
import firebase from 'firebase'
```

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

```JavaScript
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.

```JavaScript
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.

```JavaScript
npm install firebaseui --save
```

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

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

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

```HTML
<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.

```JavaScript
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.

![alt text](https://softauthor.com/wp-content/uploads/2019/09/vuejs-facebook-login-button.png)

>*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](https://firebase.google.com/docs/auth/web/firebaseui#sign_in).*

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.

```JavaScript
"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...](https://softauthor.com/firebaseui-vue-facebook-google-auth/#protect-vue-routes-upon-authentication)