Authenticate with Firebase using social media and GitHub

There are various ways we can let a user authenticate with Firebase. We'll look at some of the most popular methods.

Authenticate using Facebook

We can integrate the Facebook login in our applications to let the users authenticate using Facebook. Follow the steps given below:

Note: Make sure you have added Firebase to the project.

• Step 1: We redirect to the Facebook for Developers page and click the "Log In" button.

• Step 2: We click on "Log in" and enter our credentials if we already have an account.

• Step 3: We click the "Create New Account" button and create a Facebook developer account if we don't have a developer account.

• Step 4: We'll be taken to the Apps page, where we click the "Create App" button.

• Step 5: We'll be taken to the "Select an app type" page, where we must select the appropriate option that most suits our application's usage; in our case, we're selecting "None." After this, click on "Next."

• Step 6: We give an app name to your application, write an "App contact email," and click on the "Create app" button.

• Step 7: We will see a pop-up on the screen asking us to enter the password to a Facebook account. Please enter the password and click on "Submit."

• Step 8: We click on the "Set up" button on the "Facebook Login" section of the page.

• Step 9: We click on the "Web" icon for our use case.

• Step 10: We write a "Site URL," in our case, educative.io, and click on "Save." After that, click on the continue buttons for every section until we reach the end.

• Step 11: We click "Settings," and a drop-down will appear. Click on "Basic" from that drop-down.

• Step 12: We will be taken to a new page containing our application's "App ID" and "App secret." Save this for later.

Now that we have successfully created our App ID and App secret. We can start enabling Facebook login on our firebase console. First, we will log in to the firebase console and open the project we have created. And then, we'll follow the steps shown in the slides below:

• Step 1: We will click the "Authentication" tab.

• Step 2: We will click on the "Sign-in" tab, and under this tab, select "Facebook."

• Step 3: We will be redirected to the "Sign-in providers" page, where we will click the "enable" button. After this, we will enter the "App ID" and "App secret," which we have created in the above steps on Facebook for developers. Next, we will click on "Save."

• Step 4: We will be shown a success message.

• Step 5: We will click the "Settings" tab and copy the "OAuth redirect URI."

Authenticate using Google

Now, we will learn to use Google to authenticate with Firebase. Follow the steps given below:

Note: Make sure you have added Firebase to the project.

• Step 1: We click on the project we have created in the Firebase console.

• Step 2: We click on the "Authentication" tab.

• Step 3: We click on the "Sign-in method."

• Step 4: We click on the "Add new provider" button.

• Step 5: We click on "Google" under the "Additional providers" heading.

• Step 6: We will click the "enable" button.

• Step 7: We will now enter a "Project support email" for our project and click on "Save."

• Step 8: We have successfully added Google as a provider for our project.

Authenticate using Github

Now, we will learn to use Google to authenticate with GitHub. Follow the steps given below:

Note: Make sure you have added Firebase to the project.

• Step 1: We click on the project we have created in the Firebase console.

• Step 2: We click on the "Authentication" tab.

• Step 3: We click on the "Sign-in method."

• Step 4: We click on the "Add new provider" button.

• Step 5: We click on "Github" under the "Additional providers" heading.

• Step 6: We will click the "enable" button.

• Step 7: We now redirect to Github.

• Step 8: We log in to our GitHub accounts and go to "Setting."

• Step 9: We click on "Developer settings."

• Step 10: We click on the "Personal access tokens" drop-down.

• Step 11: We click on the "Tokens (classic)" button.

• Step 12: We click on the "Generate new token" drop-down.

• Step 13: Click on the "Generate new token (classic)" button from the drop-down.

• Step 14: We write a name for our token under the "Note" heading and select the preferred scopes from the list.

• Step 15: We click the "Generate token" button to generate our personal access token.

• Step 16: We will now enter our newly generated Github "Client ID" and "Client secret" in the Firebase console.

• Step 17: We click on "Save."

• Step 18: We have successfully added GitHub as a provider for our project.